浏览器的底层运行机制

news2025/6/9 17:32:22

一、复习

1.进程和线程

  • 进程:指一个程序(或浏览器打开一个页面就是开辟一个进程)* 线程:程序中具体执行任务的一个进程中可能包含一到多个线程!!* 单线程:同时只能处理一件事,上一件事处理完,下一件事才能处理「同步编程」* 多线程:可同时处理多件事情,上一件事情即便没有处理完,下一件事也可以交给其他线程去处理「异步编程」### 2.浏览器的渲染进程

浏览器打开一个页面就是开辟一个进程,每个进程中会包含多个线程「浏览器是多线程的」!!

  • GUI渲染线程:渲染解析HTML/CSS代码,并且绘制页面 =>W3C* JS引擎线程:渲染解析JS代码 =>ECMAScript「ECMA」* 定时器监听线程:设置定时器后,浏览器就会分配一个线程(小人)去监听定时器是否到时间* 事件监听线程:完成事件绑定后,也会分配一个线程去监听事件是否触发* HTTP网络线程:分配一个线程,去服务器获取相关的资源信息 「并发上限:同源下最多开辟5~7个」* …接下来正式开始!

二、浏览器底层渲染机制

当基于HTTP网络,从服务器端获取到页面源代码后,到浏览器把其绘制成页面,中间所做的事情,就是我们要研究的渲染机制!

1. 创建DOM TREE(DOM树)

2. 创建CSSOM TREE(样式树)

样式树:渲染解析CSS完毕后,GUI按照原先导入的顺序,依次解析CSS代码,记录了相应节点应该具备的样式「包括继承的样式、或者根据优先级重构的样式等等」

3. 生成RENDER TREE「渲染树」

把DOM TREE 和 CSSOM TREE 合并在一起生成RENDER TREE

渲染树中详细记录了DOM的层级结构和每个节点应该具备的样式!!

4. Layout布局

根据可视窗口大小,按照RENDER TREE,计算出每个节点在视口中的位置和排版等「含:位置、方向、大小、排列方式…」

5. 分层

规划出页面各个文档流(层面)中,所有节点的具体绘制步骤!!

6. Painting绘制

GUI根据上一步计算出来的步骤,开始绘制页面即可!!

触发load事件:window.οnlοad=function(){…}

三、渲染页面流程的步骤

  • 打开页面,浏览器首先分配一个“HTTP线程”去服务器获取HTML资源;* 获取资源后,分配“GUI渲染线程”自上而下,逐行渲染解析HTML代码!* 渲染HTML/CSS代码:遵循W3C规则,GUI渲染线程去处理* 渲染JS代码:遵循ECMAScript(ECMA-262)规则,JS引擎线程去处理* 在渲染代码过程中,如果遇到 link/img/script[src=xxx]/audio/video 等,浏览器需要开辟“HTTP线程”,从服务器端获取到对应的资源文件(文件中的代码)### 1.遇到<link>

  • 浏览器分配一个“HTTP线程”去服务器获取CSS样式* 同时GUI会继续向下渲染「异步」* 等待HTML渲染解析完毕「DOM TREE已经构建」,并且CSS样式“都已经”获取到了,再按照之前导入样式的顺序,逐一渲染解析CSS样式「创建CSSOM TREE」!* 目的:确保CSS优先级(层级)的准确,所以渲染顺序需要和之前编写的导入顺序一致* 如果某个资源一直没有响应,或者响应结果是获取失败,则忽略它的渲染!#### 1.1link三种 CSS 样式的渲染区别

  • 渲染过程中遇到 则开辟新的HTTP线程去获取资源文件,GUI不受影响,继续向下渲染“异步” 【代码多的时候 用link】* 如果遇到的是这个标签,则无需获取资源,代码本身就有,此时GUI直接去渲染即可“同步” 【代码少的时候 最优】* 如果遇到的是@import ,也会开辟新的HTTP线程去获取资源,但是此时会阻碍GUI的渲染,只有当样式资源获取后,GUI才会渲染新拿到的样式代码 “同步” 【影响页面的渲染速度】#### 1.2优化技巧

  • 如果CSS样式“代码比较少”,我们直接使用内嵌式即可(尤其是移动端,我们经常这么干);* 但是如果代码比较多,还用内嵌式则会导致HTML请求速度都很慢,此时我们使用外链式;除特殊必要,不建议使用导入式;### 2.遇到 <style>

  • 内嵌样式:获取HTML的时候,就把嵌入的样式也都获取到了!不需要再开辟HTTP线程,去服务器获取资源了!

  • 为了保证CSS渲染的顺序和样式优先级,此时GUI也不会立即渲染解析CSS代码,还是要等待DOM树构建完毕、其它CSS资源都获取到,再按照顺序进行解析!!

  • <style>方式确保:在DOM TREE构建完毕后,可以立即拿到样式代码去渲染解析!### 3.遇到 import 导入式

  • 也会开辟新的HTTP线程去服务器获取资源,但是其“会阻碍GUI继续向下渲染”,也就是GUI此时停止工作;当把资源从服务器获取后,GUI才能继续向下渲染* 这种模式是同步的* 真实项目中,尽可能不要使用@import「除非在less/sass/stylus等预编译语言中」### 4.遇到 img/audio/video

  • 开辟新的HTTP线程去获取相关资源,GUI继续向下渲染* 当浏览器去绘制页面的时候,如果资源已经获取,此时再去渲染* 图片懒加载:加快页面第一次渲染的速度* 不让图片资源占用有并发上限的HTTP线程* 第一次渲染页面,不去渲染耗时间的图片### 5.遇到 <script src="">

  • 默认是同步的:默认会阻碍GUI的渲染:首先开辟“HTTP线程”去服务器获取JS资源,此时GUI停止渲染,等待资源获取完毕,“JS引擎线程”把代码都渲染解析好了,GUI才会继续渲染!!

