• html5_延迟(defer)脚本与异步(async)脚本


    延迟脚本:

    诸如以下的html文档:

    <!Doctype html>
    <html>
        <head>
            <title>延迟脚本</title>
            <script src="defer.js"></script>
        </head>
        <body>
            <div id="target"></div>
        </body>
    </html>

    其中包含的javascript代码为:

    var tg=docuemnt.getElementById("target");
    tg.innerHTML="XX";
    tg.style.backgroundColor="gery";

    以前的浏览器对文档进行解析时,当解析到<script>元素时,浏览器会做两件事:

    1.停止继续解析,转而根据<script>元素的src属性下载对应的js脚本文。。

    2.解析执行脚本文件。

    当浏览器解析执行脚本文件时,文档内并没有id为”traget“的元素,也因此这段代码是错误的。

    解决上述问题的传统做法是将<script>写在<body>内部的最后面。

    而延迟脚本的作用则是与之相同,即在文档页面没有完全解析之前,不对<script>元素进行解析。

    延迟脚本如下:

    <script src="defer.js" defer> 
    <!--即在script标签内写入一个defer即可-->

    异步脚本:

    当脚本解析占用太多时间时,将脚本设置为异步脚本,浏览器会对脚本解析启动新线程,使得脚本解析与文档解析可以同步进行。它的作用是避免处理脚本时间过长导致页面长时间空白。

    html文档:

    <!Doctype html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <title></title>
        <script src="async.js"></script>
    </head>
    <body>
        <div>XX</div>
    </body>
    </html>

    js代码:

    for(let i=0;i<10000;i++){     
        //some code 
    }

    如上代码所示:js代码需要执行循环一万次,在循环完成之前不会向下解析。

    异步脚本如下:

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

    根据红宝书的描述:

    一个页面最好只有一个延迟脚本。

    延迟脚本与异步脚本都只适用于外部脚本。

    建议异步加载期间不要有修改DOM的行为。

  • 相关阅读:
    精通正则表达式(JavaScript)
    Go知识点记录
    多线程揭秘
    Python test
    ELinq+T4模版引擎制作多文件实体代码生成器
    浏览器内核
    MongoDb的增删改查
    LINQ执行表达式
    ASP.NET MVC3 读书笔记四(数据注解和验证)
    C#默认以管理员身份运行程序
  • 原文地址:https://www.cnblogs.com/Syinho/p/12325557.html
Copyright © 2020-2023  润新知