JS运行环境(更新中)

网页渲染

加载过程

从用户输入URl按下回车一直到用户能看到界面期间经历了什么

1.DNS解析缓存将域名解析为IP

2.进行TCP协议连接三次握手

浏览器根据IP地址发送请求得到响应

渲染过程

浏览器开始解析html

      --预解析将所有外部的资源发请求出去

      --解析html生成DOM树img不阻塞DOM

      --解析CSS生成CSSOM树css放head先css后html否则放body最后先css+html后css渲染重复

     --合并成一个render树

     --遇到script标签暂停渲染优先加载并执行js代码完成后继续放body最后

     --最终展示界面

断开TCP连接四次挥手确保数据的完整性

const img1 = document.getElementById('img1')
img1.onload = function () {
    console.log('img loaded')//2
}

window.addEventListener('load', function () {
    console.log('window loaded')//3资源全部加载完才执行包括图片
})

document.addEventListener('DOMContentLoaded', function () {
    console.log('dom content loaded')//1DOM渲染完即可执行图片视频可能未下载
})

性能优化

加载更快 

减少资源体积压缩代码

减少访问次数

        -合并代码script文件合并

        -SSR服务端渲染将网页和数据一起加载一起渲染非SSR是先加载网页再加载并渲染数据

        -缓存如内容缓存。静态资源加hash后缀根据文件内容计算hash文件内容不变则hash不变则url不变url和文件不变则会自动触发http缓存机制返回304

        -更快的网络CDN根据地狱返回

渲染更快

CSS放headjs放body最下面

懒加载给一张默认图片上滑加载更多

缓存DOM查询

多个DOM操作一起插入DOM结构

今早开始JS执行用DOMContentLoaded触发

节流防抖

 

防抖用户输入结束时才触发change事件

节流拖拽获取元素位置每隔100ms触发一次

// 防抖
function debounce(fn, delay = 500) {
    // timer 是闭包中的
    let timer = null

    return function () {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments)
            timer = null
        }, delay)
    }
}

input1.addEventListener('keyup', debounce(function (e) {
    console.log(e.target)
    console.log(input1.value)
}, 600))


// 节流
function throttle(fn, delay = 100) {
    let timer = null

    return function () {
        if (timer) {
            return
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments)//argument是为了传e,因为外面包裹了一层函数
            timer = null
        }, delay)
    }
}

div1.addEventListener('drag', throttle(function (e) {
    console.log(e.offsetX, e.offsetY)
}))