优化首屏渲染

发表于 更新于 分类于

属于 WEB 性能范畴

浏览器有内进程和网络进程

浏览器的解析渲染原理

  1. 构建 DOM 对象模型：字节 -> 字符 -> 令牌（ Tokens 6种类型 ）-> 生成DOM 树
    • 浏览器会把未闭合标签自动闭合，但有风险，一定注意
    • 模板套用数据记得转义，以免解析不一致
  2. 构建 CSSOM 模型
  3. 构建 Render 树
    • 剪除不可见节点（ 隐藏节点和样式不可见节点 ）
  4. Layout 布局/定位
    • 移动端针对 viewport（视口）属性
    • PC 端针对浏览器可见区域
  5. Paint 绘制
    • background color
    • …

外联和内联 CSS、JS 解析顺序

  • tokens 解析过程中 <script> 中直接脚本（不可以渲染，会等待执行完毕）和外链脚本（可以渲染，但会等待执行完毕）都会阻塞 DOM 、CSSOM 树的构建但不会阻塞网络资源加载
  • 样式内联（不可以渲染，会等待执行完毕）外链（可以解析，但不会构建CSSOM，所以不可渲染，直到结束）会阻塞 DOM 树构建

优化

  • 内联：删除不必要，变成外链优化外链
  • 外链JS：放到底部，动态加载，defer，async，
  • 外链CSS：动态加载

度量浏览器渲染时间并优化

  1. 识别网站关键资源
  2. 画出关键渲染路径图
  3. 看 DevTools 录制结果
    • 界面是否符合
    • 关键资源是否加载
  4. 平衡内联、外链 —— 平衡渲染时间和加载网络资源加载时间：关键网络来回数、关键资源大小、关键资源个数
  5. HTML5 Profetch预加载

工具

  1. Chrome DevTools - Performance
  2. Lighthouse

（ 360 前端星计划 2018.05.11 ）