用ControlJS优化阿里妈妈广告.docVIP

用ControlJS优化阿里妈妈广告 长时间以来阿里妈妈的广告载入策略一直存在些问题，很多页面也因为阻塞式的广告载入而被拉低性能，影响用户体验。毕竟阿里妈妈广告的渲染依赖于诸多嵌套的document.write。ControlJS的目标就是解决js的阻塞式渲染，因此灵玉急不可耐想与同仁们共同去揭秘ControlJS…… Steve Souders在2010年12月份发布了ControlJS项目，该项目是让开发者更好的去控制javascript文件的下载和执行，从而提高了页面脚本的加载速度。 Steve提出了一个非常具有创造性的思想，就是预先异步下载javascript文件而不解析执行，直到需要的javascript处理时才去真正的执行。这一点得到了很多人的关注与验证。Nicholas Zaka也因ControlJS引发了很多思考，并分析了ControlJS和LABjs 的区别所在，详细内容可以阅读Thoughts on script loaders和Separating JavaScript download and execution。Steve使用3篇博闻详细介绍了ControlJS：异步加载、延迟执行、重写document.write。 ControlJS的原理 异步加载 ControlJS本身是异步进行加载的，首先将script的标签type属性值更改为浏览器无法识别的类型，这样浏览器不会认为这是一个脚本。本身异步加载的ControlJS执行时开始遍历type=”text/cjs”的script标签(包括内嵌脚本)，如果存在”DATA-CJSSRC”属性将创建IMAGE或者OBJECT对象(依赖浏览器而选择)，去异步预下载脚本文件并缓存文件，直到window.onload时解析并执行javascript，同时第二次去遍历遗漏的script标签。 具体操作可看 Async WITH ControlJS This page contains 3 scripts in the HEAD: an external script (main.js) that takes 4 seconds to download an inline script another external script (page.js) that takes 2 seconds to download This page uses ControlJS to improve page performance. And indeed this page feels faster than the async baseline example. Comparing the HTTP waterfall charts shows that this page loads one second faster (~4 seconds versus ~5 seconds). More importantly, the page feels faster because it starts rendering immediately. Comparing the HTTP waterfall chart to the one from the baseline example we see that with ControlJS rendering (indicated by the vertical green line) starts much sooner in the page load timeline. Another difference between the two waterfall charts is that this page has 3 more resource requests than the baseline example. One of these additional requests is control.js itself. This is loaded asynchronously so it has little impact on page performance. The other two requests are repeated requests for main.js and page.js when they are inserted into the page as SCRIPT elements dynamically. These requests are read from cache (note the thin blue bar in the waterfall chart)