zoukankan      html  css  js  c++  java
  • JavaScript 文件延迟和异步加载

    JavaScript 文件延迟和异步加载

    —般情况下,在文档的 <head> 标签中包含 JavaScript 脚本,或者导入的 JavaScript 文件。

    这意味着必须等到全部 JavaScript 代码都被加载、解析和执行完以后,才能继续解析后面的 HTML 部分。

    如果加载的 JavaScript 文件很大, HTML 文档解析就容易出现延迟。

    为了避免这个问题,在开发 Web 应用程序时,建议把导入 JavaScript 文件的操作放在 <body> 后面,让浏览器先 将网页内容解析并呈现出来后,再去加载 JavaScript 文件,以便加快网页响应速度。


    延迟执行 JavaScript 文件

    <script> 标签有一个布尔属性 defer ,设置该属性能够将 JavaScript 文件延迟到页面解析完毕后再运行

    <script type="text/javascript" defer src="test.js"></script>
    

    注意:defer 属性适用于外部 JavaScript 文件,不适用于 <script>签包含的 JavaScript 脚本。


    异步加载 JavaScript 文件

    在默认情况下,网页都是同步加载外部 JavaScript 文件的,如果 JavaScript 文件比较大, 就会影响后面 HTML 代码的解析。

    上面提到一种解决方法:就是最后加载 JavaScript 文件。

    现在可以为 <script> 标签设置 async 属性,让浏览器异步加载 JavaScript 文件,即在加载 JavaScript 文件时,浏览器不会暂停,而是继续解析。

    这样能节省时间,提升响应速度。

    <script type="text/javascript" async src="test.js"></script>
    

    async 是 HTML5 新增的布尔型属性,通过设置 async 属性,就不用考虑 <script> 标签的放置位置,用户可以根据习惯继续把很多大型 JavaScript 库文件放在 <head> 标签内。

  • 相关阅读:
    网址大全
    HTTPS的页面发送不了HTTP请求?——关于混合内容
    Prometheus node_exporter grafana部署安装
    seafile部署安装
    vnc服务器和windows2012密钥
    【转】缓存淘汰算法系列之3——FIFO类
    【转】缓存淘汰算法系列之2——LFU类
    【转】缓存淘汰算法系列之1——LRU类
    【转】缓存、缓存算法和缓存框架简介
    【转】Sizeof与Strlen的区别与联系
  • 原文地址:https://www.cnblogs.com/kai-/p/12310045.html
Copyright © 2011-2022 走看看