从输入URL 到网页显示的完整过程

• 网络请求

  • DNS查询（得到IP)，建立TCP连接（三次握手）
  • 浏览器发送HTTP请求
  • 收到请求响应，得到HTML源码。继续请求静态资源
    • 在解析HTML过程中，遇到静态资源（JS、CSS、图片等）还会继续发起网络请求
    • 静态资源可能有缓存

• 解析：字符串 => 结构化数据

  • HTML构建DOM树
  • CSS构建CSSOM树（style tree）
  • 两者结合，形成render tree
  • 优化解析
    • CSS放在<head/>中，不要异步加载CSS
    • JS放到<body/>下面，不阻塞HTML解析（或结合defer、async）
    • <img />提前定义width、height，避免页面重新渲染

• 渲染：Render Tree 绘制到页面

  • 计算DOM的尺寸、定位，最后绘制到页面
  • 遇到JS会执行，阻塞HTML解析。如果设置了defer，则并行下载JS，等待HTML解析完，在执行JS；如果设置了async，则并行下载JS，下载完立即执行，在继续解析HTML（JS是单线程的，JS执行和DOM渲染互斥，等JS执行完，在解析渲染DOM）
  • 异步CSS、异步图片，可能会触发重新渲染

网页重绘repaint和重排reflow有什么区别

• 重绘
  • 元素外观改变：如颜色、背景色
  • 但元素的尺寸、定位不变，不会影响其他元素的位置
• 重排
  • 重新计算尺寸和布局，可能会影响其他元素的位置
  • 如元素高度的增加，可能会使相邻的元素位置改变
  • 重排必定触发重绘，重绘不一定触发重排。重绘的开销较小，重排的代价较高。
  • 减少重排的方法
    • 使用BFC特性，不影响其他元素位置
    • 频繁触发（resize、scroll）使用节流和防抖
    • 使用createDocumentFragment批量操作DOM
    • 编码上，避免连续多次修改，可通过合并修改，一次触发
    • 对于大量不同的 dom 修改，可以先将其脱离文档流，比如使用绝对定位，或者 display:none，在文档流外修改完成后再放回文档里中
    • 动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用 requestAnimationFrame
    • css3 硬件加速，transform、opacity、filters，开启后，会新建渲染层