同步加载和异步加载的理解

在浏览器解析HTML的时候,遇到script标签立即开始加载javaScript并执行,这个过程会阻塞后面内容的呈现,也就是说会是后面的标签在javaScript执行完成后才呈现,同时也会阻塞后面组件的加载,也就是说script标签后面的组件如图片等在javaScript执行完成后才开始加载,这就是我们说的同步加载,显然我们在页面上使用javaScript的时候,如果位置放置不当,将严重影响浏览器渲染的效率,所以我们一般把javaScript放在页面的最底部,避免浏览器在解析javaScript的时候出现资源阻塞。如果把script标签放在页面的首部且javaScript文件加载需要花很长的时间的话,页面会出现较长时间的白屏。
在浏览器解析HTML的时候,如果遇到标签的时候,向服务器放出请求来获得css文件,与此同时浏览器继续往下解析HTML文件,构建DOM树,这就是我们说的异步加载,这里我们可以看到,加载css文件的是时候,浏览器仍可以继续做其他的工作,所以我们一般在页面的首部就引入css文件。那么如果css文件较大,DOM树已经构建完成很久,CSSOM还没有构建完成会出现什么情况呢?不同的浏览器有不同的做法,比如chrome认为,样式都没有,painting是没有意义的,于是chrome会出现白屏,直到CSSOM构建完成;firefox观点与chrome不同,firefox认为还是给用户看点东西吧,就算样式还没加载好,要不人家用户以为咱浏览器出现问题了把咱给卸载了咋办,于是firefox会先给用户看点东西,等到CSSOM加载好了又突然把样式给加上了,吓用户一跳,这就是我们说的无样式内容闪烁。上面说javaScript是同步加载的不怎么好,css是异步加载的甚合我意,那么咱能不能把javaScript也给弄成异步加载的呢?不仅能,而且有两种方式:给script加上defer属性:有了async属性之后,加载和渲染后续文档的过程将与script.js的加载和执行同时进行,这也实现了javaScript与后续文档的异步加载,但async属性不能保证顺序,因为script.js加载好了就直接开始执行.

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值