js和css阻塞问题

面试常见问题

  • css 加载会不会阻塞 js 的加载?(不会)
  • css 加载会不会阻塞 js 的执行?(会)
  • css 加载会不会阻塞 DOM 的解析?(不会)
  • css 加载会不会阻塞 DOM 的渲染?(会)
  • js 加载会不会阻塞 DOM 的解析?(会)
  • js 加载会不会阻塞 DOM 的渲染?(会)
  • js 执行会不会阻塞 DOM 的解析?(会)
  • js 执行会不会阻塞 DOM 的渲染?(会)

浏览器工作原理

  • JS 引擎线程(单线程):负责解析 Javascript 脚本,运行代码
  • GUI 渲染线程:负责渲染浏览器界面,解析 HTML,CSS,构建 DOM Tree,Style Tree 和 Render Tree,布局和绘制等

注意:GUI 渲染线程与 JS 引擎线程是互斥的,当 JS 引擎执行时 GUI 线程会被挂起,所以当 JS 加载和执行时,会阻塞住 DOM 的解析和渲染,导致白屏时间很长

浏览器渲染过程

1.解析 HTML 生成 DOM Tree
2.解析 CSS 生成 Style Tree
3.将 DOM Tree 与 Style Tree 合并在一起生成 Render Tree
4.遍历 Render Tree 开始布局,计算每个节点的位置大小信息(Layout)
5.绘制 Render Tree,绘制页面的像素信息(Painting),显示到屏幕上(Display)

DOM Tree 和 Style Tree 是并行构建的,所以 CSS 加载不会阻塞 DOM 的解析
由于 Render Tree 是依赖于 DOM Tree 和 Style Tree 的,因此,css 加载会阻塞 Dom 的渲染
GUI 渲染线程与 JS 引擎线程是互斥的,加载解析 css 时,JS 引擎会被挂起,所以 css 会阻塞 js 的执行

资源优先级

1.html 、 css 、 font 这三种类型的资源优先级最高
2.然后 script 、 xhr 请求
3.接着是图片、语音、视频

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/720822.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

解析Excel数据如虎添翼:Excel数据监听器助你快速解析数据,轻松驾驭业务需求,一键解析,风云再起,数据处理从未如此简单,事半功倍

以下代码是一个Excel数据监听器,用于监听和处理Excel数据的读取事件。它实现了AnalysisEventListener接口,并重写了其中的方法。以下是代码中的主要部分: invokeHead方法:在解析Excel表格的表头时触发的回调方法。通过比较模板表…

企业数字人虚拟形象定制解决方案

随着数字化浪潮的推进,虚拟形象在各个领域都展现出了强大的潜力,美摄科技作为业界领先的数字人虚拟形象定制解决方案提供商,致力于为企业打造独一无二的虚拟形象,助力企业在数字世界中塑造独特的品牌形象。 一、解决方案概览 美…

理德外汇名人故事:个人投资者大使——威廉·欧奈尔

威廉•欧奈尔(William J.O’Neil)是美国著名的成长性企业的投资大师,投资生涯接近50年。1988年,出版《How to Make Money in Stocks: A winning system in good times or bad》一书,国内译为《笑傲股市》,成…

02-prometheus监控-服务器节点监控node-exporter

一、概述 prometheus,本身是一个【数据收集】和【数据处理】的工具,如果效果要监控一台服务器物理机,有两种方式,一种是在物理机上部署“node-export”来收集数据上报给prometheus,另一种是“自定义监控”;…

SqlServer 默认值约束示例

创建表,创建时指定 money 字段默认值为0.00; create table t_24 ( account varchar(19) not null, id_card char(18) not null, name varchar(20) not null, money decimal(16,2) default 0.00 not null ); 录入2条记录,money字…

YoloV8改进策略:卷积改进|MogaNet——高效的多阶门控聚合网络

文章目录 摘要论文:《MogaNet——高效的多阶门控聚合网络》1、简介2、相关工作2.1、视觉Transformers2.2、ViT时代的卷积网络3、从多阶博弈论交互的角度看表示瓶颈4、方法论4.1、MogaNet概述4.2、多阶门控聚合4.3、通过通道聚合进行多阶特征重新分配4.4、实现细节5、实验5.1、…

HTML极速入门

HTML基础 什么是HTML HTML(Hyper Text Markup Language),超文本标记语言. 超文本:比文本更强大.通过链接和交互式方式来组织和呈现信息的文本形式.不仅仅有文本,还可能包括图片,音频,或者自己经审阅过它的学者所加的评注,补充或脚注等. 标记语言:由标签构成的语言 HTML的标…

es6 相关面试题

