简单理解浏览器的渲染原理

一、浏览器的主要组成

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

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

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

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

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

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

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

二、浏览器开发商及对应的内核

         IE :   Trident

          Firefox：Gecko 

          Safari、chrome：webkit、Opera

          EdgeHTML：edge

内核  =  渲染引擎

三、浏览器渲染的过程

                                   

                                                                          3-1 渲染主要过程

                                       解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树

                             

                                                                                 3.2-webkit内核

                                   

                                                                                                    3.3-geoko内核

    

相关文章：https://kb.cnblogs.com/page/129756/#chapter2