浏览器工作原理
浏览器的组成
- 人机交互部分（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进行绘图操作。
渲染引擎工作原理示意图
- 渲染引擎工作原理示意图
- Webkit工作原理（Chrome、Safari、Opera）
- Gecko工作原理（Firefox）
- 浏览器的reflow或layout过程：
https://www.youtube.com/watch?v=ZTnlxlA5KGw
chrome浏览器 - F12 - network - moretools - rendering - √Painting flashing
浏览器访问服务器过程
- 在浏览器地址栏中输入网址。
- 浏览器通过用户在地址栏中输入的URL构建HTTP请求报文。
- 浏览器发起DNS(Domain Name System)解析请求，将域名转换为IP地址。
- 浏览器将请求报文发送给服务器。
- 服务器接受请求报文，并解析。
- 服务器处理用户请求，并将处理结果封装成HTTP响应报文。
- 服务器将HTTP响应报文发送给浏览器。
- 浏览器接受服务器相应的HTTP报文，并解析。
- 浏览器解析HTML页面并展示，在解析HTML页面时遇到新的资源需要再次发送请求。
- 最终浏览器展示了页面。
web开发本质
牢记三点
- 请求，客户端发起请求。
- 处理，服务器处理请求。
- 响应，服务器将处理结果发送给客户端。
客户端处理响应
服务器响应完毕后，客户端继续处理：
- 浏览器：解析服务器返回的数据。
- IOS、Android客户端，解析服务器返回的数据，并且通过IOS或Android的UI技术实现界面的展示功能。
关于C/S和B/S
- C/S，即Client/Server, 客户端-服务器
- B/S, 即Browser/Server, 浏览器-服务器
网友评论