1、css的加载不会阻塞DOM树解析。

1)、css加载不会阻塞DOM树的解析；

2)、css加载会阻塞DOM树渲染；
　　先把DOM树结构先解析完，等CSS加载完后根据最终样式渲染DOM树，免了css加载完之后DOM树又得重新重绘或者回流等一系列没有必要的损耗。

3)、css加载会阻塞后面js执行；

4)、JS阻塞DOM解析，但浏览器会偷看DOM后内容，预先下载相关资源。
　　浏览器遇到<script>且没有defer或async标签时，会触发页面渲染，因而如果前面css资源尚未加载完毕时，浏览器会等待它加载完毕在执行脚本。）

如下图，页面已经显示内容，但还没有加载css样式表。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Title</title>

    <style>

        h1 {

            color: red !important;

        }

    </style>

    <script>

        function h() {

            console.log(document.querySelectorAll("h1"));

        }

        setTimeout(h, 0);

    </script>

    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">

</head>

<body>

    <h1>这是红色的</h1>

</body>

</html>

看了两天的浏览器渲染机制，想告诉自己的是：

当看到页面出现在浏览器上时，所有的html/css/js文件都是完全解析执行完了的，如果有疑惑，去看构建对象-构建渲染-布局-渲染过程图。

所有不存在说，当<script>（控制台输出元素）在<link>（改变元素的颜色）前，并且css文件大于js文件很大时，会先在控制台看到<script>执行内容，然后过了一段时间，<link>加载完了，页面元素的字体颜色才会改变。

而事实上是，页面能显示时，一定是所有.css/.js/dom结合一起渲染完的结果，至于显示时间，要看各个文件的加载时间，故有优化加载说法。

20210514

js的执行会受到标签前面css文件的影响（注意执行、标签前面）。
如果标签前面有样式文件，需要样式文件加载并解析完后才执行这段内联的脚本；
如果是外联的，则会先去加载脚本，然后执行，在处理完脚本之后，浏览器便继续解析HTML文档。

CSSOM构建会影响DOM解析、js执行？

<head>

　　<link href="https.cssFile.css" stylesheet="relative" />

　　<script src="https.jsFile.js"></script>

</head>

如上述代码，在解析DOM时，解析到了<link>标签，于是先去加载css文件进行构建；
CSSOM的构建和DOM的解析是可以同时进行的。这时，可以解析到了<script>标签。但由于CSSOM对象未构建完成，所以DOM解析会在<script>标签这里卡住（js可以查询任意对象样式），而js未能加载执行完时，不能进行下一个DOM节点解析。
（所以DOM构建也间接被CSSDOM阻塞了：CSSOM构建阻塞JS，而JS阻塞DOM解析）

综上，HTML是之上而下开始执行的，也就是说，为了DOM能以最快的速度被渲染完，CSSOM、DOM可以先构建（这两个可以同时进行），最后JS加载执行，也就是不要出现<link>、<script>标签于文档位置多次出现，而<link>位于头部，<script>位于尾部最好。

——不知道的事情很多，带着求知的心态，一点点去解答心中疑惑，唯时间、精力能带给自己充实。

浏览器内部工作原理（参考）：
https://kb.cnblogs.com/page/129756/
https://zhuanlan.zhihu.com/p/74792085
https://blog.csdn.net/XIAOZHUXMEN/article/details/52014901
https://www.cnblogs.com/dahe1989/p/11765066.html
https://www.cnblogs.com/dahe1989/p/11765066.html

