Web标准中用于改善Web应用程序性能的各种方法总结
提起Web应用程序中的性能改善,广大开发者们可能会想到JavaScript与DOM访问等基于各种既存技术的性能改善方法。最近,各种性能改善方法被汇总成为一个Web标准。
本文对Web标准中所包含的各种Web应用程序性能改善方法做一总体介绍。
1:预先读取资源
通过在link标签中指定URL将接下来极有可能要读取的Web页面或页面中的资源预先读取。例如通过对于向导页面中的“下一步”页面,登录页面中登录后的主画面中所用大尺寸的JavaScript框架中的核心文件等页面或资源文件的读取,可以大幅度提高页面的加载性能。
可用于实现预读取的技术如下所示:
- prerender : 预先读取整个页面。
- prefetch : 预先读取JS文件或img文件等单个资源。
- dns-prefetch: 实现对DNS的预先解析。
▼示例代码
<!-- 预先读取整个页面 --> <link rel="prerender" href="./?page=2" /> <!-- 预先读取大尺寸资源文件--> <link rel="prefetch" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js" /> <!-- 预先对DNS进行解析 --> <link rel="dns-prefetch" href="http://example.com/" />
由于上述技术已被实际使用在除iPhone之外Android与Windows 8.1等各种智能设备中、在不支持的浏览器中被忽略、可以大幅度提高性能这几点原因,预计将在2014年被广泛普及应用。
2.控制资源的读取顺序
resource-priorities(资源的优先读取顺序)为针对CSS文件与img文件等需要被加载的资源而指定其优先读取顺序的Web标准。在显示Web页面时,目前常用方法为将页面中不能被立即显示的资源延后读取。在图像较多的页面中,这种方法的确可以提高页面的初始显示性能。但是,在图像不多的页面中很难看出这种方法的有效性,且不利于调试。
目前虽然对于资源的读取顺序的指定方法尚处于工作草案状态,但是Chrome浏览器及IE浏览器(只支持lazyload)中已经内置了部分可行方法。
- lazyload:延迟于其他资源之后读取
- postpone:在页面被完全显示之后开始读取
▼例1:被指定在元素属性中
<img src="./img/hoge.png" lazyload /> <img src="./img/fuga.png" postpone />
▼例2:被指定在CSS样式代码中
img.hoge { resource-priorities : lazy-load; } img.fuga { resource-priorities : postpone; }
▼例3:被指定在JavaScript脚本代码中
var img = new Image(); img.setAttribute(‘lazyload‘); img.src = "hoge.png";
由于上述技术的使用场景有限,目前如果想针对img等元素进行延后显示,推荐使用jQuery.lazyLoad方法。针对脚本代码来说,推荐使用HTML 5中的defer属性(详见笔者所著《HTML 5与CSS 3权威指南》一书)。
使用资源缓存
“应用程序缓存”为一个用于控制Web页面资源的缓存的标准,可以有效减少服务器端及客户端通信量,从而提高页面性能(详见笔者所著《HTML 5与CSS 3权威指南》一书)。
如果因为浏览器等原因不能使用应用程序缓存,可以使用浏览器长久以来支持使用的缓存功能。可以通过在HTTP头中指定关键字的方法来控制缓存。在HTTP头中可以使用的关键字如下所示。
- Expires:指定缓存有效期限
- Cache-Control:控制客户端缓存功能
- ETag :在服务器端判断上次的客户端请求是否被修改
判断Web页面的激活状态
通过判断Web页面的激活状态,可以决定是否执行某种操作。通过浏览器的标签,检测出如果页面处于非激活状态,则停止向服务器端发出轮询请求,减少后台处理,降低CPU或网络等硬件资源消耗,从而提高性能。
Page Visibility API为2013年5月第1版,10月第2版的W3C推荐标准,从IE 10开始,同时被利用在Chrome及Firefox等主流浏览器中的高实用性Web标准。可以通过该API判断出页面的激活状态(详见笔者所著《HTML 5与CSS 3权威指南》一书)。
▼示例代码
document.addEventListener(‘visibilitychange‘, function(){ if(document.hidden) { //停止轮询 } else { //继续轮询 } }, false);
检测物理性能及加载时间后进行优化处理
目前W3C标准中已经存在多个用于检测页面性能的JavaScript API,如下所示。
- Performance Timeline
- Navigation Timing
- Resource Timing
- User Timing
- Timing control for script-based animations
- Efficient Script Yielding
- Display performance API
- Asynchronous scrolling API
- Diagnostics API
目前IE 10以上的浏览器以及最新版Chrome浏览器对上述API提供支持,最新版Firefox浏览器对其中部分浏览器提供支持。上述API的功能不仅限于性能测定,例如“Timing control for script-based animations”API可被利用在游戏开发时的帧处理中。
优化通信协议
★ WebSocket/ServerSentEvents
用于优化来自Web页面的异步通信处理,目前受到各主流浏览器的支持(详见笔者所著《HTML 5与CSS 3权威指南》一书)。
★ SPDY/HTTP2.0
对HTTP 1版本协议的缺陷进行改善后的协议。各主流浏览器目前均在开发对于SPDY协议的支持,IE浏览器自11版开始支持。
★ gzip
用于压缩内容,以减少通信成本。长久以来一直受到各主流浏览器的支持。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。