前端性能优化

1前端性能优化概览

用户打开网页的时候，主要经历了5个过程：

1. DNS解析
2. TCP连接
3. HTTP请求
4. 服务端处理请求，HTTP响应返回
5. 浏览器解析响应，开始渲染

网站的性能优化，要从这5个方面来展开，其中DNS解析、TCP连接需要服务端提供支持才能进行优化，前端能够做的事是有限的。

前端在http请求，页面渲染上可以优化的地方非常多。

2网络篇

1. http优化

优化方向：减少请求次数、减少单次请求所花费时间。

优化点：webpack优化，babel-loader处理更少的文件，从文件路径、文件名上剔除大量不需要优化的文件；使用Happypack将loader由单进程转为多进程；拆分压缩的js，删除冗余代码，按需加载；开启gzip压缩

1. 图片优化

图片占用网站大量的网络资源，合理的使用图片是非常必要的。

Jpeg/jpg图片：有损压缩、体积小、加载快、不支持透明。Jpg经常作为大的背景图、轮播图和banner图出现；

Png-8/png-24图片：无损压缩、质量高、体积大、支持透明。8位和24位的png图片分别支持256种和1600万种颜色。在要求线条和颜色的对比度时，适合使用png，一般在logo上使用。

Svg：文件体积小，可压缩性更强。但是需要编程、渲染的成本高（渲染svg节点）

Base64：文本文件、依赖编码、小图标解决方案。使用base64，将图片编码在html里，减少图片的请求数量。但是base64编码后图片的大小会变成原来的4/3。是雪碧图的替代方案。

Webp：大小比png小，还支持透明。但是只有chrome浏览器支持。

3存储篇

1. 浏览器缓存和缓存策略

浏览器缓存机制有四个方面，它们按照获取资源时请求的优先级依次排列如下：

 

1. Memory Cache
2. Service Worker Cache
3. HTTP Cache
4. Push Cache

强缓存：expires、cache-control。浏览器根据expires和cache-control判断目标资源是否“命中”缓存。cache-control优先于expires，当cache-control没有设置时，才会读取expires。现在expires一般用于做缓存的向下兼容。

Public和private，public表示浏览器和代理服务器都可以缓存，private表示只有浏览器可以缓存。

No-store与no-cache：no-store不允许任何类型的缓存，no-cache每次要向服务器确认缓存是否过期。

协商缓存：last-modified、etag。Last-modified表示文件上一次修改事件，但是无法确定文件是否改变。Etag会提供一个标识，标识是基于文件编码的。但是etag会需要额外的开销。会影响服务器的性能。

1. 浏览器本地存储

都遵从于同源政策。Cookie、localstorage可以在不同的窗口共享数据。Session Storage 特别的一点在于，即便是相同域名下的两个页面，只要它们不在同一个浏览器窗口中打开，那么它们的 Session Storage 内容便无法共享。

Cookie：大小通常在4kB，会跟随在每次的http请求上，会消耗性能。只能以键值对的形式存储，只能存为字符串。

Web Storage 的特性：Web Storage 根据浏览器的不同，存储容量可以达到 5-10M 之间。仅位于浏览器端，不与服务端发生通信。

Localstorage：是持久化的本地存储，存储在其中的数据是永远不会过期的，使其消失的唯一办法是手动删除。

SessionStorage：而 Session Storage 是临时性的本地存储，它是会话级别的存储，当会话结束（页面被关闭）时，存储内容也随之被释放。

 

IndexDb是一个运行在浏览器上的非关系型数据库。IndexDB 可以看做是 LocalStorage 的一个升级，当数据的复杂度和规模上升到了 LocalStorage 无法解决的程度。

4渲染篇

1. 服务端渲染

优点：网页直接到达用户的时候，就可以开始渲染。能够被搜索引擎搜索到。

缺点：首屏加载慢，当用户过多的时候，会给服务器造成很大的压力

1. 浏览器运行

 

Css渲染的时候，按照从右到左的顺序匹配。避免使用通配符，只对需要用到的元素进行选择；关注可以通过继承实现的属性，避免重复匹配重复定义；少用标签选择器；标签选择器后不要跟着id或class选择器；减少嵌套

CSS 是阻塞渲染的资源。需要将它尽早、尽快地下载到客户端，以便缩短首次渲染的时间。

Js会阻塞dom的渲染，我们的 JS 代码在文档的何处插入，就在何处执行。当 HTML 解析器遇到一个 script 标签时，它会暂停渲染过程，将控制权交给 JS 引擎。JS 引擎对内联的 JS 代码会直接执行，对外部 JS 文件还要先获取到脚本、再进行执行。等 JS 引擎运行完毕，浏览器又会把控制权还给渲染引擎，继续 CSSOM 和 DOM 的构建。

 

1. Dom优化原理

减少dom 的操作，如果插入10000个dom节点，最好是存在一起插入。不过目前有优秀的前端视图框架，比如vue、react、angular，基于这些框架上的开发，就可以避免直接操作dom，同时框架会帮助我们更好的实现业务。

1. 回流与重绘

回流：当元素的几何属性发生变化的时候，就会触发重新渲染元素。

重绘：当修改了样式，却未影响其几何属性的情况下，浏览器只需为其绘制新的样式。

回流一定会引起重绘，重绘不一定会引起回流。避免多次回流的操作。

5常见性能优化应用

1. 懒加载（lazy-load）
2. 节流与防抖

以上只是提及了前端优化的点，为的是提高前端仔的思想。最后，感谢阿里的修言大佬。前端优化看过很多了，包括雅虎军规，还有各种博客，但是雅虎军规偏向于传统的前端，对现在使用node构建的前端帮助并不大了。博客里写的文章，又不够系统，有些因为作者的理解可能不太深入，写的也是一知半解。各位想仔细看看的，建议购买修言大佬的掘金小册。《前端性能优化原理与实践》