前端性能优化总结

一、减少请求数量：

　　1.文件合并：

　　　　公共库合并；不同页面单独合并

　　2.图片处理：

　　　　⑴ 雪碧图    ⑵ Base64    ⑶使用字体图标代替图片

　　3.惰性加载（资源懒加载）

 

二、减少资源大小

　　css压缩、js压缩、图片压缩

 

三、优化网络连接（CDN）

　　CDN即内容分发网络，可以使用户就近取得所需内容，解决网络拥挤的状况，提高用户访问网站的响应速度。

 

四、开启GZIP

　　GZIP即数据压缩，用于压缩使用Internet传输的所有文本资源。开启GZIP的方法很简单，到对应的web服务配置文件中设置一下即可。以Apache为例，在配置文件httpd.conf中添加。

 

五、使用服务端渲染

　　假设你的网站需要加载完 abcd 四个文件才能渲染完毕。并且每个文件大小为 1 M，那么：客户端渲染的网站需要加载 4 个文件和 HTML 文件才能完成首页渲染，总计大小为 4M（忽略 HTML 文件大小）。而服务端渲染的网站只需要加载一个渲染完毕的 HTML 文件就能完成首页渲染，总计大小为已经渲染完毕的 HTML 文件（这种文件不会太大，一般为几百K，我的个人博客网站（SSR）加载的 HTML 文件为 400K）。这就是服务端渲染更快的原因。

 

六、优化资源加载

       1.所有放在 head 标签里的 CSS 和 JS 文件都会堵塞渲染。如果这些 CSS 和 JS 需要加载和解析很久的话，那么页面就空白了。所以 JS 文件要放在底部，等 HTML 解析完了再加载 JS 文件。
          那为什么 CSS 文件还要放在头部呢？
          因为先加载 HTML 再加载 CSS，会让用户第一时间看到的页面是没有样式的、“丑陋”的，为了避免这种情况发生，就要将 CSS 文件放在头部了。
          另外，JS 文件也不是不可以放在头部，只要给 script 标签加上 defer 属性就可以了，异步下载，延迟执行。

　　2.异步script标签　　   

　　   defer: 异步加载，在HTML解析完成后执行。defer的实际效果与将代码放在body底部类似
　　   async: 异步加载，加载完成后立即执行

　　3.模块按需加载

　　　如ECMAScript6的 import()语法、webpack打包构建

　　4.使用资源预加载preload和资源预读取prefetch

　　   preload让浏览器提前加载指定资源，需要执行时再执行，可以加速本页面的加载速度

　　   prefetch告诉浏览器加载下一页面可能会用到的资源，可以加速下一个页面的加载速度

　　   

七、减少重绘、回流

　　当改变 DOM 元素位置或大小时，会导致浏览器重新生成渲染树，这个过程叫重排。

　　　　1.添加或删除可见元素

　　　　2.元素位置改变

　　　　3.元素尺寸改变

　　　　4.内容改变

　　　　5.浏览器窗口尺寸改变

　　当重新生成渲染树后，就要将渲染树每个节点绘制到屏幕，这个过程叫重绘。

　　不是所有的动作都会导致重排，例如改变字体颜色，只会导致重绘。重排会导致重绘，重绘不会导致重排 。

 

八、使用事件委托

　　事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。所有用到按钮的事件（多数鼠标事件和键盘事件）都适合采用事件委托技术， 使用事件委托可以节省内存。

　　扩展：防抖与节流

 

九、利用浏览器缓存

　　1.强缓存：不会向服务器发送请求，直接从缓存中读取资源，在chrome控制台的network选项中可以看到该请求返回200的状态码，并且size显示from disk cache或from memory cache；

　　2.协商缓存：向服务器发送请求，服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源；另外协商缓存需要与cache-control共同使用。

 

十、其他零星优化法

　　1.降低css选择器复杂性（内联 > ID > 类 > 标签）

　　2.使用flexbox布局而不是较早的布局模型

　　3.使用transform和opacity属性更改来实现动画（不会触发重排跟重绘）

　　4.js使用优化。例如条件判断过多宜使用switch 优于 if-else