1 var, let ,const 区别? 2 手写将对象进行合并 手写合并对象 3 普通函数和箭头函数区别? 4 find 和 filter的区别? 5 some和every区别?

ES核心概念(45-48)(56-62)(101-103)

ES集群 ES集群(Cluster)包含多个节点(服务器),整体提供服务 核心概念 索引Index:类似于mysql中的表 映射Mapping:数据的结构信息 文档:相当于表中的一条记录 分片: 将数据分成多片…

Transformer、BERT和GPT 自然语言处理领域的重要模型

Transformer、BERT和GPT都是自然语言处理领域的重要模型,它们之间有一些区别和联系。 区别: 架构:Transformer是一种基于自注意力机制的神经网络架构,用于编码输入序列和解码输出序列。BERT(Bidirectional Encoder R…

java 面试题总结

1锁粗化和锁消除&#xff0c;锁膨胀和锁升级的区别。 https://www.cnblogs.com/xuxinstyle/p/13387778.html .无锁 < 偏向锁 < 轻量级锁 < 重量级锁 &#xff0c;说的时候不要忘记说无锁状态 2.Map 的实现&#xff0c;线程安全的实现 1、ConcurrentHashMap在JDK 1.7…

第五套CCF信息学奥赛c++练习题 CSP-J认证初级组 中小学信奥赛入门组初赛考前模拟冲刺题(阅读程序题)

第五套中小学信息学奥赛CSP-J考前冲刺题 二、阅读程序题 (程序输入不超过数组或字符串定义的范围&#xff0c;判断题正确填√错误填X;除特殊说明外&#xff0c;判断题 1.5分&#xff0c;选择题3分&#xff0c;共计40分) 第一题 递归函数 1 #include<iostream> 2 usin…

git常用命令集合

1.差异对比 显示出branch1和branch2中差异的部分 git diff branch1 branch2 --stat显示出所有有差异的文件的详细差异 git diff branch1 branch2查看branch1分支有&#xff0c;而branch2中没有的log git log branch1 ^branch22.分支 列出所有本地分支 git branch列出所有远…

学生管理系统(python实现)

新增学生显示学生查找学生删除学生存档到文件 约定好数据的存储格式&#xff1a; 约定把数据保存在和py文件同级目录中&#xff0c;文件名为record.txt 文件内容按照行文本的方式来表示 首先这是一个文本文件&#xff0c;里面包含了很多行&#xff0c;每一行代表一个学生 …

主要用于工控主板、工业控制器、程序烧录下载器、仿真器、新能源充电桩等众多涉及RS232通讯的产品——D3232

一、应用领域 D3232芯片主要用于工控主板、工业控制器、程序烧录下载器、仿真器、新能源充电桩等众多涉及RS232通讯的产品。 二、基本特性 D3232芯片由两个线路驱动器、两个线路接收器和双电荷泵电路组成&#xff0c;具有HBM>15kV、CDM>2kV的ESD保护能力&#xff0c;并且…

NLP_文本张量表示方法_2(代码示例)

目标 了解什么是文本张量表示及其作用.文本张量表示的几种方法及其实现. 1 文本张量表示 将一段文本使用张量进行表示&#xff0c;其中一般将词汇为表示成向量&#xff0c;称作词向量&#xff0c;再由各个词向量按顺序组成矩阵形成文本表示. ["人生", "该&q…

【力扣 - 盛最多水的容器】

题目描述 给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 说明&#xff1a;你不能倾斜容…

LeetCode 0232.用栈实现队列:基础数据结构的学习

【LetMeFly】232.用栈实现队列&#xff1a;基础数据结构的学习 力扣题目链接&#xff1a;https://leetcode.cn/problems/implement-queue-using-stacks/ 请你仅使用两个栈实现先入先出队列。队列应当支持一般队列支持的所有操作&#xff08;push、pop、peek、empty&#xff0…

【源码】imx6ull实现触摸屏单点实验-移植tslib和qt

一、本实验实验的器材&#xff1a; 1.正点原子imx6ull的阿尔法开发板v2.2 2.屏幕ALIENTEK 4.3 RGBLCD 二、实验已经移植好的文件&#xff1a; 仓库代码&#xff1a;https://gitee.com/wangyoujie11/atkboard_-linux_-driver.git 1.文件说明 arm-qt.tar.bz2&#xff1a;移植好的…

笔记本电脑里回收站删除的文件怎么找回来?这几招帮你恢复

在日常使用笔记本电脑的过程中&#xff0c;我们可能会因为不小心或者误操作&#xff0c;将一些重要的文件删除到回收站&#xff0c;甚至可能直接从回收站中清空。面对这种情况&#xff0c;很多人会感到惊慌失措&#xff0c;不知道如何是好。但其实&#xff0c;即使文件从回收站…