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> 标签内。

JavaScript 文件延迟和异步加载的更多相关文章

  1. JS文件延迟和异步加载：defer和async属性

    -般情况下,在文档的 <head> 标签中包含 JavaScript 脚本,或者导入的 JavaScript 文件.这意味着必须等到全部 JavaScript 代码都被加载.解析和执行完以 ...

  2. 转:web前端面试题合集 (Javascript相关)（js异步加载详解）

    1. HTTP协议的状态消息都有哪些? 1**:请求收到,继续处理2**:操作成功收到,分析.接受3**:完成此请求必须进一步处理4**:请求包含一个错误语法或不能完成5**:服务器执行一个完全有效请 ...

  3. HTML5 <script>元素async,defer异步加载

    原文地址:HTML5′s async Script Attribute原文日期: 2010年09月22日翻译日期: 2013年08月22日 (译者注: 异步加载,可以理解为无阻塞并发处理.) (译者再 ...

  4. Python 爬取异步加载的数据

    在我们的工作中,可能会遇到这样的情况:我们需要爬取的数据是通过ajax异步加载的,这样的话通过requests得到的只是一个静态页面,而我们需要的是ajax动态加载的数据! 那我们应该怎么办呢??? ...

  5. Javascript 文件的同步加载与异步加载

    HTML 4.01 的script属性 charset: 可选.指定src引入代码的字符集,大多数浏览器忽略该值.defer: boolean, 可选.延迟脚本执行,相当于将script标签放入页面b ...

  6. 页面异步加载javascript文件

    昨天听一同事说的异步加载js文件,可以提高页面加载速度.具体方法如下:(function() {  var ga = document.createElement('script'); ga.type ...

  7. 26、首先通过javascript包的异步加载来学习echarts包的结构

    1.在这里先写一写前言,今天在公司搞定了一个对于滚动条进行定位的case,明天开始做TestManagement. 首先大家先来一起看一看流行的javascript文件的加载方式,这里采用别人博客上的 ...

  8. Javascript 异步加载详解(转)

    本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy execution),async 属 ...

  9. 不得不说的JavaScript异步加载

    同步加载的问题 默认的js是同步加载的,这里的“加载”可以理解成是解析.执行,而不是“下载”,在最新版本的浏览器中,浏览器对于代码请求的资源都是瀑布式的加载,而不是阻塞式的,但是js的执行总是阻塞的. ...

随机推荐

  1. 树莓派4B踩坑指南 - （9）安装Git和Docker

    安装Git sudo apt-get install wget git-core 安装Docker curl -sSL https://get.docker.com | sh # 树莓派专属脚本福利, ...

  2. 刷题17. Letter Combinations of a Phone Number

    一.题目说明 题目17. Letter Combinations of a Phone Number,题目给了下面一个图,输入一个字符串包括2-9,输出所有可能的字符组合. 如输入23所有可能的输出: ...

  3. centos启动jar包

    不挂断运行命令,日志输出到log.txt中 nohup java -jar boot-cms-module-system-2.0.1.jar >log.txt & Linux 运行jar ...

  4. SpringBoot下配置Druid

    什么是Druid:Druid是阿里发开的一套基于database的监控平台,相对于其他监控来说对于中文的支持更亲民.. 前言:最近这段时间发现项目整体运行响应速度较慢,打算对系统进行深层次的优化(尤其 ...

  5. eclipse下用maven插件+Mabatis-generator生成mybatis的文件

    1. 配置Maven pom.xml 文件 在pom.xml增加以下插件: <build> </plugins> ... <plugin> <groupId& ...

  6. QT无法读入txt文件内容

    用vs写QT无法利用相对路径读入txt文件,应将此文件加入到资源文件中.

  7. 吴裕雄--天生自然ORACLE数据库学习笔记：管理表空间和数据文件

    col tablespace_name for a10 col file_name for a50 col bytes ,, select tablespace_name,file_name,byte ...

  8. 1003 Emergency (25分) 求最短路径的数量

    1003 Emergency (25分)   As an emergency rescue team leader of a city, you are given a special map of ...

  9. [经验] Linux 怎么连接 Xshell?

    (1) 首先, 你要先有一个可以正常运行的 Linux 系统, 当然一般情况下我们是把这个系统放在虚拟机里的, 我所使用的是 ubuntu-18.04.2-live-server-amd64.iso ...

  10. C++中文件的读取操作，如何读取多行数据，如何一个一个的读取数据

    练习8.1:编写函数.接受一个istream&参数,返回值类型也是istream&.此函数必须从给定流中读取数据,直至遇到文件结束标识时停止. #include <iostrea ...