专栏首页coding个人笔记Script标签的async和defer

Script标签的async和defer

之前有写过HTML页面渲染过程,知道了JavaScript是会阻塞DOM解析的,所以我们会把script标签放到底部防止阻塞HTML解析。其实script还有两个属性,async和defer,也是可以使得JavaScript和DOM和css同步加载。

说着两个属性之前先简单说一下DOMContentLoaded和load。

DOMContentLoaded:DOM内容加载完毕,页面会展示内容,但是图片、音视频等资源还未加载就触发DOMContentLoaded事件。

Load:在DOMContentLoaded触发之后触发,这时候图片、音视频等资源也已经加载完毕了。

知道了这两个事件之后,我们来说说async和defer。这两个都是用来控制外部脚本文件的,就是使用script引入,有src属性,在script标签没有src属性的内联脚本是无效的。这两个都不会阻塞HTML的解析。

Defer:开启新的线程下载脚本,使HTML解析完成后执行。如果多个脚本同时生命defer,会按顺序下载和执行,同时会在DOMContentLoaded和load之前执行。意思就是如果HTML解析完成了,脚本还没加载完成,那么一定会等脚本加载完成了才触发DOMContentLoaded。(网上有说defer也不一定按顺序,这个不知道什么情况下不按顺序)

Async:H5新增属性,也是用于异步加载脚本,下载完毕立即执行。有多个脚本使用async的时候,不能保证顺序,如果脚本直接有依赖,是不能使用这个属性。Async会在load之前执行,但是不保证和DOMContentLoaded的执行顺序。

另外说一个跟HTML渲染的小知识点,我们在网络很卡的情况下,标签出来了,样式没有出来,之前说的是DOM和css构建出render树才能渲染页面,然后就觉得很矛盾,突然看见有文章说现代浏览器为了更好的用户体验,渲染引擎尽快渲染内容,现在已经不会等所有HTML解析之前开始构建和布局render树,部分内容将提前渲染,就是说并不是一定要DOM和css都解析加载完成构建render树之后才渲染页面。

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-07-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 单页应用首屏问题

    刚开始用vue的时候就听有人一直说打包出来的包太大了,导致首次加载特别慢,之后采用了路由懒加载,把每个页面都单独打包,首次加载从来没有觉得慢过。或许是自己做的项...

    wade
  • 图片预加载和懒加载

    对于前端性能来说,图片是一个过不去的坎,又想能页面美观,又想页面响应速度快,那么这时候就有了两个技术,图片懒加载和预加载。在这边我只介绍一些方法和原理,不具体把...

    wade
  • HTML渲染过程

    我们一直在写HTML,关注的一直是界面和功能,很少考虑整个HTML的渲染过程。也是,在开发过程中确实不需要关注这方面,但是知道和理解HTML的渲染过程,对于HT...

    wade
  • Fast.ai 最实战深度学习在线课程 Lesson2

    用户1737318
  • Hello Jenkins

    用户1130025
  • MooseFS分布式文件系统

    类似GoogleFS的实现方式,即一个MasterServer和多个ChunkServer构成的存储集群。MFS系统由4个部分构成,master、metalog...

    泽阳
  • 一个技术牛人的成长自述

    猿类们,上午好,这是本号第一次发非技术的文章,本小编身为区区一工程师,确实不擅长写这类文章,但是这次实在是有感而发,太想给大家分享出来。

    后端技术探索
  • 别让Open Sans字体拖慢wordpress后台速度

      最近打开wordpress后台是不是很慢?国内GG登不上了?这两者有没什么直接的联系?没错,WordPress后台是自动加载的谷歌Open Sans字体,据...

    ytkah
  • 《Python入门08》你知道Python递归函数怎么写吗~~

    前面深入介绍了如何创建和调用函数。你知道,函数可调用其他函数,但可能让你感到惊讶的是,函数还可调用自己。如果你以前没有遇到这种情况,可能想知道递归是什么意思。简...

    ShuYini
  • ASP.NET MVC5+EF6+EasyUI 后台管理系统(61)-如何使用框架来开发

    前言 这篇文本讲述了这个框架的使用方式,及一些疑问的答疑,更加精准的使用这个框架来建立功能 经过几个版本的迭代,系统使用更加方便,代码更加简洁也更加的智能,...

    用户1149182

扫码关注云+社区

领取腾讯云代金券