zoukankan      html  css  js  c++  java
  • js异步加载的5种方式

    方案1:$(document).ready

    点评:

    1、需要引用jquery

    2、兼容所有浏览器。

    方案2<script>标签的async="async"属性

    async的定义和用法(是HTML5的属性)

    async 属性规定一旦脚本可用,则会异步执行。

    点评:

     1、HTML5中新增的属性,Chrome、FF、IE9&IE9+均支持(IE6~8不支持)。此外,这种方法不能保证脚本按顺序执行。

     2、async 属性仅适用于外部脚本(只有在使用 src 属性时)。

    方案3<script>标签的defer="defer"属性

    defer 属性规定是否对脚本执行进行延迟,直到页面加载为止。

    有的 javascript 脚本 document.write 方法来创建当前的文档内容,其他脚本就不一定是了。

    如果您的脚本不会改变文档的内容,可将 defer 属性加入到 <script> 标签中,以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本,它将推迟对脚本的解释,直到文档已经显示给用户为止。

    点评:兼容所有浏览器。此外,这种方法可以确保所有设置defer属性的脚本按顺序执行。

    方案4:动态创建<script>标签

    示例:

    <!DOCTYPE html>
    <html>
        <head>
            <script type="text/javascript">
                (function(){
                    var s = document.createElement('script');
                    s.type = 'text/javascript';
                    s.src = "http://code.jquery.com/jquery-1.7.2.min.js";
                    var tmp = document.getElementsByTagName('script')[0];
                    tmp.parentNode.insertBefore(s, tmp);
                })();
            </script>
        </head>
        <body>
        </body>
    </html>
    点评:兼容所有浏览器。
    方案5:加载es6模块的时候设置type=module
    异步加载不会造成阻塞浏览器,页面渲染完再执行,可以同时加上async属性,异步执行脚本。
  • 相关阅读:
    BZOJ3312: [Usaco2013 Nov]No Change
    BZOJ1750: [Usaco2005 qua]Apple Catching
    BZOJ2733: [HNOI2012]永无乡
    BZOJ4756: [Usaco2017 Jan]Promotion Counting
    PHP 反射机制Reflection
    NOD 1113矩阵快速幂
    CODEVS 3500
    hdu 5172 GTY's gay friends 线段树
    LA 4329 Ping pong
    hdu 3500 DFS(限定)
  • 原文地址:https://www.cnblogs.com/zhx119/p/9510902.html
Copyright © 2011-2022 走看看