WEB前端性能优化-如何提高页面加载速度

aaaaa:了解 ,aaaaa:重点,aaaaa:不懂

一、减少http请求

1)图片合并,使用map

<img src="http://www.likecs.com/planets.jpg" usemap="#planetmap" alt="Planets" /> <map> <area shape="rect" coords="180,139,14" href ="http://www.likecs.com/venus.html" alt="Venus" /> <area shape="rect" coords="129,161,10" href ="http://www.likecs.com/mercur.html" alt="Mercury" /> <area shape="rect" coords="0,0,110,260" href ="http://www.likecs.com/sun.html" alt="Sun" /> <area shape="rect" coords="140,0,110,260" href ="http://www.likecs.com/star.html" alt="Sun" /> </map>

缺点:只能选择矩形区域

2)CSS Sprites雪碧图
3)使用字体图标,用css控制大小和颜色
4)合并脚本(js)和css文件

二、使用CDN

如果应用程序web服务器离用户更近,那么一个HTTP请求的响应时间将缩短。另一方面,如果组件web服务器离用户更近,则多个HTTP请求的响应时间将缩短。

 CDN(内容发布网络)是一组分布在多个不同地理位置的Web服务器,用于更加有效地向用户发布内容。在优化性能时,向特定用户发布内容的服务器的选择基于对网络慕课拥堵的测量。例如,CDN可能选择网络阶跃数最小的服务器,或者具有最短响应时间的服务器。

CDN还可以进行数据备份、扩展存储能力,进行缓存,同时有助于缓和Web流量峰值压力。

CDN的缺点:

1、响应时间可能会受到其他网站流量的影响。CDN服务提供商在其所有客户之间共享Web服务器组。

2、如果CDN服务质量下降了,那么你的工作质量也将下降

3、无法直接控制组件服务器

三、添加Expires头

页面的初次访问者会进行很多HTTP请求,但是通过使用一个长久的Expires头,可以使这些组件被缓存,下次访问的时候,就可以减少不必要的HTPP请求,从而提高加载速度。

Web服务器通过Expires头告诉客户端可以使用一个组件的当前副本,直到指定的时间为止。例如:

Expires: Fri, 18 Mar 2016 07:41:53 GMT

Expires缺点: 它要求服务器和客户端时钟严格同步;过期日期需要经常检查

HTTP1.1中引入Cache-Control来克服Expires头的限制,使用max-age指定组件被缓存多久。

Cache-Control: max-age=12345600

若同时制定Cache-Control和Expires,则max-age将覆盖Expires头

四、压缩组件

从HTTP1.1开始,Web客户端可以通过HTTP请求中的Accept-Encoding头来表示对压缩的支持

Accept-Encoding: gzip,deflate

如果Web服务器看到请求中有这个头,就会使用客户端列出来的方法中的一种来进行压缩。Web服务器通过响应中的Content-Encoding来通知 Web客户端。

Content-Encoding: gzip

代理缓存  

当浏览器通过代理来发送请求时,情况会不一样。假设针对某个URL发送到代理的第一个请求来自于一个不支持gzip的浏览器。这是代理的第一个请求,缓存为空。代理将请求转发给服务器。此时响应是未压缩的,代理缓存同时发送给浏览器。现在,假设到达代理的请求是同一个url,来自于一个支持gzip的浏览器。代理会使用缓存中未压缩的内容进行响应,从而失去了压缩的机会。相反,如果第一个浏览器支持gzip,第二个不支持,你们代理缓存中的压缩版本将会提供给后续的浏览器,而不管它们是否支持gzip。

解决办法:在web服务器的响应中添加vary头Web服务器可以告诉代理根据一个或多个请求头来改变缓存的响应。因为压缩的决定是基于Accept-Encoding请求头的,因此需要在vary响应头中包含Accept-Encoding。

vary: Accept-Encoding

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zggxfd.html