5.1存在的问题

  • 如果把<script>放在HEAD中导入,则JS代码内是无法获取DOM元素的{原因:其阻碍GUI渲染,导致JS代码执行的时候,DOM TREE还未构建}* 所以我们一般都是把其放在BODY末尾导入,一方面不让其阻碍DOM TREE的构建,另一方面也是要等待DOM TREE构建完毕,我们可以在JS中获取DOM元素!* 当然也可以监听事件「DOMContentLoaded && load」,在事件中获取DOM元素#### 5.2依然放在HEAD中,还想能拿到DOM元素,该如何处理?

  • 把获取元素的代码放在window.onload事件中「等待所有资源渲染完毕后触发」* 还可以给<script>设置 async 或者 defer 属性* 设置了async属性:* 获取资源是异步的:浏览器分配HTTP线程获取JS资源,此时不阻碍GUI,GUI会继续渲染* 代码执行是同步的:当JS资源获取后,立即执行JS代码,阻碍GUI正在做的事情!* 特点:多个<script>设置async,最后也都是谁先获取先执行谁,没有所谓的顺序概念,一般用于不需要相互依赖的JS中!!* 设置defer属性:* 和<link>非常的类似,获取和渲染代码都是异步的。* 开辟HTTP线程去获取JS资源,此时GUI继续渲染,等待GUI渲染完毕「DOM TREE生成」,而要获取的JS资源也都拿到了,再按之前导入JS的顺序,依次渲染解析JS* 特点:多个<script>设置defer,它要等待所有资源都获取后,按照导入的先后顺序,依次渲染解析JS!!#### 总结

真实项目中,要不然就是把<script>放在末尾,要不然就是设置async/defer;在不考虑多个JS之间执行的先后顺序「也就是相互之间没有依赖」,可以设置async,谁先获取就先执行谁!反之,需要有顺序和依赖,则设置defer!

四、总结优化技巧

学习底层机制,目的是进行“前端性能优化”,写出更高质量的代码!!

优化思想:CRP「关键渲染路径」

  • 减少使用@import,<script>放在末尾或者设置async/defer让其变为异步处理,不让他们阻碍GUI干活!!* 使用语义化标签、层级结构不要过深!* CSS选择器前缀不要过长 「选择器是从右到左渲染的」* 样式代码较少的情况下,使用内嵌式!代码较多,采用外链式;坚决不用导入式!* CSS合并压缩为1个、JS也合并压缩为1个,减少HTTP请求的数量;* 对于图片等资源,做延迟加载「等待页面彻底渲染完毕,在去获取渲染」;

  • 减少DOM的回流(重排)和重绘!* …

最后

