这里先解释html在浏览器的一般加载流程。

用户输入搜索内容，浏览器发送搜索内容到服务器，服务器返回html文件。这个过程十分复杂，包含多个层次的数据传输。这里只讨论js代码加载，不再展开。
浏览器加载html文档，也就是绘制DOM树。绘制DOM树按照深度优先原则，在html标签的基础上，先加载head标签，再加载head标签中的meta标签，mate标签内部没有其他元素，再加载title标签·····
在加载到head标签内部的link标签时，浏览器向指定的服务器请求css文件，等待服务器返回css文件。这里注意，一直到css文件下载完成后浏览器才会进行针对CSS的渲染，这个下载CSS的过程中浏览器会继续进行html文档的加载(DOM树的绘制)。
在加载到img标签引入的图片时，浏览器向服务器发送请求，同时进行图片的下载和后续文档的加载。这时浏览器已经加载出了img元素，但图片并未下载。在后续文档加载的某一刻，图片下载完成，浏览器重新整理以上因图片出现而改变的页面样式。
在加载到js代码时，浏览器直接下载并执行js代码，执行完毕后继续进行后续页面加载。js下载和执行过程中DOM树停止绘制。若这里js代码改变html页面或样式时，浏览器重新渲染页面。
页面加载完毕后，若某js事件改变页面样式，浏览器重新渲染页面。

这里有笔者的一篇笔记(从另一角度说明js加载)

js加载时间线

1. 创建Document对象，开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段document.readyState = ‘loading’。

2. 遇到link外部css，创建线程加载，并继续解析文档。

3. 遇到script外部js，并且没有设置async、defer，浏览器加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。

4. 遇到script外部js，并且设置有async、defer，浏览器创建线程加载，并继续解析文档。对于async属性的脚本，脚本加载完成后立即执行。（异步禁止使用document.write()）

5. 遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档。

6. 当文档解析完成，document.readyState = ‘interactive’。

7. 文档解析完成后，所有设置有defer的脚本会按照顺序执行。（注意与async的不同,但同样禁止使用document.write()）;

8. document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。

9. 当所有async的脚本加载完成并执行后、img等加载完成后，document.readyState = ‘complete’，window对象触发load事件。

10. 从此，以异步响应方式处理用户输入、网络事件等。

同步加载与异步加载

同步加载：如js代码的加载，加载js代码时浏览器不会进行dom树的加载。直到js代码加载并执行完毕后才会继续进行后续加载。一段时间只是进行一件事，不同时做多件事。

异步加载：异步加载模式下浏览器会一边进行js代码的下载，另一边进行DOM树的加载。同时进行多件事的处理。

异步加载js代码好处

页面加载速度影响用户体验。用户应优先看到页面内容和样式渲染后的效果，针对js代码的行为效果不应优先加载，优先度低于html和css。异步加载使js代码在页面加载后才进行加载，会优化用户体验，加快加载速度。

实现异步加载方式

async 只适用于外部引入的script代码。使用方式就是在script标签中加上这个属性。
通过自定义函数实现异步加载。
defer 在script标签中加上defer属性。就可以使js代码在DOM文档加载完后加载执行，也就是实现了异步加载。这个方式只限ie浏览器，微软公式宣布ie浏览器在2022年6月15日正式关闭，这个方式也就成为历史了。

代码如下

    <script async></script><script async="async"></script>

        var js=document.createElement("script");js.type="type/javascript";js.src="js代码的路径";document.head.appendChild(js);

查看html页面加载状态

我们可以通过document.readyState来查看页面加载进度。页面加载进度分为

uninitalized-未开始加载；
loading-正在加载；
interactive-已加载，用户可以交互。DOM树完成加载，触发DOMContentLoaded事件；这时图片,link引入的css等文件还未加载完成。
complete-加载完成；

以上状态除了uninitialized不能显示出来外，其他状态都可以通过document.readyState显示。

代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#dd{width: 100px;height: 100px;background-color: #000;}</style>
</head>
<body><div id="dd"></div><script>console.log(document.readyState);//加载到这里时，浏览器加载script代码，属于加载中 loadingvar dd=document.getElementById("dd");dd.onclick=function(){console.log(document.readyState);//点击事件触发时，页面已经全部加载完成 为complete}document.addEventListener("DOMContentLoaded",function(){console.log(document.readyState);})</script>
</body>
</html>

javascript异步加载相关推荐

7.JavaScript异步加载与加载时间线
JavaScript异步加载与加载时间线上一篇 JavaScript浅层克隆和深层克隆下一篇 JavaScript事件处理模型 - 事件冒泡,捕获文章目录 JavaScript异步加载与加载时间 ...
JavaScript异步加载与同步加载
关于同步加载与异步加载的区别同步加载:同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止了后续的解析,因此停止了后续的文件加载(如图像).渲染.代码执行. 异步加载:异步加载又叫非阻塞,浏览器在下 ...
JavaScript异步加载，解决js阻塞
1.defer: 在script标签里添加defer,用于外部链接js文件,也可以异步加载内部脚本,会等待dom树生成后再执行js脚本代码 <script src="01.js&quo ...
【前端】JS异步加载
文章目录为什么要异步加载如何实现异步加载参考为什么要异步加载两个原因其实是一个意思. 原因1: JS是单线程的语言,它会同步的执行代码,从上往下执行但是,一旦网络不好,或要加载的js文件过 ...
javascript 文件的同步加载与异步加载
原文:[转载]javascript 文件的同步加载与异步加载 HTML 4.01 的script属性 charset: 可选.指定src引入代码的字符集,大多数浏览器忽略该值. defer: bool ...
JavaScript script标签同步异步加载过程
同步加载同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作. <script src="http://xxx/script.js& ...
google android广告异步加载,javascript 广告后加载，加载完页面再加载广告
先加载完页面再加载广告的原理: 网页打开的顺序都是按页面从上到下的顺序加载完成的,所以要想使广告不影响页面打开速度,就要等页面全部打开完成后,再加载JS代码.等页面加载完再加载广告其实就是将广告的 J ...
js如何将数据放在一个内置窗口里面_Java 爬虫遇上数据异步加载，试试这两种办法！...
这是 Java 爬虫系列博文的第三篇,在上一篇 Java 爬虫遇到需要登录的网站,该怎么办? 中,我们简单的讲解了爬虫时遇到登录问题的解决办法,在这篇文章中我们一起来聊一聊爬虫时遇到数据异步加载的问题 ...
java 爬虫异步_Java 爬虫遇上数据异步加载，试试这两种办法！
这是 Java 爬虫系列博文的第三篇,在上一篇 Java 爬虫遇到需要登录的网站,该怎么办? 中,我们简单的讲解了爬虫时遇到登录问题的解决办法,在这篇文章中我们一起来聊一聊爬虫时遇到数据异步加载的问题 ...

javascript异步加载

同步加载与异步加载

异步加载js代码好处

实现异步加载方式

查看html页面加载状态

javascript异步加载相关推荐

最新文章

热门文章