异步加载

最新推荐文章于 2024-04-25 15:19:41 发布

zyf_1998

最新推荐文章于 2024-04-25 15:19:41 发布

阅读量185

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/zyf_1998/article/details/104822871

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

什么是同步加载

同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才能进行下一步操作。
所以默认同步执行才是安全的。但如果js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。所以一般建议把<script>标签放在<body>结尾处，这样尽可能减少页面阻塞。

什么是异步加载

异步加载又叫非阻塞加载，浏览器在下载执行js的同时，还会继续进行后续页面的处理。

javascript异步加载的三种的方案

1.defer异步加载

属性规定是否对脚本执行进行延迟，直到页面加载为止
如果脚本不会改变文档的内容，可将defer属性加入到<script>标签中，以便加快处理文档的速度
用法：在script标签里加入defer属性即可，适用于所有script脚本

<script type="text/javascript" defer></script>

2.async异步加载

async属性仅适用于外部脚本 async属性规定一旦脚本可用，则会异步执行
async的用法和defer一样，但async只适用于外部引用的脚本，即script有src属性时才可使用，不同的是，添加async属性后，js脚本是乱序执行的，不管你声明的顺序如何，只要某个js脚本加载完就立即执行

<script src='j.js' async></script>

3.动态生成script标签
在js里创建script标签，插入DOM中，加载完成后callback

function loadScript(url, callback){
    var s = document.createElement('script');
    s.type = 'text/javascript';
    if(s.readyState){
        s.onreadystatechange = function(){  //兼容IE
            if(s.readyState == 'complete' || s.readyState == 'loaded'){
                callback();
            }
        }
    }else{
        s.onload = function(){  //safari chrome opera firefox
            callback();
        }
    }
 
    s.src = url;
    document.head.appendChild(s);

这样所有的js脚本都会在onload事件后才加载，onload事件会在所有文件内容（包括文本、图片、CSS文件等）加载完成后才开始执行，极大的优化了网页的加载速度，提高了用户体验

zyf_1998

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
异步加载

什么是异步加载异步加载又叫非阻塞加载，浏览器在下载执行js的同时，还会继续进行后续页面的处理。javascript异步加载的三种的方案1.defer异步加载属性规定是否对脚本执行进行延迟，直到页面加载为止如果脚本不会改变文档的内容，可将defer属性加入到<script>标签中，以便加快处理文档的速度<script type="text/javascript" d...
复制链接

扫一扫