Web前端优化,提高加载速度

研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页。也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%。网站的加载速度严重影响了用户体验,也决定了这个网站的生死存亡。

可能有人会说:网站的性能是后端工程师的事情,与前端并无多大关系。我只能说,too young too simple。事实上,只有10%~20%的最终用户响应时间是用在从Web服务器获取HTML文档并传送到浏览器的,那剩余的时间去哪儿了?来瞄一下性能黄金法则

只有10%~20%的最终用户响应时间花在了下载HTML文档上。其余的80%~90%时间花在了下载页面中的所有组件上。

 
接下来我们将研究一下前端攻城狮如何来提高页面的加载速度。
 

一、减少HTTP请求

上面说到80%~90%时间花在了下载页面中的所有组件进行的HTTP请求上。因此,改善响应时间最简单的途径就是减少HTTP请求的数量。

从WEB运行原理上讲,IIS请求是无状态的,在服务器端一直是连接和关闭的不断进行着,如果能减少服务器请求,总的时间将会减少。

   之前我下载163邮箱的登陆页面的图片时发现,它们的只用到了一个图片来完成整个页面的所有图片,当时我就纳闷了,这跟平时做的网站不一样呀。然来这样做减少浏览器的请求次数,用httpwatch你会发现请求的总时间大大减少了。同样的想法,在做css样式,javascript代码的时候也要做到尽可能的放在一个文件下来减少WEB请求。

二、使用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头
 
四、压缩组件
 
  Jquery 作为JS最轻量级的类库,它的原类库是242KB,压缩后的它竟只有91.6KB。     常见的压缩工具有Google Closure Compiler、YUI Compressor、JsPacker、gzip。我常用的是gzip,因为它的压缩率是最高的。用jdk压缩后它会把一些空格去掉,把我们很长的变量名换成换成很短的字母来代替。
 

五、将样式表放在头部

首先说明一下,将样式表放在头部对于实际页面加载的时间并不能造成太大影响,但是这会减少页面首屏出现的时间,使页面内容逐步呈现,改善用户体验,防止“白屏”。

我们总是希望页面能够尽快显示内容,为用户提供可视化的回馈,这对网速慢的用户来说是很重要的。

 
将样式表放在文档底部会阻止浏览器中的内容逐步出现。为了避免当样式变化时重绘页面元素,浏览器会阻塞内容逐步呈现,造成“白屏”。这源自浏览器的行为:如果样式表仍在加载,构建呈现树就是一种浪费,因为所有样式表加载解析完毕之前务虚会之任何东西
 
六、将脚本放在底部( 这样做可以尽可能的先加载页面的DOM结构,然后才可以级用户体验

更样式表相同,脚本放在底部对于实际页面加载的时间并不能造成太大影响,但是这会减少页面首屏出现的时间,使页面内容逐步呈现。

js的下载和执行会阻塞Dom树的构建(严谨地说是中断了Dom树的更新),所以script标签放在首屏范围内的HTML代码段里会截断首屏的内容。

 
下载脚本时并行下载是被禁用的——即使使用了不同的主机名,也不会启用其他的下载。因为脚本可能修改页面内容,因此浏览器会等待;另外,也是为了保证脚本能够按照正确的顺序执行,因为后面的脚本可能与前面的脚本存在依赖关系,不按照顺序执行可能会产生错误。
 
 
七、使用外部的JavaScript和CSS

内联脚本或者样式可以减少HTTP请求,按理来说可以提高页面加载的速度。然而在实际情况中,当脚本或者样式是从外部引入的文件,浏览器就有可能缓存它们,从而在以后加载的时候能够直接使用缓存,而HTML文档的大小减小,从而提高加载速度。

影响因素:

1、每个用户产生的页面浏览量越少,内联脚本和样式的论据越强势。譬如一个用户每个月只访问你的网站一两次,那么这种情况下内联将会更好。而如果该用户能够产生很多页面浏览量,那么缓存的样式和脚本将会极大减少下载的时间,提交页面加载速度。

2、如果你的网站不同的页面之间使用的组件大致相同,那么使用外部文件可以提高这些组件的重用率。

加载后下载

 
有时候我们希望内联样式和脚本,但又可以为接下来的页面提供外部文件。那么我们可以在页面加载完成止呕动态加载外部组件,以便用户接下来的访问。
 
 
 
八、精简JavaScript
精简
精简就是从代码中移除不必要的字符以减少文件大小,降低加载的时间。代码精简的时候会移除不必要的空白字符(空格,换行、制表符),这样整个文件的大小就变小了。
 
 
九、使Ajax可缓存

异步与即时

 
Ajax的一个明显的优点就是向用户提供了即时反馈,因为它异步的从后端web服务器请求信息。
 
用户是否需要等待的关键因素在于Ajax请求是被动的还是主动的。被动请求是为了将来使用而预先发起的,主动请求是基于用户当前的操作而发起的

什么样的AJAX请求可以被缓存?

POST的请求,是不可以在客户端缓存的,每次请求都需要发送给服务器进行处理,每次都会返回状态码200。(可以在服务器端对数据进行缓存,以便提高处理速度)

GET的请求,是可以(而且默认)在客户端进行缓存的,除非指定了不同的地址,否则同一个地址的AJAX请求,不会重复在服务器执行,而是返回304。

Ajax请求使用缓存

在进行Ajax请求的时候,可以选择尽量使用get方法,这样可以使用客户端的缓存,提高请求速度。

 

posted on 2017-02-19 16:44  日光下的曼雪-正版  阅读(402)  评论(0编辑  收藏  举报

导航