`
xhgrid
  • 浏览: 14434 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

HTML5中script的async属性异步加载JS

 
阅读更多
HTML4.01为script标签定义了5个属性:

charset 可选。指定src引入代码的字符集,大多数浏览器忽略该值。
defer 可选。延迟脚本执行,相当于将script标签放入页面body标签的底部。除IE和较新版本的Firefox外,其他浏览器并未支持。
language 已废弃。大部分浏览器会忽略该值。
src 可选。指定引入的外部代码文件,不限制后缀名。
type 必选。指定脚本的内容类型(MIME类型)。现实中通常不指定该值也可以,浏览器会默认当作text/javascript类型来解释执行。
HTML5中的script属性

script标签在HTML5中除了具备HTML5标准属性以外,与HTML4.01相比移除了language属性,修改了type属性为可选的(默认text/javascript),并新增了一个属性async。

async属性的作用

定义脚本是否异步执行,取值true或false。

async如果指定为true,脚本会在页面渲染显示的过程中解析执行(浏览器会判断该脚本是否处于可用状态),这是一个很有意思也很实用的功能。

现在的script是怎样的?

1、把它放在head标签内。在下载script引入的外部脚本时,浏览器处于阻塞状态,网络不好或者script文件过大时,页面处于空白停顿状态,体验是并不够好。

2、把它放入页面底部。这是大家公认的提高前端页面性能和体验的方法,但还是存在一定的问题,放在页面底部的脚本是要等到页面文档流下载完毕才去下载、执行,页面中的交互会存在一个延迟的时间去实现。虽然页面显示时间变短了,但交互却被延后了。体验也不够好。

3、按需执行。在head标签内引入部分公共脚本,在每一个需要交互的HTML元素之后插入script立即执行,需要特定条件才执行的脚本放到页面最底部。这也不是一个完美的解决方案,一则页面内穿插过多的script标签引起维护不便,二来底部脚本还未加载完时用户便触发了某个条件该怎么办?虽有方法实现,但体验仍不够好。

支持async属性之后改变了什么?

async属性就是解决上面这些问题的,这样我们就可以在head标签内插入script,脚本与文档同时下载,脚本、文档可用时便执行。

async与defer

摘抄HTML5手册的解释,很好理解:

如果 async 属性为 true,则脚本会相对于文档的其余部分异步执行,这样脚本会可以在页面继续解析的过程中来执行。

如果 async 属性为 false,而 defer 属性为 true,则脚本会在页面完成解析时得到执行。

如果 async 和 defer 属性均为 false,那么脚本会立即执行,页面会在脚本执行完毕继续解析。


http://zj86.info/Front-end-Development/HTML5-in-the-async-property-of-asynchronous-script-loading-JS
分享到:
评论

相关推荐

    js异步加载代码

    - HTML5新增的`async`属性:例如 `<script async src="asyLoad.js"></script>`,脚本会异步加载,执行顺序不确定。 - `defer`属性:如 `<script defer src="asyLoad.js"></script>`,脚本会按出现的顺序执行,但不...

    scriptjs异步JavaScript加载器和依赖管理器

    - **异步加载**:通过设置`async`属性,`script.js`可以确保脚本在后台加载,不会阻塞页面解析。 - **延迟加载**:允许开发者指定脚本在页面滚动到一定位置或满足特定条件时才加载,进一步优化性能。 - **依赖...

    JS异步加载库

    JavaScript(JS)异步加载库是一种能够帮助开发者在网页中延迟加载或按需加载JavaScript资源的工具。这种库可以显著提高网页性能,减少首屏加载时间,优化用户体验,特别是对于那些依赖大量脚本的复杂应用而言。下面...

    HTML5 script元素async、defer异步加载使用介绍

    HTML5的`<script>`元素引入了两个重要的属性:`async`和`defer`,这两个属性主要用于异步加载JavaScript文件,以减少页面加载时的阻塞,提高用户体验。在过去,开发者通常需要通过复杂的JavaScript技巧来实现类似的...

    js异步加载.docx

    - HTML5引入了`async`属性,使得JavaScript可以异步加载,不阻塞页面解析。 - 当`async`属性设置为`true`时,脚本将在可用时开始下载,但不保证执行顺序,可能会与其他异步脚本交错执行。 - 使用`document....

    jsloader 异步加载js文件

    2. **异步请求**:`JSLoader`通过AJAX或者`<script>`标签的`async`属性,发起对JS文件的异步请求。 3. **加载监控**:当一个JS文件加载完成时,`JSLoader`会监听到相应的事件,并执行回调函数。 4. **依赖管理**:...

    jquerytree async 异步

    **jQueryTree Async 异步加载详解** 在Web开发中,数据的异步加载已经成为提高用户体验的重要手段。jQueryTree是一款基于jQuery的树形控件,它支持异步加载数据,允许用户在需要时按需获取数据,减少初始页面加载...

    java实现ztree异步加载

    其中,`async`参数用于开启异步加载,`data`参数中的`key`属性定义了数据结构,如`children`表示子节点数组。 ```html <script type="text/javascript"> var setting = { async: { enable: true, url: "your_...

    javascript异步加载

    动态`<script>`标签插入、`defer`属性以及`import()`函数提供了灵活的选择,根据具体需求和脚本依赖关系,选择合适的异步加载策略,可以显著提升网页加载速度,提高用户满意度。在实际应用中,还需要结合代码分割、...

    loadScript异步加载脚本函数

    ### LoadScript 异步加载脚本函数 在前端开发中,动态加载JavaScript脚本是非常常见的需求之一。`loadScript`函数提供了一种简单且高效的方式来实现这一目标。它支持异步加载,允许开发者指定是否缓存脚本以及加载...

    资源的异步动态加载问题

    在HTML中,`<img>`标签的`async`属性和`<script>`标签的`async`或`defer`属性可以用于异步加载图像和JavaScript文件,确保它们不会阻止页面渲染。 5. **`ext-core.js`和`ext-base.js`**: 这两个文件可能与Ext JS...

    script的async属性以非阻塞的模式加载脚本

    在HTML中,`<script>`标签用于引入JavaScript文件,通常这些脚本会按照它们在HTML文档中的顺序逐个执行,并且会阻塞页面的渲染,直到当前脚本加载并执行完毕。然而,随着网页变得越来越复杂,大量的JavaScript文件...

    异步加载script的代码

    为了更有效地异步加载JavaScript,现代Web开发中通常使用`<script>`标签的`async`或`defer`属性。`async`属性使得脚本异步加载,但不保证执行顺序;`defer`属性则延迟脚本加载直到整个页面解析完毕,但保证脚本按...

    js异步加载的三种解决方案

    `async`属性是HTML5引入的新特性,用于异步加载外部JavaScript文件。当`async`属性设置为`true`时,脚本会尽可能快地下载并在可用时执行,而不影响HTML文档的解析。这意味着脚本的执行顺序可能无法保证,除非所有...

    动态加载外部JS文件

    1. 使用`<script>`标签的`async`和`defer`属性:这两个属性可以在不使用额外的JavaScript库或API的情况下实现异步加载。`async`属性使脚本并行加载,不保证执行顺序;`defer`属性则保证脚本在DOM解析完成后、...

    javascript函数动态加载javascript文件

    在HTML中,我们可以创建一个`<script>`标签,并将其`src`属性设置为要加载的JavaScript文件的URL。通过添加`async`或`defer`属性,可以实现非阻塞加载。例如: ```html <script async src="path/to/your/script....

    点评js异步加载的4种方式

    在文档中,主要介绍了四种异步加载js的方式,以下是详细的介绍: 第一种方式是使用jQuery的$(document).ready()函数。这个函数可以在文档完全加载并且解析完成后被触发,因此它可以用来确保在执行脚本之前页面元素...

    js-async-files-load:异步JS文件加载

    异步加载通常通过`<script>`标签的`async`或`defer`属性实现。`async`属性使得脚本在可用时立即开始下载,但并不保证执行顺序。这意味着即使脚本的下载完成了,它也可能会在其他同步脚本之前或之后执行。例如: ```...

    html中js代码的加载顺序

    3. **异步加载(async)**:通过添加`async`属性,可以使得外部JavaScript文件异步加载,例如`<script async src="script.js"></script>`。这意味着脚本的下载和执行不会阻塞HTML解析。然而,异步脚本的执行顺序是不...

Global site tag (gtag.js) - Google Analytics