用ControlJS优化阿里妈妈广告

标签: 前端技术 | 发表时间:2011-03-18 14:58 | 作者:灵玉 Cary
出处:http://ued.taobao.com/blog

长时间以来阿里妈妈的广告载入策略一直存在些问题,很多页面也因为阻塞式的广告载入而被拉低性能,影响用户体验。毕竟阿里妈妈广告的渲染依赖于诸多嵌套的document.write。ControlJS的目标就是解决js的阻塞式渲染,因此灵玉急不可耐想与同仁们共同去揭秘ControlJS……

Steve Souders在2010年12月份发布了ControlJS项目,该项目是让开发者更好的去控制javascript文件的下载和执行,从而提高了页面脚本的加载速度。

Steve提出了一个非常具有创造性的思想,就是预先异步下载javascript文件而不解析执行,直到需要的javascript处理时才去真正的执行。这一点得到了很多人的关注与验证。Nicholas Zaka也因ControlJS引发了很多思考,并分析了ControlJSLABjs 的区别所在,详细内容可以阅读Thoughts on script loadersSeparating 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

延迟执行

浏览器在解析执行javascript阶段是阻塞任何操作的,这时的浏览器处于假死状态,Steve分析了美国的Alexa前10名网站的脚本初始需要加载执行情况,发现只有29%是需要页面加载时初始化解析执行的,而其他71%的脚本是在触发交互时才会执行,压缩后这些脚本平均加载是229 kB,未压缩是500KB,这是个大量的数据。

我们希望的结果是在页面加载中不去解析执行javascript,只是提前预下载好文件。例如通用的点击弹出二级导航,用户有可能永远都没有点击导航的行为,此时导航的功能脚本根本毫无用处。但是人们在点击导航时不希望等太久javascript的执行,所以ControlJS会提前下载文件,这样javascript只是解析执行,不会花时间放到下载文件上。代码一目了然,具体操作可看Menu WITH ControlJS

重写document.write

在默认情况下这些异步脚本都是在window.onload解析执行,如果此时脚本调用window.write方法,将导致一个不希望发生的问题,就是整个页面被window.write的输出内容替换,所有页面内容将被删除,ie下将处于停滞状态。产生问题的原因是由于在document被加载完后调用docuemnt.write方法时将会自动去触发document.open,写入任何处于打开状态的doucment都将会会替换整个页面的内容。这便导致目前为止所有异步脚本无法延迟document.write的问题,ControlJS的处理方法是重写document.write,如下:

CJS.docwriteOrig = document.write;
document.write = CJS.docwrite;

ControlJS创建一个dom元素(span),将其插入当前被解析执行的script标签之前,并且设置SPAN的innerHTML的值为docuemnt.write的内容。具体操作可看document.write WITH ControlJS

  • 用ControlJS优化阿里妈妈广告

对于现在大部分的广告形式都是采用document.write方式写入,无法将这些内容异步处理是开发者非常头疼的问题。ControlJS可以为我们解决这类烦恼。


没有应用ControlJS的网络图。DEMO可以看http://chesihui.github.com/ad-demo.html


应用ControlJS优化后的网络图。DEMO可以看http://chesihui.github.com/ControlJS-demo.html

  • ControlJS的局限性

ControlJS存在一个问题是在document.write中多层嵌套script标签时,页面仍然存在触发document.open的问题。查看源代码发现在执行完一个javascript后都会恢复document.write的原生方法:

document.write = CJS.docwriteOrig;

动态脚本的异步加载,同样使得document.write方法也是异步执行,因此不能恢复document.write的原生功能。复现的情况如DEMO。注释这段脚本虽然解决了不触发window.open的问题,但是同样的异步加载执行导致无法正确定位广告写入的位置。对于阿里妈妈广告设置alimama_type=”i”的时候,载入图片广告是根据多层document.write实现的,只能正确渲染最后一个图片广告。复现如DEMO

因为ControlJS的异步加载不存在任何依赖顺序,所有脚本都是并行加载执行,如果你的页面存在太多依赖关系,ControlJS将不会适合你的项目。

最后总结ControlJS为我们做了什么事,利弊还需要自己去权衡:
1、异步下载所有脚本
2、同时处理内嵌与外链脚本
3、延迟脚本的执行直到页面被渲染完
4、允许脚本只下载不执行
5、解决了异步脚本中存在document.write的问题
6、ControlJS本身是异步加载

相关 [controljs 优化 阿里妈妈] 推荐:

用ControlJS优化阿里妈妈广告

- Cary - Taobao UED Team
长时间以来阿里妈妈的广告载入策略一直存在些问题,很多页面也因为阻塞式的广告载入而被拉低性能,影响用户体验. 毕竟阿里妈妈广告的渲染依赖于诸多嵌套的document.write. ControlJS的目标就是解决js的阻塞式渲染,因此灵玉急不可耐想与同仁们共同去揭秘ControlJS……. Steve Souders在2010年12月份发布了ControlJS项目,该项目是让开发者更好的去控制javascript文件的下载和执行,从而提高了页面脚本的加载速度.

