PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

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

伊谢尔伦
伊谢尔伦 原创
2017-07-21 16:08:19 1299浏览

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

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

方式一:惯例的做法

最传统的方式是在head标签内插入<script>标签。</script>

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

<script type="text/javaScript" src="example.js"></script>

方式二:经典的做法

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

在IE8+浏览器上已经实现了脚本并行下载,但在某些浏览器中(即使脚本文件放到了

标签底部),页面中脚本仍是一个接着一个加载的。所以我们需要下一个方法,即:动态加载脚本。

方式三:动态脚本

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


<script type=&#39;text/javascript&#39;>
  var script = document.createElement(&#39;script&#39;);
  script.type = &#39;text/javaScript&#39;;
  script.src = &#39;file1.js&#39;;
  document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script);
</script>

上述代码动态创建了一个外链file1的<script>标签,并将其添加到<head>标签内。这种技术的重点在于:</script>

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


<script type=&#39;text/javascript&#39;>
  function loadScript(url, callback) {
    var script = document.createElement(&#39;script&#39;);
    script.type = "text/javaScript";
    // IE和opera支持onreadystatechange
    // safari、chrome、opera支持onload
    if (script.readyState) {//IE
      script.onreadystatechange = function() {
        if (script.readyState == "loaded"
            || script.readyState == "complete") {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else {//其他浏览器
      script.onload = function() {
        callback();
      };
    }
    script.src = url;
    document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script);
  }
</script>

上述代码改进的地方就是增加了一个回调函数,该函数会在相应脚本文件加载完成后被调用。这样便可以实现顺序加载了,写法如下(假设file2依赖file1,file1和file3相互独立):

loadScript(‘file1.js&#39;,function(){ loadScript(‘file2.js&#39;,function(){}); }); loadScript(‘file3.js&#39;,function(){});

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

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。