如何提升前端网页加载速度（有哪些前端性能提升策略）

前端性能提升策略有哪些

前端性能提升策略包括：

一、降低HTTP请求量

常用的降低HTTP请求量的方法有：

1、整合图片。当图片数量较多时，可以合并成一张大图，以此减少HTTP请求量。对于经常变化的图片可能不太适合，变化相对稳定的可以考虑。整合大图不仅能降低HTTP请求量，还可以充分利用缓存来提升性能。

2、整合压缩CSS样式表和JS脚本，它们的共同目的是为了降低HTTP连接数。

3、移除不必要的请求。开发编写代码或系统升级后遗留的无效请求连接。

4、充分利用缓存。这里所说的缓存是客户端侧缓存或称浏览器缓存。Expires头信息是客户端侧缓存的重要依据，格式类似于Expires:Sun,20 Dec 2017 23:00:00 GMT。

如果当前时间小于Expires指定的时间，浏览器就会从缓存中直接获取相关的数据信息或html文件，如果当前时间大于Expires指定的时间，浏览器会向服务器发送请求来获取相关数据信息。

以Apache为例，可在Apache的配置文件httpd.conf中设置Expires。

二、图片优化

优化手段：

1、尽可能使用PNG格式的图片，它相对体积较小。

2、对于不同格式的图片，在上线前最好进行一定的优化。

3、图片的延迟加载，也称为懒加载。

三、运用CDN

CDN即内容分发网络，可以令用户就近获取所需内容，解决网络拥堵问题，提升用户访问网站的响应速度。

四、启用GZIP

GZIP即数据压缩，用于压缩通过Internet传输的所有文本资源。启用GZIP的方法很简单，只需在对应的web服务配置文件中进行设置即可。以Apache为例，在配置文件httpd.conf中添加。

五、样式表和JS文件的优化

通常我们会把CSS样式表文件放置在文件的头部。例如，放置在＜head>标签中，这样可以让CSS样式表尽早地完成下载。对于JS脚本文件，一般将其放置在页面尾部。

六、使用无cookie域名

无cookie域名的概念：当发送一个请求时，同时还要请求一张静态的图片和发送cookie时，服务器对于这些cookie不会做任何使用，也就是说这些cookie没什么用，无需随请求一同发送。

如何对前端性能进行提升

前端开发代码优化、可维护性、浏览器兼容性是非常重要的课题。从实际的工程应用角度出发，最常遇到的前端提升问题。前端性能提升规则，基本可以涵盖现在前端大部分的性能提升原则了，很多更加专业和精细的提升方法都是从这些原则中延伸出来的。

前端性能提升都有哪些规则

降低HTTP请求次数

尽量整合图片、CSS、JS。例如，加载一个页面有5个CSS文件的话，把这个5个文件合并成一个的话，就只需要发出一次HTTP请求，节省网络请求时间，加快页面的加载。

2.使用CDN

网站上静态资源即CSS、JS全都使用CDN分发，包括图片

3.避免空的src和href

当link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把当前页面的URL作为它们的属性值，从而把页面的内容加载进来作为它们的值。所以要避免犯这样的疏忽。

4.为文件头指定Expires

Expires用于设置文件的过期时间，一般对CSS、JS、图片资源有效。它可以使内容具有缓存性，这样下回再访问同样的资源时就通过浏览器缓存区读取，不需要再发出HTTP请求。如下例子：

新浪微博的这个CSS文件的Expires时间是2016-5-04 09:14:14.

5.使用gzip压缩内容

gzip能够压缩任何一个文本类型的响应，包括html，xml，json。大大缩小请求返回的数据量。

6.把CSS放到顶部

网页上的资源加载时从上网下顺序加载的，所以CSS放在页面的顶部能够优先渲染页面，让用户感觉页面加载很快。

7.把JS放到底部

加载JS时会对后续的资源造成阻塞，必须得等JS加载完才去加载后续的文件，所以就把JS放在页面底部最后加载。

8.避免使用CSS表达式

举个CSS表达式的例子

font-color: expression((new Date()).getHours()%3?"#FFFFFF":"#AAAAAA");

这个表达式会持续在页面上计算样式，影响页面的性能。并且CSS表达式只被IE支持。

9.将CSS和JS放到外部文件中

目的是缓存文件，可以参考规则4。但有时候为了减少请求，也会直接写到页面里，需根据PV和IP的比例权衡。

