nodejs-浏览器工作原理

浏览器工作原理

浏览器的组成

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

主流渲染引擎

• 渲染引擎 又叫 排版引擎或浏览器内核
• 主流的渲染引擎：
  • Chrome浏览器：Blink引擎（Webkit的一个分支）
  • Safari浏览器：Webkit引擎
  • Firefox浏览器：Gecko引擎
  • Opera浏览器：Blink引擎（早期版本使用Presto引擎）
  • Iternet Explorer浏览器：Trident引擎
  • Microsoft Edge浏览器：EdgeHTML引擎（Trident的一个分支）
  • 360浏览器：双核浏览器, Blink（Webkit）引擎 和 Trident引擎（IE内核），可以在高级设置里面切换。
  • UC浏览器：Webkit引擎

浏览器工作原理

1、解析HTML构建DOM树（Document Object Model,文档对象模型），DOM是W3C组织推荐的处理可扩展标记语言的标准编程接口。
2、构建渲染树，渲染树并不等同于DOM树，比如head标签或display:none这样的元素就没有必要放到渲染树里面了，但是他们在DOM树之中。
3.对渲染树布局，定位坐标和大小、确认是否换行、确定position、overflow、z-index等，这个过程叫做"layout"或"reflow"。
4.绘制渲染树，调用操作系统底层API进行绘图操作。

渲染引擎工作原理示意图

1. 渲染引擎工作原理示意图
2. Webkit工作原理（Chrome、Safari、Opera）
3. Gecko工作原理（Firefox）
4. 浏览器的reflow或layout过程：
   https://www.youtube.com/watch?v=ZTnlxlA5KGw
   chrome浏览器 - F12 - network - moretools - rendering - √Painting flashing

浏览器访问服务器过程

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

web开发本质

牢记三点

1. 请求，客户端发起请求。
2. 处理，服务器处理请求。
3. 响应，服务器将处理结果发送给客户端。

客户端处理响应

服务器响应完毕后，客户端继续处理：

• 浏览器：解析服务器返回的数据。
• IOS、Android客户端，解析服务器返回的数据，并且通过IOS或Android的UI技术实现界面的展示功能。

关于C/S和B/S

• C/S，即Client/Server, 客户端-服务器
• B/S, 即Browser/Server, 浏览器-服务器