浏览器工作原理

浏览器的组成

• 人机交互部分（UI)
• 网络请求部分（Socket）
• JavaScript引擎部分（解析执行JavaScript)
• 渲染引擎部分（渲染HTML、Css等）
• 数据存储部分（cookie、Html5中的本地存储LoaclStorage、SessionStorage）

主流渲染引擎

• 1. 渲染引擎又叫排版引擎或浏览器内核
• 2. 主流的渲染引擎有：
     • chrome浏览器：Blink引擎（WebKit的一个分支）
     • Safari浏览器：WebKit引擎，windows版本2008年推出，但苹果已于2012年停止开发Windows版的Safari
     • FireFox浏览器：Gecko引擎
     • opera浏览器：Blink引擎（早期版本使用Presto引擎）
     • Internet Explorer浏览器：Trident引擎
     • Microsoft Edge浏览器：EdgeHTML引擎（Trident的一个分支）

工作原理

• 1. 构建DOM树（Document Object Model，文档对象模型）和Css规则树，DOM是W3C组织推荐的处理可扩展置标语言的标准编程接口
• 2. 将DOM树和Css规则树合并， 构建 渲染树，渲染树并不等同于DOM树，因为像head标签 或 display：none这样的元素就没有必要放到渲染树
• 3. 对渲染树进行布局，定位坐标和大小，确定是否换行、确定position、overflow、z-index等，这个过程叫layout或reflow
• 4. 绘制渲染树，调用操作系统底层的API进行绘图操作

浏览器访问网站过程

1.在浏览器输入网址
2.浏览器通过用户在地址栏中输入的URL构建HTTP请求
3. 浏览器发起DNS域名解析请求，将域名转换为IP地址
4. 浏览器将请求报文发送给服务器
5. 服务器接收请求报文，并解析
6. 服务器处理用户请求，并将处理结果封装成HTTP响应报文
7. 服务器将HTTP响应报文发送给浏览器
8. 浏览器接收服务器响应的HTTP报文，并解析
9. 浏览器解析HTML页面并展示，在解析HTML页面时遇到新的资源需要再次发起请求
10.最终浏览器展示出了页面