html中加载JavaScript脚本文件的常用方式总结-js教程-PHP中文网

当浏览器遇到（内嵌） 标签时，当前浏览器无从获知javaScript是否会修改页面内容。因此，这时浏览器会停止处理页面，先执行javaScript代码，然后再继续解析和渲染页面。同样的情况也发生在使用 src 属性加在javaScript的过程中（即外链 javaScript），浏览器必须先花时间下载外链文件中的代码，然后解析并执行它。在这个过程中，页面渲染和用户交互完全被阻塞了。

也就是说：每当浏览器解析到 标签（无论内嵌还是外链）时，浏览器会（一根筋地）优先下载、解析并执行该标签中的javaScript代码，而阻塞了其后所有页面内容的下载和渲染。

方式一： 惯例的做法

最传统的方式是在head标签内插入 标签。

然而这种常规的做法却隐藏着严重的性能问题。根据上述对 标签特性的描述，我们知道，在该示例中，当浏览器解析到 标签时，浏览器会停止解析其后的内容，而优先下载脚本文件，并执行其中的代码，这意味着，其后的test.css样式文件和 标签都无法被加载，由于 标签无法被加载，那么页面自然就无法渲染了。因此在该javaScript代码完全执行完之前，页面都是一片空白。

登录后复制 方式二： 经典的做法

既然 标签会阻塞其后内容的加载，那么将 标签放到所有页面内容之后不就可以避免这种糟糕的状况了吗？ 将所有的 标签尽可能地放到 标签底部，以尽量避免对页面其余部分下载的影响。

在IE8+浏览器上已经实现了脚本并行下载，但在某些浏览器中（即使脚本文件放到了 标签底部），页面中脚本仍是一个接着一个加载的。所以我们需要下一个方法，即：动态加载脚本。

方式三： 动态脚本

通过文档对象模型（DOM），我们可以几乎可以页面任意地方创建。

var script = document.createElement('script'); script.type = 'text/javaScript'; script.src = 'file1.js'; document.getElementsByTagName('head')[0].appendChild(script); 登录后复制 上述代码动态创建了一个外链file1的 标签，并将其添加到 标签内。这种技术的重点在于：

无论在何时启动下载，文件的下载和执行过程不会阻塞页面其他进程（包括脚本加载）。 然而这种方法也是有缺陷的。这种方法加载的脚本会在下载完成后立即执行，那么意味着多个脚本之间的运行顺序是无法保证的（除了Firefox和Opera）。当某个脚本对另一个脚本有依赖关系时，就很可能发生错误了。比如，写一个jQuery代码，需要引入jQuery库，然而你写的jQuery代码文件很可能会先完成下载并立即执行，这时浏览器会报错——‘jQuery未定义'之类的，因为此时jQuery库还未下载完成。于是做出以下改进：

loadScript(‘file1.js',function(){ loadScript(‘file2.js',function(){}); }); loadScript(‘file3.js',function(){}); 登录后复制 file2会在file1加载完后才开始加载，保证了在file2执行前file1已经准备妥当。而file1和file3是并行下载的，互不影响。 虽然loadScript函数已经足够好，但还是有些不尽人意的地方——通过分析这段代码，我们知道，loadScript函数中的顺序加载是以脚本的阻塞加载来实现的(正如上述红字部分指出的那样)。而我们真正想实现的是——脚本同步下载并按相应顺序执行，即并行加载并顺序执行。

php8，我来也

30分钟学会网站布局

尚观Oracle入门到精通视频教程

你的第一行 UNI-APP 代码

Flutter 从头到应用启动

兄弟连Linux新版视频教程

AXURE 9视频教程（适合产品经理交互产品设计UI）

零基础PS视频教程

16天带你入门UI视频教程

PS技巧和切片技巧视频教程

阿里云环境搭建以及项目上线视频教程

计算机网络概述——程序员必须掌握的基础知识

程序员必备教程——HTTP协议讲解

Websocket视频教程

html中加载JavaScript脚本文件的常用方式总结