文章目录
- 一、PC端常用浏览器/概念
-
- 1.2软件项目开发二个不同体系
- 二、浏览器
-
- 2.1 内核和js引擎
- 2.2 浏览器的组成部分
- 2.3 浏览器如何渲染UI？
- 2.4 浏览器如何解析CSS选择器？
- 2.5 DOM树如何创建？
一、PC端常用浏览器/概念
PC端浏览器 ：谷歌chrome;IE;火狐;Safari
移动端浏览器：Safari[苹果];chrome[安卓]
1.2软件项目开发二个不同体系
- B/S brows server [浏览器/服务器] ：网站;
- C/S client server[客户机/服务器] ：QQ;大型网络游戏
服务器：
1. 存储数据： #mysql oracle sql server mongodb
2. 完成复杂功能： #nodejs php java c#
二、浏览器
2.1 内核和js引擎
浏览器内核[内核在浏览器内部用于渲染和解析html;css模块]
Js引擎：执行网页中的JavaScript程序
| 浏览器 | 内核（渲染引擎） | js引擎 |
|---|---|---|
| IE（微软旧版） | Trident | Chakra（for JScript） |
| Edge（微软新版） | EdgeHTML | Chakra（for JavaScript） |
| Chrome | WebKit (Chrome 27)，Blink： WebKit升级（28~） | V8 |
| Safari | WebKit | JavaScriptCore |
| Firefox | Gecko | SpiderMonkey |
| Node js | V8 |
2.2 浏览器的组成部分
-
用户界面：包括地址栏、前进/后退按钮、书签菜单等。
除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面 -
浏览器引擎：在用户界面和呈现引擎之间传送指令。
-
呈现引擎（渲染引擎）：负责显示请求的内容。
如果请求的内容是HTML，它就负责解析HTML和CSS内容，并将解析后的内容显示在屏幕上。 -
网络：用于网络调用，比如HTTP请求。
其接口与平台无关，并为所有平台提供底层实现。 -
用户界面后端：用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。
-
JavaScript解释器。用于解析和执行JavaScript 代码。
-
数据存储：持久层，浏览需要在硬盘上保存各种数据，例如 Cookie。
新的HTML规范(HTMLE5)定义了“网络数据库”，这是一个完整(但是轻便)的浏览器内数据库.
2.3 浏览器如何渲染UI？
- 浏览器获取HTML文件， 解析并生成DOM树
根据HTML文件中的每个标签生成DOM树内存中对象
- 解析CSS文件，生成Style Rules树
- 合并DOM树和Style Rules树，生成Render（渲染）树
- 布局（Layer）阶段，为Render树的每一个节点分配一个应出现的确切坐标
- 调用GPU绘制（painter），遍历Render树节点，将元素呈现
2.4 浏览器如何解析CSS选择器？
浏览器从右往左解析CSS选择器。
DOM树与Style Rules合并成为Render树，实际上要将Style Rules附着到DOM 树上，因此要根据选择器提供的信息对DOM树进行遍历，才能将样式附着到对应的DOM元素上。
示例：
.song_list li span {width: 23px;height: 17px;margin-right: 50px;
}
从右至左匹配：
- 先找到所有的最右节点
span，对于每一个span，向上寻找节点li - 由
li再向上寻找class = song_list的节点 - 最后找到根元素
html则结束这个分支的遍历。
从右向左的匹配在第一步就筛选掉了大显的不符合条件的最右节点(叶子节点)，故效率更高。
2.5 DOM树如何创建？
1.转码:浏览器将接收到的二进制数据按照指定编码格式转化为HTML字符串
2.生成Tokens:之后开始parser，浏览器会将HTML字符串解析成Tokens（检查开始结束标签等错误）
3.构建Nodes:Nodes为对象，对Node添加特定的属性，通过指针确定Node的父、子、兄弟关系和所属treeScope
4.生成DOM Tree: 通过node包含的指针确定的关系构建出DOM Tree
