浏览器原理篇—渲染阻塞

渲染阻塞

1.DOM 的解析

html 文档 边加载边解析 的;网络进程和渲染进程之间会建立一个共享数据的管道,网络进程接收到数据实时传递给渲染进程,渲染进程的 HTML 解析器,它会动态接收字节流,并将其解析为 DOM

2.字节流转换为 DOM 需要三个阶段

(0)字节流转 tokens ,tokens 生成节点 node,最后生成 DOM;
最关键是第一点;
(1)通过分词器将字节流转换为 Token。
Tag Token 又分 StartTag , EndTag,文本 token;
分别对应下图的蓝、红、绿;
image.png
靠一个 栈结构 来维护;
注意,文本 Token 是不需要压入到栈
image.png

3.JS 影响

(1)script 脚本

会暂停 DOM 解析
因为接下来的 JavaScript 可能要修改当前已经生成的 DOM 结构

(2)引入外部 JS 文件

会阻塞 DOM 解析,需要等待下载完成才行;
浏览器有个优化,渲染进程有个预解析线程,提前下载 JS 和 css 文件
所以不用操作 dom 的 js 文件,可以设置为异步加载, async 和 defer ,async 加载完立即执行还是会阻塞渲染,最好用 defer;

(3)JS 代码上面的 CSS 文件

因为不知道 JS 是否要处理 CSS,所以不管怎样都会等待 CSS 文件加载好;再继续执行 JS;

(4)script 放在页面底部的影响

不影响 DOM 解析,但会影响渲染;

4.CSS 加载

(1)CSS 加载

CSS 代码下面如果没有 script 代码段,就不会影响 DOMContentLoaded;
如果有 JS 代码,会等待 CSS 加载完成,会阻塞 DOM 解析;

(2)含有 JavaScript 文件和 CSS 文件页面的渲染流水线

预解析器同时发出两个文件请求,不管 CSS 文件和 JavaScript 文件谁先到达,都要先等到 CSS 文件下载完成并生成 CSSOM,然后再执行 JavaScript 脚本,最后再继续构建 DOM,构建布局树,绘制页面
image.png

预解析

WebKit 和 Firefox 都进行了这项优化。在执行脚本时,其他线程会解析文档的其余部分,找出并加载需要通过网络加载的其他资源。通过这种方式,资源可以在并行连接上加载,从而提高总体速度。请注意,预解析器不会修改 DOM 树,而是将这项工作交由主解析器处理;预解析器只会解析外部资源(例如外部脚本、样式表和图片)的引用。

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

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

相关文章

[每周一更]-(第38期):Go常见的操作消息队列

在Go语言中,常见的消息队列有以下几种: RabbitMQ:RabbitMQ是一个开源的AMQP(高级消息队列协议)消息代理软件,用于支持多种编程语言,包括Go语言。RabbitMQ提供了可靠的消息传递机制和灵活的路由…

基于SSM的在线学习系统的设计与实现论文

基于SSM的在线学习系统的设计与实现 摘要 随着信息互联网购物的飞速发展,一般企业都去创建属于自己的管理系统。本文介绍了在线学习系统的开发全过程。通过分析企业对于在线学习系统的需求,创建了一个计算机管理在线学习系统的方案。文章介绍了在线学习…

【习题】运行Hello World工程

判断题 1. DevEco Studio是开发HarmonyOS应用的一站式集成开发环境。 正确(True)错误(False) 正确(True) 2. main_pages.json存放页面page路径配置信息。 正确(True)错误(False) 正确(True) 单选题 1. 在stage模型中,下列配置文件属于AppScope文件夹的是&am…

信号与线性系统翻转课堂笔记7——信号正交与傅里叶级数

