浏览器内部工作原理

浏览器的主要组件包括：

1. 用户界面 － 包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。

2. 浏览器引擎 － 用来查询及操作渲染引擎的接口。

3. 渲染引擎 － 用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来。

4. 网络 － 用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作。

5. UI后端 － 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。

6. JS解释器 － 用来解释执行JS代码。

7. 数据存储 － 属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术

浏览器工作的大致流程

首先我们必须明确一点就是：浏览器工作流程中采用流式处理，可以简单的理解为一部分DOM元素构造好后，去检查它匹配到了那些CSS规则，而不是等整棵DOM树构建好后才去匹配CSS规则。

其次，浏览器工作的大致流程是什么呢？

输入URL；(即目的是使用HTTP/HTTPS协议，向服务器请求页面)
将URL变成字符流，把字符流变成词（token）流，把词流构造成DOM树；（即HTML各标签到DOM树）
给DOM树添加CSS属性（按照选择器匹配规则）；（即生成一棵带有CSS属性的树）
通过排版（正常流，绝对定位元素、浮动元素）来确定每个元素的位置；
根据每个元素的位置和大小，在内存中：渲染（元素变成位图）、合成（一部分位图变成合成层）、绘制（合成层显示到屏幕上）。
最后，网页就呈现在你的面前。

下面大概了解下就好。。。。

渲染流程

从资源的下载到最终的页面展现，渲染流程可简单地理解成一个线性串联的变换过程的组合，原始输入为URL地址，最终输出为页面Bitmap，中间依次经过了Loader、Parser、Layout和Paint模块

资源加载

使用浏览器上网时，首先会在地址栏输入一个网址，浏览器会依据网址向服务器发送资源请求，服务器解析请求，并将相关数据资源传送回给浏览器，这些数据资源包括Page的描述文档、图片、JavaScript脚本、CSS等。此后，浏览器引擎会对数据进行解码、解析、排版、绘制等操作，最终呈现出完整的页面。Loader是浏览器的排头兵，负责资源加载的工作

Loader在浏览器中承上启下，一方面它作为网络模块的客户，通过网络模块来加载资源；另一方面它为Parser模块加载页面的内容，控制着浏览器后续的解析以及绘制过程

chrome
　　Loader有两条资源加载路径：主资源加载路径和派生资源加载路径。这两类资源的加载过程颇有不同，比如对资源加载失败的处理，主资源下载失败会有报错提示，而派生资源如图片下载失败，往往只显示一个占位

在地址栏输入新地址或者在已经打开的页面中点击链接，都会触发主资源的加载流程，随着主资源在HTTP协议的传输下分段到达，浏览器的Parser模块解析主资源的内容，生成派生资源对应的DOM结构，然后根据需求触发派生资源的加载流程。主资源的加载是立刻发起的，而派生资源则可能会为了优化网络，在队列中等待

主资源和派生资源的加载还有一个区别，在Android 4.2版本中主资源是没有缓存的，而派生资源是有缓存机制的。这里的缓存指的是Memory Cache，用于保存原始数据（比如CSS、JS等），以及解码过的数据，通过Memory Cache可以节省网络请求和图片解码的时间

浏览器在加载主资源后，主资源会被解码，然后进行解析，生成DOM（文档对象模型）树。在解析过程中，如果遇到<img的起始标签，会创建相应的image元素HTMLImageElement，接着依据img标签的内容设置HTMLImageElement的属性。在设置src属性时，会触发图片资源加载，发起加载资源请求

https://www.cnblogs.com/xiaohuochai/p/9174471.html