本文探讨浏览器向服务器请求HTML资源时的工作流程，包括解析HTML构建DOM树、渲染树，以及页面加载优化策略，如删除不必要的空格、合并文件、减少域名查询、优化加载顺序等，旨在加速页面显示速度。
在B/S架构中，B端的主要载体是浏览器，浏览器的主要功能是向服务器请求资源，并把请求得到的内容展现出来，在本文中，我们主要讨论请求资源为html时，浏览器的工作原理。
要想了解浏览器的工作流程，必须先知道浏览器的组成，组成如下图：
由图可知，组成包含这几部分：
1.用户界面（user interface）:包括地址栏，前进/后退按钮，书签目录等，即我们平常看到的浏览器界面（除了请求得到的内容页面）；
2.浏览器引擎（browser engine）:用来查询和操作渲染引擎的借口；
3.渲染引擎（rendering engine）:用来显示请求的内容，例如，如果请求的是html，它负责解析html和css，并将解析结果显示出来。也被称为“浏览器内核”，不同浏览器主要的区别就在于渲染引擎的不同；
4.网络（networking）:用来完成网络调用，例如http请求，平台无关；
5.UI后端（UI backend）:用来绘制组合选择框等基本组件，具有不特定与某个平台的通用接口，底层使用操作系统的用户接口；
6.js解释器（javascript interpreter）:用来解释执行js代码；
7.数据存储（data persistence）:属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，html5定义了web database技术，这是一种轻量级完整的客户端存储技术；
工作流程：
渲染引擎首先通过网络获得请求文档内容（html）（通常以8k分块的方式完成）------》解析html以构建dom树-----》构建渲染树（rendering 树）-----》布局渲染树-----》绘制渲染树。
具体细节如下：
渲染引擎开始解析html，并将标签转化为dom树中的dom节点。然后，它解析外部的css文件及style标签中的样式信息。这些样式信息以及html中标签的可见性指令将用来构建渲染树。渲染树是由一些包含颜色大小等样式信息的矩形组成，它们将被按照正确的顺序显示到屏幕上。渲染树建好后，执行布局过程，它将确定每个节点在屏幕上的确切坐标。然后是绘制，即遍历渲染树，并使用ui后端层绘制每个节点。
这个过程是逐步完成的，渲染引擎会尽可能早的把内容显示出来，即解析一部分内容，就显示出来，其他内容可能还在网络下载。
至于浏览器如何解析html，如何构建dom树，渲染树，我们不做深究，下面我们举个例子来说明上述过程：
1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件。
2. 浏览器开始载入html代码，发现<head>标签内有一个<link>
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
