前端性能优化

布满荆棘的人生 2022-09-25 10:26 38阅读 0赞

# 前端性能优化 #

**1.　　减少HTTP请求　　**

**基本原理：**

> 　　在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出。
> 
> 　　一个正常HTTP请求的流程简述：如在浏览器中输入"www.xxxxxx.com"并按下回车，浏览器再与这个URL指向的服务器建立连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览器接收到来自服务器的应答信息后，对这些数据解释执行。
> 
> 　　而当我们请求的网页文件中有很多**图片、CSS、JS甚至音乐等信息**时，将会频繁的与服务器建立连接，与释放连接，这必定会造成资源的浪费，且每个HTTP请求都会对服务器和浏览器产生性能负担。
> 
> 　　网速相同的条件下，下载一个100KB的图片比下载两个50KB的图片要快。所以，**请减少HTTP请求。**

**解决办法：**

> 　　**合并图片（css sprites），合并CSS和JS文件；图片较多的页面也可以使用 lazyLoad 等技术进行优化。**

**2.　　请正确理解 Repaint 和 Reflow　　 **

**基本原理：**

> 　　Repaint(重绘)就是在一个元素的外观被改变，但没有改变布局(宽高)的情况下发生，如改变visibility、outline、背景色等等。
> 
> 　　Reflow(重排)就是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证DOM树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如：改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化，style属性的改变等等。如果Reflow的过于频繁，CPU使用率就会噌噌的往上涨，所以前端也就有必要知道 Repaint 和 Reflow的知识。

**减少性能影响的办法：**

> 　　上面提到通过设置style属性改变结点样式的话，每设置一次都会导致一次reflow，所以最好通过设置class的方式；　有动画效果的元素，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局；如果功能需求上不能设置position为fixed或absolute，那么就权衡速度的平滑性。
> 
> 　　总之，因为 Reflow 有时确实不可避免，所以只能尽可能限制Reflow的影响范围。

** **

**3.　　减少对DOM的操作　　**

**　　基本原理：**

> 　　对DOM操作的代价是高昂的，这在网页应用中的通常是一个性能瓶颈。
> 
> 　　天生就慢。在《高性能JavaScript》中这么比喻：“把DOM看成一个岛屿，把JavaScript(ECMAScript)看成另一个岛屿，两者之间以一座收费桥连接”。所以每次访问DOM都会教一个过桥费，而访问的次数越多，交的费用也就越多。所以一般建议尽量减少过桥次数。

**　　解决办法：**

> 　　修改和访问DOM元素会造成页面的Repaint和Reflow，循环对DOM操作更是罪恶的行为。所以请合理的使用JavaScript变量储存内容，考虑大量DOM元素中循环的性能开销，在循环结束时一次性写入。
> 
> 　　减少对DOM元素的查询和修改，查询时可将其赋值给局部变量。
> 
> 　　*注：在IE中:hover会降低响应速度。*

** **

**4.　　使用JSON格式来进行数据交换　　**

**　　基本原理：**

> 　　JSON是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript原生格式，这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。
> 
> 　　与XML序列化相比，JSON序列化后产生的数据一般要比XML序列化后数据体积小，所以在Facebook等知名网站中都采用了JSON作为数据交换方式。

**　　JS操作JSON：**

> 　　在JSON中，有两种结构：对象和数组。
> 
> 　　1. 一个对象以 “ \{ ”  开始，“ \} ” 结束。每个“名称”后跟一个 “ : ” ；“名称/值 对”之间使用 “ ,  ”（逗号）分隔。 名称用引号括起来；值如果是字符串则必须用引号括起来，数值型则不需要。如：
> 
>     var obj={
>         "name":"darren","age":24,"location":"beijing"}
> 
> 　　2. 数组是值（value）的有序集合。一个数组以 “ \[ ” 开始， “ \] ” 结束。值之间使用 “ , ” （逗号）分隔。如：
> 
>     var jsonlist=[{
>         "name":"darren","age":24,"location":"beijing"},{
>         "name":"weidong.nie","age":24,"location":"hunan"}];
> 
> 　　对这种数组和对象字面量的操作是非常方便且高效的。如果预先知道JSON结构的情况下，使用JSON进行数据传递简直是太美妙了，可以写出很实用美观可读性强的代码。如果你是纯粹的前台开发人员，一定会非常喜欢JSON。

