浏览器渲染性能优化

    • 白屏
      • HTML 和 CSS 的加载及解析速度
      • 内的脚本加载及执行
    • 首屏
      • 图片加载
      • 内的脚本加载及执行
    • render tree 的构建
      • CSS 的复杂度
    • render tree 的绘制（栅格化）
      • 颜色的复杂度
      • 形状的复杂度
    • 缩短白屏时间；
    • 加快首屏显示；
    • 尽快监听主要操作的事件。

    为了在首次渲染时尽可能快，我们需要优化以下三个变量：

    • 最小化关键资源数
    • 最小化关键字节数

    • 最小化关键路径长度
      常规步骤:

    • 减少关键资源的数量：删掉、延迟下载或标记为异步等等；

    • 优化关键字节数以减少下载时间（往返次数）。

    • 排除阻止呈现的 JavaScript 和 CSS

    • 优化 JavaScript 的用法
      • 推荐使用异步 JavaScript 资源
      • Avoid synchronous server calls
      • 延迟解析 JavaScript
      • 避免运行时间长的 JavaScript
      • 将 CSS 放到文档头部
      • 避免使用 CSS import
      • 内联阻止呈现的 CSS

    • Google: Optimizing Performance