当我们请求一个URL地址时,浏览器会从远程服务器装载各种所需的资源,如JavaScript、CSS、图片等。而在加载JavaScript时,常常会发生下面这种情况:

也就是说,当浏览器碰到Script标签时,会下载整个js文件,同时不会下载其它资源,包括其它的js文件。不过这句话也是“含水分的”,水分到底多大,我也不知道,具体得看我们所使用的浏览器种类以及对应的版本号。下面是IE8的情况,它会同时下载多个js文件以及CSS文件,而图片等内容则会被阻塞,这点与之前的认识稍有不同,IE8多多少少引入了一点点“并发”。

不管怎样,由于采用标签形式所定义的js文件下载会造成整个下载阻塞,所以很多人会把Script标签写在</body>之前,或者是采用动态脚本装载的方式以加快页面显示。其具体例子可以从下面图中看到:

把Script标签写在body标签前来提早显示整个页面,这个是比较容易理解的;而动态脚本装载,是利用js动态创建Script的DOM对象,然后把这个DOM对象添加到当前文档中,从而实现js文件装载,而这种装载的方式与标签所实现的装载方式不同之处就在于不会形成阻塞。

上述所说内容以及图片资源来自以下两篇文章。

http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

http://www.webdigi.co.uk/blog/2009/avoid-javascript-blocking-content-download-on-your-website-during-page-load/

