实现JS异步加载的三种方法

一、为什么要写异步加载：

①js加载本身是属于同步加载的，加载js文件会阻塞文档，一旦网速不好，那么整个网站将等待js加载而不进行后续渲染等工作。但是有些工具方法需要按需加载，有一些工具js文件它是不会改变页面的，用到再加载，不用不加载。

②但是实际开发中我们只需要把script标签放在页面的最下面。完全没有必要写赘余代码，但是按需加载一定是面试的重中之重！！！

二、JS异步加载的三种方案：

①defer

 script标签中增加defer属性，异步加载

 1.但要等dom文档全部解析完（dom树生成）才会被执行。

 2.只有IE能用；

②async

 script标签中增加async属性，异步加载

 1.加载完就执行;async只能加载外部脚本

 2.不能把js写在script标签里。

 3.w3c标准，IE9以下不支持

③封装一个函数兼容性的异步加载js文件并且可以按需执行该文件里面的函数（按需加载）

<script>function loadScript(url,callback){//url是按需加载的js文件//callback是按需加载的js文件中某个函数// 1. 创建一个script标签var script = document.createElement('script');    // 处理ie的兼容if(script.readyState){script.onreadystatechange = function(){// 如果script已经下载完成if(script.readyState == 'complete' || script.readyState == 'loaded'){callback();}}}else{// 监听script的下载的状态 当状态变为下载完成后 再执行callbackscript.onload = function(){callback();}}//在后面引入的目的是如果在IE上如果下载太快（比读程序还快）//IE的readystatechange 事件检测状态码的时候，它早已经从loading变成complete或者loaded（以极快的速度加载完了文件，你还没来得及检测）// 那你再检测它就不会变了，它一直都是complete或者loaded//这个时候就是马后炮了，检测也没用了。// 2. 给script标签添加src 引入一个js文件script.src = url;// 3. 追加到bodydocument.body.appendChild(script);}</script>

三、最后补充： document三个状态

 ①loading 加载中状态，dom树正在绘制中

 ②interactive 活跃状态，dom树绘制完成

③complete 完成状态（老版本的浏览器可能是loaded），dom树绘制完成并且所有的资源下载完成

这个记录下来为了方便以后使用的方便，也希望大佬们多多交流，多多留言，指出我的不足的之处啦！

有需要的小伙伴可以研究研究啦！！

实现JS异步加载的三种方法相关推荐

图片预加载的三种方法
转载: 图片预加载的三个方法 - 浅夏初晴 - 博客园利用CSS.JavaScript及Ajax实现图片预加载的三大方法预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利 ...
webdriver 等待页面加载完成_Python爬虫，登陆神器Selenium等待(waits)页面加载的三种方法...
网页常常会因为网络原因,程序问题等等导致打开网页慢,一直在那里打圈圈. 出现这种情况时网页里的很多元素就没有加载完成,如果你刚好要定位的元素没有加载完,这时定位的话程序就会抛出异常. 所以程序里要加入 ...
JS 异步加载js的三种方案
js文件同步加载的缺点: 页面的js文件一般是同步加载,加载到js文件会阻断html和css的加载,要等到js文件加载完毕,才能继续向下执行,因为js文件可能会操作html和css:但有些js文件不会 ...
【前端】JS异步加载
文章目录为什么要异步加载如何实现异步加载参考为什么要异步加载两个原因其实是一个意思. 原因1: JS是单线程的语言,它会同步的执行代码,从上往下执行但是,一旦网络不好,或要加载的js文件过 ...
JS异步加载及解决方式
1.js中的同步加载和异步加载有什么不同? javascript语言是单线程机制.所谓单线程就是按次序执行,执行完一个任务再执行下一个. 对于浏览器来说,也就是无法在渲染页面的同时执行代码. 同步加载 ...
js延迟加载、js异步加载
1.js延迟加载 (1)js延迟加载是js性能优化的一种方式 (2)作用:为了提高网页的加载速度 (3)原理:等网页加载完成之后再加载js文件 ··需要优化的原 ...
知识点讲解五：处理js异步加载问题
文章目录前言环境代码思路原代码前言在新闻网站中大多采用的是异步加载模式,新闻条目会随滚动条的滚动而逐渐加载.当爬虫访问这类网站时得到的HTML数据仅仅是我们看到的页面数据,只有当我们向下滚 ...
turn.js异步加载实现翻书效果
<div class="m-art-cont"><script type="text/javascript" src="/Runti ...
hbase 协处理器部署_HBase协处理器加载的三种方式
本文主要给大家罗列了hbase协处理器加载的三种方式:shell加载(动态).api加载(动态).配置文件加载(静态).其中静态加载方式需要重启hbase. 我们假设我们已经有一个现成的需要加载的协处 ...

实现JS异步加载的三种方法

实现JS异步加载的三种方法相关推荐

最新文章

热门文章