javascript脚本的延时加载

时间 2019-11-11

原文原文链接

javascript脚本的延时加载

向HTML页面中插入js代码的主要方法是使用<script>标签，在实际的开发中多采用外部文件的方式，主要考虑到外部js代码的可维护性及可缓存性等优势。传统的作法是将全部的外部文件放在<head>元素中，这意味着等到全部的javascript代码都被下载、解析和执行以后，再开始渲染页面内容。这种状况下，当加载的外部js代码不少的时候，会致使浏览器渲染页面出现明显的延时，延时期间窗口会显示一片空白，即所谓的假死状态，也成为阻塞状态。
为了不这种“假死”状态的出现，咱们通常建议将外部js代码放在<body>元素以后加载。javascript

defer延时脚本

为了更好的解决页面渲染出现阻塞问题，在HTNL4.01中为<script>标签订义了defer属性，改属性只适用于外部脚本，其意图是在加载或执行脚本时不影响DOM的渲染。html

<html>
    <head>
        <script type="text/javascript" defer="defer" src="demo1.js"></script>
        <script type="text/javascript" defer="defer" src="demo2.js"></script>
    </head>
    <body>
        //DOM建立等操做
    </body>
</html>

上文代码中加入了两个外部script脚本，且其中都设置了defer属性，至关于告诉浏览器，当即下载脚本，但延时执行，在整个DOM加载完成后再执行。
另外，在HTML5中要求脚本按照期出现的前后顺序执行，即demo1要先于demo2执行，且二者都要先于DOMContentLoaded事件执行，而在现实中延时脚本不必定会按顺序执行，也不必定在DOMContentLoaded事件触发前执行，所以建议在页面中只包含一个延时脚本。java

async异步加载

async表示异步，是单词asynchronous[异步的]简写。顾名思义，该属性表示异步加载脚本，与defer属性同样，也只适用于外部脚本。
async属性通知浏览器马上下载脚本，与defer不一样的是，async并不保证它们的前后执行顺序。async属性是为了让页面实现异步加载，而无需等待脚本的加载和执行。浏览器

<html>
    <head>
        <script type="text/javascript" async src="demo1.js"></script>
        <script type="text/javascript" async src="demo2.js"></script>
    </head>
    <body>
        //DOM建立等操做
    </body>
</html>

在上述代码中，第二个脚本可能会优先于第一个脚本执行，所以必定要保证两个脚本之间没有依赖关系。缓存