具体的实现方法可以参考下面的代码(http://stackoverflow.com/questions/2803305/javascript-how-to-download-js-asynchronously):

  1. var require = function (scripts, loadCallback) {
  2. var length        = scripts.length;
  3. var first         = document.getElementsByTagName("script")[0];
  4. var parentNode    = first.parentNode;
  5. var loadedScripts = 0;
  6. var script;
  7. for (var i=0; i<length; i++) {
  8. script = document.createElement("script");
  9. script.async = true;
  10. script.type = "text/javascript";
  11. script.src = scripts[i];
  12. script.onload = function () {
  13. loadedScripts++;
  14. if (loadedScripts === length) {
  15. loadCallback();
  16. }
  17. };
  18. script.onreadystatechange = function () {
  19. if (script.readyState === "complete") {
  20. loadedScripts++;
  21. if (loadedScripts === length) {
  22. loadCallback();
  23. }
  24. }
  25. };
  26. parentNode.insertBefore(script, first);
  27. }
  28. };

调用举例:

  1. require([
  2. "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js",
  3. "http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js",
  4. "http://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/yuiloader/yuiloader-min.js"
  5. ], function () {
  6. console.log(jQuery);
  7. console.log($);
  8. console.log(YAHOO);
  9. });

上面的代码只是外部JavaScript非阻塞装载的一种方法,而http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/列举了许多其他的方案:

  • XHR Eval – Download the script via XHR and eval() the responseText.
  • XHR Injection – Download the script via XHR and inject it into the page by creating a script element and setting its text property to the responseText.
  • Script in Iframe – Wrap your script in an HTML page and download it as an iframe.
  • Script DOM Element – Create a script element and set its src property to the script’s URL.
  • Script Defer – Add the script tag’s defer attribute. This used to only work in IE, but is now in Firefox 3.1.
  • document.write Script Tag – Write the <script src=""> HTML into the page using document.write. This only loads script without blocking in IE.

虽然这些方案都可以实现无阻塞下载,但还有一点要记住,对于一个域来说浏览器所能打开的连接数是有限的,从下面链接可以找出一些相关的数据:

http://www.stevesouders.com/blog/2008/03/20/roundup-on-parallel-connections/

对于同一个域来说,连接个数是有限的,不过我们可以通过让一个页面引用多个域的资源以达到扩大连接数的目的。所以有时会发现有的Web应用将动态程序和静态的资源分到不同的应用当中。另外还有一种主动的方法,就是客户机主动设置浏览器的最大连接数:http://support.microsoft.com/?kbid=282402。对于IE6和7来说,默认的最大连接数是2,在做聊天室,使用“长轮询”作为解决方案时一定要多考虑考虑。

最后给出的几篇文章,是同一个作者不同时期的文章,其内容全是关于动态装载的,可以作为参考:

技术总是在更新换代,现在我们关注的问题可能几年之后就会变成老皇历了。因为新的HTML5标准中,可以在script(http://dev.w3.org/html5/spec/Overview.html#the-script-element)上使用defer和async属性了,如果再加上浏览器本身的技术与概念的进步和“摩尔定律”的鼓吹,三五年差不多够了。

动态装载外部JavaScript脚本文件的更多相关文章

  1. 动态引用外部的Javascript脚本文件[转]

    你可以参考下面方法,进行动态为网页引用外部的Javascript脚本文件.代码写在Page_Init方法内. VB.NET: 下图是运行时,查看HTML的源代码: C#:

  2. 获取当前正在执行的Javascript脚本文件的路径

    获取当前JavaScript脚本文件的路径,在特定场景下可能需要,比如写模块加载器,或者进行日志记录.下面这段脚本适用于所有浏览器来获取正在执行js文件的路径,但是该方法只适用于脚本加载过程中执行的情 ...

  3. 使用jQuery动态加载js脚本文件的方法

    动态加载Javascript是一项非常强大且有用的技术.这方面的主题在网上已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js 它们很强大,但有时候也会得不偿失.如果你使 ...

  4. 对动态加载javascript脚本的研究

    有时我们需要在javascript脚本中创建js文件,那么在javascript脚本中创建的js文件又是如何执行的呢?和我们直接在HTML页面种写一个script标签的效果是一样的吗?(关于页面scr ...

  5. MySQL执行外部sql脚本文件命令是报错:unknown command

    使用source导入外部sql文件: mysql> source F:\php\bookorama.sql; -------------- source F: -------------- ER ...

  6. MySQL执行外部sql脚本文件的命令

    sql脚本是包含一到多个sql命令的sql语句,我们可以将这些sql脚本放在一个文本文件中(我们称之为“sql脚本文件”),然后通过相关的命令执行这个sql脚本文件.基本步骤如下:1.创建包含sql命 ...

  7. django项目外部的脚本文件执行ORM操作,无需配置路由、视图启动django服务

    #一.将脚本路径添加到python的sys系统环境变量里 import sys # sys.path.append('c:/Users/Administrator/www/mymac') #第一种.绝 ...

  8. MySQL执行外部sql脚本文件命令报错:unknown command '\'

    由于编码不一致导致的 虽然大部分导出是没有问题的 但是数据表中存储包含一些脚本(富文本内容)会出现该问题,强制指定编码即可解决. mysql导入时指定编码: mysql -u root -p --de ...

  9. 浏览器环境下JavaScript脚本加载与执行探析之代码执行顺序

    本文主要基于向HTML页面引入JavaScript的几种方式,分析HTML中JavaScript脚本的执行顺序问题 1. 关于JavaScript脚本执行的阻塞性 JavaScript在浏览器中被解析 ...

随机推荐

  1. jupyter notebook变量高亮

    首先声明,anaconda安装的时候,一定要勾选“Add Anaconda to my PATH environment variable”! 否则会有一堆麻烦的问题,做了这一步就能自动添加好路径!不 ...

  2. 查看锁信息(开启InnoDB监控)

    当前mysql版本:5.6.21 一.背景 在mysql处理死锁问题时,由于show engine innodb status输出来的死锁日志无任务事务上下文,并不能很好地诊断相关事务所持有的所有锁信 ...

  3. shell 统计行数

    语法:wc [选项] 文件… 说明:该命令统计给定文件中的字节数.字数.行数.如果没有给出文件名,则从标准输入读取.wc同时也给出所有指定文件的总统计数.字是由空格字符区分开的最大字符串. 该命令各选 ...

  4. Error after SQL Server 2012 installation: Login Failure for "SQL Server Integration Services 11.0" SSIS service

    When you install SQL Server 2012 and you try to connect to SSIS services, you cannot due to that the ...

  5. Highmaps网页图表教程之数据标签与标签文本

    Highmaps网页图表教程之数据标签与标签文本 Highmaps数据标签 数据标签用于在地图图表上展现节点对应的数据.数据标签展现数据是静态的,只要节点一加载,数据标签就会出现在节点附近.在High ...

  6. TS Stream 详解

    <什么是TS>     TS(transport stream) , TS流文件,是一种DVD的文件格式,TS格式的特点就是要求从视频流的任一片段开始都是可以独立解码的,这种特性就决定了T ...

  7. git merge和git rebase的区别(转)

      Description git rebase 和 git merge 一样都是用于从一个分支获取并且合并到当前分支,但是他们采取不同的工作方式,以下面的一个工作场景说明其区别 场景:  如图所示: ...

  8. 【构造】Codeforces Round #480 (Div. 2) B. Marlin

    题意:给你一个4*n的网格,保证n为奇数,让你在其中放k个障碍物,不能放在边界的格子上,使得从左上角走到右下角的最短路的方案数,恰好等于从左下角走到右上角的最短路的方案数. k为偶数时,以纵向为对称轴 ...

  9. OD基本汇编指令

    jmp ;无条件跳转 指哪飞哪 一些杂志中说的直飞光明顶,指的就是它了~ 光明顶一般指爆破地址根据条件跳转的指令:JE ;等于则跳转 JNE ;不等于则跳转 JZ ;为 0 则跳转   JNZ ;不为 ...

  10. [POI2015]Wilcze doły

    [POI2015]Wilcze doły 题目大意: 给定一个长度为\(n(n\le2\times10^6)\)的数列\(A(1\le A_i\le10^9)\),可以从中选取不超过\(d\)个连续数 ...