让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 继承详解(四)
Jul 13 Javascript
说说JSON和JSONP 也许你会豁然开朗
Sep 02 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
JS实现的几个常用算法
Nov 12 Javascript
jquery+ajax实现省市区三级联动效果简单示例
Jan 04 Javascript
Bootstrap按钮组简单实现代码
Mar 06 Javascript
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 Javascript
electron-vue开发环境内存泄漏问题汇总
Oct 10 Javascript
Vue实现简易计算器
Feb 25 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
php中addslashes函数与sql防注入
2014/11/17 PHP
thinkphp特殊标签用法概述
2014/11/24 PHP
PHP插件PHPMailer发送邮件功能
2017/02/28 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
laravel 获取某个查询的查询SQL语句方法
2019/10/12 PHP
tp5框架基于Ajax实现列表无刷新排序功能示例
2020/02/10 PHP
简单JS代码压缩器
2006/10/12 Javascript
this[] 指的是什么内容 讨论
2007/03/24 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
2015/06/08 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
利用Vue v-model实现一个自定义的表单组件
2017/04/27 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
js获取form表单中name属性的值
2019/02/27 Javascript
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
vue 移动端记录页面浏览位置的方法
2020/03/11 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
如何使用 Flask 做一个评论系统
2020/11/27 Python
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
酒店保安员岗位职责
2014/01/31 职场文书
竞选班长的演讲稿
2014/04/24 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
工作证明格式范文
2015/06/15 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
Python并发编程实例教程之线程的玩法
2021/06/20 Python
nginx配置虚拟主机的详细步骤
2021/07/21 Servers