链接：https://juejin.im/book/5a8f9ddcf265da4e9f6fb959

优化原则和方向

性能优化的原则是以更好的用户体验为标准，具体就是实现下面的目标：

1. 多使用内存、缓存或者其他方法
2. 减少 CPU 和GPU 计算，更快展现

优化的方向有两个：

①减少页面体积，提升网络加载

②优化页面渲染

减少页面体积，提升网络加载

• 静态资源的压缩合并（JS 代码压缩合并、CSS 代码压缩合并、雪碧图）
• 静态资源缓存（资源名称加 MD5 戳）
• 使用 CDN 让资源加载更快

优化页面渲染

• CSS 放前面，JS 放后面
• 懒加载（图片懒加载、下拉加载更多）
• 减少DOM 查询，对 DOM 查询做缓存
• 减少DOM 操作，多个操作尽量合并在一起执行（DocumentFragment）
• 事件节流
• 尽早执行操作（DOMContentLoaded）
• 使用 SSR 后端渲染，数据直接输出到 HTML 中，减少浏览器使用 JS 模板渲染页面 HTML 的时间

静态资源的压缩合并

如果不合并，每个都会走一遍之前介绍的请求过程

<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>

如果合并了，就只走一遍请求过程

<script src="abc.js"></script>

静态资源缓存

通过链接名称控制缓存

<script src="abc_1.js"></script>

只有内容改变的时候，链接名称才会改变

<script src="abc_2.js"></script>

这个名称不用手动改，可通过前端构建工具根据文件内容，为文件名称添加 MD5 后缀。

使用 CDN 让资源加载更快

CDN 会提供专业的加载优化方案，静态资源要尽量放在 CDN 上。例如：

<script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>

使用 SSR 后端渲染

可一次性输出 HTML 内容，不用在页面渲染完成之后，再通过 Ajax 加载数据、再渲染。例如使用 smarty、Vue SSR 等。

CSS 放前面，JS 放后面

避免浏览器渲染过程时的阻塞

懒加载

一开始先给为 src 赋值成一个通用的预览图，下拉时候再动态赋值成正式的图片。如下，preview.png是预览图片，比较小，加载很快，而且很多图片都共用这个preview.png，加载一次即可。待页面下拉，图片显示出来时，再去替换src为data-realsrc的值。

<img src="preview.png" data-realsrc="abc.png"/>

另外，这里为何要用data-开头的属性值？—— 所有 HTML 中自定义的属性，都应该用data-开头，因为data-开头的属性浏览器渲染的时候会忽略掉，提高渲染性能。

DOM 查询做缓存

两段代码做一下对比：

var pList = document.getElementsByTagName('p') // 只查询一个 DOM ，缓存在 pList 中了
var i
for (i = 0; i < pList.length; i++) {
}
var i
for (i = 0; i < document.getElementsByTagName('p').length; i++) { // 每次循环，都会查询 DOM ，耗费性能
}

总结：DOM 操作，无论查询还是修改，都是非常耗费性能的，应尽量减少。

合并 DOM 插入

DOM 操作是非常耗费性能的，因此插入多个标签时，先插入 Fragment 然后再统一插入 DOM。

var listNode = document.getElementById('list')
// 要插入 10 个 li 标签
var frag = document.createDocumentFragment();
var x, li;
for(x = 0; x < 10; x++) {
 li = document.createElement("li");
 li.innerHTML = "List item " + x;
 frag.appendChild(li); // 先放在 frag 中，最后一次性插入到 DOM 结构中。
}
listNode.appendChild(frag);

事件节流

例如要在文字改变时触发一个 change 事件，通过 keyup 来监听。使用节流。

var textarea = document.getElementById('text')
var timeoutId
textarea.addEventListener('keyup', function () {
 if (timeoutId) {
 clearTimeout(timeoutId)
 }
 timeoutId = setTimeout(function () {
 // 触发 change 事件
 }, 100)
})

尽早执行操作

window.addEventListener('load', function () {
 // 页面的全部资源加载完才会执行，包括图片、视频等
})
document.addEventListener('DOMContentLoaded', function () {
 // DOM 渲染完即可执行，此时图片、视频还可能没有加载完
})