信号与线性系统翻转课堂笔记7——信号正交与傅里叶级数 The Flipped Classroom7 of Signals and Linear Systems 对应教材:《信号与线性系统分析(第五版)》高等教育出版社,吴大正著 一、要点 (1,重点&a…

安全、效率、成本:混合云数据库管理的三重挑战!

随着业务需求的不断演变,数据在多云平台之间流动,给数据库管控带来了新的层次和复杂性。这给数据库管控带来了前所未有的挑战。企业可能面临着一系列问题,包括安全性挑战、管理复杂性、性能与效率问题、成本控制难题、缺乏统一的管理视图以及…

php反序列化漏洞原理、利用方法、危害

文章目录 PHP反序列化漏洞1. 什么是PHP反序列化漏洞?2. PHP反序列化如何工作?3. PHP反序列化漏洞是如何利用的?4. PHP反序列化漏洞的危害是什么?5. 如何防止PHP反序列化漏洞?6. PHP反序列化漏洞示例常见例子利用方法PH…

elementUI CDN引入本地文件报错,刷新页面报错

报错原因:vue.config.js的externals 配置中有外部cdn引入配置,而当前场景我的element是直接下载放在本地的,这时就需要将配置注释或者删除 webpack 中的 externals 配置项用于指定在打包时需要排除掉的模块,这些模块会被视为外部依…

Rust中peekable的使用

在 Rust 中,从迭代器中获取(也就是“消费”)一个元素时,每次调用 next 方法都会“消费”迭代器的一个元素,这意味着此元素被从迭代器中移除并返回给调用者, 一旦一个元素被消费,它就不能再次从同…

maven下载jar包失败

配置国内镜像 设置国内的仓库,比如: <!--阿里仓库--><mirror><id>alimaven</id><name>aliyun maven</name><url>https://maven.aliyun.com/repository/public/</url><mirrorOf>central</mirrorOf></mirror>…

医学实验室检验科LIS信息系统源码

实验室信息管理是专为医院检验科设计的一套实验室信息管理系统&#xff0c;能将实验仪器与计算机组成网络&#xff0c;使病人样品登录、实验数据存取、报告审核、打印分发&#xff0c;实验数据统计分析等繁杂的操作过程实现了智能化、自动化和规范化管理。 实验室管理系统功能介…

nuxt打包占用磁盘IO

目录 前言排除过程 前言 jenkins运行打包&#xff0c;总是要卡一段时间&#xff0c;磁盘IO很高。我手动执行后的确发现了这个问题&#xff0c;如下图所示。 排除过程 我的方案很原始&#xff0c;利用git恢复到以前的版本&#xff0c;抽检&#xff0c;搞了差不多两个小时&am…

vue中添加change的js事件并根据下拉框内容动态改变另一个组件中的数据(亲测有效)

vue中添加change的js事件并根据下拉框内容动态改变另一个组件中的数据 话不多说看我怎么完成的&#xff0c;以我当前实现的例子演示 我想根据班级下拉框来动态改变报名费内容 具体步骤如下&#xff1a; 1.首先给下拉框的组件加一个change change“changeFeiByclass” 2.在met…

关于Triple DES(3DES)对称加密算法

一、引言 在网络安全领域&#xff0c;对称加密算法作为一种常见的加密手段&#xff0c;被广泛应用于保障数据传输的保密性和完整性。其中&#xff0c;DES&#xff08;Data Encryption Standard&#xff09;算法作为一种经典的对称加密算法&#xff0c;由IBM于1970年代开发&…

mac上使用 Downie 下载网页视频

在今天的数字时代&#xff0c;视频内容在互联网上的传播变得更加普遍和便捷。然而&#xff0c;有时我们可能希望将网页上的视频保存在本地&#xff0c;以便离线观看或与他人分享。Downie 是一款强大而简便的工具&#xff0c;专门设计用于下载网页上的视频内容。本文将介绍 Down…

多维时序 | MATLAB实现SSA-CNN-SVM麻雀算法优化卷积神经网络-支持向量机多变量时间序列预测

多维时序 | MATLAB实现SSA-CNN-SVM麻雀算法优化卷积神经网络-支持向量机多变量时间序列预测 目录 多维时序 | MATLAB实现SSA-CNN-SVM麻雀算法优化卷积神经网络-支持向量机多变量时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 多维时序 | MATLAB实现…

【智慧办公】如何让智能会议室的电子标签实现远程、批量更新信息?东胜物联网硬件网关让解决方案更具竞争力

近年来&#xff0c;为了减少办公耗能、节能环保、降本增效&#xff0c;越来越多的企业开始从传统的办公模式转向智慧办公。 以智能会议室为例&#xff0c;会议是企业业务中不可或缺的一部分&#xff0c;但在传统办公模式下&#xff0c;一来会议前行政人员需要提前准备会议材料…

多相机系统通用视觉 SLAM 框架的设计与评估

Design and Evaluation of a Generic Visual SLAM Framework for Multi-Camera Systems PDF https://arxiv.org/abs/2210.07315 Code https://github.com/neufieldrobotics/MultiCamSLAM Data https://tinyurl.com/mwfkrj8k 程序设置 主要目标是开发一个与摄像头系统配置无关…

极智项目 | 实战Pytorch戴口罩检测

欢迎关注我的公众号 [极智视界]&#xff0c;获取我的更多项目分享 大家好&#xff0c;我是极智视界&#xff0c;本文来介绍 实战 Pytorch 戴口罩检测项目。 本文介绍的 实战 Pytorch 戴口罩检测项目&#xff0c;提供完整的可以一键执行的项目工程源码&#xff0c;获取方式有两…

Diary26-Vue综合案例1-书籍购物车

Vue综合案例1-书籍购物车 案例要求: 代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewpor…

网络爬虫之多任务数据采集(多线程、多进程、协程)

进程&#xff1a;是操作系统中资源分配的基本单位 线程&#xff1a;使用进程分配的资源处理具体任务 一个进程中可以有多个线程&#xff1a;进程相当于一个公司&#xff0c;线程就是公司里面的员工。 一 多线程 多线程都是关于功能的并发执行。而异步编程是关于函数之间的非…