最新要闻
- 天天热资讯!埃塞俄比亚政府和“提人阵”武装达成停火协议
- 天天新消息丨义乌自己的全球支付工具!义支付发布:打通16个币种
- 这待遇简直了!美团外卖进军香港 正疯狂招骑手:月入3万+
- 消息!手机套餐费太贵 韩国三大运营商被批:是否串通涨价
- 与剧版强烈反差!《三体》动画豆瓣跌至3.9分:官方已停播
- 特斯拉最入门车型国内现身?别被骗了:“披着狼皮的羊”而已
- 女子在桃李面包中吃出带锈刀片 官方:不存在使用该刀片的生产环节
- 环球快看:手机寒气仍存 5G巨头中兴被曝优化人员 回应称正常调整
- 世界观焦点:蔚来ET9要来了?号称“蔚来版迈巴赫” 屏幕开始横过来
- 掌权八年后上汽大众换帅:贾健旭接棒
- 大嘴猴50S精梳棉男士四角裤狂促:券后每条不到10元!
- 当前报道:游戏王dm新马甲_[游戏王DM]羁绊
- 全球热点!张艺谋监制!北京冬奥拍成电影了:《北京2022》预告片发布
- 世界视讯!提前!韩国欲2028年推6G网 速度有多快?5G是高铁 6G就是飞机
- 全球首发5.5G 高通骁龙X75基带不再公布速率:峰值没啥意义
- 极氪汽车被指销售欺诈!车主集体投诉:退一赔一
手机
iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?
警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案
- iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?
- 警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案
- 男子被关545天申国赔:获赔18万多 驳回精神抚慰金
- 3天内26名本土感染者,辽宁确诊人数已超安徽
- 广西柳州一男子因纠纷杀害三人后自首
- 洱海坠机4名机组人员被批准为烈士 数千干部群众悼念
家电
全球观点:记录--什么时候会阻塞HTML文档渲染过程?
【资料图】
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助
HTML页面加载过程会发生什么?因为浏览器网络拉取资源是多线程
的,但是dom树的操作都是在一个线程
中的,所以网页资源的解析、js加载、dom树渲染都是一个线程执行,所以就会线程任务就会相互抢占,先来先执行。而当浏览器加载html文件时,会自上而下加载
。我们先看一下下面的例子:由于html文件的加载自上而下的,所以不管传入的脚本script是代码还是链接,都是先写先加载,可能我们会问问什么style没有加载,不是没有加载,而是已经解析并加载了,因为对css进行解析会Document <script> alert("代码的script"); </script> // alert("src的script"); <script src="./test.js"></script>
生成cssom规则树
,然后需要结合DOM树构建渲染树
,而我们的dom元素是命名在body标签中定义,由于当前解析的是head标签,这阶段还没有渲染dom,所以一般在html中操作dom的时机都是在body中的。在上面例子,我们有没有发现在解析html文档过程中,但执行script脚本之前是不是有一段时间在加载,其实是在加载link资源,也就是css资源,等css资源执行完毕后才会执行后面script,这就是CSS阻塞
,这里阻塞了其后面的js语句的执行。
而style标签引入的样式是不会阻塞浏览器渲染也不会阻塞DOM解析
,但是可能会出现闪屏现象(使用transition
动画时)。 上面只是在head标签中引入样式,如果是在body标签中引入样式,css是否也会阻塞?
在link引入前后定义DOM元素:css加载会阻塞后面DOM元素的渲染,以及前面元素的css样式渲染。
test2
在link引入前后引入脚本:在link引入样式前执行脚本,在link引入样式后执行版本,我们会发现link会阻塞后面脚本的执行,需要等css资源加载完毕才会执行。
我们都知道在html中加载资源除了css,还有js资源加载,既然看了有CSS资源加载阻塞,是不是也有js阻塞?是的,script引入与使用分为两种方式:head中引入
、body中引入
。
在head标签中引入script:如果是head中引入脚本是不能直接操作DOM渲染,因为DOM还没有加载与渲染。那么有办法可以解决吗?其实是有的,使用
defer
(延迟执行,等DOM解析完成再执行JS脚本)和async
(异步执行,保证DOM树和JS脚本并行执行)。
<script src="./a.js" defer></script> <script src="./a.js" async></script>
- 在body标签中引入script: 当引入的script脚本后下载并解析完成后,才去加载后面DOM元素,但是script脚本不会影响脚本执行前的DOM元素渲染。所以一般把所有脚本都会丢到