当前位置： 首页 > news >正文

css加载会造成阻塞吗？？

news 2025/9/14 13:41:17

前言

前几天面试问到了这个问题，当时这个答得不敢确定哈哈，虽然一面还是过了

现在再分析下这个，总结下，等下次遇到就能自信得回答，666

准备工作

为了完成本次测试，先来科普一下，如何利用chrome来设置下载速度

  1. 打开chrome控制台(按下F12),可以看到下图，重点在我画红圈的地方
    在这里插入图片描述
  2. 这样，我们对资源的下载速度上限就会被限制成20kb/s，好，那接下来就进入我们的正题

css加载会阻塞DOM树的解析&渲染吗？

测试代码：

<!DOCTYPE html>
<html lang="en"><head><title>css阻塞</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><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>

假设： css加载会阻塞DOM树解析和渲染

假设结果: 在bootstrap.css还没加载完之前，下面的内容不会被解析渲染，那么我们一开始看到的应该是白屏，h1不会显示出来。并且此时console.log的结果应该是一个空数组。

实际结果:如下图
在这里插入图片描述
css会阻塞DOM树解析？
由上图我们可以看到，当css还没加载完成的时候，h1并没有显示，但是此时控制台输出如下：
在这里插入图片描述
可以得知，此时DOM树至少已经解析完成到了h1那里，但此时css还没加载完成。
也就说明，css并不会阻塞DOM树的解析。

css加载会阻塞DOM树渲染？

由上图，我们也可以看到，当css还没加载出来的时候，页面显示白屏，直到css加载完成之后，红色字体才显示出来。
也就是说，下面的内容虽然解析了，但是并没有被渲染出来。
所以，css加载会阻塞DOM树渲染。

其实我觉得，这可能也是浏览器的一种优化机制。因为你加载css的时候，可能会修改下面DOM节点的样式，如果css加载不阻塞DOM树渲染的话，那么当css加载完之后，DOM树可能又得重新重绘或者回流了，这就造成了一些没有必要的损耗。所以我干脆就先把DOM树的结构先解析完，把可以做的工作做完，然后等你css加载完之后，在根据最终的样式来渲染DOM树，这种做法性能方面确实会比较好一点。

css加载会阻塞js运行吗？

测试代码

<!DOCTYPE html>
<html lang="en"><head><title>css阻塞</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><script>console.log('before css')var startDate = new Date()</script><link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"></head><body><h1>这是红色的</h1><script>var endDate = new Date()console.log('after css')console.log('经过了' + (endDate -startDate) + 'ms')</script></body>
</html>

假设: css加载会阻塞后面的js运行

预期结果: 在link后面的js代码，应该要在css加载完成后才会运行

实际结果:
在这里插入图片描述
在这里插入图片描述
由上图我们可以看出，位于css加载语句前的那个js代码先执行了，但是位于css加载语句后面的代码迟迟没有执行，直到css加载完成后，它才执行。
这也就说明了，css加载会阻塞后面的js语句的执行。

结论

  1. css加载【不会】阻塞DOM结构的解析
  2. css加载【会】阻塞DOM结构的渲染
  3. css加载【会】阻塞后面js语句的执行

浏览器渲染过程

  1. 解析css文件和html文件分别形成CSSOM Tree和DOM Tree，两者并行，不会互相影响
  2. 将解析后的CSSOM Tree与DOM Tree合并形成渲染树render Tree
  3. 将合并后的渲染树渲染到页面上
  4. css文件和html文件的渲染并行，所以不会阻塞DOM结构的解析，但是会阻塞后续的页面渲染
  5. 代码中JS语句可能会操作前面的DOM结构从而形成重绘和重排，所以浏览器渲染时，会让js语句的执行放在css执行完成之后，所以css的加载也会造成js语句的执行

实际开发中，有时由于css的加载过慢，导致页面进入时有较长时间的白屏
解决方法：

  1. 进行压缩，如使用webpack、gulp等工具对css文件进行压缩
  2. 减少请求数，将多个css文件进行合并，或者写成内联样式（不推荐写成内联，不方便后续需求修改和代码的阅读）
  3. 使用CDN引入（cdn引入会根据当前的网络挑选最近的一个具有缓存内容的节点提供资源）

