前端性能优化策略

---

theme: smartblue

网站越快访问体验越好，用户黏性越高、用户忠诚度更高、用户转化率也越高。由于Web页面承载的功能越来越多，为了页面效果而使用的多媒体元素也越来越丰富，这些都会造成页面访问的延迟，网站优化的工作变得重中之重。

以下是自己工作中，常用到的优化小技巧，可快速提供网站的整体访问速率，提升用户体验，内容参考博客园。

1、图片优化

首先，你需要优化你网站上的图片， 用户感觉到的页面加载时长越短，用户体验就越好。我们尤其关注如何优化移动网络中的用户体验，比如网页预加载、减少内容、改变图片格式降低图片尺寸、图片压缩、延迟加载，可以使用tinypng webp 优化图片，提高图片质量。

2、开启GZip压缩

GZip压缩听被用于减少HTTP请求的大小来缩短响应时间。开启后允许你发送GZip压缩文件而不是HTML文件给浏览器，它将缩短页面等待时间和加载时间。对于服务器，只需在配置文件中来开启GZip压缩即可，前端只需在打包的时候，目标文件的格式为zip。 

3、服务器响应时间

即使网站已经格外优化，但是除非服务器响应时间非常快，否则就不会有什么大的效果。服务器响应时间起着重要的作用。下面是一些提高服务器响应时间的建议。  - 有独立的服务器，而不是选择共享/托管服务器。  - 提高Web服务器的质量，处理能力。  - 移除不必要的插件，只有那些必要的插件，才需要一直保持启用状态。 

4、浏览器缓存

浏览器具有缓存的功能，可以存储指定的文件，减少HTTP请求，从而提高网站的加载速度。你可以通过在.htaccess文件中设置expires头来开启浏览器缓存，利用下面的代码可以实现： 

5、开启长连接(Keep-Alive)

Keep-Alive头对缩短浏览器和服务器之间的分布式请求的潜伏期是非常重要的，用户通过浏览器请求网页时，浏览器会读取服务器发送的特定的HTML文件，如果请求的页面中包含了外部的CSS和JavaScript文件，浏览器会再次发送独立的请求来获取这些文件，延长页面的加载时间。

6、使用CDN

内容分发网络(CDN)是位于不同地理位置的服务器组成的网络。每个服务器都拥有所有网站的文件副本。当用户请求文件和网页时，就可以直接从就近的网站服务器获取相应资源(也可以是从负载最小的服务器)。可以使用CDN服务来为网站加速。

7、压缩CSS、JavaScript和HTML文件

通过删除所有不必要的空格和注释，从而减小代码体积，提高页面的加载速度。

8、避免重定向

重定向是对网站访问者的一种极大的消耗，就类似你去一超市买可乐，结果可乐买完了，只能吭哧吭哧跑另一个超市。重定向会消耗额外的时间，降低加载速度。 

9、指定字符集

指定字符集是加速浏览器渲染页面的另一个有用的技巧，可减少浏览器对文件的解析分析步骤。 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  

10、避免错误请求

当用户在网站上搜索时，收到404或410错误是比较失望的。错误请求会对网站的页面加载速度产生不利影响。建议你无论如何都要避免错误请求，改善用户体验。 

11、丢弃跟踪代码、嵌入视频的元素和分享按钮

很多网站管理员认为使用多个跟踪代码提供嵌入和分享按钮会带给用户更好的体验，实际上这只会给网站增加更多的服务请求。例如，一个iframe会请求一个新页面，这会自动降低网站的加载速度。丢弃这些跟踪代码，可以提高网站加载速度，提升用户体验。

12、异步脚本

还有一个可以提高网站页面速度的超棒选择就是异步加载脚本。如此一来网页负载就并不必依赖于这些异步脚本。在异步模式中，脚本是在后台下载的，不会影响浏览器对页面的渲染和加载。  <script async src="http://XXXXX/script.js"></script> 

13、样式表置顶，脚本置底

将样式表放在顶部有利于页面迅速加载，因为这样可以使得页面慢慢呈现。一般来说，在同一时间，大部分浏览器支持并行下载两个组件(图像、样式和脚本)。但是通常而言，脚本会在并行下载时会阻止其他的下载，直到脚本下载完毕。 

14、JavaScript的延迟解析

为了加载网页，浏览器必须解析所有的标记内容，从而增加了网站的加载时间。通过延迟解析脚本，那么就可以减少初始网站的加载时间了。 <script defer http://XXXXX/script.js"></script>

15、避免阻塞型的JavaScript和CSS

在浏览器呈现网页之前，它首先需要通过解析HTML标记语言来构建一个DOM树。在此过程中，如果遇到了脚本，此过程就会中止，转而先执行脚本，然后才会继续原先的活动。因此建议避免阻塞型的JavaScript，尤其是外部脚本。 

阻塞型JavaScript还会导致网站的延迟。所以不妨推迟加载那些不重要的JavaScript，或者采用异步加载的方式。另一种选择是将这些HTML代码内嵌到网站上，同时需要确保CSS的优化。 

16、优化代码：不使用内联的CSS

内联样式就不能清清楚楚地将内容从设计中剥离开来；还会需要大量的维护工作，给网站管理员带来各种不便，还会进一步增加网页编码的大小。

17、文件分离

网站的文件可以分为CSS、JavaScripts和图像。文件分离虽然并不能直接改善网站的加载时间。但是，这么做可以提高服务器的稳定性，特别是当网站流量突然出现了尖峰的时候。子域也可以用于托管文件，这样可以增加并行下载的数量。

18、尽量减少HTTP请求

还有一种简单的优化网页速度的方法是，减少HTTP请求。当一个网站一下子收到太多的HTTP请求，它的访客就会有响应时间延迟的体验，这不仅增加了CPU使用率也增加了页面的加载时间。那么，又该如何减少HTTP请求？请见以下步骤：  - 减少网站上的对象数量。 - 最小化网站上的重定向数量。 - 使用CSS Sprites技术(需要的图片内容)。 - 合并JavaScripts和CSS文件。