用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

延迟执行

浏览器在解析执行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本身是异步加载

转载：http://ued.taobao.org/blog/2011/03/controljs-alimama/

用ControlJS优化阿里妈妈广告相关推荐

CSDN博客放阿里妈妈广告代码的方法
CSDN博客放阿里妈妈广告代码的方法.最近阿里妈妈广告投放平台以其新颖的模式,符合互联网本质的方法,以迅猛发展的势头向传统广告商发起挑战,阿里妈妈的口号是:只要你有网站,只要你有博客,甚至,只要你可以 ...
阿里妈妈广告进入联合早报网
阿里妈妈广告进入联合早报网,有图为证: 上图为单条早报新闻的页面截图,图中右上角和左下角的广告均是阿里妈妈系统提供的广告.示例原文地址为http://www.zaobao.com/zg/zg08100 ...
感觉有些阴险的阿里妈妈广告。。。。
感觉有些阴险的阿里妈妈广告.... 我在我的公告栏申请了个阿里妈妈广告...现在广告放上去了.在阿里妈妈管理平台里面,确没有交易记录. 很多人去他那边申请广告位.没有购买就等于免费给阿里妈妈做广告.. ...
阿里妈妈广告商品点击数据分析
阿里妈妈广告商品点击数据分析报告一.分析背景与目的数据源:[https://tianchi.aliyun.com/dataset/dataDetail?dataId=56] 阿里妈妈发展势头迅猛, ...
推荐！CSDN博客放阿里妈妈广告代码的方法
推荐!CSDN博客放阿里妈妈广告代码的方法分类: 软件之外2009-12-28 13:46 427人阅读评论(0) 收藏举报最近阿里妈妈广告投放平台以其新颖的模式,符合互联网本质的方法,以迅猛 ...
按键精灵刷阿里妈妈广告联盟源码 V1.1版
//V1.1版点两次是一样的,去掉. //by小黄人软件 //按键精灵刷阿里妈妈广告联盟源码后台运行并显示点击次数 UserVar Yanshi=2000 "时间(毫秒)" ...
按键精灵刷阿里妈妈广告联盟源码后台运行并显示点击次数亲测有效
按键精灵刷阿里妈妈广告联盟源码后台运行并显示点击次数 UserVar Yanshi=2000 "时间(毫秒)" UserVar Num=0 "次数" //h ...
IJCAI-18 阿里妈妈广告转化预测
IJCAI-18 阿里妈妈搜索广告转化预测总结(0.13966,53/5204) 赛题内容本次比赛以阿里电商广告为研究对象,提供了淘宝平台的海量真实交易数据,参赛选手通过人工智能技术构建预测模型预估 ...
IJCAI 2018 阿里妈妈广告预测算法大赛
背景本项目是天池的一个比赛,由阿里妈妈和天池大数据众智平台举办的广告预测算法大赛,本次参赛人数5200多个队伍,而我们只取得了731的成绩,最遗憾的是当我们写好CNN预测结果准备上传,队伍却意外解散 ...

用ControlJS优化阿里妈妈广告

ControlJS的原理

用ControlJS优化阿里妈妈广告

ControlJS的局限性

用ControlJS优化阿里妈妈广告相关推荐

最新文章

热门文章