10.权衡DNS查找次数

减少主机名可以节省响应时间。但同时，需要注意，减少主机会减少页面中并行下载的数量。

IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时，IE用户的图片下载速度就会受到影响。所以新浪会搞N个二级域名来放图片。

下面是新浪微博的图片域名，我们可以看到他有多个域名，这样可以保证这些不同域名能够同时去下载图片，而不用排队。不过如果当使用的域名过多时，响应时间就会慢，因为不同域名的时间不一致。

11.精简CSS和JS

这里就涉及到CSS和JS的压缩了。比如下面的新浪的一个CSS文件，把空格回车全部去掉，减少文件的大小。现在的压缩工具有很多，基本主流的前端构建工具都能进行CSS和JS文件的压缩，如grunt，glup等。

12.避免跳转

有种现象会比较坑爹，看起来没什么差别，其实多次了一次页面跳转。比如当URL本该有斜杠（/）却被忽略掉时。例如，当我们要访问http:// baidu.com时，实际上返回的是一个包含301代码的跳转，它指向的是http:// baidu.com/（注意末尾的斜杠）。在nginx服务器可以使用rewrite；Apache服务器中可以使用Alias或者 mod_rewrite或者the DirectorySlash来避免。

有一种情况相当棘手，表面看似无二，实则经历了一次页面转向。例如，当URL理应包含斜杠（/）却被省略时。例如，当我们试图访问http:// baidu.com时，实际上会收到一个包含301代码的转向，它指向的是http:// baidu.com/（请注意末尾的斜杠）。在nginx服务器中，可以使用rewrite指令；而在Apache服务器中，可以使用Alias或mod_rewrite或DirectorySlash指令来避免此类情况。

另一种情况是避免域名之间的转向，例如，从http:// baidu.com/bbs转向到http:// bbs.baidu.com/。可以通过使用Alias或mod_rewirte指令建立CNAME（保存一个域名和另一个域名之间关系的DNS记录）来替代。

13.消除重复的JS和CSS

脚本重复调用不仅会增加额外的HTTP请求，而且多次计算也会浪费资源。在IE和Firefox中，无论脚本是否可缓存，都存在重复执行JavaScript的问题。

14.配置ETags

它用于判断浏览器缓存中的元素是否与服务器上的一致。相较于last-modified date更具灵活性，例如，某个文件在1秒内修改了10次，ETag可以综合考虑Inode（文件的索引节点(inode)数）、MTime（修改时间）和Size（大小）来精确判断，从而避免UNIX记录MTime只能精确到秒的问题。在服务器集群中使用时，可以取后两个参数。使用ETags可以减少Web应用的带宽和负载。

15.缓存AJAX请求

异步请求同样会导致用户等待，因此在使用ajax请求时，应主动告知浏览器如果该请求有缓存，则直接使用缓存。如下代码片段，cache：true表示显式要求如果当前请求有缓存，则直接使用缓存。

$.ajax({ url:'url', dataType:"json", cache: true, success: function(son, status){} })

16.使用GET方法完成AJAX请求

当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。因此，使用GET方法获取数据更具意义。

17.减少DOM元素数量

这是一个深奥的话题，这里可以引申出许多优化的细节。想要深入了解，可以参考后面推荐的书籍。总之，减少DOM数量可以减轻浏览器的解析负担。

18.避免404错误

例如，外链的css、js文件出现问题返回404错误时，会破坏浏览器的并行加载。

19.减小Cookie的大小

不要在Cookie中存储过多信息，因为每个请求都需要携带它。

20.使用无cookie的域

例如，CSS、js、图片等静态文件，客户端请求时，减少了Cookie的反复传输对主域名的影响。

21.避免使用滤镜

IE独有的AlphaImageLoader属性用于修正7.0以下版本中PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时会终止内容的呈现并冻结浏览器。在每一个元素（不仅仅是图片）上都会进行一次计算，增加了内存开销，因此问题多方面。

完全避免使用AlphaImageLoader的最佳方法是使用PNG8格式来代替，这种格式在IE中可以很好地工作。如果确实需要使用AlphaImageLoader，请使用下划线_filter使其对IE7以上版本的用户无效。

22.避免在HTML中缩放图片

例如，如果需要的图片尺寸是5050，则不需要使用一张500500的大尺寸图片，这会影响加载速度。

23.缩小favicon.ico并缓存