上来先给一个问题：在书写html页面时，当你要从外部引入js文件时，script标签会放置在哪个位置呢，放置位置不同对页面加载有影响吗？ 默认情况下，浏览器是同步加载 javascr
上来先给一个问题：在书写html页面时，当你要从外部引入js文件时，script标签会放置在哪个位置呢，放置位置不同对页面加载有影响吗？
默认情况下，浏览器是同步加载 javascript 脚本：即渲染引擎遇到 script 标签就会停下来，等到执行完脚本，再继续向下渲染。如果是外部脚本，还必须加入脚本下载的时间。
如果脚本体积很大，下载和执行的时间就会很长，因此造成浏览器堵塞，用户会感觉到浏览器“卡死”，出现短暂的空白，没有任何响应。这会造成很不好的用户体验，解决这个问题有两种方案：
①. 改变script标签的放置位置。最好将其丢在body标签的最后面，即放在</ body>标签的前面，这种方式不会影响浏览器的DOM渲染，会让页面处理执行完后才去执行它
②. 同步转异步。浏览器允许脚本异步加载，这种方式可以让 script 标签继续放在head头部，下面是两种异步加载的语法：
<script src="./1.js" async></script>
<script src="./1.js" defer></script>异步就是 script 标签打开defer或async属性，脚本就会异步加载。浏览器渲染引擎遇到这一行命令，就会开始下载外部脚本，在下载的同时渲染引擎会直接执行后面的命令。
async和defer都会让外部脚本下载时，渲染引擎不停下来。
async属性与defer的区别就在于：
蓝色线代表网络读取（脚本下载），红色线代表执行，这俩都是针对脚本的；绿色线代表 HTML 解析。
defer属性，浏览器会立即下载相应的脚本，在下载的过程中页面的处理不会停止，等到文档解析完成后脚本才会执行。
async属性，浏览器会立即下载相应的脚本，在下载的过程中页面的处理不会停止，下载完成后立即执行，执行过程中页面处理会停止。
若不设置任何属性，那么当与到script脚本时，会等script脚本下载和执行都完成之后才继续执行下面的页面处理。
【注】且async比defer更“厉害”，当同一标签同时使用两种属性时，遵循async！！！
async和defer的区别不仅体现在外部script文件的下载和执行上，更体现在多个脚本存在时的不同：
先来个代码示例：
外部script文件
1.js 文件：
// ... 非常多的js代码
console.log('1');
2.js 文件：
console.log('2');
主html文件
使用defer：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js阻塞</title>
<!-- defer会让dom先执行 -->
<script src="./1.js" defer></script>
<script src="./2.js" defer></script>
</head>
<body>
<h1>js的阻塞是如何进行的？</h1>
<script>
document.addEventListener('DOMContentLoaded', function() {
console.log('DOMContentLoaded');
})
</script>
</body>
</html>
控制台执行结果：
使用async：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js阻塞</title>
<!-- defer会让dom先执行 -->
<script src="./1.js" async></script>
<script src="./2.js" async></script>
</head>
<body>
<h1>js的阻塞是如何进行的？</h1>
<script>
document.addEventListener('DOMContentLoaded', function() {
console.log('DOMContentLoaded');
})
</script>
</body>
</html>
控制台执行结果：
从控制台的运行结果就可以看出：
defer：第一个延迟脚本会先于第二个延迟脚本执行（当然，如果一些浏览器不完全遵照html5标准，也会出现不按顺序执行的情况），且这两个脚本会先于DOMContentLoaded事件执行。
async：哪个先下载完成哪个就立即执行！！！这两个脚本不一定会在DOMContentLoaded事件触发之前执行，但一定会在window.onload 事件之前执行完成。另外，值得注意的是，在先下载完的脚本执行过程中，其他脚本不会停止下载，而会继续下载。
【注】DOMContentLoaded会在dom加载完成后触发，即文档完全加载和解析之后触发。
○ 更多关于DOMContentLoaded，请参考 https://www.jb51.net/article/222345.htm
[1] Https://blog.csdn.net/mx18519142864/article/details/82021754
[2] https://blog.csdn.net/weixin_42561383/article/details/86564715
[3] https://segmentfault.com/q/1010000000640869
到此这篇关于JavaScript 文件加载与阻塞问题之性能优化案例详解的文章就介绍到这了,更多相关JavaScript 文件加载与阻塞问题内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
--结束END--
本文标题: JavaScript 文件加载与阻塞问题之性能优化案例详解
本文链接: https://www.lsjlt.com/news/135117.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0