#### 避免页面卡顿
JS修改样式 --> style计算 --> 被影响的元素重新布局 --> 布局好的效果放到一个画布上 --> paint成像素 --> 画布刷新到页面上
js --> style --> layout --> paint --> composite
#### 拆分代码段
```
var tasks = []; //存储任务
function draw() {
window.requestAnimationFrame(function() {
if(tasks.length) {
var task = tasks.shift();
task();
window.requestAnimationFrame(() => draw())
}
})
}
```
在web动画、app动画中，我们经常通过setInterval或setTimeout定时修改DOM、CSS实现动画，不过如此动画的方式极为耗费资源，经常是这样的结果，刚开始比较流畅，5分钟之后动画就卡住了。
requestAnimationFrame的方式的优势如下：
1.经过浏览器优化，动画更流畅
2.窗口没激活时，动画将停止，省计算资源
3.更省电，尤其是对移动终端
#### 其他优化方法
* 减少页面重绘，能用trnasform就别使用position/width/height做动画
* 简化DOM结构
#### 加快页面打开速度
所有放在head中的js和css都会阻塞渲染。
有两种解决方法：
* 把script标签放在body最下面
* 给script标签加上defer属性，其将会异步加载
具体优先级为：
* document.readyState为loading
* 如果head中有非defer和async的script，老老实实等它加载完吧
* body中的外部引入script最先加载
* body中的内联script其次
* 此时document.readyState变为interactive
* 开始加载那些延迟的script
* 延迟script加载完成后，document.readyState变为complete
* window.onload开始执行
document.readyState：
* loading: document正在加载
* interactive: 文档已加载完成，且已被解析，但仍有资源还未加载完成
* complete: 所有一切都准备就绪，开始触发onload吧
document.readyState一旦发生变化，就会触发document.readyStateChange方法。
head标签里面的defer脚本和body里面的脚本有啥不一样吗？写在head里的脚本会阻塞渲染，加上defer后它的加载优先级是最低最低的。
#### 减少css代码量
* 不要放太多和太大的base64
* 如果css比较小，用内联吧，不要外引
#### 优化图片
* 使用响应式图片
* 延迟加载图片（懒加载）
#### 其他优化方案
* DNS预读取：`<link rel="dns-prefecth" href="https://www.google.com"/>`
* HTML去掉注释并压缩