为大家准备了一个前端资料包。包含54本,2.57G的前端相关电子书,《前端面试宝典(附答案和解析)》,难点、重点知识视频教程(全套)。



有需要的小伙伴,可以点击下方卡片领取,无偿分享

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

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

相关文章

ASEMI三相整流模块MDS55-16特征,MDS55-16应用

编辑-Z ASEMI三相整流模块MDS55-16参数&#xff1a; 型号&#xff1a;MDS55-16 最大重复峰值反向电压&#xff08;VRRM&#xff09;&#xff1a;1600V 最大RMS电桥输入电压&#xff08;VRMS&#xff09;&#xff1a;1700V 最大平均正向整流输出电流&#xff08;IF&#xf…

MySQL架构图

MySQL架构图 Mysql逻辑架构图主要分三层&#xff1a; 1) 第一层负责连接处理&#xff0c;授权认证&#xff0c;安全等等 每个客户端连接都会在服务器进程中拥有一个线程&#xff0c;服务器维护了一个线程池&#xff0c;因此不需要为每一个新建的连接创建或者销毁线程。 当客户…

看板管理对项目管理有什么帮助?

在目前市面上的项目管理工具中&#xff0c;项目看板功能基本上成为了标配。看板作为敏捷的项目管理工具&#xff0c;可以帮助我们将项目工作可视化展现。项目看板的作用1&#xff0c;提高团队信息流动性&#xff1a;看板工具可以及时的传递项目工作中的最新讯息&#xff0c;保证…

Mapper文件注入问题

Mapper文件注入问题UserMapper that could not be found.原因分析解决方案程序正常运行&#xff0c;但是注入类爆红问题原因分析解决方法UserMapper’ that could not be found. 原因分析 撰写了mapper文件&#xff0c;但是没有注入spring容器 解决方案 添加mybatis.mapper-…

DVWA—CSRF-Medium跨站请求伪造中级

注意&#xff1a; 1、这里对XSS(Stored)关卡不熟悉的可以从这里去看http://t.csdn.cn/ggQDK 2、把难度设置成 Medium 一、这一关同样我们需要埋下伏笔&#xff0c;诱使用户点击来提交&#xff0c;首先从XSS&#xff08;Stored&#xff09;入手。 注意&#xff1a;在前面介绍…

黑马】后台项目171集

将近一个月没有练习了&#xff0c;找到之后果然打不开出了问题【问题】运行代码打开网页后&#xff0c;发现不能正常登录&#xff0c;一开始还以为是密码记错了&#xff0c;后来发现是数据库没有正常启动&#xff0c;phpstudy中的数据库一直是启动状态&#xff0c;关闭不了。【…

这个神器,让 Python 爬虫如此简单

相信大家应该都写过爬虫&#xff0c;简单的爬虫只需要使用 requests 即可。遇到复杂的爬虫&#xff0c;就需要在程序里面加上请求头和参数信息。类似这种&#xff1a; 我们一般的步骤是&#xff0c;先到浏览器的网络请求中找到我们需要的请求&#xff0c;然后将请求头和参数信…

【运筹优化】带时间窗约束的车辆路径规划问题(VRPTW)详解 + Python 调用 Gurobi 建模求解

文章目录一、概述1.1 VRP 问题1.2 CVRP 问题1.3 VRPTW 问题二、VRPTW 的一般模型三、Python 调用 Gurobi 建模求解3.1 Solomn 数据集3.2 完整代码3.3 运行结果展示3.3.1 测试案例&#xff1a;c101.txt3.3.2 测试案例&#xff1a;r101.txt一、概述 1.1 VRP 问题 车辆路径规划问…

一场深度的IT效率革命:低代码市场加速嬗变

尽管IT技术支撑了全球的信息化浪潮&#xff0c;然而困扰行业已久的软件开发效率却难以像摩尔定律一样快速提升&#xff0c;甚至已经成为了一种瓶颈&#xff0c;在困扰着行业的继续发展。一边是码农们高喊着996的境况&#xff0c;另一边是程序员的生产力并没有用在更具价值的生产…

Qml学习——布局

最近在学习Qml&#xff0c;但对Qml的各种用法都不太熟悉&#xff0c;总是会搞忘&#xff0c;所以写几篇文章对学习过程中的遇到的东西做一个记录。 学习参考视频&#xff1a;https://www.bilibili.com/video/BV1Ay4y1W7xd?p1&vd_source0b527ff208c63f0b1150450fd7023fd8 目…

