记录–什么时候会阻塞HTML文档渲染过程?

  • 记录–什么时候会阻塞HTML文档渲染过程?已关闭评论
  • 85 次浏览
  • A+
所属分类:Web前端
摘要

在上面例子,我们有没有发现在解析html文档过程中,但执行script脚本之前是不是有一段时间在加载,其实是在加载link资源,也就是css资源,等css资源执行完毕后才会执行后面script,这就是CSS阻塞,这里阻塞了其后面的js语句的执行。


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

记录--什么时候会阻塞HTML文档渲染过程?

HTML页面加载过程会发生什么?因为浏览器网络拉取资源是多线程的,但是dom树的操作都是在一个线程中的,所以网页资源的解析、js加载、dom树渲染都是一个线程执行,所以就会线程任务就会相互抢占,先来先执行。而当浏览器加载html文件时,会自上而下加载。我们先看一下下面的例子:
<!DOCTYPE html> <html lang="en"> <head>    <title>Document</title>    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">      <style>     #app {             width: 100px;             height: 100px;             background-color: red;     }     </style>          <script>         alert('代码的script');     </script>     // alert('src的script');     <script src="./test.js"></script> </head> <body>    <div id="app"></div> </body> </html>

由于html文件的加载自上而下的,所以不管传入的脚本script是代码还是链接,都是先写先加载,可能我们会问问什么style没有加载,不是没有加载,而是已经解析并加载了,因为对css进行解析会生成cssom规则树,然后需要结合DOM树构建渲染树,而我们的dom元素是命名在body标签中定义,由于当前解析的是head标签,这阶段还没有渲染dom,所以一般在html中操作dom的时机都是在body中的。

记录--什么时候会阻塞HTML文档渲染过程? 在上面例子,我们有没有发现在解析html文档过程中,但执行script脚本之前是不是有一段时间在加载,其实是在加载link资源,也就是css资源,等css资源执行完毕后才会执行后面script,这就是CSS阻塞,这里阻塞了其后面的js语句的执行

而style标签引入的样式是不会阻塞浏览器渲染也不会阻塞DOM解析,但是可能会出现闪屏现象(使用transition动画时)。 上面只是在head标签中引入样式,如果是在body标签中引入样式,css是否也会阻塞?

  • 在link引入前后定义DOM元素:css加载会阻塞后面DOM元素的渲染,以及前面元素的css样式渲染。

<body>     <button class="btn btn-primary">test1</button>     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">     <div>test2</div> </body>

记录--什么时候会阻塞HTML文档渲染过程?

  • 在link引入前后引入脚本:在link引入样式前执行脚本,在link引入样式后执行版本,我们会发现link会阻塞后面脚本的执行,需要等css资源加载完毕才会执行。

记录--什么时候会阻塞HTML文档渲染过程?

我们都知道在html中加载资源除了css,还有js资源加载,既然看了有CSS资源加载阻塞,是不是也有js阻塞?是的,script引入与使用分为两种方式:head中引入body中引入

  • 在head标签中引入script:如果是head中引入脚本是不能直接操作DOM渲染,因为DOM还没有加载与渲染。那么有办法可以解决吗?其实是有的,使用defer(延迟执行,等DOM解析完成再执行JS脚本)和async(异步执行,保证DOM树和JS脚本并行执行)。

<head>     <script src="./a.js" defer></script>     <script src="./a.js" async></script> </head>

 
  • 在body标签中引入script: 当引入的script脚本后下载并解析完成后,才去加载后面DOM元素,但是script脚本不会影响脚本执行前的DOM元素渲染。所以一般把所有脚本都会丢到</body>前。
<body> <script src="https://code.jquery.com/jquery-3.4.1.js"></script>  <div>test</div> </body>

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

本文转载于:

https://juejin.cn/post/7199994978977120316

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

 记录--什么时候会阻塞HTML文档渲染过程?