** **

**5.　　高效使用HTML标签和CSS样式　　**

**　　基本原理：**

> 　　HTML是一门用来描述网页的一种**语言**，它使用标记标签来描述网页，作为一名合格的前端开发，你有必要去知道其常用标签代表的含义(SEO)和属性(表现形式)。
> 
> 　　CSS指层叠样式表 (*C*ascading *S*tyle *S*heets)，如果说把页面想象成一个人，HTML就是人的骨架，CSS就是人的衣装，一个人的品味从他的衣装就能一目了然。
> 
> 　　一名专业的前端开发也是一名优秀的重构，因为在页面中经常会有各种不合理的嵌套和重复定义的CSS样式，我不是要你重构页面，只是希望你在碰到这种情况的时候解决这些问题。如这样的HTML：
> 
>     <table><tr><td>
>     　　<table><tr><td>
>     　　　　...
>     　　</td></tr></table>
>     </td></tr></table>
> 
> 或者这样的CSS:
> 
>     body .box .border ul li p strong span{color:#000}
> 
>  　　以上都是对HTML和CSS非常糟糕的使用方法。

**　　正确理解：**

> 　　HTML是一门标记语言，使用合理的HTML标签前你必须了解其属性，比如Flow Elements，Metadata Elements ，Phrasing Elements。比较基础的就是得知道块级元素和内联元素、盒模型、SEO方面的知识。
> 
> 　　CSS是用来渲染页面的，也是存在渲染效率的问题。CSS选择符是从右向左进行匹配的，这里对css选择符按照开销从小到大的顺序梳理一下：　
> 
>     　　ID选择符 #box
>     　　类选择符 .box  
>     　　标签 div
>     　　伪类和伪元素 a:hover
> 
> 　　当页面被触发引起回流（reflow）的时候，低效的选择符依然会引发更高的开销，所以请避免低效。

** **

**6.　　使用CDN加速（内容分发网络）　　**

**　　基本原理：**

> 　　CDN的全称是Content Delivery Network，即内容分发网络。
> 
> 　　"其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。" - 百度百科。

**　　不足之处：**

> 　　实时性不太好是CDN的致命缺陷。随着对CDN需求的逐渐升温，这一缺陷将得到改进，使来自于远程服务器的网络内容网页与复本服务器或缓存器中的网页保持同步。解决方法是在网络内容发生变化时将新的网络内容从服务器端直接传送到缓存器，或者当对网络内容的访问增加时将数据源服务器的网络内容尽可能实时地复制到缓存服务器。   
>

** **

**7.　　将CSS和JS放到外部文件中引用，CSS放头，JS放尾　　**

**　　基本原理：**

> 　　注：这个是很基础且必须遵循的知识点，可是为了文章的完整性勉为其难加进来吧，嘿嘿。
> 
> 　　引入外部文件好处是显而易见的，而且是项目稍稍复杂一点的时候就有必要了这样做了。
> 
> 　　易维护、易扩展，方便管理和重复利用。

**　　正确的方式：**

> 　　JavaScript是浏览器中的霸主，为什么这么说，因为在浏览器在执行JavaScript代码时，不能同时做其它事情，即<script>每次出现都会让页面等待脚本的解析和执行（不论JavaScript是内嵌的还是外链的），JavaScript代码执行完成后，才继续渲染页面。这个也就是JavaScript的阻塞特性。
> 
> 　　因为这个阻塞的特点，建议把JavaScript代码放到</body>标签以前，这样既能有效的防止JavaScript的阻塞，又能使得页面的HTML结构能更快的释放。
> 
> 　　HTML规范清楚指出CSS要放包含在页面的<head>区域内，这里就不多解释了。

** **

**8.　　精简CSS和JS文件　　**

**　　基本原理：**

> 　　有一条非常重要的准则一直没有提到，就是CSS和JavaScript的压缩，直接减少下载的文件体积。我个人经常使用的方式是使用 **YUI Compressor**，它的特点是：移除注释；移除额外的空格；细微优化；标识符替换。
> 
> 　　YUI Compressor是java程序，如果你对java很熟悉的话可快速的上手使用yuicompressor.jar；如果你对java很陌生也没关系，一样可以使用YUI Compressor，下面介绍其使用方式。

**　　YUI Compressor的配置和使用：**

> 　　先配置使用环境：
> 
> 　　1.先确保电脑中是否安装了JDK
> 
> 　　2.再配置必要的环境变量(细节不能三两句说清，所以不知道如何设置还是搜索吧)
> 
> 　　3.在cmd界面，输入javac可测试是否安装成功
> 
> 　　使用方法可从cmd到进入yuicompressor.jar所在磁盘，我以自己的yuicompressor-2.4.2.jar为例：
> 
> 　　1.压缩JS
> 
>     　　java -jar yuicompressor-2.4.2.jar api.js > api.min.js
> 
> 　　2.压缩CSS
> 
>     　　java -jar yuicompressor-2.4.2.jar style.css > style.min.css
> 
> 　　![2011123123284580.jpg][]
> 
> 　　当然，还有另一种更傻瓜式的使用方式，赶兴趣的朋友自己可去多尝试下。

** **

**9.　　压缩图片和使用图片Sprite技术　　**

**　　基本原理:**

> 　　注：其实压缩图片和图片精灵是两个方面的技术，可是既然都是关于图片的优化还是放到一块吧。
> 
> 　　现在由于工作的细分，专业的前端工程师已经少有机会去切图了，可是关于图片压缩还是得略微了解，一般图片压缩的方式有：
> 
> 　　1.缩小图片分辨率；
> 
> 　　2.改变图片格式；
> 
> 　　3.降低图片保存质量。
> 
> 　　关于图片精灵(Sprite)技术就和我们工作直接相关，不管是在CSS中的图片还是在HTML结构中的图片都会产生HTTP请求，前端优化的第一条就是减少请求数，最直接有效的方法是使用图片精灵（CSS Sprite）。图片精灵就是把许多图片放到一张大图片里面，通过CSS来显示图片的一部分。
> 
> 　　至于图片精灵的操作细节就不多做介绍了，网上相关内容很多。

**10.　　注意控制Cookie大小和污染　　**

基本原理和使用方法：

> 　　有关Cookie的基础和高级知识可以去看本人写过的一篇文章[《JavaScript 操作 Cookie》][JavaScript _ Cookie]。
> 
> 　　因为Cookie是本地的磁盘文件，每次浏览器都会去读取相应的Cookie，所以建议去除不必要的Coockie，使Coockie体积尽量小以减少对用户响应的影响；
> 
> 　　使用Cookie跨域操作时注意在适应级别的域名上设置coockie以便使子域名不受其影响
> 
> 　　Cookie是有生命周期的，所以请注意设置合理的过期时间，合理地Expire时间和不要过早去清除coockie，都会改善用户的响应时间。  
> 
> 
>   
>

**11.　　添加http Expires头　**

> 为图片视频之类很少改变的资源设置长的Expires时间将直接减少http请求
> 
>  *  如果资源设置了Expires头为将来的某个时间,下次访问时候浏览器发现资源还没有过期,会直接从缓存中读取,不会再次产生http请求
> 
> 另外一个有点类似的概念是条件Get请求,某些资源比如JS文件,如果我们总是需要最新的JS文件,那么可以设置条件Get请求去服务端验证本地的资源是否需要更新.这种情况下浏览器会向Server发送一个http请求,如果资源没有更新,会返回一个http 304的response,如果资源跟新,则重新下载资源:
> 
> ![9a592186-9348-3821-88c8-ad1c0a06fa1b.png][]
> 
>  
> 
> 条件Get请求每次都会产生一个304的请求  
>

**11.    寻找一种避免重定向的方法**

> 重定向用于将用户从一个URL路由到另一个URL。重定向有很多种，其中301和302是最常用的两种。下面是一个301响应头的示例：  
> 
> 
> *HTTP/1.1 301 Moved Permanently*  
> 
> 
> *Location: http://example.com/newuri*  
> 
> 
> *Content-Type: text/html*
> 
> 浏览器会自动将用户带到Location字段给出的URL。重定向所必需的所有信息都包含在这个头中，响应体通常是空的。不管叫什么名字，301或者302响应在实际中都不会被缓存，除非有附加的头（如Expires或Cache-Control等）要求它这么做。meta refresh标签和JavaScript也可以用于重定向，但是最好的技术是使用标准的3xx状态码，以保证后退按钮能够正常工作。
> 
> 需要我们记住的是重定向会使页面变慢。在用户和HTML文档间插入一个重定向后，在此HTML文档到达之前页面上不会描绘任何东西，任何组件也不会被下载。
> 
> 有一种重定向最为浪费，发生的也很频繁，但是Web开发人员通常都没有意识到它，它发生在URL的结尾必须出现斜线（/）而没有出现的情形。例如访问地址http://astrology.yahoo.com/astrology将导致一个301响应包含重定向至http://astrology.yahoo.com/astrology/。当主机名后缺少结尾斜线时不会发生重定向。在Apache中，我们可以通过Alias指令或者mod\_rewrite模块或者DirectorySlash指令来处理缺少结尾斜线时的重定向问题。
> 
> 从一个旧的站点链接到新的站点是使用重定向的另一种常见场景。其他形式还包括将一个网站的不同部分连接起来，以及基于一些条件（浏览器类型、用户帐户类型等）来引导用户。使用重定向来连接两个网站很简单而且只需要很少的额外代码。但是，虽然重定向降低了开发的复杂性，也损害了用户体验，通常可以进行其他的选择：如果两个代码的路径在同一台服务器上，可以使用Alias和mod\_rewrite；如果域名由于重定向发生改变，可以使用一个CNAME（一条DNS记录，用于创建一个域名指向另一个域名的别名）让两个主机名指向相同的服务器，然后使用Alias和mod\_rewrite。

**12.   移除重复的脚本**

> 在一个页面中两次保护同一个JavaScript文件会损伤性能。导致一个脚本重复的因素主要有两个——团队大小和脚本数量。
> 
> 当重复脚本的现象发生时，将产生不必要的HTTP请求和浪费执行JavaScript的时间。不必要的HTTP请求会发生在IE中，而不会发生在Firefox中。在IE中，如果脚本被包含两次且没有被缓存，浏览器会在页面加载期间产生两个HTTP请求；即使脚本可以缓存，当用户重新加载页面时也会产生额外的HTTP请求。对JavaScript进行的多余的执行从而浪费时间的现象在IE和Firefox中都存在，与脚本是否被缓存无关。
> 
> 避免意外包含同一脚本两次的一种方法是在你的模块系统中实现一个脚本管理模块。包含脚本的典型方式是在HTML页面中使用SCRIPT标签：  
> 
> 
> *<script type=”text/javascript” src=”menu\_1.0.17.js”></script>*
> 
> 另一种选择是在PHP中创建一个函数：  
> 
> 
> *<?php insertScript(“menu.js”) ?>*
> 
> 为了防止统一个脚本被重复添加多次，insertScript函数需要添加处理脚本的依赖性和版本的功能。

1**3.     配置Etag**

> 实体标签（Entity Tag，ETag）是Web服务器和浏览器用于确认缓存组件的有效性的一种机制。ETag在HTTP1.1中引入，用于检测浏览器缓存中的组件与原始服务器上的组件是否匹配。ETag是唯一标识了一个组件的一个特定版本字符串。唯一的约束是该字符串必须用引号引起来。原始服务器使用Etag响应头来指定组件的ETag。
> 
> *HTTP/1.1 200 OK*  
> 
> 
> *Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT*  
> 
> 
> *ETag: “10c24bc-4ab-457e1c1f”*  
> 
> 
> *Content-Length: 12195*
> 
> 此后，如果浏览器必须验证一个组件，它会使用If-None-Match头将ETag传回原始服务器。如果ETag是匹配的，就会返回304状态码，在此例中使响应减少12195字节。
> 
> *GET /i/yahoo.gif HTTP/1.1*  
> 
> 
> *Host: us.yimg.com*  
> 
> 
> *f-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT*  
> 
> 
> *If-None-Match: “10c24bc-4ab-457e1c1f”*  
> 
> 
> *HTTP/1.1 304 Not Modified*
> 
> ETag的问题在于，通常使用组件的某些属性来构造它，这些属性对于特定的、寄宿了网站的服务器来说是唯一的。当浏览器从一台服务器上获取了原始组件之后又尝试向另一台服务器来验证组件时，ETag是不匹配的。这种情况对于使用服务器集群来处理请求的网站来说是很常见的一种情况。默认情况下，Apache和IIS向ETag中嵌入的数据都会大大降低有效性验证的成功率。
> 
> Apache1.3和2.x的ETag格式是inode-size-timestamp。文件系统使用inode来存储诸如文件类型、所有者、组和访问模式等信息。尽管在多台服务器上一个给定的文件可能位于相同的目录、具有相同的文件大小、权限、时间戳等，从一台服务器到另一台服务器，器inode仍然是不同的。  
> IIS5.0和6.0在ETag上有着类似的问题。IIS上ETag的格式是Filetimestamp:ChangeNumber。ChangeNumber适用于跟踪IIS配置变化的计数器。对于一个网站背后的所有IIS服务器来说，ChangeNumber不大可能相同。  
> 最
> 
> 终的结果是，对于完全相同的组件，从一台服务器到另一台，Apache和IIS产生的ETag是不会匹配的。如果ETag不匹配，用户就不会按照ETag的设计计划那样接收到更小更快的304响应；相反，它们会收到普通的200响应以及组件的所有数据。如果只在一台服务器上部署网站，这通常不会产生问题；但如果使用了服务器集群，同时使用Apache或者IIS进行默认的ETag配置，用户响应将变慢，服务器负载将变高，将消耗更多的带宽，同时代理缓存的效率也会下降。即使组件具有长久的Expires头，一旦用户单击了Reload或Refresh按钮，依然会产生条件GET请求。  
> 如果组件必须通过最新修改日期之外的一些东西来进行验证，则ETag是一种强大的方法；如果无须自定义ETag，则最好将其移除。Last-Modified头基于组件的时间戳进行验证，可以提供完全等价的信息，而且移除ETag可以减少响应和后续请求的HTTP头的大小。在Apache中，只要向Apache配置文件中简单地添加下面一行配置就能移除ETag：  
> FileETag none

**14.      确保Ajax请求遵守性能知道,必要时候应具备长久的expires头**

> Ajax的一个最重要的优点就是向用户提供即时反馈，因为它异步的从后台Web服务器请求信息。但是，使用Ajax并不保证用户不会等到异步的JavaScript和XML返回响应。在很多应用程序中，用户是否需要等待取决于如何使用Ajax。用户是否需要等待的关键因素在于Ajax请求是主动的还是被动的。主动请求是基于用户的当前操作而发起的，被动请求则是为了将来使用而预先发起的。我们需要注意的是，“异步”并没有暗示“实时”。
> 
> 为了提升性能，最重要的是优化Ajax响应。而改善这些主动Ajax请求的最重要的方式就是使响应可缓存。如同在“添加Expires头”中讨论的，一些其他规则也适用于Ajax，包括：压缩组件、减少DNS查找、精简JavaScript、避免重定向、配置Etag。
> 
>   
>

[2011123123284580.jpg]: /images/20220718/173269572fc14aeca49955d25be0e0f4.png
[JavaScript _ Cookie]: http://blog.csdn.net/gongzhuxiaoxin/article/details/52259890
[9a592186-9348-3821-88c8-ad1c0a06fa1b.png]: /images/20220718/eeeb91e0c9b44da089aab9ec26f59de6.png