阿里妈妈基于 TensorFlow 做了哪些深度优化?TensorFlowRS 架构解析

- - 机器之心
深度学习比传统的逻辑回归有着更强的模型刻画能力,同时也带来了计算力百倍提升的需求. 相比图像、语音、视频等领域,搜索、广告、推荐等场景有着独特的场景特点: 样本规模和特征空间通常非常巨大,千亿样本、百亿特征并不罕见,同时存在大量的稀疏特征作为 Embedding 输入. 这就要求我们针对此场景下的计算特点对深度学习框架进行设计和优化.

阿里妈妈广告产品研究

- - 牛国柱
阿里近几年广告应收的增速非常迅速,在2012年,为站长和淘宝客带来的分成收入突破了30亿元,比2011年翻了一番( http://roll.sohu.com/20121224/n361391164.shtml),非常大的成就. 那么阿里是如何做到这一成就的呢. 阿里妈妈第一次出现是在2007年,定位是全网的广告交易平台,使命是“让天下没有难做的广告”,没错,和我们很耳熟的一句话——让天下没有难做的生意很像,是阿里战略在广告市场的延续.

阿里妈妈重出江湖对战百度联盟

- - 派代网 - 资讯
在与淘宝合并4年后,阿里妈妈作为独立品牌“重出江湖”. 淘宝联盟近期宣布,在2013年重新启用“阿里妈妈”品牌和域名,联盟平台将从以服务淘宝系商家为主转向面向全网所有广告主开放的广告交易平台. 淘宝联盟将不再作为平台名,而只是平台中的一个业务线. 近年来马云和阿里巴巴一直致力于打造电商生态系统,既然有“让天下没有难做的生意”,那肯定也会有“让天下没有难做的广告”.

阿里妈妈资深技术专家刘凯鹏解读基于深度学习的智能搜索营销

- - 机器之心
本文结合阿里电商业务场景的特点,介绍了阿里在匹配端和排序端的基于深度学习的一些工作. 搜索营销(sponsored search)是目前广告主在互联网上进行数字化营销的主要手段之一,也是机器学习技术在工业界最成功的应用场景之一. 在搜索营销的场景下,广告主可以通过出价的方式参与流量分配,平台的主要任务是优化流量分配和计价,实现效率的最大化和生态的健康发展.

阿里妈妈宣布Euler项目开源 为国内首个工业级的图深度学习开源框架

- - TECH2IPO/创见
1月18日,阿里妈妈公布了一个重磅的开源项目——图深度学习框架Euler,这也是国内首个在核心业务大规模应用后开源的图深度学习框架. 图学习和深度学习都是人工智能的一个分支,作为阿里巴巴旗下的大数据营销平台,阿里妈妈创新性地将图学习与深度学习进行结合,推出了Euler,可更大幅度提升营销效率. Euler已在阿里妈妈核心业务场景进行了锤炼和验证,同时,在金融、电信、医疗等涉及到复杂网络分析的场景中也具有非常高的易用性,例如Euler可高效识别金融欺诈团伙.

存储优化

- - CSDN博客推荐文章
定期对存储设备的固件和驱动程序做升级. 选择合适的磁盘阵列,RAID可以让很多磁盘驱动器同时传输数据,而这些磁盘驱动器在逻辑上又是一个磁盘驱动器,所以使用RAID可以达到单个磁盘驱动器几倍、几十倍甚至上百倍的速率,还能提供容错,冗余的功能,最常用的有raid10和raid5.. 使用主动多路径(Active Multipathing)技术.

mysql优化

- - 数据库 - ITeye博客
公司网站访问量越来越大,MySQL自然成为瓶颈,因此最近我一直在研究 MySQL  的优化,第一步自然想到的是 MySQL 系统参数的优化,作为一个访问量很大的网站(日20万人次以上)的数据库系统,不可能指望 MySQL  默认的系统参数能够让 MySQL运行得非常顺畅. 在Apache, PHP,  MySQL的体系架构中,MySQL对于性能的影响最大,也是关键的核心部分.

sql优化

- - 数据库 - ITeye博客
是对数据库(数据)进行操作的惟一途径;. 消耗了70%~90%的数据库资源;独立于程序设计逻辑,相对于对程序源代码的优化,对SQL语句的优化在时间成本和风险上的代价都很低;. 可以有不同的写法;易学,难精通. 固定的SQL书写习惯,相同的查询尽量保持相同,存储过程的效率较高. 应该编写与其格式一致的语句,包括字母的大小写、标点符号、换行的位置等都要一致.

ORACLE:plsql优化

- - CSDN博客数据库推荐文章
 1、登录后默认自动选中My Objects. 设置方法:Tools菜单--Brower Filters会打开Brower Filters的定单窗口,把“My Objects”设为默认即可. 同理,可以在Tools菜单--Brower Filters中把你经常点的几个目录(比如:tables Views Seq Functions Procedures)移得靠上一点,并加上颜色区分,这样你的平均寻表时间会大大缩短,试试看.