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

css加载会造成阻塞吗？？

news 2026/2/11 4:33:59

前言

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

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

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

编程新知 2026/2/5 4:25:15

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

编程新知 2025/11/4 6:26:59

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

编程新知 2026/1/31 6:04:01

《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

编程新知 2026/2/2 1:48:09

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

编程新知 2025/12/19 22:56:05

AI病理诊断七剑下天山，医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

编程新知 2026/2/6 20:53:34

莫兰迪高级灰总结计划简约商务通用PPT模版

莫兰迪高级灰总结计划简约商务通用PPT模版&#xff0c;莫兰迪调色板清新简约工作汇报PPT模版&#xff0c;莫兰迪时尚风极简设计PPT模版&#xff0c;大学生毕业论文答辩PPT模版&#xff0c;莫兰迪配色总结计划简约商务通用PPT模版&#xff0c;莫兰迪商务汇报PPT模版&#xff0c;…...

编程新知 2026/1/29 10:37:37

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制&#xff0c;展现出显著的技术优势&#xff1a; 深层组织穿透能力&#xff1a;适用于活体组织深度成像 高分辨率观测性能&#xff1a;满足微观结构的精细研究需求 低光毒性特点&#xff1a;减少对样本的损伤…...

编程新知 2026/1/31 13:04:44

淘宝扭蛋机小程序系统开发：打造互动性强的购物平台

淘宝扭蛋机小程序系统的开发&#xff0c;旨在打造一个互动性强的购物平台&#xff0c;让用户在购物的同时&#xff0c;能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机&#xff0c;实现旋转、抽拉等动作&#xff0c;增…...

编程新知 2026/1/31 7:11:11

关于easyexcel动态下拉选问题处理

前些日子突然碰到一个问题&#xff0c;说是客户的导入文件模版想支持部分导入内容的下拉选&#xff0c;于是我就找了easyexcel官网寻找解决方案&#xff0c;并没有找到合适的方案&#xff0c;没办法只能自己动手并分享出来&#xff0c;针对Java生成Excel下拉菜单时因选项过多导…...

编程新知 2026/2/6 11:08:25