让JavaScript和其它资源并发下载的方法


Posted in Javascript onOctober 16, 2014

在IE6/7里JavaScript会从两个方面阻碍页面呈现:
script标签下面的网页资源在script加载完之前会停止请求、下载。
script标签下面的html元素在script加载完之前会停止渲染。

在ie6/7 firefox2/3 Safari3 Chrome1 和 opera下 script标签会阻碍下载:

让JavaScript和其它资源并发下载的方法

虽然在ie8,safari4,chrome2下script可以并发,但依然阻碍了其他资源的下载:

让JavaScript和其它资源并发下载的方法

有6种方法可以使script与其他资源并行下载:

1.XHR eval — 通过XHR(XMLHttpRequest 对象)下载script,然后用eval方法执行XHR的responseText
2.XHR Injection — 通过XHR下载script,然后建立一个script标签并把它插入文档中(body或者head标签内),接着把script标签的text属性设置为XHR的responseText的值
3.XHR in Iframe — 把script标签放到一个iframe里,通过iframe下载它
4.Script DOM Element — 创建script标签并把它的src属性指向你的脚本地址
5.Script Defer — 添加script标签的defer属性,这个只在ie中有效,但firefox3.1也支持这个属性了
6.使用document.write方法在页面中写入<script src="">,这个只在ie里有效

可以通过Cuzillion查 看各个方法的使用例子。

如果有一些内联脚本需要在外部脚本执行后才能执行,那就需要同步(synchronize)他们了。称作”coupling”,Coupling Asynchronous Scripts 这篇文章介绍了一些目前可以实现“coupling”的方法。

headjs,能使JS并发下载(但是顺序执行):http://headjs.com/

head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {  

  // all done  

});  

   

// the most simple case. load and execute single script without blocking.  

head.js("/path/to/file.js");  

   

// load a script and execute a function after it has been loaded  

head.js("/path/to/file.js", function() {  

   

});  

   

// load files in parallel but execute them in sequence  

head.js("file1.js", "file2.js", ... "fileN.js");  

   

// execute function after all scripts have been loaded  

head.js("file1.js", "file2.js", function() {  

   

});  

   

// files are loaded in parallel and executed in order they arrive  

head.js("file1.js");  

head.js("file2.js");  

head.js("file3.js");  

   

// the previous can also be written as  

head.js("file1.js").js("file1.js").js("file3.js");
Javascript 相关文章推荐
javascript实现tabs选项卡切换效果(扩展版)
Mar 19 Javascript
JS定时器实例详细分析
Oct 11 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
Sep 19 Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
Mar 25 Javascript
vue-loader教程介绍
Jun 14 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
jquery树形插件zTree高级使用详解
Aug 16 jQuery
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
May 13 Javascript
JavaScript实现继承的4种方法总结
Oct 16 #Javascript
JavaScript实现网页截图功能
Oct 16 #Javascript
JavaScript跨域方法汇总
Oct 16 #Javascript
js阻止事件追加的具体实现
Oct 15 #Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 #Javascript
原生的html元素选择器类似jquery选择器
Oct 15 #Javascript
用原生JS获取CLASS对象(很简单实用)
Oct 15 #Javascript
You might like
Terran剧情介绍
2020/03/14 星际争霸
解析func_num_args与func_get_args函数的使用
2013/06/24 PHP
一个php短网址的生成代码(仿微博短网址)
2014/05/07 PHP
分享常见的几种页面静态化的方法
2015/01/08 PHP
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
firebug的一个有趣现象介绍
2011/11/30 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
深入分析JSON编码格式提交表单数据
2015/06/25 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
Vue.js搭建移动端购物车界面
2020/06/28 Javascript
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
vue生成token并保存到本地存储中
2018/07/17 Javascript
vue-cli3 配置开发与测试环境详解
2019/05/17 Javascript
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
Vue实现剪贴板复制功能
2019/12/31 Javascript
Python sys.argv用法实例
2015/05/28 Python
在Python的Django框架中simple-todo工具的简单使用
2015/05/30 Python
详解python中requirements.txt的一切
2017/03/03 Python
Python3利用print输出带颜色的彩色字体示例代码
2019/04/08 Python
python IDLE 背景以及字体大小的修改方法
2019/07/12 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
在Windows上安装和配置 Jupyter Lab 作为桌面级应用程序教程
2020/04/22 Python
CSS3中Color的一些特性介绍
2012/05/27 HTML / CSS
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
师范生自荐信范文
2013/10/06 职场文书
专业技术职务聘任书
2014/03/29 职场文书
2014年体育部工作总结
2014/11/13 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书
公司岗位说明书
2015/10/08 职场文书
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android
Nginx限流和黑名单配置
2022/05/20 Servers