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. leetcode 0206

    目录 ✅ 292. Nim 游戏 ✅ 933. 最近的请求次数 ✅ 942. 增减字符串匹配 仍旧有需要思考的地方 py尝试 ✅ 977. 有序数组的平方 ✅ 292. Nim 游戏 https:// ...

  2. php 基础 php获取前一天，前一个月，前一年的时间

    获取前一天的时间: $mytime= date("Y-m-d H:i:s", strtotime("-1 day")); $mytime=mktime(0, 0 ...

  3. centos7 ip配置及ssh服务连接

    一.配置ip /etc/sysconfig/network-scripts/ifcfg-ens33 ifcfg-ens33 这个是配置网卡的配置文件,名字可能不一样,大概为:ifcfg-网卡名 TYP ...

  4. idea代码神器：根据表生成代码

    Easycode是idea的一个插件,可以直接对数据的表生成entity,controller,service,dao,mapper,无需任何编码,简单而强大. 1.安装(EasyCode) 我这里的 ...

  5. C、C++ 不得宠，微软正开发新的编程语言！

    76 年迭代与更新,编程语言界,谁主沉浮? 在六百多种编程语言中,对于开发者而言,其主观印象中或只有几种主流的编程语言,如 Java.C.C++.C#.新贵 Python 等,而之所以它们能够成为主流 ...

  6. iOS一个简单的设置圆角不引起性能问题的分类

    http://www.cocoachina.com/articles/18756 iOS设置圆角矩形和阴影效果 https://www.cnblogs.com/rayshen/p/4900336.ht ...

  7. SQL查询效率注意事项 2011.12.27

    一.查询条件精确,针对有参数传入情况 二.SQL逻辑执行顺序 FROM-->JOIN-->WHERE-->GROUP-->HAVING-->DISTINCT-->O ...

  8. PTA的Python练习题（十一）

    从 第4章-3 猴子吃桃问题 继续 1. a=eval(input()) def count(n): b=1 for i in range(n-1): b=(b+1)*2 return b print ...

  9. FTP、SFTP、SCP的区别

    转载于>> FTP(File Transfer Protocol) 是TCP/IP网络上两台计算机传送文件的协议,FTP是在TCP/IP网络和INTERNET上最早使用的协议之一,它属于网 ...

  10. pwn之ret2libc

    0×01 利用思路 ret2libc 这种攻击方式主要是针对 动态链接(Dynamic linking) 编译的程序,因为正常情况下是无法在程序中找到像 system() .execve() 这种系统 ...