页面性能优化

零碎知识

根据 RAIL 模型优化判断页面性能

• 响应时间控制在100ms 内，超过这个时间用户就会感觉到延迟，对于超过500ms 的操作需要作出反馈。
• 利用空闲时间，在空闲时间完成一些被推迟的工作。被推迟的工作应该被分成50ms 的块，当用户开始互动的时候优先处理用户的互动。
• 将动画控制在10ms 每帧，可以利用100ms 的响应时间进行一些复杂的预运算。
• 加载页面时，在1000ms 内呈现内容。

优化内容效率

删除不必要的下载

• 清点网页上所有自己的和第三方的资源
• 评估每个资源的表现：资源的价值及其技术性能
• 确定这些资源是否提供了足够的价值

优化基于文本的资产的编码和传输大小

• 保留原始文件作为开发版本，通过预处理压缩为发布版本。
• 用 GZIP 压缩

图片优化

• 使用网络字体取代图片
• 首选矢量图，用 GZIP 压缩矢量图
• 选用有损压缩的方式来压缩图片
• 选择正确的图片格式
• 提供不同大小的图片

网页字体优化

使用 font-face 定义字体系列时需要提供多种格式的字体文件

• 将 WOFF 2.0 变体提供给支持它的浏览器
• 将 WOFF 变体提供给大多数浏览器
• 将 TTF 变体提供给旧 Android（4.4 版以下）浏览器
• 将 EOT 变体提供给旧 IE（IE9 之下）浏览器

使用 unicode-range 描述符，我们可以指定一个以逗号分隔的范围值的列表，其中的范围值可以是单一代码点（例如 U+416)、间隔范围（例如 U+400-4ff）或者通配符范围（例如 U+4??)

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2'), 
       url('/fonts/awesome-l.woff') format('woff'),
       url('/fonts/awesome-l.ttf') format('ttf'),
       url('/fonts/awesome-l.eot') format('eot');
  unicode-range: U+4e00-9fff; /* Chinese glyphs */
}

使用字体加载优化 API

//引入字体
var font = new FontFace("Awesome Font", "url(/fonts/awesome.woff2)", {
  style: 'normal', unicodeRange: 'U+000-5FF', weight: '400'
});
font.load();
//在字体加载完毕之后替换网页字体
font.ready().then(function() {
  document.fonts.add(font);
  document.body.style.fontFamily = "Awesome Font, serif";
  var content = document.getElementById("content");
  content.style.visibility = "visible";
});

优化关键呈现路径

浏览器首次描绘页面的步骤，尽可能缩短这几个步骤中的时间。

• 处理 HTML 标记，构建 DOM 树。
• 处理 CSS 标记，构建 CSSOM 树。
• 将 DOM 树和 CSSOM 树融合成渲染树。
• 根据渲染树来布局，计算每个节点的几何信息。
• 在屏幕上绘制各个节点。

CSS

使用 HTML 和 CSS 媒体查询将一些 CSS 标记为不阻塞渲染，不阻塞渲染的 CSS 仅仅是不会暂停浏览器的首次渲染，依然会被下载。

应该尽早在 HTML 文档中指定所有 CSS 资源，使浏览器可以尽早发现<link>标签，并尽早发出 CSS 请求。

避免使用 CSS import。

JavaScript

在浏览器解析时遇到 script 标签会停止 DOM 树的构建，然后执行 JavaScript 脚本，如果这个脚本是外部文件引入的，那么还需要等待外部文件的下载。加入 async 关键字可以使脚本不阻塞 DOM 树的构建。

CSSOM 的构建会阻塞 JavaScript 脚本的执行。

<script src="app.js" async></script>

分析关键呈现路径的性能

• 关键资源：可能阻止网页首次呈现的资源。
• 关键路径长度：即往返过程数量，或提取所有关键资源所需的总时间。
• 关键字节：实现网页首次呈现所需的总字节数，是所有关键资源的传输文件大小总和。 带有一个 HTML 网页的首个示例包含一项关键资源（HTML 文档），关键路径长度也与 1 个网络往返过程（假设文件较小）相等，而且总的关键字节数正好是 HTML 文档本身的传输大小。

优化关键呈现路径

• 分析和描述关键路径：资源数量、字节数、长度。
• 尽量减少关键资源数量：删除相应资源、延迟下载、标记为异步资源等等。
• 优化剩余关键资源的加载顺序：您需要尽早下载所有关键资源，以缩短关键路径长度。
• 尽量减少关键字节数，以缩短下载时间（往返次数）。

渲染性能

用 JS 修改 CSS 有三种常用的流水线。
- 修改布局属性，经过 计算样式、布局、绘制、渲染层合并。
- 修改绘制属性，经过 计算样式、绘制、渲染层合并。
- 修改非布局非绘制属性，经过 计算样式、渲染层合并。

对于动画和滚动这类负荷重的操作尽量采用第三种。

优化 JavaScript 效率

• 对于动画效果的实现，避免使用 setTimeout 或 setInterval，请使用 requestAnimationFrame。
• 把耗时长的 JavaScript 代码放到 Web Workers 中去做。
• 把 DOM 元素的更新划分为多个小任务，分别在多个 frame 中去完成。

var taskList = breakBigTaskIntoMicroTasks(monsterTaskList);
requestAnimationFrame(processTaskList);
function processTaskList(taskStartTime) {
  var taskFinishTime;
  do {
    var nextTask = taskList.pop();
    processTask(nextTask);
    taskFinishTime = window.performance.now();
  } while (taskFinishTime - taskStartTime < 3);
  if (taskList.length > 0)
    requestAnimationFrame(processTaskList);
}

• 使用 Chrome DevTools 的 Timeline 和 JavaScript Profiler 来分析 JavaScript 的性能。

降低样式计算的范围和复杂度

• 降低样式选择器的复杂度
• 减少需要执行样式计算的元素个数
• 评估样式计算的成本
• 以BEM方式编写CSS代码

避免大规模、复杂的布局

• 布局通常是在整个文档范围内发生。
• 需要布局的DOM元素的数量直接影响到性能；应该尽可能避免触发布局。
• 分析页面布局模型的性能；新的Flexbox比旧的Flexbox和基于浮动的布局模型更高效。
• 避免强制同步布局事件的发生；对于元素的样式属性值，要先读再写。

简化绘制复杂度、减小绘制区域

.moving-element {
  will-change: transform;
}

对于不支持 will-change 的浏览器

.moving-element {
  transform: translateZ(0);
}

使用 will-change 属性可以创建一个新的渲染层，在这个渲染层中使用 transform 来实现移动效果将不会对其他绘制层产生影响。

优先使用渲染层合并属性、控制层数量

• 只使用transform/opacity来实现动画效果
• 用will-change/translateZ属性把动画元素提升到单独的渲染层中
• 避免滥用渲染层提升：更多的渲染层需要更多的内存和更复杂的管理

用户输入事件