浏览器组成结构与渲染原理

（一）浏览器组成结构

1. 从打开浏览器输入一个网址到页面展示网页内容的这段时间内，浏览器和服务器都发生了什么事情？

• 在接收到用户输入的网址后，浏览器会开启一个线程来处理这个请求，对用户输入的URL地址进行分析判断，如果是HTTP协议就按照HTTP方式来处理。
• 调用浏览器引擎中对应方法，比如WebView中的loadUrl方法，分析并加载这个URL地址。
• 通过DNS解析获取网站地址对应的IP地址，查询完成后连同浏览器的Cookie、userAgent等信息向网站目的IP发财GET请求。
• 进行HTTP协议会话，浏览器客户端向Web服务器发送报文。
• 进入网站后台上的Web服务器处理请求，如Apache、Tomcat、Node.js等服务器。
• 进入部署好的后端应用，如 PHP、Java、JavaScript、Python等后端程序，找到对应的请求处理逻辑，这期间会读取服务器缓存或查询数据库等。
• 服务器处理请求并返回响应报文，此时如果浏览器访问过该页面，缓存上有对应资源，会与服务器最后修改记录对比，一致则返回304，否则返回200和对应的内容。
• 浏览器开始下载HTML文档（响应报文状态码为200时）或者从本地缓存读取文件内容（浏览器缓存有效或响应报文状态码为304时）
• 浏览器根据下载收到的HTML文件解析结构建立DOM文档树，并根据HTML中的标记请求下载指定的MIME类型文件（如CSS、JavaScript脚本等），同时设置缓存等内容。
• 页面开始解析渲染DOM，CSS根据规则解析并结合DOM文档树进行网页内容布局和绘制渲染，JavaScript根据DOM API操作DOM，并读取浏览器缓存，执行事件绑定等，页面整个展示过程完成。

整个过程中使用到了较多的浏览器功能，如用户地址输入框、网络请求、浏览器文档解析、渲染引擎、JavaScript执行引擎、客户端存储等。

2. 浏览器主要结构：

• 用户界面

  用户界面包括浏览器中可见的地址输入框、浏览器前进返回按钮、打开书签、打开历史记录等用户可操作的功能选项。

• 浏览器引擎

  浏览器引擎可以在用户界面和渲染引擎之间传递指令和在客户端本地缓存中读写数据等，是浏览器中各个部分之间互相通信的核心。

• 渲染引擎

  浏览器渲染引擎的功能是解析DOM文档和CSS规则并将内容排版到浏览器中显示有样式的界面。浏览器内核主要指 渲染引擎。

• 网络

  网络功能模块是浏览器开启网络线程发送请求或下载资源文件的模块，例如DOM树解析过程中请求静态资源首先是通过浏览器中网络模块发起的。

• JavaScript引擎

  JavaScript解析器则是浏览器解释和执行JavaScript脚本的部分，例如V8引擎。

• UI后端

  UI后端用于绘制基本的浏览器窗口内控件，比如组合选择框、按钮、输入框等。

• 数据持久化存储

  浏览器数据持久化存储涉及cookie、localStorage等一些客户端存储技术，可以通过浏览器提供的API进行调用。

（二）浏览器渲染引擎简介

1. 渲染引擎的主要工作流程

渲染引擎在浏览器中主要用于解析HTML文档和CSS文档，然后将CSS规则应用到HTML标签元素上，并将HTML渲染到浏览器窗口中一显示具体的DOM内容。

推荐文章：十分钟读懂浏览器渲染流程

推荐视频：浏览器渲染机制

2. 浏览器兼容性

现在的市场上有很多种类的浏览器，不同种类的浏览器的内核也不尽相同，所以不同浏览器对代码的解析会存在差异，这就导致对页面渲染效果不统一的问题。

市场上常见的浏览器内核主要有四种：Webkit内核、Presto内核、Trident内核、Gecko内核。

浏览器	内核
Chrome	Blink（webkit的分支内核）
Safari	Webkit
Firefox	Gecko
Opera	Blink（此前使用Presto内核）
IE	Trident（俗称IE内核）
360浏览器	IE+Chrome双内核
QQ浏览器	Trident（兼容模式）+Webkit（高速模式）
搜狗浏览器	Trident（兼容模式）+Webkit（高速模式）
猎豹浏览器	Trident（兼容模式）+Webkit（高速模式）
百度浏览器	IE内核

详细见：前端浏览器兼容性问题总结