延迟加载JS的方式有哪些


<!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>
</head>

<body>
    <script src="test1.js" defer></script>

    如果没有defer或async属性,浏览器会立即加载并执行相应的脚本。<br>
    阻塞了后续文档的加载。<br>


    一、defer属性<br>
    defer的加载与html解析并行(异步),执行会被延迟到整个页面都解析完毕之后再执行。<br>


    <script src="test1.js" async></script>

    <br>
    二、sync属性<br>
    sync的加载和执行与html解析并行(异步),也就是说js加载完了之后会立即执行,不会等待html解析完。(谁先加载谁执行)<br>


    <br>
    三、让JS最后加载和执行(这种方法只会和html内容一起加载)<br>
    把js外部引入的文件放到页面底部,来让js最后引入,从而加快页面加载速度<br>


    <br>

    四、sync和defer相同点<br>
    加载时不会都阻塞html解析<br>

</body>

</html>

文章作者: iamfugui
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 iamfugui !
评论
  目录