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. 实验一&#160;&#160;GIT 代码版本管理

    实验一  GIT 代码版本管理 实验目的: 1)了解分布式分布式版本控制系统的核心机理: 2)   熟练掌握git的基本指令和分支管理指令: 实验内容: 1)安装git 2)初始配置git ,git ...

  2. nginx的access的阶段的access模块、auth_basic模块、auth_request模块及satisfy指令介绍

    access 模块 示例从上向下匹配 location / { deny 192.168.1.1; allow 192.168.1.0/24; allow 10.1.1.0/16; allow 200 ...

  3. ANSYS-MFC二次开发

    目录 1. 开发流程 2. 开发代码 1. 开发流程 ANSYS-MFC二次开发的思路其实是特别简单的,通常MFC主要是设计界面,然后从MFC界面中读取要设计的参数,然后根据这些设置了的参数生成APD ...

  4. development tool

    Eclipse :        https://www.eclipse.org/downloads/ WebStorm:   http://www.jetbrains.com/webstorm/do ...

  5. WDF驱动中KMDF与UMDF区别

    抄的 早期的Windows 95/98的设备驱动是VxD(Virtual Device Driver),其中x表示某一类设备.从Windows 2000开始,开发驱动程序必以WDM(Windows D ...

  6. HTML5模板引擎 Thymeleaf 教程（转）

    原文:http://www.open-open.com/lib/view/open1383622135586.html Thymeleaf是一个XML/XHTML/HTML5模板引擎,可用于Web与非 ...

  7. GET和POST面试知识点

    导读:大部分APP都依赖于网络通信,对于开发者来说,基于网络通信的开发无疑是必须掌握的.HTTP通信作为目前计算机主要的通信协议,是企业面试当中必问的.对于HTTP通信的概念,本文不作说明,我将在后续 ...

  8. 2018 蓝桥杯省赛 B 组模拟赛

    C. 结果填空:U型数字 最近蒜头君喜欢上了U型数字,所谓U型数字,就是这个数字的每一位先严格单调递减,后严格单调递增.比如 212 就是一个U型数字,但是 333, 98, 567, 3131,就是 ...

  9. Ajax请求回调地狱及解决方案（promise、async和await）

    谈及回调地狱发生得情况和解决办法,就必须追溯到原生ajax请求. 先列出服务器提供的数据接口: // 服务器端接口 app.get('/data1', (req, res) => { res.s ...

  10. axios发送post请求node服务器无法通过req.body获取参数

    问题: 项目前端使用Vue框架,后端使用node.js搭建本地服务器.前端通过 axios 方式请求后端数据的过程中,发现如果是 get 请求,服务器端能够通过 req.query 获取前端传递的参数 ...