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. 高级T-SQL进阶系列 （一）【上篇】：使用 CROSS JOIN 介绍高级T-SQL

    [译注:此文为翻译,由于本人水平所限,疏漏在所难免,欢迎探讨指正] 原文连接:传送门 这是一个新进阶系列的第一篇文章,我们将浏览Transact-SQL(T-SQL)的更多高级特性.这个进阶系列将会包 ...

  2. C++11常用特性介绍——Lambda表达式

    一.C++11采用配对的方括号[]来创建一个匿名函数并执行,如: #include <iostream> int main() { auto func = []{ std::cout &l ...

  3. LinkStack(链栈)

    链栈即链式栈,也就是说我们不用再考虑空间的大小,可随心所欲的进行数据的插入/删除了.和顺序栈一样,仍然要保持其stack的特性,只在一端进行插入和删除,后进先出. (2018-02-14 代码更新) ...

  4. 【转】bug management process

    What is Bug? A bug is the consequence/outcome of a coding fault What is Defect? A defect is a variat ...

  5. struts标签 解析html标签

    参考:http://blog.csdn.net/shuangrenyu1234/article/details/24527745

  6. Python学习第十一课——装饰器

    #装饰器:本质就是函数,为其他函数附加功能原则:1.不修改被修饰函数的源代码2.不修改被修饰函数的调用方式 装饰器=高阶函数+函数嵌套+闭包 #高阶函数 ''' 高阶函数定义: 1.函数接受的参数是一 ...

  7. Linux centosVMware 集群介绍、keepalived介绍、用keepalived配置高可用集群

    一.集群介绍 根据功能划分为两大类:高可用和负载均衡 高可用集群通常为两台服务器,一台工作,另外一台作为冗余,当提供服务的机器宕机,冗余将接替继续提供服务 实现高可用的开源软件有:heartbeat. ...

  8. [swscaler @ ...] deprecated pixel format used, make sure you did set range correctly

    我自己在使用如下函数进行转换时报的错 int sws_scale(struct SwsContext *c, const uint8_t *const srcSlice[], const int sr ...

  9. 创建私有yum仓库

    创建私有yum仓库

  10. css怎样让元素显示指定的宽高比

    .father { width: 100% } .child {; padding-bottom: 20%; background: green; overflow: hidden; } <bo ...