JavaScript的异步加载
js的异步加载
JavaScript是单线程执行，即代码会一行一行自上而下执行，正常来讲，浏览器是同步加载js代码的，但是一旦遇到网速不好，或者加载的js代码文件过大，容易造成页面阻塞，整个网站将等待js加载而不进行后续的渲染工作，影响交互体验。
如：HTML元素按照其页面出现顺序渲染，此时js获取DOM对象，若DOM结构还没有加载完成，就会获取到空对象。
<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>
<script type="text/javascript">
const ul = document.querySelector('ul')
console.log(ul) // null
const li = document.createElement('li')
li.innerHTML = '123'
ul.appendChild(li) // Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
</script>
</head>
<body>
<ul></ul>
</body>这是因为js是一行一行代码执行，js加载执行在DOM结构之前，故为null。解决：通常把< script >放在后面DOM结构后面。
js异步加载 就是 等页面加载完成之后再加载js文件 。有助于提高页面故加载速度。
js异步加载的三种方式
①defer异步加载
特点：需要等到dom文档全部解析完才会被执行，ie特有
<script type = 'text/javascript' src = tools.js' defer = 'defer'></script>
<script type = 'text/javascript' src = tools.js' defer ></script> ②async异步加载
特点：加载完就执行，async只能加载外部脚本，不能把js写在script标签里面
<script type = 'text/javascript' src = 'tools.js' async="async"></script>③动态创建script标签
//tools.js
function test()
{
console.log('hello world')
}//在页面中引入tools.js，并执行里面的方法
<script script type = 'text/javascript'>
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'tools.js';
document.head.appendChild(script);
test () // Uncaught ReferenceError: test is not defined
</script>问题
当程序执行至 test（） 时，前面的 script.src="tools.js" 还没加载完毕。
解决
①设置在1秒之后执行，即等js下载完后再执行
<script script type = 'text/javascript'>
var script = doccumrnt.createElement('script');
script.type = 'text/javascript';
script.src = 'tools.js';
document.head.appendChild(script);
setInterval(function(){
test ();
},1000)
</script>②监听是否加载完毕
// 兼容性好，但不适用于ie
<script script type = 'text/javascript'>
const script = doccumrnt.createElement('script');
script.type = 'text/javascript';
script.src = 'tools.js';
script.onload = function (){
test();
}
document.head.appendChild(script);
</script>
// 适用于ie
<script script type = 'text/javascript'>
const script = doccumrnt.createElement('script');
script.type = 'text/javascript';
script.src = 'tools.js';
script.onreadystatechange = function(){
if(script.readyState == 'complete || script.readyState == 'loaded'){
test();
}
}
</script>兼容性写法
<body>
<script type='text/javascript'>
function scriptLoad(url, callback) {
const script = document.createElement('script');
script.type = 'text/javascript';
if (script.readyState) {
script.onreadystatechange = function() {
if (script.readyState == 'complete' || script.readyState == 'loaded') {
callback();
}
}
} else {
script.onload = function() {
callback();
}
}
script.src = url; // 防止出现网速太快造成事件监听不到变化
document.head.appendChild(script);
}
scriptLoad('index.js', test) // Uncaught ReferenceError: test is not defined
</script>
</body>
报错原因：页面用到 test（）时， script.src 还没有加载。解决：将 test,js 写成对象形式
//tools.js
// function test() {
// console.log('hello world')
// }
const tools = {
test: function() {
console.log('hello world')
}
}
<body>
<script type='text/javascript'>
function scriptLoad(url, callback) {
const script = document.createElement('script');
script.type = 'text/javascript';
if (script.readyState) {
script.onreadystatechange = function() {
if (script.readyState == 'complete' || script.readyState == 'loaded') {
tools[callback]()
}
}
} else {
script.onload = function() {
tools[callback]()
}
}
script.src = url; // 防止出现网速太快造成事件监听不到变化
document.head.appendChild(script);
}
scriptLoad('index.js', 'test')
</script>
</body>有时候为了将DOM文档解析完之后执行js代码，便将js写在DOM文档结构之后，但是这样写不够美观。解决：监听页面是否加载完成
window.addEventListener('load',function(){.....});
// 1、页面所有的东西加载并且执行完之后才执行的方法，假如页面其中任何一个src的资源没被加载，该onload事件便无法执行。运行效率慢
document.addEventListener('DOMContentLoaded',function(){.....},false);
// 2、当纯 HTML 被完全加载以及解析时，事件会被触发，而不必等待样式表，图片或者子框架完成加载。 效率较高
在你的脚本有机会运行前，DOMContentLoaded可能就已经被触发。所以在决定添加一个事件监听器前最好先检查一下。只能用addEventListener来监听时间是否触发
function doSomething() {
console.info('DOM loaded');
}
if (document.readyState === 'loading') { // 此时加载尚未完成
document.addEventListener('DOMContentLoaded', doSomething);
} else { // 此时`DOMContentLoaded` 已经被触发
doSomething();
}了解js加载时间线
浏览器在开始运行一个页面时，会初始化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，浏览器创建线程异步加载，并继续解析文档。（异步禁止使用 document.write()）
注意：
1、async 属性的脚本，脚本加载完成后立即执行。defer属性脚本要等到dom解析完成后再执行。
2、异步禁止使用 document.write()：因为整个文档解析到差不多，再调用document.write()，会把之前所有的文档流都清空，用它里面的文档代替。除了异步禁止，而且当内容全部加载完毕后也要禁止使用document.write()，也就是window.onload。
5、遇到 img 等（带有 src），先正常解析 dom 结构，然后浏览器异步加载 src，并继续解析文档。看到标签直接生产 dom 树，不用等着 img 加载完 src。
6、当文档解析完成（domTree 建立完毕，不是加载完毕，解析在加载之前），document.readyState = 'interactive'。
7、文档解析完成后，所有设置有 defer 的脚本会按照顺序执行。（注意与 async 的不同,但同样禁止使用 document.write()）;
8、文档解析完成后，document 对象触发 DOMContentLoaded 事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。
9、当所有 async 的脚本加载完成并执行后、img 等加载完成后（页面所有的都执行加载完之后），document.readyState = 'complete'，window 对象触发 load 事件。
10、从此，以异步响应方式处理用户输入、网络事件等。
评论 (0)