javascript 延迟加载-HTML5特性:使用async属性异步加载并执行JavaScript

我对HTML5感到兴奋的最大原因之一是它实现的新功能和特性都是我们期待已久的。 例如,我仍在使用占位符,但之前我必须在 JavaScript 中实现它们。 HTML5 中为 JavaScript 标签提供的 async 属性使 JavaScript 能够异步加载和执行。 之前,我需要各种JavaScript插件来实现这些功能,但是现在这个新属性可以让我们轻松实现异步加载。

异步 – HTML 代码

这非常简单,就像这样:

javascript 延迟加载_延迟加载JS有哪些方式_延迟加载和懒加载


事实上,如果您是一名认真的程序员javascript 延迟加载,您应该在 90% 以上的 SCRIPT 标记上使用 async 属性。

defer – HTML 代码

延迟加载和懒加载_javascript 延迟加载_延迟加载JS有哪些方式

还有一个与 async 属性类似的 defer 属性:


它与 async 属性的语法非常相似。

延迟加载JS有哪些方式_延迟加载和懒加载_javascript 延迟加载

异步和延迟 - 区别

这个 WebKit 博客非常清楚地解释了 defer 和 async 之间的区别:

浏览器会立即加载并解析标记有 async 属性或 defer 属性的脚本,并且还会支持依赖此脚本进行初始化的 onload 事件。 async 属性和 defer 属性之间的区别在于脚本的执行时间。 标记有 async 属性的脚本将在下载完成后执行javascript 延迟加载,而无需等待窗口加载。 这意味着标有 async 属性的脚本不一定按照它们嵌入页面中的顺序执行。 标有 defer 属性的脚本将按照它们在页面上出现的顺序执行。 执行将在解析完全完成之后、文档的 DOMContentLoaded 事件之前开始。

延迟加载JS有哪些方式_javascript 延迟加载_延迟加载和懒加载

哪些浏览器支持 async 和 defer 属性?

引用 Safari 博客:

支持 WebKit 的浏览器(Google Chrome 和 Safari)。 Firefox 浏览器从 3.6 版本开始支持 async 和 defer 属性。 IE也很早就支持defer属性了,但是不支持async属性。 IE9 支持 onload 属性。

延迟加载JS有哪些方式_延迟加载和懒加载_javascript 延迟加载

异步太有用了!

看到浏览器实现异步功能真的让我很高兴。 浏览网站页面时被JavaScript卡住确实是一个大问题。 async属性的异步加载和执行能力肯定会让网站的页面速度提高很多。

原文来自: