浏览器原理

时间 2019-11-13

标签浏览器原理栏目浏览器繁體版

原文原文链接

第一部分：shell外壳：菜单，工具栏等；css

第二部分：内核html

浏览器的组件：web

用户界面：浏览器软件界面；
浏览器引擎：查询及操做渲染引擎的接口；
渲染引擎：显示请求内容，即渲染html组件；
网络：完成网络调动，发送和响应http请求；
js解释器：编译执行js代码；
UI后端：操做系统的组件,如：下拉列表框和窗口
数据存储：浏览器持久层：cookie localstorage sesionstorage

渲染引擎：算法

基本主流程：shell

请求html ->解析html--加载外部样式及外部脚本-> 构建DOM树->构建render树（dom+cssom树）->绘制render树;后端

(外部样式会阻塞内部脚本的执行。浏览器

外部样式与外部脚本并行加载，但外部样式会阻塞外部脚本执行。)cookie

不一样的内核渲染的流程不同，webkit：网络

编译流程：多线程

源码->解析->解析树->转换->机器码

解析原理：

转换成必定意义的结构：编码能够理解和使用的东西。

解析的结果一般是表达文档结构的节点树，解析书或语法树。

解析两个子过程：

词法解析；
语法解析

解析树=词法解析+语法解析+…的过程。

转换：把解析书转换为机器码；

那么，html解析原理：

特殊性：

html语言的宽容性；
浏览器对html语言的容错机制（修复）；
Html过程的往复性，解析过程可对输入的文档紧进行修改：document.write等；

html解析算法两个阶段：

第一：符号化；

第二：构件树；

css解析：selector: p p-txt , declaration: 3px margn…

脚本解析<script>：

web的模式是同步的，开发者但愿解析到一个script标签时当即解析执行脚本，并阻塞文档的解析直到脚本执行完。
若是脚本是外引的，则网络必须先请求到这个资源——这个过程也是同步的，会阻塞文档的解析直到资源被请求到；

因此render树渲染后再调<script>,放在htmlz最后；

预解析：

当执行脚本时，另外一个线程解析剩下的文档，并加载后面须要经过网络加载的资源。这种方式可使资源并行加载从而使总体速度更快。
预解析并不改变Dom树，它将这个工做留给主解析过程，本身只解析外部资源的引用，好比外部脚本、样式表及图片

渲染树的构建（rendertree）:渲染对象RenderObject ；

渲染树和dom树的关系：

具体详情：

遍历dom树，忽略<head>和节点display:none；
对每个可见的dom,找到对应的cssom,而且应用样式；
最后输出一个渲染树rendertree包括：显示可见的节点及内容和信息；

css优先顺序，从低到高有：

1.　浏览器默认样式

2.　用户个性化浏览器设置

3.　HTML开发者定义的通常样式

4.　HTML开发者定义的!important样式

5.　用户个性化浏览器设置!important样式

渲染对象和对应的DOM节点也可能不在相同的位置。例如，浮动和绝对定位的元素在文本流以外。

怎么样解决css数据庞大，占大量内存？
和每一个元素匹配规则致使性能问题？
应用规则及复杂的联级关系？

共享样式；

进化匹配过程；

以正确的级联顺序；

逐步处理。

布局layout

当渲染对象被建立并添加到树中，他们斌更没有位置和大小，计算这些值得过程称为layout或reflow。每个渲染对象都有一个layout或reflow方法，出发布局时调用。

layout过程：

计算自身宽高；
读取设置的children，并判断其dirty状态，选择渲染dirty的子对象。
根据子对象积累高度，margin和padding来设置本身的高度供给parent对象使用；
更新dirty标识为false;

Dirty bit系统：一个渲染对象发生变化时就标记它和它的children为dirty,表示须要layout。目的：不因每一个小变化就所有从新布局。

绘制painting

遍历渲染树并调用渲染对象的pain方法将他们的内容显示到屏幕上；

绘制顺序：

一个块渲染对象的堆栈顺序为：

背景色；
背景图；
Border;
Children
Outline

动态变化：浏览器老是试着以最小的动做响应一个变化，因此就存在有些属性只改变单个渲染对象就：字体、颜色、等；但也有些属性修改会致使大面积的重绘：位置。

线程和事件：

浏览器是多线程的，渲染引擎和js是单线程的。其中渲染引擎则是浏览器的主线程；

浏览器的主线程是一个事件循环，他被设计为无限循环以保持执行过程的可用：等待时间并执行他们。

浏览器执行的是多线程，js引擎解释器的执行时单线程。因此说浏览器是单线程的说法不对。