网页加载速度优化方法总结

 

一、减小请求

 

最大的性能漏洞就是一个页面须要发起几十个网络请求来获取诸如样式表、脚本或者图片这样的资源，这个在相对低带宽和高延迟的移动设备链接上来讲影响更严重。

 

二、整合资源

 

对开发者来讲，将Javascript代码和CSS样式放到公共的文件中供多个页面共享是一种标准的优化方法，这个方法能很简单的维护代码，而且提升客户端缓存的使用效率。

在Javascript文件中，要确保在一个页面中相同的脚本不会被加载屡次，当大团队或者多个团队合做开发的时候，这种冗余的脚本就很容易出现，你可能会对它的发生频率并不低感到很是吃惊。

Sprites是css中处理图片的一项技术，Sprites就是将多张图片整合到一个线性的网状的大图片中，页面就能够将这个大图片一次性获取回来而且作为css的背景图，而后使用css的背景定位属性展现页面须要的图片部分，这种技术将多个请求整合成一个，能显著地改善性能。

 

 

三、使用浏览器缓存和本地缓存

 

如今全部的浏览器都会使用本地资源去缓存住那些被Cache一Control或者Expires头标记的资源，这些头能标记资源须要缓存的时间，另外，ETag（实体标签）和Last一Modified头来标识当资源过时后是否须要从新请求，浏览器为了减小没必要要的服务器请求，尽量地从本地缓存中获取资源，而且将那些已通过期的、或者当缓存空间减少的时候将那些好久不用的资源进行清理，浏览器缓存一般包括图片，CSS，Javascript代码，这些缓存能合理地提升网站的性能（好比为了支持后退和前进的按钮，使用一个单独的缓存来保存整个渲染的页面）。

 

 

四、首次使用的时候在HTML中嵌入资源

 

 

HTML的标准是使用连接来加载外部资源，这使得更容易在服务器上（或者在CDN上）操做更新这些资源，而不是在每一个页面上修改更新这些资源，根据上文讨论的，这种模式也使得浏览器能从本地缓存而不是服务器上获取资源。

 

 

五、使用HTML5服务端发送事件

Web应用已经使用了各类从服务器上轮询资源的方法来持续地更新页面，HTML5的EventSource对象和Server一Sent事件能经过浏览器端的JavaScript代码打开一个服务端链接客户端的单向通道，服务端可使用这个写通道来发送数据，这样能节省了HTTP建立多个轮询请求的消耗。

这种方式比HTML的WebSocket更高效，WebSocket的使用场景是，当有许多客户端和服务端的交互的时候（好比消息或者游戏），在全双工链接上创建一个双向通道。

这个技术是基于具体的技术实现的，若是你的网站当前是使用其余的Ajax或者Comet技术来轮询的，转变成Server一Sent事件须要重构网站的Javascript代码。

六、消除重定向

 

当用户在一个移动设备上访问桌面PC网站的时候，Web网站应用一般读取HTTP的user一agent头来判断这个用户是不是来自移动设备的，而后应用会发送带有空HTTP body和重定向HTTP地址头的HTTP 301（或者302）请求，把用户重定向到网站的移动版本上去，可是这个额外的客户端和服务端的交互一般在移动网络上会消耗几百毫秒，所以，在原先的请求上传递移动的web页会比传递一个重定向的信息并让客户端再请求移动页面更快。

七、减小资源负载

关于移动端页面的大小问题，渲染小页面更快，获取小资源也更快，减少每一个请求的大小一般不如减小页面请求个数那么显著地提升性能。

可是有些技术在性能方面，特别是在须要对带宽和处理器性能精打细算的移动设备环境下，仍然是能带来很大利益的。

八、压缩文本和图像

诸如gzip这样的压缩技术，依靠增长服务端压缩和浏览器解压的步骤，来减小资源的负载，可是，通常来讲，这些操做都是被高度优化过了，并且测试代表，压缩对网站仍是起到优化性能的做用的，那些基于文本的响应，包括HTML，XML，JSON（Javascript Object Notation），Javascript，和CSS能够减小大约70%的大小。

九、代码简化

 

简化带来的好处并不局限于减小带宽和延迟，对于那些移动设备上缓存没法保存的过大资源来讲，也是颇有改善的，Gzip在这个方面并无任何帮助，由于资源是在被解压后才被缓存起来的。

 

十、调整图片大小

图片一般是占用了Web页面加载的大部分网络资源，也占用了页面缓存的主要空间，小屏幕的移动设备提供了经过调整图片大小来加速传输和渲染图片资源的机会，若是用户只是在小的移动浏览器窗口中看图片的话，高分辨率的图片就会浪费带宽、处理时间和缓存空间。

十一、使用HTML5和CSS 3.0来简化页面

这个就不解释了吧!!!!

十二、延迟渲染”BELOW一THE一FOLD”内容

一些好的Javascript库能够用来处理这些below一the一fold 延迟加载的图像。

1三、延迟读取和执行的脚本

在一些移动设备上，解析Javascript代码的速度能达到100毫秒每千字节，许多脚本的库直到页面被渲染之后都是不须要的加载的，下载和解析这些脚本能够很安全地被推迟到onload事件以后来作。

1四、使用Ajax来加强进程

Ajax（Asynchronous JavaScript and XML）是一项使用XHR（XMLHttpRequest）对象来从Web服务器上获取数据的技术，它并不须要更新正在运行的页面，Ajax能更新页面上的某个部分而不须要从新构建整个页面，它一般用来提交用户的交互相应，可是也能够用来先加载页面的框架部分，而后当用户准备好浏览网页的时候再填充详细的内容。

1五、根据网络情况进行适配处理

因为使用更多带宽会使用更多移动网络的费用，因此只有能检测网络的类型才能使用针对特定网络的优化技术。

1六、对多线程来讲尽可能使用HTML5的WEB WORKER特性

对提升移动站点的性能来讲，Web Worker中的代码很适合用来预处理用户完成进一步操做所须要的资源的，特别是在用户的带宽资源不紧缺的状况下，在低处理器性能的移动设备上，过多的预加载可能会干扰当前页面的UI响应，使用多线程代码，让Web Worker对象（而且尽量使用localStorage来缓存数据）在另一个线程中操做预加载资源，这样就能不影响当前的UI表现了。

1七、将CLICK事件替换成TOUCH事件

确保不会产生用户不指望的行为，应该要使用touchstart和touchmove事件

1八、支持SPDY协议

SPDY自动使用gzip压缩全部内容，和HTTP不一样的是，它连header的数据也使用gzip压缩，SPDY使用多线程技术让多个请求流或者响应流能共用一个TCP链接，另外SPDY容许请求设置优先级，好比，页面中心的视频会比边框的广告拥有更高的优先级。