html中加载JavaScript脚本文件的常用方式总结-tutorial js-php.cn

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

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

方式一： 惯例的做法

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

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

Salin selepas log masuk 方式二： 经典的做法

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

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

方式三： 动态脚本

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

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

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

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

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

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