什么是浏览器
首先，要了解浏览器，你要知道浏览器是一种软件，是可以显示网页服务器或者文件系统的HTML文件（标准通用标记语言的一个应用）内容的软件，它是所有软件中使用次数最多的软件，电脑自带的软件就会含有浏览器。
五大主流开源浏览器：火狐浏览器（Firefox），IE浏览器（Internet Explorer）一般window10操作系统电脑上自带IE浏览器，谷歌（Chrome），safari苹果计算机的操作系统Mac OS中的浏览器，欧朋浏览器（Opera）威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。
火狐浏览器：功能比之其他浏览器要多，插件功能强大，占用内存比较大，广告拦截是几款流行软件里面最容易上手也是最好用的，熟练使用整个浏览器需要一点时间，安全性比较高（新手不推荐直接使用会遇到你看不懂的问题），想做什么就做什么。
IE浏览器：比较容易上手，（推荐新手使用）兼容性高，但漏洞高，安全性低，电脑自带无需下载。
谷歌浏览器：系统不会崩溃（多进程架构），浏览速度快，搜索简单，后台同步。但不够标准化，没有插件可供使用。
欧朋浏览器：省流量，数据通过服务器压缩，可为您节约最多 90% 的流量，占用内存比较少。
safari浏览器：苹果操作系统上最好的浏览器。
浏览器主要功能
浏览器的主要功能是将用户选择的web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是HTML，也包括PDF、image及其他格式。
HTML和CSS规范中规定了浏览器解释html文档的方式，由W3C组织对这些规范进行维护，W3C是负责制定web标准的组织。
浏览器：一个解析工具，我们在地址栏输入URL（即网址），浏览器会向DNS（域名服务器）提供网址，由它来完成URL到IP地址的映射。然后将请求你的请求提交给具体的服务器在由服务器返回我们要的结果（以HTML编码格式返回给浏览器），浏览器执行HTML编码，将结果显示在浏览器的正文。
浏览器常用用户界面元素包括：
用来输入URI的地址栏
前进、后退按钮
书签选项
用于刷新及暂停当前加载文档的刷新、暂停按钮
用于到达主页的主页按钮‘
浏览器组件
1. 用户界面 － 包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。
2. 浏览器引擎 － 查询和进行操作渲染引擎。
3. 渲染引擎 － 用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来。
4. 网络 － 用来完成网络调用，像http请求 ，接口与平台无关，可以在不同平台上工作，为平台实现底层实现。
+
5. UI后端 － 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。
6. JS解释器 － 用来解释执行JS代码。
7. 数据存储 － 属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术
浏览器组成图如下：
浏览器内核工作原理
渲染引擎（The rendering engine）
渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。
默认情况下，渲染引擎可以显示html、xml文档及图片，它也可以借助插件（一种浏览器扩展）显示其他类型数据，渲染引擎最主要的用途——显示应用了CSS之后的html及图片。
渲染引擎一开始会从网络层获取请求文档的内容，通常以8K分块的方式完成。 获取了文档内容之后，渲染引擎开始正式工作，其基本流程如图所示：
解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树
渲染引擎开始进行对HTML文档解析，将文档中的标签转化为dom节点树（内容树）中的dom节点，接着进行解析外部文件css层叠样式表和style标签，这些样式表和标签以及html中的可见性指令将会被用来构建另一棵树——render树（渲染树），
Render树由一些包含有颜色和大小等属性的矩形组成，在页面上是一块块的它们将被按照正确的顺序显示到屏幕上。
Render树构建好了之后，将会执行布局过程，它将确定每个节点在屏幕上的确切坐标。再下一步就是绘
制，也就是遍历render树，并使用UI后端层绘制每个节点。
ps：这个过程是逐步完成的，渲染引擎早早将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。
webkit主流程：
ozilla的Geoko渲染引擎主流程：
解析
解析就是将文档转化成一种结构，这种结构容易被编码识别和使用。
解析的结果通常是表达文档结构的节点树，称为解析树或语法树。
解析器：词法分析器，包含词法分析和语法分析。
词法分析就是将输入分解为符号，符号是语言的词汇表——基本有效单元的集合。
语法分析指对语言应用语法规则。
解析过程是迭代的，解析器从词法分析器处取到一个新的符号，并试着用这个符号匹配一条语法规则，如果匹配了一条规则，这个符号对应的节点将被添加到解析树上，然后解析器请求另一个符号。如果没有匹配到规则，解析器将在内部保存该符号，并从词法分析器取下一个符号，直到所有内部保存的符号能够匹配一项语法规则。如果最终没有找到匹配的规则，解析器将抛出一个异常，这意味着文档无效或是包含语法错误。
html
HTML 解析器的任务是将 HTML 标记解析成解析树。 HTML 的词汇和语法在 W3C 组织创建的规范中进行了定义，html不能简单的用解析所需的上下文无关文法来定义。
浏览器为html定制了专属的解析器。 Html5规范中描述了这个解析算法，算法包括两个阶段——符号化和构建树
解析流程：
CSS解析
css属于上下文无关文法，可以用前面所描述的解析器来解析。
Css规范定义了css的词法及语法文法。 每个符号都由正则表达式定义了词法（词汇表），语法中
一个规则集合具有一个或是可选个数的多个选择器，这些选择器以逗号和空格（S表示空格）进行分隔。每个规则集合包含大括号及大括号中的一条或多条以分号隔开的声明。
Webkit使用Flex和Bison解析生成器从CSS语法文件中自动生成解析器。
Webkit CSS解析器（Webkit CSS parser）：
Bison创建一个自底向上的解析器，Firefox使用自顶向下解析器。它们都是将每个css文件解析为样式表对象，每个对象包含css规则，css规则对象包含选择器和声明对象，以及其他一些符合css语法的对象。
【参考原文】
https://blog.csdn.net/u014744118/article/details/80698602
https://kb.cnblogs.com/page/129756/
参考大佬原文，把一些觉得好理解，很有用的，以及自己掌握的一些给写了出来。