前端性能优化

Posted 2021-03-24 haishen

前端性能优化可以分为两大类，分别是

    页面级别优化：包含了http请求数以及内联脚本位置优化；

    代码级别优化：包含DOM操作优化，CSS选择符优化以及图片优化等。

 

优化的目的

优化的目的在于让页面加载的更快，对用户操作响应更及时，为用户带来更好的用户体验，对于开发者来说优化能够减少页面请求数，能够节省资源。

 

页面级别优化

http请求数

减少http请求数是最重要也是最有效的方法，可以通过以下方法来减少http请求：

• 合理的设置http缓存，恰当的缓存设置可以大大减少http请求。要尽可能地让资源能够在缓存中待的更久；
• 从设计实现层面简化页面，保持页面简洁、减少资源的使用是最直接的
• 资源合并与压缩，尽可能的将外部的脚本、样式进行合并，多个合为一个
• CSS Sprites，通过合并CSS图片，这是减少请求数的一个好办法 

 

图片地图：

假设导航栏上有五幅图片，点击每张图片都会进入一个链接，这样五张导航的图片在加载时会产生5个HTTP请求。然而，使用一个图片地图可以提高效率，这样就只需要一个HTTP请求。

 

 服务器端图片地图：将所有点击提交到同一个url，同时提交用户点击的 x，y坐标，服务器端根据坐标映射响应

客户端图片地图：直接将点击映射到操作

使用图片地图的缺点：指定坐标区域时，矩形或圆形比较容易指定，而其他形状手工指定比较难

 

CSS Sprites：

直译过来就是CSS精灵，通过将多个图片融合到一幅图里面，然后通过CSS的一些技术布局到网页上。特别是图片特别多的网站，如果能用css sprites降低图片数量，带来的将是速度的提升。

 

字体图标：

在可以大量使用字体图标的地方我们可以尽可能使用字体图标，字体图标可以减少很多图片的使用，从而减少http请求，字体图标还可以通过CSS来设置颜色、大小等样式。

 

合并脚本和样式表

将多个样式表或脚本合并到一个文件中，可以减少HTTP请求的数量从而缩短响应时间。

然而合并所有文件对许多人，尤其是编写模块化代码的人来说是不能忍的，而且合并所有的样式文件或者脚本文件可能会导致在一个页面加载时加载了多于自己所需要的样式或者脚本，对于只访问该网站一个（或几个）页面的人来说反而增加了下载量，所以大家应该自己权衡利弊。

 

 

内联脚本的位置

浏览器是并发请求的，而外链脚本在加载时却常常阻塞其他资源，例如在脚本加载完成之前，它后面的图片、样式以及其他脚本都处于阻塞状态，直到脚本加载完成后才会开始加载。如果将脚本放在比较靠前的位置，则会影响整个页面的加载速度从而影响用户体验。所以说尽可能的将脚本往后挪，减少对并发下载的影响。

 

代码级别的优化

DOM操作优化

要避免在document上直接进行频繁的DOM操作，可以使用classname代替大量的内联样式修改，对于复杂的UI元素，设置position为absolute或fixed，尽量使用css动画，适当使用canvas，尽量减少css表达式的使用，使用事件代理。

 

图片优化

通过对图片的压缩来起到优化前端性能的作用

 

CSS选择符

大多数人认为，浏览器对CSS的解析是从左往右的，事实上从右往左解析的效率更高，因为第一个id选择基本上就把查找的范围限定了。

 

1、使用CDN

如果应用程序web服务器离用户更近，那么一个HTTP请求的响应时间将缩短。另一方面，如果web服务器离用户更近，则多个HTTP请求的响应时间将缩短。

CDN（内容发布网络）是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容。在优化性能时，向特定用户发布内容的服务器的选择基于对网络拥堵的测量。例如：CDN可能选择网络阶跃数最小的服务器，或者具有最短响应时间的服务器。

CDN还可以进行数据备份、扩展存储能力，进行缓存，同时有助于缓和Web流量峰值压力。

CDN缺点：

• 响应时间可能会受到其他网站流量的影响。CDN服务提供商在其所有客户之间共享Web服务器组。
• 如果CDN服务质量下降了，那么你的工作质量也将下降。
• 无法直接控制组件服务器。

 

2、将样式表放在头部

首先说明一下，将样式表放在头部对于实际页面加载的时间并不能造成太大影响，但是这会减少页面首屏出现的时间，使页面内容逐步呈现，改善用户体验，防止“白屏”。

我们总是希望页面能够尽快显示内容，为用户提供可视化的回馈，这对网速慢的用户来说是很重要的。

将样式表放在文档底部会阻止浏览器中的内容逐步出现。为了避免当样式变化重绘页面元素，浏览器会阻塞内容逐步呈现，造成“白屏”。这源自浏览器的行为：如果样式表仍在加载，构建呈现树就是一种浪费。