前端如何优化网站性能？

Posted 2021-06-04 乘风破浪的程序媛

前端如何优化网站性能？

1、减少HTTP的请求数量

在浏览器与服务器进行通信的时候，主要是通过HTTP进行通信，浏览器与服务器需要经过三次握手，每次握手需要花费大量的时间，而且不同浏览器对资源文件并发请求的数量有限（不同浏览器允许的并发数），一旦HTTP请求数量达到一定的数量，资源请求就存在等待状态，这是很致命的，因此减少HTTP的请求数量可以很大程度上对网站进行优化。

(一）、CSS Sprites

CSS Sprites俗称精灵图，这是将多张图片合并成一张图片达到减少HTTP请求的一种解决方案，可以通过CSS的background属性来访问图片的内容，这种方案还可以减少图片的总字节数。

（二）、合并 CSS 和 JS 文件

现在前端有很多的打包工具，如grunt 、 gulp、webpack,、rollup等等。为了减少HTTP的请求数量，可以通过这些工具在发布前将多个CSS或者多个JS合并成一个文件。

（三）、采用lazyLoad

lazyLoad 俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发送请求，等到用户操作真正需要的时候立即加载出内容，这样就控制了网页资源一次性请求数量。

2、控制资源文件加载优先级

浏览器在加载html的内容时，是将HTML内容从上至下依次解析，解析到link或者script标签就会加载href或者src对应链接内容，为了第一时间展示页面给用户，就需要将CSS提前加载，不要受 JS 加载影响。一般情况都是CSS在头部，JS在底部 。

3、 利用浏览器缓存

浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。

4、减少重排（Reflow）

基本原理：重排是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证 DOM 树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如果Reflow的过于频繁，CPU使用率就会急剧上升。减少Reflow，如果需要在DOM操作时添加样式，尽量使用 增加class属性，而不是通过style操作样式。

5、减少DOM的操作

6、图标使用IconFont替换