search

louzhedong / blog

前端基础，深入以及算法数据结构
934 stars 84 forks source link

浏览器理解 #219

Open louzhedong opened 4 years ago

louzhedong commented 4 years ago

浏览器理解

浏览器组成
  1. User Interface（用户界面），浏览器除请求的页面之外的其他部分
  2. Browser engine（浏览器引擎），在用户界面和呈现引擎之间传送指令
  3. Rendering engine（呈现引擎），负责显示请求的内容
  4. Networking（网络），用于网络请求
  5. UI Backend（用户界面后端），用于绘制基本的窗口小部件，比如组合框和窗口。公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法
  6. JavaScript Interpreter（JavaScript 解释器），解析和执行JavaScript代码
  7. Data Persistence（数据存储），持久层

整体结构如下图：

Rendering engine

渲染引擎从网络中获取文档内容，然后执行下列步骤

注意点：这是一个渐进的过程，浏览器不会等到整个HTML解析完毕，就会开始进行上述工作

一、解析

解析是将文档转化成有意义的结构，解析得到的结果通常是代表了文档结构的节点树，称作解析树或者语法树

解析的过程可以分为两个子过程：词法分析和语法分析

  1. 词法分析是将输入内容分割成大量标记的过程，该过程由词法分析器负责
  2. 语法分析是应用语言的语法规则的过程，该过程由解析器负责。根据语言的语法规则分析文档的结构，从而构建解析树

解析流程：

二、解析器类型

有两种基本类型的解析器：自上而下解析器和自下而上解析器

三、DOM与DOM树
<html>
    <body>
        <p>
            Hello
        </p>
        <div>
        <img src=""/>
    </div>
    </body>
</html>

当前文档将被翻译成如下的DOM树

四、脚本处理

正常情况下，脚本解析是同步的，当解析器遇到 Githubissues.

  • Githubissues is a development platform for aggregating issues.