最新要闻

广告

手机

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

家电

全球观点:记录--什么时候会阻塞HTML文档渲染过程?

来源:博客园


【资料图】

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

HTML页面加载过程会发生什么?因为浏览器网络拉取资源是多线程的,但是dom树的操作都是在一个线程中的,所以网页资源的解析、js加载、dom树渲染都是一个线程执行,所以就会线程任务就会相互抢占,先来先执行。而当浏览器加载html文件时,会自上而下加载。我们先看一下下面的例子:
   Document                <script>        alert("代码的script");    </script>    // alert("src的script");    <script src="./test.js"></script>   
由于html文件的加载自上而下的,所以不管传入的脚本script是代码还是链接,都是先写先加载,可能我们会问问什么style没有加载,不是没有加载,而是已经解析并加载了,因为对css进行解析会生成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元素渲染。所以一般把所有脚本都会丢到前。
<script src="https://code.jquery.com/jquery-3.4.1.js"></script> 
test

所以一般是把引入式(链接)放在head标签内,内联式一般是放在body内。

本文转载于:

https://juejin.cn/post/7199994978977120316

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

关键词: 自上而下 什么时候 有一段时间