`

ControlJS优化阿里妈妈广告提高页面脚本的加载速

阅读更多

长时间以来阿里妈妈的广告载入策略一直存在些问题,很多页面也因为阻塞式的广告载入而被拉低性能,影响用户体验。毕竟阿里妈妈广告的渲染依赖于诸多嵌套的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下将处于停滞状态。产生问题的原因是由于在docuemnt被加载完后调用docuemnt.write方法时将会自动去触发document.open,写入任何处于打开状态的doucment都将会会替换整个页面的内容。这便导致目前为止所有异步脚本无法延迟document.write的问题,ControlJS的处理方法是重写docuemnt.write,如下:

 

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

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

最后总结ControlJS为我们做了什么事,利弊还需要自己去权衡:

  1. 异步下载所有脚本
  2. 同时处理内嵌与外链脚本
  3. 延迟脚本的执行直到页面被渲染完
  4. 允许脚本只下载不执行
  5. 解决了异步脚本中存在docuement.write的问题
  6. ControlJS本身是异步加载

原文:http://ued.taobao.com/blog/2011/03/18/controljs-alimama/

 

document.write = CJS.docwriteOrig;

 

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

分享到:
评论

相关推荐

    ControlJS - 让脚本加载的更快

    ControlJS 是一个优化脚本加载速度的库,它旨在提高网页性能,特别是在处理大量外部脚本时。在现代Web开发中,脚本加载是影响页面加载速度的关键因素之一。ControlJS 提供了一种智能的方式来管理和控制脚本的加载,...

    移动延迟加载框架的比较测试

    Controljs是一种模块化脚本加载器,允许开发者以声明的方式加载依赖项。通过`<script type="text/cjs">`标签定义资源路径,Controljs会自动异步加载这些资源,并确保按照正确的顺序执行。这种方式不仅提高了加载效率...

    Webapp Architecture

    - **ControlJS**:控制脚本的加载顺序。 - **JSL**:提供了一系列工具来优化脚本加载。 - **LazyLoad**:按需加载资源,提高页面性能。 - **curl.js**:用于异步加载脚本和样式表的工具。 - **DeferJS**:延迟...

    cognos中引入Jquery简化UI开发.pdf

    这些控件都可以通过类似的方式在Cognos中实现,只需要按照官方文档的指导,正确地引入相应的JS和CSS文件,并编写对应的初始化脚本即可。 #### 结语 通过本文介绍的方法,开发者不仅能够有效地提升Cognos应用程序的...

    Scratch图形化编程语言入门与进阶指南

    内容概要:本文全面介绍了Scratch编程语言,包括其历史、发展、特点、主要组件以及如何进行基本和进阶编程操作。通过具体示例,展示了如何利用代码块制作动画、游戏和音乐艺术作品,并介绍了物理模拟、网络编程和扩展库等功能。 适合人群:编程初学者、教育工作者、青少年学生及对编程感兴趣的各年龄段用户。 使用场景及目标:①帮助初学者理解编程的基本概念和逻辑;②提高学生的创造力、逻辑思维能力和问题解决能力;③引导用户通过实践掌握Scratch的基本和高级功能,制作个性化作品。 其他说明:除了基础教学,文章还提供了丰富的学习资源和社区支持,帮助用户进一步提升技能。

    mmexport1734874094130.jpg

    mmexport1734874094130.jpg

    基于simulink的悬架仿真模型,有主动悬架被动悬架天棚控制半主动悬架 1基于pid控制的四自由度主被动悬架仿真模型 2基于模糊控制的二自由度仿真模型,对比pid控制对比被动控制,的比较说明

    基于simulink的悬架仿真模型,有主动悬架被动悬架天棚控制半主动悬架 [1]基于pid控制的四自由度主被动悬架仿真模型 [2]基于模糊控制的二自由度仿真模型,对比pid控制对比被动控制,的比较说明 [3]基于天棚控制的二自由度悬架仿真 以上模型,说明文档齐全,仿真效果明显

    【组合数学答案】组合数学-苏大李凡长版-课后习题答案

    内容概要:本文档是《组合数学答案-网络流传版.pdf》的内容,主要包含了排列组合的基础知识以及一些经典的组合数学题目。这些题目涵盖了从排列数计算、二项式定理的应用到容斥原理的实际应用等方面。通过对这些题目的解析,帮助读者加深对组合数学概念和技巧的理解。 适用人群:适合初学者和有一定基础的学习者。 使用场景及目标:可以在学习组合数学课程时作为练习题参考,也可以在复习考试或准备竞赛时使用,目的是提高解决组合数学问题的能力。 其他说明:文档中的题目覆盖了组合数学的基本知识点,适合逐步深入学习。每个题目都有详细的解答步骤,有助于读者掌握解题思路和方法。

    YOLO算法-雨水排放涵洞模型数据集-1000张图像带标签-.zip

    YOLO系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中,文件名末尾是部分类别名称; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值; 【注】可以下拉页面,在资源详情处查看标签具体内容;

    操作系统实验 Ucore lab5

    操作系统实验 Ucore lab5

    学生成绩管理系统软件界面

    基于matlab开发的学生成绩管理系统GUI界面,可以实现学生成绩载入,显示,处理及查询。

    NVR-K51-BL-CN-V4.50.010-210322

    老版本4.0固件,(.dav固件包),支持7700N-K4,7900N-K4等K51平台,升级后出现异常或变砖可使用此版本。请核对自己的机器信息,确认适用后在下载。

    YOLO算法-塑料数据集-7张图像带标签-塑料.zip

    YOLO系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中,文件名末尾是部分类别名称; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值; 【注】可以下拉页面,在资源详情处查看标签具体内容;

    YOLO算法-杂草检测项目数据集-3970张图像带标签-杂草.zip

    YOLO算法-杂草检测项目数据集-3970张图像带标签-杂草.zip

    E008 库洛米(3页).zip

    E008 库洛米(3页).zip

    基于西门子 PLC 的晶圆研磨机自动控制系统设计与实现-论文

    内容概要:本文详细阐述了基于西门子PLC的晶圆研磨机自动控制系统的设计与实现。该系统结合了传感器技术、电机驱动技术和人机界面技术,实现了晶圆研磨过程的高精度和高效率控制。文中详细介绍了控制系统的硬件选型与设计、软件编程与功能实现,通过实验测试和实际应用案例验证了系统的稳定性和可靠性。 适合人群:具备一定的自动化控制和机械设计基础的工程师、研究人员以及从事半导体制造的技术人员。 使用场景及目标:本研究为半导体制造企业提供了一种有效的自动化解决方案,旨在提高晶圆研磨的质量和生产效率,降低劳动强度和生产成本。系统适用于不同规格晶圆的研磨作业,可以实现高精度、高效率、自动化的晶圆研磨过程。 阅读建议:阅读本文时,重点关注晶圆研磨工艺流程和技术要求,控制系统的硬件和软件设计方法,以及实验测试和结果分析。这将有助于读者理解和掌握该自动控制系统的实现原理和应用价值。

    YOLO算法-禾本科杂草数据集-4760张图像带标签.zip

    YOLO系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中,文件名末尾是部分类别名称; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值; 【注】可以下拉页面,在资源详情处查看标签具体内容;

    深圳建筑安装公司“挖掘机安全操作规程”.docx

    深圳建筑安装公司“挖掘机安全操作规程”

    YOLO算法-汽车数据集-120张图像带标签-汽车.zip

    YOLO系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中,文件名末尾是部分类别名称; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值; 【注】可以下拉页面,在资源详情处查看标签具体内容;

    大题解题方法等4个文件.zip

    大题解题方法等4个文件.zip

Global site tag (gtag.js) - Google Analytics