js加载优化-二
http://www.cnblogs.com/radom/archive/2011/04/26/2028886.html
ontrolJS 主要为了是解决网页加载中Js文件的性能问题,ControlJS的原理
ControlJS本身是异步进行加载的,首先将script的标签type属性值更改为浏览器无法识别的类型,这样浏览器不会认为这是一个脚本。本身异 步加载的ControlJS执行时开始遍历type=”text/cjs”的script标签(包括内嵌脚本),如果存在”DATA-CJSSRC”属性 将创建IMAGE或者OBJECT对象(依赖浏览器而选择),去异步预下载脚本文件并缓存文件,直到window.onload时解析并执行 javascript,同时第二次去遍历遗漏的script标签。
异步加载
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本身是异步加载
js加载优化-二的更多相关文章
- js加载优化三
Javascript性能优化之异步加载和执行 Author:小欧2013-09-17 随着科技的发展,如今的网站和五六年前相比,现在的人们对web的要求越来越高了,用户体验,交互效果,视觉效果等等都有 ...
- js加载优化
阻塞特性: JS 有个很无语的阻塞特性,就是当浏览器在执行JS 代码时,不能同时做其他任何事情,无论其代码是内嵌的还是外部的. 脚本位置: 浏览器在碰到一个引入外部JS 文件的 ...
- 优化JS加载时间过长的一种思路
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 去年公司在漳州的一个项目中,现场工程人员反映地图部分出图有点 ...
- FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据
前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<EMBED>标记来加载图形的,但是这 ...
- js资源加载优化
互联网应用或者访问量大的应用,对js的加载优化是不可少的.下面记录几种优化方法 CDN + 浏览器缓存 CDN(content delivery network)内容分发网络, 最传统的优化方式.其 ...
- Multidex(二)之Dex预加载优化
Multidex(二)之Dex预加载优化 https://www.jianshu.com/p/2891599511ff
- (转)JS加载顺序
原文:http://blog.csdn.net/dannywj1371/article/details/7048076 JS加载顺序 做一名合格的前端开发工程师(12篇)——第一篇 Javascrip ...
- vue加载优化策略
vue.js是一个比较流行的前端框架,与react.js.angular.js相比来说,vue.js入手曲线更加流畅,不管掌握多少都可以快速上手.但是单页面应用也都有其弊病,有时候首屏加载慢的让人捏舌 ...
- vuejs学习之 项目打包之后的首屏加载优化
vuejs学习之 项目打包之后的首屏加载优化 一:使用CDN资源 我们在打包时,会将package.json里,dependencies对象里插件打包起来,我们可以将其中的一些使用cdn的方式加载,例 ...
随机推荐
- Android 文件操作之openFileOutput
openFileOutput()方法的第一参数用于指定文件名称,不能包含路径分隔符“/” ,如果文件不存在,Android 会自动创建它.创建的文件保存在/data/data/<package ...
- LeetCode_Reverse Linked List II
Reverse a linked list from position m to n. Do it in-place and in one-pass. For example: Given -> ...
- win8、win8.1官方版本、及安装密钥
云盘地址:Windows 8 简体中文专业版+核心版 MSDN 正式版(32位)http://pan.baidu.com/s/1eQgiAiQSHA1:0C4A168E37E38EFB59E88443 ...
- KEIL C51 Call Tree
KEIL中函数的调用在其帮助文档中有一个详细的解释,引用如下: The Call Tree The best way to demonstrate how the call tree is gener ...
- EBS查找运行请求时间,参数等
--查找运行请求时间,参数等(可以是某用户的,某个报表) select c.user_name, papf.full_name, b.user_concurrent_program_name, a.r ...
- python高级编程之选择好名称:命名指南
# # -*- coding: utf-8 -*- # # python:2.x # __author__ = 'Administrator' #命名指南 #一组常用的命名规则可以被应用到变量,方法函 ...
- C基础知识小总结(十)
"如有不正确之处,请指出,谢谢" --Mood <指针和函数> 指针函数 函数指针 <最基本的使用函数指针> ...
- [Cycle.js] Hyperscript as our alternative to template languages
Usually we use template languages like Handlebars, JSX, and Jade to create. One simple way we can cr ...
- Oracle表、列、约束的操作
获得有关表的信息 可以直接DESCRIBE DESC[RIBE] table_name; 可以通过数据字典 SELECT * FROM user_tables WHERE table_name =xx ...
- NET基础课--对象的筛选和排序(NET之美)
1.数据量不大的时候取出数据缓存于服务器,然后排序,筛选等基于缓存进行以提高效率. 排序或筛选的方法是使用集合类型提供的,如List<T>.sort() List<T>.Fi ...