html加载js文件优化,基于js文件加载优化(详解)_鹿岛_前端开发者

在

放置在BODY底部

为了让渲染引擎能够及早的将DOM树给渲染出来，我们需要将script放在body的底部，让页面尽早脱离白屏的现象，即会提早触发DOMContentLoaded事件. 但是由于在IOS Safari, Android browser以及IOS webview里面即使你把

DEFER加载

这是HTML4中定义的一个script属性，它用来表示的是，当渲染引擎遇到script的时候，如果script引用的是外部

当页面解析完后，他便会开始按照顺序执行 outside1 和 outside2文件。

如果你在IE9以下使用defer的话，可能会遇到 它们两个不是顺序执行的，这里需要一个hack进行处理，即在两个中间加上一个空的script标签

//hack

ASYNC加载

async是H5新定义的一个script 属性。 他是另外一种js的加载模式。

渲染引擎解析文件，如果遇到script(with async)

继续解析剩下的文件，同时并行加载script的外部资源

当script加载完成之后，则浏览器暂停解析文档，将权限交给JS引擎，指定加载的脚本。

执行完后，则恢复浏览器解析脚本

可以看出async也可以解决 阻塞加载 这个问题。不过，async执行的时候是异步执行，造成的是，执行文件的顺序不一致。即:

这时，谁先加载完，就先执行谁。所以，一般依赖文件就不应该使用async而应该使用defer.

defer的兼容性比较差，为IE9+,不过一般是在移动端使用，也就不存在这个problem了。

脚本异步

脚本异步是一些异步加载库(比如require)使用的基本加载原理. 直接上代码:

function asyncAdd(src){

var script = document.createElement('script');

script.src = src;

document.head.appendChild(script);

}

//加载js文件

asyncAdd("test.js");

这时候，可以异步加载文件，不会造成阻塞的效果.

但是，这样加载的js文件是无序的，无法正常加载依赖文件。

这时候，我们需要对上述函数进行优化.

var asyncAdd = (function(){

var head = document.head,

script;

return function(src){

script = document.createElement('script');

script.src= src;

script.async=false;

document.head.appendChild(script);

}

})();

//加载文件

asyncAdd("first.js");

asyncAdd("second.js");

//或者简便一点

["first.js","second.js"].forEach((src)=>{async(src);});

但是，使用脚本一步加载的话，需要等待

使用脚本异步加载时，只能等待

使用静态的async加载时，

关于这三种如何取舍，那就主要看leader给我们目标是什么，是兼容IE8,9还是手机端，还是桌面浏览器，或者两两组合。

但是对于单独使用某一个技能的场景，使用时需要注意一些tips。

js文件放置位置应该放置到body末尾

如果使用async的话，最后加上defer以求向下兼容

//如果两者都支持，async会默认覆盖掉defer

//如果只支持一个，则执行对应的即可

通常，我们使用的加载都是defer加载(因为很强的依赖关系).

以上这篇基于js文件加载优化(详解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持前端开发者。