C++ 浅谈之 STL List

C 浅谈之 STL List HELLO&#xff0c;各位博友好&#xff0c;我是阿呆 &#x1f648;&#x1f648;&#x1f648; 这里是 C 浅谈系列&#xff0c;收录在专栏 C 语言中 &#x1f61c;&#x1f61c;&#x1f61c; 本系列阿呆将记录一些 C 语言重要的语法特性 &#x1f3c3;&am…

如何在Visual Studio、Clion、Msys2中安装和使用vcpkg

首先事情是在安装了Msys2之后&#xff0c;想在Clion中使用安装在Msys2中的vcpkg。但是折腾了很久还是无法解决。于是就折腾出了这篇文章&#xff0c;和下一篇如何在Clion使用vcpkg的文章。 不过&#xff0c;由于我电脑上已近配置好了vcpkg以及环境变量&#xff0c;要是重新删除…

【C】ASCII 的十六进制字符转文件

概述 本项目是我自己使用的 来源于用串口传文件数据到电脑进行分析的时候,需要转换成可以打开的文件 而常用的串口助手大都没有直接保存为二进制文件的功能 也完全可以当作c语言初学者的练习项目(很简单) 需求 用串口传来的文件是如下格式(ASCII字符) 需要将其转化为二进制数据…

Netty相关面试题

文章目录TCP、UDP的区别&#xff1f;同步与异步、阻塞与非阻塞的区别&#xff1f;BIO、NIO、AIO分别是什么&#xff1f;Netty跟Java NIO有什么不同&#xff0c;为什么不直接使用JDK NIO类库&#xff1f;Netty的粘包/拆包是怎么处理的&#xff0c;有哪些实现&#xff1f;说说Net…

网络安全的就业及发展前景如何?

网络空间安全专业简称“网络安全专业”&#xff0c;主要以信息构建的各种空间领域为主要研究对象&#xff0c;包括网络空间的组成、形态、安全、管理等。该专业致力于培养“互联网”时代能够支撑和引领国家网络空间安全领域的具有较强的工程实践能力&#xff0c;系统掌握网络空…

完美!终于有人把《数据结构与算法》讲透彻了(附源码笔记),复杂的问题变简单了

开篇 数据结构是计算机科学与技术专业非常重要的一门核心基础课&#xff0c;计算机科学各个领域以及各种应用软件都要使用相关的数据结构和算法。 本篇的主要目的不是提供关于数据结构和算法的定理及证明。本书采用的模式是利用不同的复杂度改善问题的解决(对于每个问题&…

Spring面试重点(一)——Spring容器

Spring容器 手写Autowired注解 /** 实现spring的Autowired注解 **/ //运行时触发 Retention(RetentionPolicy.RUNTIME) //作用于变量 Target(ElementType.FIELD) public interface Autowired {}public class UserController {Autowiredprivate UserService userService;/*** …

专家说年轻人工资低是能力不行….

我们国家的很多专家总讲究语不惊人死不休&#xff0c;同时他们还很喜欢话风高速原地调头。 最近又有一个碉堡了的专家在大放厥词&#xff0c;就在前几天的首届长白山高峰论坛上中航基金副总经理邓海清发表批评年轻人的言论&#xff0c;邓老板是这么说的&#xff1a;很多年轻人…

数据分析实战项目3:RFM用户分群

目录1、RFM模型介绍2、Excel实际RFM划分案例3、RFM案例3.1 数据加载和基本信息查看3.2 数据预处理和RFM的初始值计算3.3 RFM区间和划分和分值计算3.4 RFM计算结果保存3.4.1 保存到excel3.4.2 保存到数据库3.5 RFM计算结果可视化3.6 结果分析&#xff08;营销建议&#xff09;3.…

[docker]笔记-基础配置

1、docker启动和设置开机启动 [rootlocalhost ~]# systemctl start docker [rootlocalhost ~]# systemctl enable docker 2、更换docker镜像网站&#xff0c;默认docker镜像网站是国外网站&#xff0c;下载镜像非常慢&#xff0c;需要更换为国内网站&#xff0c;以阿里云为例…