前端性能优化总结

ゝ一世哀愁。 2022-07-14 12:39 423阅读 0赞

**前端性能优化的目的:**  
1. 从用户角度而言:优化能够让页面加载得更快、对用户的操作响应的更及时，能够给用户提供更为良好的体验。  
2. 从服务商角度而言:优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。

## **减少HTTP请求** ##

### **合并文件** ###

将脚本文件和样式表文件分别合并到一个文件中，可以减少HTTP请求的数量并缩短最终用户响应时间。当脚本或者样式表在不同页面中使用时需要做不同的修改，这可能会相对麻烦点，但即便如此也要把这个方法作为改善页面性能的重要一步。

### **CSS Sprites** ###

这是减少图像请求的有效方法，把所有的背景图像都放到一个图片文件中，然后通过CSS的background-image和background-position属性来显示图片的不同部分；合并后的图片会比分离的图片总和要小，这是因为它降低了图片自身的开销。

### **图片地图** ###

是把多张图片整合到一张图片中。虽然文件的总体大小不会改变，但是可以减少HTTP请求次数。图片地图只有在图片的所有组成部分在页面中是紧挨在一起的时候才能使用，如导航栏。确定图片的坐标和可能会比较繁琐且容易出错，同时使用图片地图导航也不具有可读性，因此不推荐这种方法；

### **内联图像** ###

使用data:URL 模式可以在web页面中包含图片但无需任何额外的HTTP请求。把内联图像放到样式表（可缓存）中可以减少HTTP请求同时又避免增加页面文件的大小。但是内联图像现在还没有得到主流浏览器的支持。

## **减少DNS查找次数(DNS缓存)** ##

![这里写图片描述][20160730185625040]  
在浏览器中输入一个域名，回车后，DNS（域名系统）会先将域名解析成对应的IP地址，然后根据IP地址去找到相应的网址。这样就完成了一个DNS查找，这个查找过程当然是要消耗时间的，大约消耗20毫秒，在这个查找过程中，我们的浏览器什么都不会做，保持一片空白。如果这样的查找很多，那么我们的网页性能将会受到很大影响，这就需要用到DNS缓存。  
**现代的浏览器都有自己的缓存机制：** IE默认情况下对DNS查找记录的缓存时间为30分钟，Firefox默认情况下对DNS查找记录的缓存时间为1分钟，Chrome默认情况下对DNS查找记录的缓存时间为1分钟。

### **缓存时间** ###

**缓存时间长优点：**减少DNS的重复查找，节省时间  
**缓存时间短优点：**能够及时的检测网站服务器IP地址的变化，保证访问的正确性

### **单域和多域** ###

**举个例子：*\****多域情况下\*，我们可以将我们的网站资源：html文件、图片、脚本文件分别放在三个不同的域名下去请求访问  
**单域情况下**，我们可以将我们的网站所有资源都放在同一个域名下请求访问。  
**多域名的好处是：**能够实现页面中资源文件的并行下载。但是会增加DNS查找的次数。  
**单域名好处： 减少主机名的数量可以减少DNS查找次数**，但是也会减少资源并行下载，从而会增加响应时间。  
**一般的原则是：**把这些页面中的内容分割成至少两部分但不超过四部分。这种结果就是在减少DNS查找次数和保持较高程度并行下载两者之间的权衡了。

## **使用内容分发网络(CDN–Content delivery network)** ##

内容分发网络是由一系列分散到各个不同地理位置上的Web服务器组成的，它提高了网站内容的传输速度。用于向用户传输内容的服务器主要是根据和用户在网络上的靠近程度来指定的。使用CDN，就相当于在离你最近的地方，放置一台性能好、连接顺畅的副本服务器，让你能够以最近的距离，最快的速度获取内容。有个缺点是：CDN服务成本却非常高，需要建立多台服务器。

## **添加Expire/Cache-Control头** ##

首先说明一下：Expire属于HTTP/1.0，Cache-Control属于HTTP/1.1。这两者起到的作用是一致的。  
通过使用Expires或者Cache-Control就可以使请求的内容具有缓存性，它避免了接下来的页面访问中不必要的HTTP请求。Expires头的内容是一个时间值，值就是资源在本地的过期时间。在当前时间还没有超过缓存资源的过期时间时，就直接**使用这一缓存的资源，不会发送HTTP请求**。Cache-Control的作用也是类似的，只不过它的值是一个表示距离缓存过期的一个秒数时间。

## **启用Gzip压缩** ##

通过减小HTTP响应的大小也可以节省HTTP响应时间。Gzip可以压缩所有可能的文件类型，是减少文件体积、增加用户体验的简单方法。  
从HTTP/1.1开始，web客户端都默认支持HTTP请求中有Accept-Encoding文件头的压缩格式：**Accept-Encoding: gzip**  
如果web服务器在**请求的文件头**中检测到上面的代码，就会以客户端列出的方式压缩响应内容。Web服务器把**压缩方式**通过**响应文件头中**的Content-Encoding来返回给浏览器。  
**Content-Encoding: gzip**

## **将css放在页面最上面** ##

最好的方式是：在文档`<head/>`内加载你的样式表，这样做的好处是：提高网页渲染性能，避免网页出现白屏或者是没有样式的内容。

## **将script放在页面最下面** ##

