浏览器的工作原理

1. 浏览器的主要构成

    简单的来说浏览器分为两部分： shell + 内核

    shell 是指浏览器的外壳：例如菜单，工具栏等。主要是提供给用户界面操作，参数设置等等

    内核才是浏览器的核心。内核是基于标记语言希纳是内容的程序模块

    常见的浏览器内核可以分为四种： Trident、Gecko、 Presto、  WebKit。

    浏览器一般由以下组件构成：

        用户界面： 浏览器软件界面

       浏览器引擎： 查询及操作渲染引擎的接口，创建UI后端组件等

       渲染引擎： 显示请求的内容，也及渲染html文档

       网络： 完成网络调用，发送和响应http请求

       UI后端： 绘制组合框，对话框等，具有不特定与某个平台的通用接口，底层使用操作系统的接口

       JavaScript解释器： 解释执行JavaScript代码

       数据存储： 浏览器持久层，cookie,localStorage, database(html5)等等

2. 渲染引擎

      1.主流程

             渲染引擎首先通过网络获得所请求文档的内容，通常以8K分块的方式完成。

              基本流程：

                 即： 请求HTML => 解析HTML=> 构建DOM树=>构建render树=>绘制render树

      2. HTML解析

           DOM树，也就是解析树，由DOM元素及属性节点组成的。DOM是文档对象模型的缩写，

            他是html文档的对象表示，作为html元素的外部接口工js调用。

             a. HTML解析算法:

                 HTML的解析过程比较特殊，原因是：

                     语言本身的宽容特性  浏览器对一些常见的非法的HTML有容错机制、 解析过程是往复的，解析过程中可以对输入的文档进行修改。如document.write()等；

                     符号化：词法分析的过程，将输入解析为符号，html的符号包括开始标签、结束标签、属性名及属性值。 构建树：  符号识别器识别出符号后、将其传递给树构建器，并读取下一个字符，以识别下一个符号，这样直到处理完所有输入。

            b.  css解析：CSS的解析属于上下文无关文法，可以用常规的解析器来解析。Css规范定义了css的词法及语法文法。

            c.   脚本解析：web的模式是同步的，开发者希望解析到一个script标签时立即解析执行脚本，并阻塞文档的解析直到脚本执行完。

如果脚本是外引的，则网络必须先请求到这个资源——这个过程也是同步的，会阻塞文档的解析直到资源被请求到。引用外部脚本时，有可以标记异步执行脚本的属性：

async：加载后续文档元素的过程将和外部脚本的加载并行进行（异步）,脚本下载完就立即执行了。 defer：加载后续文档元素的过程将和外部脚本的加载并行进行（异步），但是脚本的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

原文地址：https://www.2cto.com/kf/201805/751087.html

参考地址：https://www.cnblogs.com/larennani/p/6741289.html