JavaScript 脚本下载解释执行阻塞页面优化

最新推荐文章于 2021-04-30 16:25:02 发布

前端小生

最新推荐文章于 2021-04-30 16:25:02 发布

阅读量1.2k

点赞数

分类专栏： javascript高级程序设计 javascript 文章标签： javascript html 优化前端浏览器

本文链接：https://blog.csdn.net/Java_Warplane/article/details/72809856

版权

javascript 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

javascript高级程序设计

8 篇文章 0 订阅

订阅专栏

优化原因：在前端页面加载过程中，JavaScript代码的下载、解释和执行会阻塞页面的其他执行（此时页面会一片空白），浏览器在遇到<body>标签才开始呈现内容。

优化建议：

1、把JavaScript引用放在<body>元素中内容的后面：

<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<!-- 这里放内容 -->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>

2、使用defer属性（只适合引用外部脚本文件，不能保证按顺序执行脚本，建议只有一个脚本引用使用defer属性），延迟脚本，js脚本会被延迟到整个页面都解释完毕后（浏览器遇到</html>标签后）再运行：

<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>

3、使用async属性（只适合引用外部脚本文件，不能保证按顺序执行脚本，请确保脚本之间不含依赖），异步脚本，异步脚本一定会在页面的load事件前执行：

<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" async src="example1.js"></script>
<script type="text/javascript" async src="example2.js"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>

注意：使用defer属性引入的脚本会比使用async属性引入的脚本先执行。