css加载会造成阻塞吗??
前言
前几天面试问到了这个问题,当时这个答得不敢确定哈哈,虽然一面还是过了
现在再分析下这个,总结下,等下次遇到就能自信得回答,666
准备工作
为了完成本次测试,先来科普一下,如何利用chrome来设置下载速度
- 打开chrome控制台(按下F12),可以看到下图,重点在我画红圈的地方

- 这样,我们对资源的下载速度上限就会被限制成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语句的执行。
结论
- css加载【不会】阻塞DOM结构的解析
- css加载【会】阻塞DOM结构的渲染
- css加载【会】阻塞后面js语句的执行
浏览器渲染过程
- 解析css文件和html文件分别形成CSSOM Tree和DOM Tree,两者并行,不会互相影响
- 将解析后的CSSOM Tree与DOM Tree合并形成渲染树render Tree
- 将合并后的渲染树渲染到页面上
- css文件和html文件的渲染并行,所以不会阻塞DOM结构的解析,但是会阻塞后续的页面渲染
- 代码中JS语句可能会操作前面的DOM结构从而形成重绘和重排,所以浏览器渲染时,会让js语句的执行放在css执行完成之后,所以css的加载也会造成js语句的执行
实际开发中,有时由于css的加载过慢,导致页面进入时有较长时间的白屏
解决方法:
- 进行压缩,如使用webpack、gulp等工具对css文件进行压缩
- 减少请求数,将多个css文件进行合并,或者写成内联样式(不推荐写成内联,不方便后续需求修改和代码的阅读)
- 使用CDN引入(cdn引入会根据当前的网络挑选最近的一个具有缓存内容的节点提供资源)
DOMContentLoaded
只有在css加载完成后,才会触发DOMContentLoaded事件。因此,我们可以得出结论:
- 如果页面中同时存在css和js,并且存在js在css后面,则DOMContentLoaded事件会在css加载完 后才执行。
- 其他情况下,DOMContentLoaded都不会等待css加载,并且DOMContentLoaded事件也不会等待图片、视频等其他资源加载。
相关文章:
css加载会造成阻塞吗??
前言 前几天面试问到了这个问题,当时这个答得不敢确定哈哈,虽然一面还是过了 现在再分析下这个,总结下,等下次遇到就能自信得回答,666 准备工作 为了完成本次测试,先来科普一下,如何利用chr…...
Java中的jvm——面试题+答案(JVM的高级概念和调优技巧,包括垃圾回收、内存分析、优化技术等)——第16期
涉及Java虚拟机(JVM)高级概念和调优技巧的面试题以及简要答案: 什么是JVM调优?有哪些常见的JVM调优参数? 答案: JVM调优是通过调整JVM的参数和配置,以提高Java应用程序的性能和稳定性。常见的JV…...
***Linux下Mysql的安装
以下是在Linux系统下安装MySQL的步骤: 1.访问MySQL官网下载页面(https://dev.mysql.com/downloads/mysql/),选择适合您Linux系统的版本进行下载。 2.下载完成后,解压缩文件并将其移动到/usr/local目录下:…...
Linux踩坑:arm下gcc编译添加 -Ox 优化后,程序无法正常运行
arm下gcc编译添加 -Ox 优化后,程序无法正常运行 一、问题描述 今天学习正点原子的阿尔法开发板裸机开发的时候,遇到了一个问题,在没有使用 -Ox 优化的时候,编译出来的程序能够正常运行,但是添加了-Ox之后,…...
Vue3中Composition API介绍
在Vue 3中,引入了Composition API,它是一种新的组合式函数API,用于更灵活地组织和重用组件逻辑。Composition API相比于Vue 2中的Options API,提供了更好的可组合性和代码复用性。下面是对Vue 3中Composition API的介绍和用法&…...
虚拟机系列:(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 …...
全面(16万字)深入探索深度学习:基础原理到经典模型网络的全面解析
前言 Stacking(堆叠) 网页调试 学习率:它决定了模型在每一次迭代中更新参数的幅度激活函数-更加详细 激活函数的意义: 激活函数主要是让模型具有非线性数据拟合的能力,也就是能够对非线性数据进行分割/建模 如果没有激活函数: 第一个隐层: l…...
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…...
QThreadStorage使用介绍
作者:令狐掌门 技术交流QQ群:675120140 csdn博客:https://mingshiqiang.blog.csdn.net/ 文章目录 什么是线程数据存储Qt中的线程数据存储`QThreadStorage` 的用法:代码示例什么是线程数据存储 线程数据存储是指为每个线程在程序中分配和管理数据的过程。它主要用于并发编程…...
AI和人工智能与机器学习全景报告
今天分享的是AI系列深度研究报告:《AI和人工智能与机器学习全景报告》。 (报告出品方:appen) 报告共计:30页 获取 数据获取仍是AI应用构建团队的主要瓶颈。 原因各不相同。例如,特定用例的数据可能不足…...
【计算机网络】(网络层)定长掩码和变长掩码
目录 1、IPV4地址的应用规划 2、例题分析 2.1、定长的子网掩码 2.2、变长的子网掩码 1、IPV4地址的应用规划 定长的子网掩码(FLSM): 使用同一个子网掩码划分子网,每个子网所分配的IP地址数量相同,造成IP地址的浪费…...
008 OpenCV matchTemplate 模板匹配
目录 一、环境 二、模板匹配算法原理 三、代码演示 一、环境 本文使用环境为: Windows10Python 3.9.17opencv-python 4.8.0.74 二、模板匹配算法原理 cv.matchTemplate是OpenCV库中的一个函数,用于在图像中查找与模板匹配的特征。它的主要应用场景…...
PTA 海盗分赃
P 个海盗偷了 D 颗钻石后来到公海分赃,一致同意如下分赃策略: 首先,P 个海盗通过抽签决定 1 - P 的序号。然后由第 1 号海盗提出一个分配方案(方案应给出每个海盗分得的具体数量),如果能够得到包括 1 号在…...
零基础学Linux内核:1、Linux源码组织架构
文章目录 前言一、Linux内核的特征二、Linux操作系统结构1.Linux在系统中的位置2.Linux内核的主要子系统3、Linux系统主要数据结构 三、linux内核源码组织1、下载Linux源码2、Linux版本号3、linux源码架构目录讲解 前言 这里将是我们从零开始学习Linux的第一节,这节…...
STM32中Msp函数的意义
msp(MCU Support Package) 举个例子:串口初始化函数HAL_UART_Init()与串口底层初始化函数HAL_UART_MspInit() HAL_UART_Init()用于初始化串口通讯协议如波特率、有效位等 HAL_UART_MspInit()用于初始化于MCU相关的配置比如时钟、NVIC、GPI…...
PTA NeuDs_数据库题目
二.单选题 1.数据库应用程序的编写是基于数据库三级模式中的。 A.模式 B.外模式 C.内模式 D.逻辑模式 用户应用程序根据外模式进行数据操作,通过外模式一模式映射,定义和建立某个外模式与模式间的对应关系 2.对创建数据库模式一类的数据库对象的授权…...
pulseaudio是如何测试出音频延迟的
通常专业的音频设备生产厂商都有专业的设备来测试精确的音频链路延时。 那么没有专业设备怎么测试出音频延迟呢?如下图,我们可以看到pulseaudio可以测试出硬件音频延迟。 那么,他是怎么测试出硬件延迟的呢?他的理论依据是什么呢?接下来我带大伙一起探索一下。 /*占位…...
【docker】docker的基础命令
基础操作 docker info #查看docker的基本信息docker version #查看docker版本信息一、镜像操作 1、搜索镜像 docker search nginx2、下载镜像 docker pull nginx#从仓库中下载镜像,若没有指定标签,则下载最新的版本,也就是标签为: lat…...
RocketMq 主题(TOPIC)生产级应用
RocketMq是阿里出品(基于MetaQ)的开源中间件,已捐赠给Apache基金会并成为Apache的顶级项目。基于java语言实现,十万级数据吞吐量,ms级处理速度,分布式架构,功能强大,扩展性强。 官方…...
队列实现栈VS栈实现队列
目录 【1】用队列实现栈 思路分析 易错总结 Queue.c&Queue.h手撕队列 声明栈MyStack 创建&初始化栈myStackCreate 压栈myStackPush 出栈&返回栈顶元素myStackPop 返回栈顶元素myStackTop 判断栈空否myStackEmpty 释放空间myStackFree MyStack总代码…...
Appium+python自动化(十六)- ADB命令
简介 Android 调试桥(adb)是多种用途的工具,该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具,其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利,如安装和调试…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡,轻快的音乐在耳边持续回荡,小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下,六一来了。 今天是六一儿童节,小蓝老师为了让大家在节…...
电脑插入多块移动硬盘后经常出现卡顿和蓝屏
当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时,可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案: 1. 检查电源供电问题 问题原因:多块移动硬盘同时运行可能导致USB接口供电不足&#x…...
页面渲染流程与性能优化
页面渲染流程与性能优化详解(完整版) 一、现代浏览器渲染流程(详细说明) 1. 构建DOM树 浏览器接收到HTML文档后,会逐步解析并构建DOM(Document Object Model)树。具体过程如下: (…...
使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装
以下是基于 vant-ui(适配 Vue2 版本 )实现截图中照片上传预览、删除功能,并封装成可复用组件的完整代码,包含样式和逻辑实现,可直接在 Vue2 项目中使用: 1. 封装的图片上传组件 ImageUploader.vue <te…...
什么是EULA和DPA
文章目录 EULA(End User License Agreement)DPA(Data Protection Agreement)一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA(End User License Agreement) 定义: EULA即…...
MySQL用户和授权
开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务: test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...
2023赣州旅游投资集团
单选题 1.“不登高山,不知天之高也;不临深溪,不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...
重启Eureka集群中的节点,对已经注册的服务有什么影响
先看答案,如果正确地操作,重启Eureka集群中的节点,对已经注册的服务影响非常小,甚至可以做到无感知。 但如果操作不当,可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...
WPF八大法则:告别模态窗口卡顿
⚙️ 核心问题:阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程,导致后续逻辑无法执行: var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题:…...
