快速业务通道

异步加载:ControlJS让脚本加载更快的一个模块

作者 佚名技术 来源 互联网 浏览 发布时间 2012-01-17

关于ControlJs一共有三篇文章,这是第一部分。ControlJS是让脚本加载更快的一个模块(a javascript module for making scripts load faster). 三篇文章的结构分别为:

1. async loading
2. delayed execution
3.overriding document.write
关于第一部分的异步加载,这个的关键在于尽快将页面作为html绘制出来,然后再用javascript进行优化,或者说用js进一步渲染。我们看到过很多网页,展示给用户一片空白,只是因为在等待几百KB的js文件下载、解析、执行,而这些js是用来绘制页面中展示给用户看的DOM元素。

 

其实上述的情况,很容易理解–但是真正实现改进恐怕就困难的多。好几百KB的js必须要拆散重组。那些通过js来创建网页DOM的逻辑代码必须全部合成到后台的服务器端去生成html。即使使用最新的服务器端JS来实现,也是一项很大的重构工程。

我又回到了Opera的Delayed Script Execution选项。一旦这个选项生效,js会被搁置起来(move aside),让页面首先进行渲染。而这个选项确实很棒,而且没有网站因为开启了这个选项而导致页面报错的。我也一直持续在和其他浏览器的供应商联系,让他们也实现这个功能,我迫切的希望开发人员能够尽快的使用上这个选项。

近些年来,一些网页加速器(例如Aptimize, Strangeloop, FastSoft, CloudFlare, Torbit,和最近的mod_pagespeed)犹如雨后春笋般脱颖而出。他们修改了页面中的HTML标签,用来改善网页的性能。从这些模式中,我摸索出了一个方法,比起延迟加载页面渲染的JS,我们可以更容易的改变HTML标记来实现。

于是ControlJS诞生了!

Controlling download and execution
ControlJS的目标是让开发员更好的控制JS的加载。关键是要意识到“加载”氛围两个步骤:下载[download](即获取内容)和执行[execution](包含解析).为了更好的性能,这两个步骤有必要分离控制。

在对网页性能敏感的程序员眼中,如何控制脚本下载是一个很广泛流行的话题。当脚本使用普通的方式(也就是<script src=”" …的形式),脚本会阻塞其他资源的下载(在新版本浏览器中稍微好一些),同时也会阻塞页面的渲染(所有浏览器都有这种情况)。使用异步脚本加载(asynchronous script loading)的技术在很大程序上缓解了这个问题。我在Even Faster Web Sites中提及过几种异步加载的技术。LABjs 和 HeadJS是提供异步加载的js模块。虽然它们的异步技术解决了脚本下载阶段的阻塞问题,但是并没有

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号