总共分2部： 1. 加载：加载渲染所必须的html代码 2. 渲染：将html绘制成图像结果 <br> # 加载 ## 资源加载机制 #### 资源加载器 1. 特定资源加载器：针对每种资源类型的特定加载器，仅加载某一种资源。 2. 缓存资源加载器：与常规的缓存逻辑相同，特定加载器先通过缓存资源加载器来查找是否有缓存资源，如果在资源缓存池中存在缓存资源，则取出以便使用；若不存在，发送请求给网络模块 3. 通用资源加载器：由于加载资源大多属于网络请求，而网络请求的逻辑是可以被特定资源加载器所共享的，所以通用资源加载器只负责通过网络获得目标资源的数据，但不负责进一步解析。 #### 资源缓存 1. Page Cache：页面缓存 2. Memory Cache：内存缓存 3. Disk Cache：磁盘缓存 <br> ## 网络栈 1. 确定请求类型，协议 2. 判断是否需要建立网络连接 3. 建立http事务 4. 建立tcp socket连接 5. 套接字连接 <br> ## 预先加载 1. DNS预取 2. 资源预取 3. TCP preconnet  上图是 DNS预取，提前拿到dns解析，异步的，不会影响UI渲染 <br> <br> ## TCP相关 ## 如何提高加载速度 合并请求： * 雪碧图 * nginx模块合并 * 合并资源请求，见下图 缓存：from cache(memory，disk)，localStorage，本地缓存策略，http头缓存优化(基础库最大缓存时间长，业务库缓存时间设置短) tcp网络连接优化：tcp调优，http/2，keep-live 硬件：加大带宽，使用cdn(对象存储) 资源大小：gzip，webp，图片压缩，cookie体积 预加载：多个cdn域名，dns预取，异步请求js，  上图是Tengine(nginx分支)服务器合并资源请求 <br> <br> # 渲染 ## HTML解释器 #### 解释过程 资源的变换： 1. 字节流 2. 字符流 3. Tokens 4. 节点 5. DOM树 流程： 1. 词法分析 2. XSSAuditor 3. 语法分析 4. 生成DOM树 #### 词法分析 通过HTMLTokenizer来进行词法分析 词法分析的任务是对输入字节流进行逐字扫描，根据构词规则识别单词和符号，分词 词法分析器的主要接口是nextToken()函数，调用者只需要将字符串传入，就会得到一个词语。 注意，在这里并不涉及标签类型信息，这是之后语法分析的工作 <br> #### CSS解释器 <br>