本文详细介绍前端性能优化策略，包括减少HTTP请求、提前加载、减少DOM操作、使用缓存、优化网络连接、代码优化等，旨在提升用户体验，缩短页面加载时间。
性能优化对于用户体验无疑是非常重要的，下面介绍一些性能优化的方法。
Web前端性能优化——如何提高页面加载速度
为什么要提升web性能？
Web性能黄金准则：只有10% ~ 20%的最终用户响应时间花在了下载html文档上，其余的80%~90%时间花在了下载页面组件上。 web性能对于用户体验有及其重要的影响，根据著名的2-5-8原则：
当用户在2秒以内得到响应，会感觉系统的响应非常快
当用户在2-5秒之内得到响应，会感觉系统的响应速度还可以
当用户在5-8秒之内得到响应，会感觉系统的响应非常慢，但还可以接受
当用户在8秒之后都没有得到响应，会感觉系统糟透了，甚至系统已经挂掉；要么打开竞争对手的网站，要么重新发起第二次请求
一.减少操作量
尽量减少 HTTP 请求
1.合并文件，比如把多个 CSS 文件合成一个；
2. CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位； 2) CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位；
3. 不要在 HTML 中使用缩放图片 缩放图片并没有减少图片的容量，只是控制了图片的大小。 Image压缩
4. 使用工具对图片进行压缩，保证质量的同时减少了图片的大小。 减少对DOM的操作 减少对DOM的操作，减少页面的重绘。
二、提前做加载操作
- 对域名进行预解析
eg:京东的做法
<link rel="dns-prefetch" href="//misc.360buyimg.com" />
- 预载入组件或延迟载入组件
- 把 CSS 放到代码页上端
CSS 放到最顶部，浏览器能够有针对性的对 HTML 页面从顶到下进行解析和渲染。 - 使用 new Image对象，对图片进行缓存
三、减少对DOM的操作
基本原理：对DOM操作的代价是高昂的，这在网页应用中的通常是一个性能瓶颈。
在《高性能JavaScript》中这么比喻：“把DOM看成一个岛屿，把JavaScript(ECMAScript)看成另一个岛屿，两者之间以一座收费桥连接”。所以每次访问DOM都会教一个过桥费，而访问的次数越多，交的费用也就越多。所以一般建议尽量减少过桥次数。
方法：
- DOM 的多个读操作（或多个写操作），应该放在一起。不要两个读操作之间，加入一个写操作。
- 如果某个样式是通过重排得到的，那么最好缓存结果。避免下一次用到的时候，浏览器又要重排。
- 不要一条条地改变样式，而要通过改变class，或者csstext属性，一次性地改变样式。
- 尽量使用离线DOM，而不是真实的网面DOM，来改变元素样式。比如，操作Document Fragment对象，完成后再把这个对象加入DOM。再比如，使用 cloneNode()
方法，在克隆的节点上进行操作，然后再用克隆的节点替换原始节点。- 先将元素设为display: none（需要1次重排和重绘），然后对这个节点进行100次操作，最后再恢复显示（需要1次重排和重绘）。这样一来，你就用两次重新渲染，取代了可能高达100次的重新渲染。
- position属性为absolute或fixed的元素，重排的开销会比较小，因为不用考虑它对其他元素的影响。
- 只在必要的时候，才将元素的display属性为可见，因为不可见的元素不影响重排和重绘。另外，visibility : hidden的元素只对重绘有影响，不影响重排。
- 使用虚拟DOM的脚本库，比如React等。
9.使用 window.requestAnimationFrame()、window.requestIdleCallback() 这两个方法调节重新渲染。
四、添加Expires头
在设计web页面的时候，首次访问的响应时间并不是唯一需要考虑的：
通过一个长久的Expires头，可以使得这些组件被缓存，这样在后续的请求中可以避免很多不必要的http请求，需要添加的包括图片、css、脚本，即所有的组件上。只有在用户已经访问了你的网站之后，长久的Expires头才会对页面浏览产生影响。
当用户第一次访问你的网站的时候，它不会对HTTP请求的数量产生任何影响。故其性能的改进取决于用户在访问你的页面的时候是否有完整的缓存。
为图片使用长久的Expires头非常普遍， 但是这一最佳实践不应当仅仅用在图片上，长久的Expired头应该包括任何不经常变化的组件，包括脚本、样式表和Flash组件。但是HTML文档不应该使用长久的Expires头，因为他包含动态内容，这些内容在每次用户请求时都将不断刷新。
注意： Expires的缺点是必须保证浏览器和服务器的时间严格一致，否则就会出现问题。
五、优化网络连接
网络连接的优化主要有三个规则：使用CDN加速、减少DNS查找、避免重定向
CDN：CDN是地理上分布的web server的集合，用于更高效地发布内容。通常基于网络远近来选择给具体用户服务的web
server。 这缩短了资源的传输响应时间，有效提高web性能。
DNS用于映射主机名和IP地址，一般一次解析需要20～120毫秒。浏览器会首先根据页面的主机名进行域名解析，在有ISP返回结果之前页面不会加载任何内容，所以减少DNS查找可以有效降低等待时间。为达到更高的性能，DNS解析通常被多级别地缓存，如由ISP或局域网维护的caching server，本地机器操作系统的缓存（如windows上的DNS ClientService），浏览器。
IE的缺省DNS缓存时间为30分钟，Firefox的缺省缓冲时间是1分钟。
我们能做的是尽量减少一个页面的主机名，但要在浏览器最大并行下载数跟dns查找之间做权衡。根据雅虎的研究，最好将主机名控制在2-4个内。
重定向：将一个URL重新路由到另一个URL。重定向功能是通过301和302这两个HTTP状态码完成的，如：
HTTP/1.1 301 Moved Permanently
Location:http://example.com/newuri
Content-Type: text/html
浏览器自动重定向请求到Location指定的URL上，重定向的主要问题是降低了用户体验。这种最耗费资源、经常发生而很容易被忽视的重定向是URL的最后缺少/，导致自动产生结尾斜线的原因是，浏览器在进行get请求是必须指定一些路径；如果没有路径它就会简单的使用文档根。缺少结尾斜线发生重定向是很多web服务器的默认行为。需要在服务器端设置方可消除。
六、浏览器缓存机制
缓存简介：缓存是在打开网页之后，服务器将网页文件（包括css，html，js等）缓存到一个地方，不同的浏览器会缓存到不同的地方。
http缓存是基于HTTP协议的浏览器文件级缓存机制。浏览器缓存就是当你打开一个网页，浏览器会自动下载副本到你电脑上，就相当于你另存为网页到某个地方而已，只不过这里是自动而已。当然不是浏览器能把各种 网页都能下载到本地电脑上，它是有特殊情况。一般html，后者request是get请求，而post一般不缓存。（这个后面会说到）当然客户端缓存是否需要是可以在服务端代码上控制的。那就是响应头。响应头告诉缓存器不要保留缓存，缓存器就不会缓存相应内容；如果请求信息是需要认证或者安全加密的，相应内容也不会被缓存；
Expires设置：
Expires是Web服务器响应消息头字段，在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求。
Cache-control设置:
Cache-Control与Expires的作用一致，都是指明当前资源的有效期，控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。只不过Cache-Control的选择更多，设置更细致，如果同时设置的话，其优先级高于Expires。
- Public指示响应可被任何缓存区缓存。
2.Private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效。
3.no-cache指示请求或响应消息不能缓存
4.no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
5.max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应。
6.min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应。
7.max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息
对于很少变化的静态资源，我们可以考虑使用缓存，并且设置一定的过期时间，可以有效的提升页面的加载速度和带宽的节约
七、代码优化
- 编写代码的时候，更多的使用异步编程
同步编程会导致上面东西玩不成，下面任务也做不了
我们开发的时候可以把某一个区域的模块设置为异步编程，这样只要模块之间没有必然的先后顺序，都可以独立进行加载，不会受到上面模块的堵塞影响
尤其是Ajax的请求数据，我们一般都使用异步编程，最好是基于promise设计模式进行管理
2.在真实项目中，我们尽可能避免一次性循环过多数据，尤其是避免while导致的死循环
-
CSS选择器优化
尽量减少标签选择器的使用 尽可能少用ID标签，多使用样式类选择器（通用性强） 减少选择器前面的前缀 尽量使用CSS3动画，CSS动画都开启了硬件加速 -
避免使用CSS表达式
-
减少页面中的冗余代码，尽可能提高方法的重复使用率：‘低耦合 高内聚’
-
尽量减少闭包的使用
-
编写代码尽可能使用设计模式来构建体系
-
CSS中减少对滤镜的使用
-
善于使用事件委托
八、使用外部的JavaScript和CSS
精简JavaScript
精简就是从代码中移除不必要的字符以减少文件大小，降低加载的时间。代码精简的时候会移除不必要的空白字符（空格，换行、制表符），这样整个文件的大小就变小了。
混淆
混淆是应用在源代码上的另外一种方式，它会移除注释和空白符，同时它还会改写代码。在混淆的时候，函数和变量名将会被转换成更短的字符串，这时代码会更加精炼同时难以阅读。通常这样做是为了增加对代码进行反向工程的难度，这也同时提高了性能。
缺点：混淆本身比较复杂，可能会引入错误。
CSS的精简
- CSS的精简带来的节省一般来说是小于JavaScript精简的，因为CSS中注释和空白相对较少。
- 除了移除空白、注释之外，CSS可以通过优化来获得更多的节省： 合并相同的类； 移除不使用的类；
九、使Ajax可缓存
维基百科中这样定义Ajax：
AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术），指的是一套综合了多项技术的浏览器端网页开发技术。Ajax的概念由杰西·詹姆士·贾瑞特所提出。
传统的Web应用允许用户端填写表单（form），当提交表单时就向Web服务器发送一个请求。服务器接收并处理传来的表单，然后送回一个新的网页，但这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML码往往是相同的。由于每次应用的沟通都需要向服务器发送请求，应用的回应时间依赖于服务器的回应时间。这导致了用户界面的回应比本机应用慢得多。
与此不同，AJAX应用可以仅向服务器发送并取回必须的数据，并在客户端采用JavaScript处理来自服务器的回应。因为在服务器和浏览器之间交换的数据大量减少（大约只有原来的5%）[来源请求],服务器回应更快了。同时，很多的处理工作可以在发出请求的客户端机器上完成，因此Web服务器的负荷也减少了。
类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。虽然其名称包含XML，但实际上数据格式可以由JSON代替，进一步减少数据量，形成所谓的AJAJ。而客户端与服务器也并不需要异步。一些基于AJAX的“派生／合成”式（derivative/composite）的技术也正在出现，如AFLAX。
Ajax的目地是为突破web本质的开始—停止交互方式，向用户显示一个白屏后重绘整个页面不是一种好的用户体验。
异步与即时
Ajax的一个明显的有点就是向用户提供了即时反馈，因为它异步的从后端web服务器请求信息。
用户是否需要等待的关键因素在于Ajax请求是被动的还是主动的。被动请求是为了将来来使用而预先发起的，主动请求是基于用户当前的操作而发起的
什么样的AJAX请求可以被缓存？
POST的请求，是不可以在客户端缓存的，每次请求都需要发送给服务器进行处理，每次都会返回状态码200。（可以在服务器端对数据进行缓存，以便提高处理速度）
GET的请求，是可以（而且默认）在客户端进行缓存的，除非指定了不同的地址，否则同一个地址的AJAX请求，不会重复在服务器执行，而是返回304。
Ajax请求使用缓存
在进行Ajax请求的时候，可以选择尽量使用get方法，这样可以使用客户端的缓存，提高请求速度。
参考来源：
扫一扫
1560
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
