扫盲JavaScript知识点 - 文件延迟和异步加载
2021-08-11 本文已影响0人
JX灬君
JavaScript文件延迟和异步加载
首先需要明白一个html页面是一个文档，浏览器在进行解析时会根据文档流从上到下逐行解析和显示。
-
从<html> - <header> - <body>
-
JavaScript代码也是HTML文档的组成部分，所以执行顺序也是根据<script>标签的位置来确定的
-
如果你如果在header里放入一个影响解析速度的很大的<script>文件,那么<body>里的文档解析就会出现延迟，换句话说，就是会页面长时间的留白。
-
解决这种情况的思路都是把<script>的解析放到<body>解析后面
- 方法一：
简单粗暴的办法就是将<script>标签放到<body>后面 - 方法二：延迟执行JavaScript文件 - defer
设置延迟执行JavaScript文件（只对外部src引入的<script>起作用）
defer： <script>标签的一个布尔属性。defer设置为true时，将<script>引入的脚本延迟到浏览器解析完网页之后再执行。
<script type="text/javascript" defer src="test.js"</script> - 方法三：异步加载JavaScript文件 - async（HTML5新增的布尔型属性）
async: <script>标签的一个布尔属性。设置async之后，浏览器异步加载JavaScript文件，在加载JavaScript文件时，浏览器不会暂停，而是继续解析。达到节省时间，提升响应速度。
<script type="text/javascript" async src="test.js"</script>
- 方法一：