DOMContentLoaded
只有在css加载完成后，才会触发DOMContentLoaded事件。因此，我们可以得出结论：

  1. 如果页面中同时存在css和js，并且存在js在css后面，则DOMContentLoaded事件会在css加载完 后才执行。
  2. 其他情况下，DOMContentLoaded都不会等待css加载，并且DOMContentLoaded事件也不会等待图片、视频等其他资源加载。

相关文章：

css加载会造成阻塞吗？？

前言 前几天面试问到了这个问题&#xff0c;当时这个答得不敢确定哈哈&#xff0c;虽然一面还是过了 现在再分析下这个&#xff0c;总结下&#xff0c;等下次遇到就能自信得回答&#xff0c;666 准备工作 为了完成本次测试&#xff0c;先来科普一下&#xff0c;如何利用chr…...

编程日记 2023/11/26 11:54:47

Java中的jvm——面试题+答案（JVM的高级概念和调优技巧，包括垃圾回收、内存分析、优化技术等）——第16期

涉及Java虚拟机&#xff08;JVM&#xff09;高级概念和调优技巧的面试题以及简要答案&#xff1a; 什么是JVM调优&#xff1f;有哪些常见的JVM调优参数&#xff1f; 答案&#xff1a; JVM调优是通过调整JVM的参数和配置&#xff0c;以提高Java应用程序的性能和稳定性。常见的JV…...

编程日记 2023/11/26 11:53:45

***Linux下Mysql的安装

以下是在Linux系统下安装MySQL的步骤&#xff1a; 1.访问MySQL官网下载页面&#xff08;https://dev.mysql.com/downloads/mysql/&#xff09;&#xff0c;选择适合您Linux系统的版本进行下载。 2.下载完成后&#xff0c;解压缩文件并将其移动到/usr/local目录下&#xff1a;…...

编程日记 2023/11/26 11:52:44

Linux踩坑：arm下gcc编译添加 -Ox 优化后，程序无法正常运行

arm下gcc编译添加 -Ox 优化后&#xff0c;程序无法正常运行 一、问题描述 今天学习正点原子的阿尔法开发板裸机开发的时候&#xff0c;遇到了一个问题&#xff0c;在没有使用 -Ox 优化的时候&#xff0c;编译出来的程序能够正常运行&#xff0c;但是添加了-Ox之后&#xff0c…...

编程日记 2023/11/26 11:51:43

Vue3中Composition API介绍

在Vue 3中&#xff0c;引入了Composition API&#xff0c;它是一种新的组合式函数API&#xff0c;用于更灵活地组织和重用组件逻辑。Composition API相比于Vue 2中的Options API&#xff0c;提供了更好的可组合性和代码复用性。下面是对Vue 3中Composition API的介绍和用法&…...

编程日记 2023/11/26 11:50:42

虚拟机系列：（VMware Workstation Pro）Centos7下搭建Android开发环境及Android真机调试

一、Android SDK 安装配置 1、环境 Linux系统为:Red Hat Enterprise Linux 7 64 位 ； 当然还需要Java环境，java 环境这里不叙述； 2、Android Studio 安装 （1）下载位置： http://www.android-studio.org/ 我这里下载的：android-studio-ide-191.5977832-linux.tar.gz …...

编程日记 2023/11/26 11:49:41

全面(16万字)深入探索深度学习：基础原理到经典模型网络的全面解析

前言 Stacking(堆叠) 网页调试 学习率&#xff1a;它决定了模型在每一次迭代中更新参数的幅度激活函数-更加详细 激活函数的意义: 激活函数主要是让模型具有非线性数据拟合的能力&#xff0c;也就是能够对非线性数据进行分割/建模 如果没有激活函数&#xff1a; 第一个隐层: l…...

编程日记 2023/11/26 11:48:40