先来看先HTML文档加载的顺序：  
![这里写图片描述][20160730235706524]  
**最佳实践是：**将script标签放在页面底部（body结束标签之前），这样做可以让页面内容优先呈现出来，而非先暴露script脚本中可能存在的错误，能够带来更好的用户体验。此外即便脚本正确无误，但是脚本的加载和执行是阻塞的，如果需要加载的脚本过多，将会延长页面内容的加载时间，造成不好的用户体验。  
将Script放在页面的最下面，因为浏览器加载和解释网页的顺序是**从左到右从上到下**的，如果[JavaScript][]代码有死循环的问题，网页可能是空白一片的，如果放在页面的最下面即使如此，页面也能正常展现出来，用户体验更好。

## **避免在CSS中使用Expressions** ##

**表达式的问题就在于：**它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。  
一个减少CSS表达式计算次数的方法就是**使用一次性的表达式**，它在第一次运行时将结果赋给指定的样式属性，并用这个属性来代替CSS表达式。如果样式属性必须在页面周期内动态地改变，使用事件句柄来代替CSS表达式是一个可行办法。如果必须使用CSS表达式，一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。

## **把JavaScript和CSS都放到外部文件中** ##

### 内联VS外置 ###

**单独提取好处：**  
(1)提高了js和css的复用性  
(2)减小页面体积  
(3)提高了js和css的可维护性  
**内联的好处：**  
(1)减少页面请求  
(2)提升页面渲染速度  
**使用内联的情况：**  
(1)脚本和样式只应用于一个页面  
(2)页面不经常被访问  
(3)脚本和样式很少的情况  
在实际应用中使用外部文件可以提高页面速度，因为JavaScript和CSS文件都能在浏览器中产生缓存。内置在HTML文档中的JavaScript 和CSS则会在每次请求中随HTML文档重新下载。这虽然减少了HTTP请求的次数，却增加了HTML文档的大小。从另一方面来说，如果外部文件中的 JavaScript和CSS被浏览器缓存，在没有增加HTTP请求次数的同时可以减少HTML文档的大小。

## **压缩 JavaScript 和 CSS** ##

压缩是指从去除代码不必要的字符减少文件大小从而**节省下载时间**。  
方法：  
1.去除不必要的空白符（空格、换行、tab缩进）、格式符、注释符  
2.简写方法名、参数名来压缩js脚本  
在 JavaScript中，由于需要下载的文件体积变小了从而节省了响应时间。

## **避免重定向** ##

301(永久重定向)和302(临时重定向),这两个重定向用的比较多。  
但是要记住重定向会降低用户体验。在用户和HTML文档中间增加一个跳转，**会拖延页面中所有元素的显示**，因为在HTML文件被加载前任何文件（图像、Flash等）都不会被下载。

## **移除重复的脚本** ##

重复脚本会引起不必要的HTTP请求和无用的JavaScript运算，这降低了网站性能。

## **配置实体标签（ETag）** ##

Entity tag（ETag）（实体标签）是web服务器和浏览器**用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制**。如果一致，则直接使用缓存中的内容，不需要服务器提供了。  
增加ETag为实体的验证提供了一个比使用”last-modified date（上次编辑时间）”更加灵活的机制。Etag是一个识别内容版本号的唯一字符串。唯一的格式限制就是它必须包含在双引号内。原始服务器通过含有 ETag文件头的响应指定页面内容的ETag。

HTTP/1.1 200 OK 
    Last-Modified: Tue, 12 Dec 2015 03:03:59 GMT 
    ETag: "10c24bc-4ab-457e1c1f" 
    Content-Length: 12166 
      
       
        1 
        2 
        3 
        4 
       
      
       
        1 
        2 
        3 
        4

稍后，如果浏览器要验证一个文件，它会使用If-None-Match文件头来把ETag传回给原始服务器。在这个例子中，ETag是匹配的，就会返回一 个304状态码，这就节省了12166字节的响应。

If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT 
    If-None-Match: "10c24bc-4ab-457e1c1f" 
      
       
        1 
        2 
       
      
       
        1 
        2

## **使 AJAX 缓存** ##

首先来说一下get和post的区别：  
![这里写图片描述][20160731003631703]  
![这里写图片描述][20160731003708313]  
Ajax经常被提及的一个好处就是由于其从后台服务器传输信息的异步性而为用户带来的反馈的即时性。但是，使用Ajax并不能保证用户不会在等待异步的 JavaScript和XML响应上花费时间。在很多应用中，用户是否需要等待响应取决于Ajax如何来使用。记住一点，**“异步”并不意味着”即时”**，这很重要。  
为了提高性能，优化Ajax响应是很重要的。提高Ajax性能的措施中最重要的方法就是**使响应具有可缓存性(为文件头指定Expires或Cache-Control )**。其它的几条规则也同样适用于Ajax：

*  Gizp压缩文件
 *  减少DNS查找次数
 *  精简JavaScript
 *  避免跳转
 *  配置ETag(实体标签)

待续未完。。

**参考博文：**  
[前端性能优化][Link 1]  
[前端性能优化—-yahoo前端性能团队总结的35条黄金定律][-yahoo_35]

[20160730185625040]: /images/20220714/0f042b6cb58848e08f06c41cef53a38b.png
[20160730235706524]: /images/20220714/55a76a1af779416b9a21512f9a5c23e2.png
[JavaScript]: http://lib.csdn.net/base/javascript
[20160731003631703]: /images/20220714/357775263c2744118b9e47925b1a6d13.png
[20160731003708313]: /images/20220714/f392640dd29140f7809eb0144978a4e9.png
[Link 1]: http://www.jianshu.com/p/be5aea4a222f
[-yahoo_35]: http://www.cnblogs.com/lei2007/archive/2013/08/16/3262897.html