浏览器相关

最新推荐文章于 2024-08-01 15:38:17 发布

k毛

最新推荐文章于 2024-08-01 15:38:17 发布

阅读量107

点赞数

分类专栏：浏览器

本文链接：https://blog.csdn.net/weixin_42304037/article/details/100588491

版权

浏览器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

浏览器内核

浏览器内核分为两部分：一是渲染引擎，其主要负责结构与样式，即网页的内容（HTML，XML，图像等），以及计算网页显示方式，然后输出到打印机；而JS引擎主要是负责解析JavaScript，实现页面交互效果；一个负责搭建静态结构，一个用来展现动态效果；后来js引擎越来越独立，浏览器内核便更加倾向于指渲染引擎。

目前常见浏览器及其内核

IE浏览器：ie11之前用Trident内核，后来的Edge采用了新内核（EdgeHTML）
火狐浏览器：使用Gecko内核（开源）
Safari：使用Webkit内核；而且Webkit最先是由苹果开发的
Chrome浏览器：Chrome内核➡Webkit内核➡Blink内核；另外谷歌后来还研发了自己的JavaScript引擎：V8，极大地提高了JavaScript运行速度
Opera：最初是自己研发的Presto，后来同谷歌一样用了Webkit，现在也是Blink内核
国内浏览器大多数是双核模式：标准模式下为chrome内核，兼容模式下为IE内核

浏览器渲染引擎的工作原理

先了解一下浏览器的主要组成部分：用户界面，浏览器引擎，渲染引擎，网络请求模块，JS引擎，用户界面后端，数据层。
在这里插入图片描述
各部分的作用为：
用户界面：包括如地址栏，书签栏等内容构成了浏览器的用户界面，用来实现与用户之间的交互
浏览器引擎：用于在渲染引擎和用户界面之间传递命令
渲染引擎：当获取到请求的页面资源后，浏览器先解析HTML文档构建“结构树”，然后解析CSS文件，为“结构树”添加样式形成”渲染树“，接下来就是布局过程，为“渲染树”分配屏幕的位置坐标，最后进入绘制阶段，利用UI后端绘制出“渲染树”的每一个节点；另外，为了更好用户体验，浏览器引擎不会等到所有html解析完成后再去构建和布局render树。它是完成解析完一部分内容就显示一部分内容，于此同时还可能通过网络下载相关内容
在这里插入图片描述
网络请求模块：实现网络请求以及数据接收
JS引擎：负责解析JS代码
UI后端：负责绘制基本的部件，在底层与操作系统进行交互
数据存储：负责存储数据

浏览器页面渲染过程（及尽量避免重绘回流的操作）

1 用户输入网址（假设是HTML页面，第一次访问，无缓存）浏览器想服务器发出HTTP请求，服务器返回HTML文件（善用缓存，减少HTTP请求，减轻服务器压力）
2. 浏览器载入HTML代码，获取CSS文件（CSS文件合并，减少HTTP请求）
3. 载入<body>，开始渲染页面（CSS文件放在最上面，避免重复渲染）
4. 浏览器发现一个<img>，向服务器发出请求，此时浏览器不会等到图片下载完，而是继续渲染后面的代码（图片文件合并，减少HTTP请求）
5. 服务器返回图片文件，由于图片面积，影响界面中其他元素的排版，此时，浏览器需要重新渲染这部分代码（最好图片都设置尺寸，避免重新渲染）
6. 浏览器发现一个包含js代码的<script>标签，会立即运行该js代码（script最好放在页面最下面）
7. js执行命令：隐藏掉代码中某个div元素，此时浏览器不得不重新渲染这部分代码（页面初始化样式不要使用js控制）
8. 如果某时刻，用户通过点击某个按钮修个这个页面样式（如换肤），请求新的CSS文件，此时发生回流，重新渲染页面

关于reflow和repaint

reflow：某个样式发生改变影响页面的布局，发生回流；reflow几乎无法避免，如树目录的折叠展开效果都会引起reflow
repaint：改变某个元素的背景色，文字或边框颜色等不影响布局的属性，成为repaint；
reflow的成本比repaint高；

引起reflow的情况（标准流内的元素发生形态上的改变）

改变窗囗大小
改变文字大小
添加/删除样式表
内容的改变，如用户在输入框中敲字
激活伪类，如:hover (IE里是一个兄弟结点的伪类被激活)
操作class属性
脚本操作DOM
计算offsetWidth和offsetHeight
设置style属性

reflow是不可避免的，只能将reflow对性能的影响减到最小。

尽可能限制reflow的影响范围。需要改变元素的样式，不要通过父级元素影响子元素。最好直接加在子元素上。
通过设置style属性改变结点样式的话，每设置一次都会导致一次reflow。所以最好通过设置class的方式。
实现元素的动画，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局。
权衡速度的平滑。比如实现一个动画，以1个像素为单位移动这样最平滑，但reflow就会过于频繁，CPU很快就会被完全占用。如果以3个像素为单位移动就会好很多。
不要用tables布局的另一个原因就是tables中某个元素一旦触发reflow就会导致table里所有的其它元素reflow。在适合用table的场合，可以设置table-layout为auto或fixed，这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围。
很多情况下都会触发reflow，如果css里有expression，每次都会重新计算一遍。
减少不必要的 DOM 层级（DOM depth）。改变 DOM 树中的一级会导致所有层级的改变，上至根部，下至被改变节点的子节点。这导致大量时间耗费在执行 reflow 上面。
避免不必要的复杂的 CSS 选择器，尤其是后代选择器（descendant selectors），因为为了匹配选择器将耗费更多的 CPU

从输入url到加载完成过程