NodeJS - 浏览器简单介绍

Posted 2020-11-30 萌胖次

1. 浏览器的组成

　　人机交互部分 (UI)

　　网络请求部分 (Socket)

　　javascript引擎部分 (解析执行JavaScript)

　　渲染引擎部分 (渲染html, CSS等)

　　数据存储部分 (Cookie, HTML5中的本地存储LocalStorage/SessionStorage)

 

2. 主流渲染引擎 (渲染引擎又叫排版引擎或浏览器内核)

　　Chrome浏览器: Blink引擎 (WebKit的一个分支)

　　Safari浏览器: WebKit引擎 

　　FireFox浏览器: Gecko引擎

　　Opera浏览器: Blink引擎 (早期版使用Presto引擎)

　　Internet Explorer浏览器: Trident引擎

　　Microsoft Edge浏览器: EdgeHTML引擎 (Trident的一个分支)

 

3. 浏览器内核工作原理

　　当一个html文档过来之后, 渲染引擎首先会根据html文件生成一个dom树, dom树中包含了html文件当中所有的标签, 

　　同时将所有的css样式解析生成一个css的规则树, 之后将dom树与规则树合成一个渲染树, 凡是不需要显示的标签, 

　　都会从渲染树中剔除掉, 接下来再对渲染树中所有的内容进行重新定位/设置大小等等, 最后通过调用系统底层API,

　　将渲染树绘制出来

 

4. 浏览器访问网站的过程

　　1. 在浏览器地址栏中输入网址

　　2. 浏览器通过用户在地址栏中输入的URL构建HTTP请求报文

　　3. 浏览器发起DNS解析请求, 将域名转换为IP地址

　　4. 浏览器将请求报文发送给服务器

　　5. 服务器接收请求报文并解析

　　6. 服务器处理用户请求, 并将处理结果封装成HTTP响应报文

　　7. 服务器将HTTP响应报文发送给浏览器

　　8. 浏览器接收服务器响应的HTTP报文并解析

　　9. 浏览器解析HTML页面并展示, 在解析HTML页面时遇到新的资源需要再次发起请求

　　10. 最终浏览器展示出了页面

 

5. HTTP请求报文和响应报文的格式 (请求和响应都分为四部分)

　　1. 请求/响应行

　　2. 请求/响应头

　　3. 空行 

　　4. 请求响应体