运行环境

运行环境即浏览器（server端有nodejs）

页面加载过程 从输入URL到渲染出页面的过程

加载资源的形式

html,js,css,媒体文件,如图片、视频等

加载资源的过程

• DNS解析:域名->IP地址
• 浏览器根据IP地址向服务器发送http请求
• 服务器处理http请求，并返回给浏览器

渲染页面的过程

1. 根据HTML代码生成DOM Tree
2. 根据CSS代码生成CSSOM
3. 将DOM Tree和CSSOM整合成Render Tree
4. 根据Render Tree渲染页面
5. 遇到<script>则暂停渲染，优先加载并执行js代码，js完成后再渲染
6. 直到把Render Tree渲染完成

window.onload和DOMContentLoaded

document.addEventListener('onload',function(){
     //页面的全部资源加载完才会执行，包括图片、视频等
     });


document.addEventListener('DOMContentLoaded',function(){
     //DOM渲染完即可执行，此时图片、视频等可能还没加载完
     });

性能优化

性能优化原则

多使用内存、缓存或者其他方法
减少cpu计算量，减少网络加载耗时
空间换时间（适用于所有编程的优化）

从何入手

1. 让加载更快

• 减少资源体积:压缩代码 eg:生产者环境,图片视频压缩
• 减少访问次数:合并代码,SSR服务器渲染,缓存 eg:雪碧图精灵图合并一张图
• 使用更快的网络:CDN

2. 让渲染更快

• CSS放在head,JS放在body最下面
• 尽早开始执行JS，用DOMContentLoaded触发
• 懒加载（图片懒加载，上滑加载更多）
• 对DOM查询进行缓存
• 频繁DOM操作，合并到一起插入DOM结构
• 节流（throttle）和防抖（debounce）

示例

缓存

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

CDN访问静态文件

SSR （早期的JSP ASP PHP,现在的 VueReact SSR）

• 服务器端渲染:将网页和数据一起加载，一起渲染
• 非SSR（前后端分离）:先加载网页，再加载数据，再渲染数据

缓存DOM查询

    for (let index = 0; index < document.getElementsByTagName('p').
    length; index++) {
      //每次循环都要计算length，频繁进行DOM查询
      
    }
    
    ------------------------------------------
    缓存DOM查询
    const plist= document.getElementsByTagName('p')
    const length =document.getElementsByTagName('p').length
    for (let index = 0; index < length; index++) {
      //缓存length，只进行一次DOM查询
      
    }

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

    const div1= document.getElementById('div1')
    const frag =document.createDocumentFragment()
    for (let index = 0; index < 10; index++) {
      const li =document.createElement('li')
      li.innerHTML="li"+i
      frag.appendChild(li)
    }
    div1.appendChild(frag)