[TOC]
  • 浏览器渲染性能优化影响性能的因素怎么提高前端性能？优化关键呈现路径PageSpeed 规则和建议参考资料

浏览器渲染性能优化

影响性能的因素

  • 白屏 HTML 和 CSS 的加载及解析速度内的脚本加载及执行
  • 首屏 图片加载内的脚本加载及执行
  • render tree 的构建 HTML 的复杂度CSS 的复杂度
  • render tree 的绘制（栅格化） 颜色的复杂度形状的复杂度怎么提高前端性能？

提高以下几个方面，总体性能就会得到大幅度提升：

  • 缩短白屏时间；
  • 加快首屏显示；
  • 尽快监听主要操作的事件。优化关键呈现路径

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

  • 最小化关键资源数
  • 最小化关键字节数
  • 最小化关键路径长度常规步骤:
  • 分析并描述关键路径：资源数、字节数和长度；
  • 减少关键资源的数量：删掉、延迟下载或标记为异步等等；
  • 优化剩余关键资源的加载顺序：尽早下载所有关键资源以缩短关键路径长度；
  • 优化关键字节数以减少下载时间（往返次数）。 PageSpeed 规则和建议
  • 排除阻止呈现的 JavaScript 和 CSS
  • 优化 JavaScript 的用法 推荐使用异步 JavaScript 资源Avoid synchronous server calls延迟解析 JavaScript避免运行时间长的 JavaScript
  • 优化 CSS 的用法

将 CSS 放到文档头部避免使用 CSS import内联阻止呈现的 CSS参考资料

  • Google: Optimizing Performance

原文: https://leohxj.gitbooks.io/front-end-database/content/preference/browser-rendering-performance.html