浏览器工作原理

浏览器的组成

• 人机交互部分（UI）
• 网络请求部分（Socket）
• JavaScript引擎部分（解释执行JavaScript）
• 渲染引擎部分（渲染HTML、CSS等）
• 数据存储部分（cookie、LocalStorage、SessionStorage）

主流渲染引擎

介绍

1. 渲染引擎 又叫 排版引擎 或 浏览器内核
2. 主流的渲染引擎有：
   • Chrom浏览器：Blink引擎（WebKit的一个分支）
   • Safari浏览器：WebKit引擎
   • FireFox浏览器：Gecko引擎
   • Opera浏览器：Blink引擎（早期使用Persto引擎）
   • Internet Explorer浏览器：Trident引擎
   • Microsoft Edge浏览器：EdgeHTML引擎（Trident的一个分支）

工作原理

1. 解析HTML构建Dom树（Document Object Model， 文档对象模型）
2. 构建渲染树，渲染树并不等同于Dom树（剔除head 标签 或 display：none这样的不需要显示的标签元素）
3. 对渲染树进行布局("layout" 或 "reflow")，定位坐标和大小、确定position、overflow等等
4. 绘制渲染树，调用操作系统底层API进行绘图操作

渲染引擎工作原理示意图

渲染引擎工作原理示意图

WebKit工作原理（Chrome、Safari、Opera）

Gecko渲染（FireFox）

浏览器的 reflow 或 layout 过程

YouTube视频地址: https://www.youtube.com/watch？v=ZTnlxlA5KGw.

浏览器访问网站过程

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

   GET / HTTP/1.1
   Host：www.baidu.com
   Connection：keep-alive
   Content-Type：text/html
   Accept：text/html,application/xhtml+xml,application/xml;q=0.9
   Accept-Language：zh-CN,zh;q=0.9
   Accept-Encoding：gzip, deflate, br
   User-Agent：Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.25 Safari/537.36 Core/1.70.3730.400 QQBrowser/10.5.3805.400
   Cookie：BAIDUID=3D036BBB081E261E8E29FD2769F06252

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