openEuler Linux 部署 FineBi

openEuler Linux 部署 FineBi 部署环境 环境版本openEuler Linux22.03MySQL8.0.35JDK1.8FineBi6.0 环境准备 升级系统内核和软件 yum -y updatereboot安装常用工具软件 yum -y install vim tar net-tools 安装MySQL8 将 MySQL Yum 存储库添加到系统的存储库列表中 sudo…...

编程日记 2023/11/26 11:47:39

QThreadStorage使用介绍

作者：令狐掌门 技术交流QQ群：675120140 csdn博客：https://mingshiqiang.blog.csdn.net/ 文章目录 什么是线程数据存储Qt中的线程数据存储`QThreadStorage` 的用法：代码示例什么是线程数据存储 线程数据存储是指为每个线程在程序中分配和管理数据的过程。它主要用于并发编程…...

编程日记 2023/11/26 11:46:38

AI和人工智能与机器学习全景报告

今天分享的是AI系列深度研究报告&#xff1a;《AI和人工智能与机器学习全景报告》。 &#xff08;报告出品方&#xff1a;appen&#xff09; 报告共计&#xff1a;30页 获取 数据获取仍是AI应用构建团队的主要瓶颈。 原因各不相同。例如&#xff0c;特定用例的数据可能不足…...

编程日记 2023/11/26 11:45:37

【计算机网络】（网络层）定长掩码和变长掩码

目录 1、IPV4地址的应用规划 2、例题分析 2.1、定长的子网掩码 2.2、变长的子网掩码 1、IPV4地址的应用规划 定长的子网掩码&#xff08;FLSM&#xff09;&#xff1a; 使用同一个子网掩码划分子网&#xff0c;每个子网所分配的IP地址数量相同&#xff0c;造成IP地址的浪费…...

编程日记 2023/11/26 11:44:36

008 OpenCV matchTemplate 模板匹配

目录 一、环境 二、模板匹配算法原理 三、代码演示 一、环境 本文使用环境为&#xff1a; Windows10Python 3.9.17opencv-python 4.8.0.74 二、模板匹配算法原理 cv.matchTemplate是OpenCV库中的一个函数&#xff0c;用于在图像中查找与模板匹配的特征。它的主要应用场景…...

编程日记 2023/11/26 11:42:33

PTA 海盗分赃

P 个海盗偷了 D 颗钻石后来到公海分赃&#xff0c;一致同意如下分赃策略&#xff1a; 首先&#xff0c;P 个海盗通过抽签决定 1 - P 的序号。然后由第 1 号海盗提出一个分配方案&#xff08;方案应给出每个海盗分得的具体数量&#xff09;&#xff0c;如果能够得到包括 1 号在…...

编程日记 2023/11/26 11:41:32

零基础学Linux内核：1、Linux源码组织架构

文章目录 前言一、Linux内核的特征二、Linux操作系统结构1.Linux在系统中的位置2.Linux内核的主要子系统3、Linux系统主要数据结构 三、linux内核源码组织1、下载Linux源码2、Linux版本号3、linux源码架构目录讲解 前言 这里将是我们从零开始学习Linux的第一节&#xff0c;这节…...

编程日记 2023/11/26 11:40:31

STM32中Msp函数的意义

msp&#xff08;MCU Support Package&#xff09; 举个例子&#xff1a;串口初始化函数HAL_UART_Init()与串口底层初始化函数HAL_UART_MspInit() HAL_UART_Init()用于初始化串口通讯协议如波特率、有效位等 HAL_UART_MspInit()用于初始化于MCU相关的配置比如时钟、NVIC、GPI…...

编程日记 2023/11/26 11:39:30

PTA NeuDs_数据库题目

二.单选题 1.数据库应用程序的编写是基于数据库三级模式中的。 A.模式 B.外模式 C.内模式 D.逻辑模式 用户应用程序根据外模式进行数据操作&#xff0c;通过外模式一模式映射&#xff0c;定义和建立某个外模式与模式间的对应关系 2.对创建数据库模式一类的数据库对象的授权…...

