一、浏览器工作原理
|
浏览器 |
浏览器内核 |
|
IE |
Trident内核 |
|
Firefox |
Gecko内核 |
|
Safari/Chrome |
Webkit内核 |
|
Opera |
Presto内核 |
|
现在Chrome内核是Blink |
Blink内核 |
1.启动
-
启动应用（老板开公司）
-
计算机创建进程（创建一个公司）
-
操作系统分配内存（找场地）
-
应用创建线程（找工人）
2.关闭
-
关闭应用（倒闭）
-
结束进程（场地关闭）
-
释放内存（场地空闲出来）
节省内存：
浏览器限制了最大进程数，达到限制，新开的tab页面会共用之前相同站点的渲染进程
二、内核工作原理
内核：渲染引擎和js引擎。
渲染引擎：
用来显示请求的内容，如果请求内容为html，那么负责解析html及css并将解析后的结果显示出来。还可以解析xml文件。
js引擎：
用来解释执行js代码。
渲染流程：
用户输入URL整个过程发生了什么？
-
输入url
-
浏览器解析url，获得主机名
-
将主机名转换成服务器ip地址（查找本地DNS缓存列表，如果没有则向默认的DNS服务器发送查询请求）
-
TCP 连接：TCP 三次握手，简易描述三次握手 客户端：服务端你在么？ 服务端：客户端我在，你要连接我么？ 客户端：是的服务端，我要链接。 连接打通，可以开始请求
-
发送 HTTP 请求
-
服务器处理请求并返回 HTTP 报文
-
浏览器解析渲染页面
-
断开连接：TCP 四次挥手
浏览器解析渲染页面过程：
-
解析HTML，生成DOM树
-
解析CSS，生成CSSOM（层叠样式表模型：CSS Object Model）树
-
将DOM树和CSSOM树关联，生成渲染树(Render Tree)
-
布局render树（Layout/reflow），负责各元素尺寸、位置的计算
-
绘制render树（paint），绘制页面像素信息
-
将像素发送给GPU(图形处理器，是显卡的核心引擎)，展示在页面上。(Display)