CSS加载不会阻塞DOM树解析的更多相关文章

  1. css加载是否会阻塞dom树渲染

    这里说的是头部引入css的情况 首先,我们都知道:css是由单独的下载线程异步下载的. 咱们先分析下css加载会影响什么,刚才的问题太笼统了,咱们需要细化一下. 会影响什么呢? 一个就是DOM树解析, ...

  2. css加载会造成阻塞吗？

    终于考试完了,今天突然想起来前阵子找实习的时候,今日头条面试官问我,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?所以,接下来我就来对css加载对DOM树的解析和渲染 ...

  3. css加载会造成阻塞吗

    本文由云+社区发表 作者:嘿嘿嘿 可能大家都知道,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?接下来,我就来对css加载对DOM树的解析和渲染的影响做一个测试. 为 ...

  4. 页面全部加载完毕和页面dom树加载完毕

    dom树加载完毕 $(document).ready()//原生写法document.ready = function (callback) {            ///兼容FF,Google   ...

  5. 定时器详解和应用、js加载阻塞、css加载阻塞

    1.setTimeout().setInterval()详解和应用 1.1 详解: setTimeout.setInterval执行时机 1.2 存在问题: setInterval重复定时器可能存在的 ...

  6. CSS加载会阻塞页面显示？

    可能大家都知道,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?接下来,我们就一起来分析一下. 原理解析 那么为什么会出现上面的现象呢?我们从浏览器的渲染过程来解析下. ...

  7. 解决JS文件页面加载时的阻塞

    关于页面加载时的时间消费,许多书中都做出了介绍,也提出了很多种方法.本文章就详细介绍XHR注入. 概述:JS分拆的方法 1.XHR注入:就是用ajax异步请求同域包含脚本的文件,然后将返回的字符串转化 ...

  8. 原来 CSS 与 JS 是这样阻塞 DOM 解析和渲染的

    hello~各位亲爱的看官老爷们大家好.估计大家都听过,尽量将CSS放头部,JS放底部,这样可以提高页面的性能.然而,为什么呢?大家有考虑过么?很长一段时间,我都是知其然而不知其所以然,强行背下来应付 ...

  9. CSS 加载新方式

    Chrome 浏览器有意改变<link rel="stylesheet">的加载方式,当其出现在<body>中时,这一变化将更加明显.笔者决定在本文中进行详 ...

随机推荐

  1. java-doc注释详解

    注释的分类 // 注释一行/* ...... */ 注释若干行/** ...... */ 注释若干行,并写入 javadoc 文档 列子 /** * show 方法的简述. * <p>sh ...

  2. final、finalize 和 finally 的不同之处？

    final 是一个修饰符,可以修饰变量.方法和类.如果 final 修饰变量,意味着该 变量的值在初始化后不能被改变.finalize 方法是在对象被回收之前调用的方法, 给对象自己最后一个复活的机会 ...

  3. 设置python 虚拟环境 virtualenv django 虚拟环境

    https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/development_environment Ubuntu vir ...

  4. (3)_研究方法Methodology【论文写作】

  5. C#编写程序，找一找一个二维数组中的鞍点

    编写程序,找一找一个二维数组中的鞍点(即该位置上的元素值在行中最大,在该列上最小.有可能数组没有鞍点).要求: 1.二维数组的大小.数组元素的值在运行时输入: 2.程序有友好的提示信息. 代码: us ...

  6. C++---继承和派生

    继承和派生 在C++中, 代码重用是通过继承机制来实现的 继承, 就是在一个已经存在的类的基础上, 再建议一个新类 从已经有的类派生出新的类, 派生类就继承了基类的特征, 包括成员和方法 继承可以完成 ...

  7. 巧用 background-clip 实现超强的文字动效

    最近,有同学询问,如何使用 CSS 实现如下效果: 看起来是个很有意思的动效. 仔细思考一下,要想实现这类效果,其实用到的核心属性只有一个 -- background-clip: text. 有意思的 ...

  8. JavaWeb入门day10-JSP

    JSP 什么是JSP Java Server Pages:Java服务器端页面,也和Servlet一样,用于动态Web技术 最大特点: 写JSP就像在写HTML 区别 HTML只给用户提供静态数据 J ...

  9. JavaScript学习总结6-apply

    JS中的apply方法可以控制this指向 任何JS支持的类型都可以转化为JSON JS对象是键值对型的,JSON是字符串型的 原型对象:__proto__ JS万物皆对象,ES6开始提供了对后端开发 ...

  10. 用于激光雷达的 APD，SPAD 和 SiPM 分析

    1. 术语及定义 1.1 激光雷达,Light Detection And Range, LiDAR  发射激光光束,并接收回波以获取目标三维和/或速度信息的系统: 1.2 机械旋转激光雷达,Mech ...