• 总结前端开发模式和规范 2、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,那么脚本会立即执行,页面会在脚本执行完毕继续解析。

  • 相关阅读:
    [杂谈]关于前端如何学习框架的一点牢骚
    【2018】面试复习大纲
    迟来的2017总结
    [转载并收藏]JavaScript 疲劳终极指南:我们行业的真相
    想做好产品,一定要成为自己产品的用户
    2017年个人提升计划
    Chrome新发现
    不要被所在的公司或企业绑架
    半夜不想睡有感
    2016年总结
  • 原文地址:https://www.cnblogs.com/xingfuboke/p/8133951.html
Copyright © 2020-2023  润新知