编程日记 2023/11/26 11:38:29

pulseaudio是如何测试出音频延迟的

通常专业的音频设备生产厂商都有专业的设备来测试精确的音频链路延时。 那么没有专业设备怎么测试出音频延迟呢？如下图，我们可以看到pulseaudio可以测试出硬件音频延迟。 那么，他是怎么测试出硬件延迟的呢？他的理论依据是什么呢？接下来我带大伙一起探索一下。 /*占位…...

编程日记 2023/11/26 11:36:27

【docker】docker的基础命令

基础操作 docker info #查看docker的基本信息docker version #查看docker版本信息一、镜像操作 1、搜索镜像 docker search nginx2、下载镜像 docker pull nginx#从仓库中下载镜像&#xff0c;若没有指定标签&#xff0c;则下载最新的版本&#xff0c;也就是标签为: lat…...

编程日记 2023/11/26 11:35:26

RocketMq 主题(TOPIC)生产级应用

RocketMq是阿里出品&#xff08;基于MetaQ&#xff09;的开源中间件&#xff0c;已捐赠给Apache基金会并成为Apache的顶级项目。基于java语言实现&#xff0c;十万级数据吞吐量&#xff0c;ms级处理速度&#xff0c;分布式架构&#xff0c;功能强大&#xff0c;扩展性强。 官方…...

编程日记 2023/11/26 11:34:25

队列实现栈VS栈实现队列

目录 【1】用队列实现栈 思路分析 ​ 易错总结 Queue.c&Queue.h手撕队列 声明栈MyStack 创建&初始化栈myStackCreate 压栈myStackPush 出栈&返回栈顶元素myStackPop 返回栈顶元素myStackTop 判断栈空否myStackEmpty 释放空间myStackFree MyStack总代码…...

编程日记 2023/11/26 11:33:23

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/8/31 5:08:06

Xshell远程连接Kali（默认 | 私钥）Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

编程新知 2025/9/9 10:12:51

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

编程新知 2025/9/13 17:41:22

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

编程新知 2025/9/4 2:30:13

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...

编程新知 2025/7/27 0:38:54

在Mathematica中实现Newton-Raphson迭代的收敛时间算法（一般三次多项式）

考察一般的三次多项式&#xff0c;以r为参数&#xff1a; p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]&#xff1b; 此多项式的根为&#xff1a; 尽管看起来这个多项式是特殊的&#xff0c;其实一般的三次多项式都是可以通过线性变换化为这个形式…...

编程新知 2025/9/2 17:48:42

C++课设：简易日历程序（支持传统节假日 + 二十四节气 + 个人纪念日管理）

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》 创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 专栏介绍：《编程项目实战》 目录 一、为什么要开发一个日历程序？1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

编程新知 2025/7/20 6:08:51

学习一下用鸿蒙​​DevEco Studio HarmonyOS5实现百度地图

在鸿蒙&#xff08;HarmonyOS5&#xff09;中集成百度地图&#xff0c;可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API&#xff0c;可以构建跨设备的定位、导航和地图展示功能。 ​​1. 鸿蒙环境准备​​ ​​开发工具​​&#xff1a;下载安装 ​​De…...

编程新知 2025/8/3 15:16:26

智警杯备赛--excel模块

数据透视与图表制作 创建步骤 创建 1.在Excel的插入或者数据标签页下找到数据透视表的按钮 2.将数据放进“请选择单元格区域“中&#xff0c;点击确定 这是最终结果&#xff0c;但是由于环境启不了&#xff0c;这里用的是自己的excel&#xff0c;真实的环境中的excel根据实训…...

编程新知 2025/9/7 8:41:38

Go 语言中的内置运算符

1. 算术运算符 注意&#xff1a; &#xff08;自增&#xff09;和--&#xff08;自减&#xff09;在 Go 语言中是单独的语句&#xff0c;并不是运算符。 package mainimport "fmt"func main() {fmt.Println("103", 103) // 13fmt.Println("10-3…...

编程新知 2025/9/14 8:37:28