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

css加载会造成阻塞吗？？

news 2026/4/15 4:20:49

前言

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

现在再分析下这个，总结下，等下次遇到就能自信得回答，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

AndroRAT客户端架构揭秘：Java实现远程控制的终极指南

AndroRAT客户端架构揭秘&#xff1a;Java实现远程控制的终极指南 【免费下载链接】AndroRAT A Simple android remote administration tool using sockets. It uses java on the client side and python on the server side 项目地址: https://gitcode.com/gh_mirrors/an/And…...

编程新知 2026/4/15 4:20:26

高性能 C++ 日志实战：spdlog 核心架构剖析与工程最佳实践

一、前言&#xff1a;为何 spdlog 成为首选&#xff1f;在现代 C 项目开发中&#xff0c;日志记录对调试追踪、运行监控和故障排查非常重要&#xff0c;但很多老的日志工具&#xff08;比如 log4cpp 或 glog&#xff09;往往配置麻烦、速度慢&#xff0c;而且没有高效的异步写法…...

编程新知 2026/4/15 3:04:14

别再乱买网卡了！手把手教你用Kali Linux和特定型号网卡（如TP-Link TL-WN722N）抓取Wi-Fi握手包

别再乱买网卡了&#xff01;Kali Linux无线安全测试硬件选型与实战指南 当你第一次打开Kali Linux准备学习无线网络安全时&#xff0c;最令人沮丧的瞬间莫过于&#xff1a;跟着教程输入airmon-ng start wlan0后&#xff0c;屏幕上跳出"Device not supported"的红色警…...

编程新知 2026/4/15 2:57:59

List.Sort与LINQ排序哪种更高效

在C#开发里头&#xff0c;针对集合操作排序这件事儿&#xff0c;那可是极为常见的。List.Sort方法&#xff0c;还有LINQ给出的OrderBy以及OrderByDescending方法&#xff0c;它们都能够轻易地达成排序任务。然而呢&#xff0c;它们在底层所遵循的机制&#xff0c;就连使用的场景…...

编程新知 2026/4/15 1:27:50

创建Controller HTTP测试脚本

创建Controller HTTP测试脚本 任务概述 为fastbee-open-api模块下的103个Controller创建对应的HTTP测试脚本文件,确保测试覆盖所有主要接口。 测试脚本规范 文件格式 文件名: {ControllerName}.http (如: DeviceController.http, SysUserController.http)存放位置: f:/project/…...

编程新知 2026/4/15 0:25:31

全球远程工作机会：开发者地理套利策略

远程革命下的测试职业新机遇随着云计算与协作工具的普及&#xff0c;软件测试行业正经历全球化重构。世界经济论坛预测&#xff0c;2030年全球完全远程岗位将达9.2亿个。对测试工程师而言&#xff0c;地理套利&#xff08;Geoarbitrage&#xff09;——通过为高薪地区雇主远程服…...

编程新知 2026/4/15 0:07:09

告别重复造轮子：Codex写脚本——运维/DevOps场景下的自动化脚本批量生成实战

前言&#xff1a;运维之痛与破局之道重复造轮子的真实成本在运维和DevOps的日常工作中&#xff0c;脚本编写占据了大量时间。据调查&#xff0c;一个熟练的运维工程师编写一个简单的环境配置脚本可能需要30分钟到1小时&#xff0c;而这类脚本在项目迭代、环境迁移过程中需要反复…...

编程新知 2026/4/14 23:26:03

本科生论文写作新选择：百考通AI实战指南，告别熬夜与低效

如果你是一名正在为毕业论文发愁的本科生&#xff0c;这篇文章可能会帮到你。在CSDN这个以技术分享与实用干货为主的社区&#xff0c;我们不谈夸张的“黑科技”&#xff0c;只聊实实在在能提升效率的工具与方法。今天要介绍的&#xff0c;是一款名为百考通AI的辅助写作工具&…...

编程新知 2026/4/14 22:46:31

5分钟告别英文界面困扰：FigmaCN为中文设计师打造的智能汉化解决方案

5分钟告别英文界面困扰&#xff1a;FigmaCN为中文设计师打造的智能汉化解决方案 【免费下载链接】figmaCN 中文 Figma 插件&#xff0c;设计师人工翻译校验 项目地址: https://gitcode.com/gh_mirrors/fi/figmaCN 你是否曾因Figma的英文界面而分心&#xff0c;无法专注于…...

编程新知 2026/4/14 22:42:28

解决Ubuntu远程桌面黑屏问题：xrdp配置避坑指南（2023最新版）

Ubuntu远程桌面黑屏全攻略&#xff1a;从xrdp故障排查到高效替代方案 当你正急着通过远程桌面处理Ubuntu服务器上的任务&#xff0c;屏幕突然一片漆黑——这种经历足以让任何系统管理员血压飙升。xrdp作为Linux平台上最常用的RDP协议实现工具&#xff0c;确实为Ubuntu用户提供…...

编程新知 2026/4/14 22:40:25