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

css加载会造成阻塞吗？？

news 2026/1/30 2:47: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

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/9/28 20:12:12

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

编程新知 2026/1/14 22:12:47

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2026/1/24 10:07:40

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

编程新知 2026/1/4 3:47:09

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2026/1/29 4:00:07

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

编程新知 2025/12/7 12:35:20

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

编程新知 2026/1/14 14:19:57

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

编程新知 2026/1/27 3:04:08

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

编程新知 2025/11/28 5:32:31

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

编程新知 2025/12/29 15:43:26