js加载的几种方式

1、同步加载(阻塞加载)

只有当当前加载完后,才能进行下一步操作。

但是如果js中有输出document内容、修改dom等,则会造成页面阻塞,所以一般建议把<script>放在<body>结尾处

2、异步加载(非阻塞加载)

浏览器再下载执行js的同时,还会继续进行后续页面的处理

①onload时的异步加载

(function(){
if(window.attachEvent){
window.attachEvent("onload",asyncLoad);
}else{
window.addEventLister("load",asyncLoad);
}

var asyncLoad = function(){
var script = document.createElement("script");
script.type = "text/javascript";
script.async = true;
script.src = "";

var s  = document.getElementsByName("script")[0];
s.parentNode.insertBefore(script,s);
}

})();

这种方法就是把插入的script的方法放在一个函数中,然后在window的onload方法中执行

②Script In Iframe

在父窗口中插入一个iframe元素,然后在iframe中执行加载JS的操作

var iframe = document.createElement("iframe");
document.body.appendChild(iframe);
var doc = iframe.contentWindow.document;  //iframe.contentWindow:获取iframe的window属性
doc.open();
doc.write("<script> var insertJS = function(){alert(2);};<\/script><body onload = 'insertJS()'></body>");

doc.close();

③HTML5新属性:async和defer

defer:并行下载其他有defer属性的js,按照顺序执行

async:js将在下载完成后尽快执行,不能保证js顺序执行

④创建script标签,插入DOM中

3、延迟加载

有些js并不是在页面初始化时就需要,而是在某些情况才需要。

将js切分成许多模块,页面初始化时只加载需要立即执行的js,然后其他js的加载延迟到第一次需要的时候

js的加载分为两部分:下载和执行。异步加载只是解决了下载的问题,但是代码在下载后就会立即执行,在执行过程中浏览器处于阻塞状态,响应不了任何请求

解决思路:利用异步加载缓存起来,但是不立即执行,需要的时候在执行。将JS内容作为Image或者Object对象缓存起来,就不会立即执行。

①模拟较长的下载时间

利用thread让其sleep一段时间在执行下载操作

②模拟较长的JS代码执行时间

var start = Number(new Date());

while((start + 5000)>Number(new Date())){//执行js代码}

这段代码将使JS执行5秒才完成

猜你喜欢

转载自blog.csdn.net/qq_34309704/article/details/80827292
今日推荐