按需加载JavaScript的两种方式以及性能测试

2019-04-14 21:00发布

站内文章 / 模拟电子
14064 0 1381

写在前面：

按需加载js文件，一个听上去很高大上的概念，说白了其实就是网络中提到最多的动态加载js文件，为什么我说是按需加载而不是动态加载呢？因为按需加载更能反应当今js开发模块儿化以及模块儿依赖的精神。了解过AMD，CMD的同学都应该知道，js模块儿化的精神就是将一个复杂的庞大的js文件按功能拆分成各个模块儿，每个模块儿便是一个独立的js文件。当需要某个模块儿的时候再动态的载入。按需加载一共有两种方式，一种是通过script标签方式，一种是通过Ajax请求来实现，然后再通过eval()来执行，代码网络上鲜有这两种方式的性能比较，故写此博客。

正文：

Dojo在较早的版本中是采用的是后面这种方式，然后又改成了第一种方式，其中的原因想必有两点：

1）script标签方式的性能想必要更高
2）script标签可以解决跨域的问题

标签方式代码如下：

(function () {   console.time('duration'); var js = document.createElement('script'); js.src = '//127.0.0.1:9091/module.js';   js.onload = function () {   console.timeEnd('duration');   }   document.body.appendChild(js); }());

说明（下同）：

网络环境为本机 按需加载的模块儿文件大小为276kb 以上代码都是在chrome浏览器中控制台执行 console.time和console.timeEnd用于输出执代码所需要的时间

Ajax方式代码如下：

(function () {   console.time('duration');   var req = new XMLHttpRequest();   req.open('get', '//127.0.0.1:9091/module.js');   req.onreadystatechange = function (r) {   if (req.readyState == 4 && req.status == 200) {   eval(req.responseText);   console.timeEnd('duration');   }   }   req.send({}); }());

通过运行两种测试脚本多次，可以看出第一种方式的效率比第二种方式要高，无论是代码执行需要的总时间还是网络请求的响应时间。在我的环境中标签方式快了5-25ms。欢迎其他同学将你们测试的结果贴上来。

热门文章