本文已参与「新人创作礼」活动，一起开启掘金创作之路
前言
在面试和复习过程中总结的一些前端知识点，记录下来，风格较简洁，尽量涵盖内容要点和简单例子。本文是前端面试系列第七篇：前端性能，持续更新...
一、前端性能优化指标 RAIL
RAIL 是一个以用户为中心的性能模型，包含四个方面：
- Response：事件处理最好在
50ms内完成； - Animation：产生每一帧的时间不要超过
10ms，每一帧的时间在16ms左右，但浏览器需要用6ms来渲染每一帧； - Idle：最大化空闲时间
- Load：传输内容到页面可交互的时间不超过
5s
二、前端性能优化手段
- 减少 HTTP 请求
- 使用服务端渲染
- 静态资源使用 cdn
- 用缓存
- 文件压缩
- 图片优化
- 减少重排和重绘
三、css 相关的性能优化
- 首屏关键 css 用内联的方式，其它 css 用外部引入，且为异步的；
- 删除无用的 css 代码，并将 css 文件进行压缩；
- css 的选择器是从右向左匹配的，因此尽量少用嵌套多层的选择器；
- 减少不必要的重排和重绘；
四、重排和重绘是什么，有什么区别
- 重排：当改变 DOM 元素位置或大小时，会导致浏览器重新生成渲染树。
- 重绘：当重新生成渲染树后，就要将渲染树每个节点绘制到屏幕，这个过程叫重绘。
重排会导致重绘，重绘不会导致重排
五、如何减少白屏时间
- 打包优化：配置 webpack 的
externals，将一些外部库去掉，用 cdn 的方式引入； - 合理分包：配置 webpack 的
cacheGroups； - 按需引入：可以利用
babel-plugin-import，按需引入后就没有必要再使用 externals 了；
六、大量图片加载优化
- 将图片服务和应用服务分离；
- 将图片压缩；
- 图片懒加载，如滚动到特定区域再请求；
- 小图片比较多时用雪碧图；
七、动画性能如何优化
在使用 css3 做动画效果时，优先选择 transform（scale，translate，rotate），尽量不要直接改变 height，width，margin 和padding。
八、渲染合成层是什么
在 DOM 树中每个节点都会对应一个渲染对象（RenderObject），当它们的渲染对象处于相同的坐标空间（z 轴空间）时，就会形成一个 RenderLayers，也就是渲染层。渲染层将保证页面元素以正确的顺序堆叠，这时候就会出现层合成（composite），从而正确处理透明元素和重叠元素的显示。
九、预加载
dns-prefetch可以提前进行域名解析：
<link rel="dns-prefetch" href="https://fonts.googleapis.com/">
preconnect可以提前与目标服务器进行连接：
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
preload可以提前下载资源进行缓存，常用于首屏资源：
<link rel="preload" href="/path/to/style.css" as="style" />
prefetch可以利用浏览器空闲时间来下载用户在不久的将来可能访问的资源：
<link rel="prefetch" href="static/img/delay_load_img.a5bb7c33.png">
prerender可以要求浏览器加载资源并先将其渲染在不可见选项卡中：
<link rel="prerender" href="https://css-tricks.com">
