简述浏览器的工作原理(一)

1: 浏览器的主要功能
浏览器的主要功能是向服务器发出请求,在浏览器中展示选择的网路资源,一般资源就是HTML文档,也可以是PDF, IMGAGE,或者其他类型,资源的位置由用户使用URI(统一资源表示符)指定。
浏览器解释并且显示HTML和CSS规范中指定的,这些规范由W3C进行维护。
但是多年来,各个浏览器都没有完全的遵守这些规范(问程序员的坑哪里来?先问浏览器 厂商)。
2:浏览器的高层结构

  1. 用户界面-包括地址栏,前进/后退,书签菜单等。除了浏览器主窗口显示的您请求的页面外,其他显示部分都属于用户界面。
  2. 浏览器引擎-在用户界面和呈现引擎之间传送指令。
  3. 呈现引擎-负责显示请求的内容,如果请求的内容是HTML,他就负责解析HTML和CSS,并显示在屏幕上
  4. 网络-用于网路调用,比如HTTP请求,其接口与平台无关,并为所有平台提供底层实现
  5. 用户界面和后端-用于绘制小窗口的小部件,比如组合框和窗口,
  6. javascript解释器-用于解析和执行JavaScript代码
  7. 数据存储-这是持久层,浏览器需要在硬盘上保存各种数据,例如cookie,新的html规范定义了“网路数据库”,是一个完整的浏览器内数据库
    在这里插入图片描述

但是Chrome浏览器的每个标签页都分别对应一个呈现引擎。每个标签都是一个独立的引擎。

呈现引擎

本文所讨论的浏览器(Firefox、Chrome 浏览器和 Safari)是基于两种呈现引擎构建的。Firefox 使用的是 Gecko,这是 Mozilla 公司“自制”的呈现引擎。而 Safari 和 Chrome 浏览器使用的都是 WebKit。
WebKit 是一种开放源代码呈现引擎,起初用于 Linux 平台,随后由 Apple 公司进行修改,从而支持苹果机和 Windows。
主流程
呈现引擎一开始会从网络层获取请求文档的内容,内容的大小一般限制在8000个块以内,然后进行如图所示的基本流程
在这里插入图片描述

呈现引擎见开始解析HTML文档,并将各个标记逐渐转化成‘内容树’上的DOM节点,同时也会解析外部css文件以及元素样式中的样式数据,HTML中这些带有视觉指令的样式信息将用于创建另一个书结构:呈现树

呈现树包含多个带有视觉属性(颜色和尺寸)的矩形,这些矩形的排列顺序就是他们将在屏幕上显示的顺序。
呈现树构建完毕之后,进入布局处理阶段,也就是为每个节点分配一个应该出现在屏幕上的确切坐标。下一个阶段是绘制,呈现引擎会遍历呈现树,由用户界面后端层将每个节点绘制出来。

** 需要的注意的是 这是一个渐进的过程,为达到很好的用户体验,呈现引擎会力求尽快的将内容显示在屏幕上,不必等到整个HTML文档解析完毕之后,就会开始构建呈现树和设置布局。在不断接受和处理其他网路和其余内容的同时,呈现引擎会将部分内容解析并且显示出来


主流程示例

在这里插入图片描述
在这里插入图片描述

webkit和Gecko使用的术语略有不同,但是整体流程是基本相同的,
对于webkit个gecko细微的差别暂时不做讨论

我们在再对每个环节进行细分,了解其中的原理

解析-综述
解析文档是将文档转化成有意义的结构,也就是可以让代码理解和使用的结构,解析得到的结果通常是代表文档结构的节点树,它称之为解析树和语法树。

语法
解析是以文档所遵循的语法规则为基础的,所有可以解析的格式都必须对应确定的语法(由词汇和语法规则构成)这称之为上下文无关语法。

解析器和词法分析器的组合
解析的过程分为两个子过程:词法分析和语法分析。
词法分析是将输入的内容分割成大量标记的过程。标记是语言中的词汇,即构成内容的单位,再人类语言中相当于词典中的单词。

语法分析是应用语言的语法规则的过程。
解析器通常将解析工作分一下两个组件来处理:词法分析器(有时也称之为标记生成器),负责将输入的内容分解成一个有效的标记;而解析器负责根据语言的语法规则分析文档的结构,从而构建解析树。词法分析器知道如何将无关的字符(比如空格和换行符)分离出来。

在这里插入图片描述

解析是一个迭代的过程。通常,解析器会向分析器请求一个新的标记,并且尝试与某条语法规则进行匹配,然后继续请求下一个标记。
如果是没有规则匹配,解析器就会将标记存储到内存中,并且继续请求标记,知道找到所有内部存储的标记规则,如果找不到任何的匹配规则,解析器就会引发一个异常。这以为着文档无效,包含语法错误。

翻译
很多时候,解析树还不是最终产品。解析通常再翻译过程中使用,而翻译是指将输入的文档转换成另一种形式,编译就是一个典型的案例。编译器可以将源代码编译成机器代码,具体过程是首先将源码解析成解析树,然会将解析树解析成机器代码文档。
在这里插入图片描述

解析器类型

有两种解析器类型:自上而下解析器和自下而上解析器。直观上说,自上而下的解析器从语法的高层结构出发,尝试从中找到匹配的结构。而自下而上的解析器从底层规则出发,将输入内容逐步转化为语法规则,直到满足高层规则。

解析过程就算了吧~~(以自上而下的解析器为例)
自己总结一句话:将输入的内容先按照词法解析标识出来(比如数字,字符串)解析出来之后,将大量的解析标记推入堆栈中,解析器开始从上而下的开始按照语法规则进行解析,如果匹配到规则,将匹配的输入内容替换成对应的规则,如此这样的替换,直到内容的结尾。

剩下的解析器解析过程就算了吧~~(新概念名词过多,自己理解有限~~~~)

HTML DTD
HTML采用的是DTD格式,此格式用来定义SGML族的语言,包括允许使用的元素及其属性和层次结构的定义

DOM

解析器输出"解析树”是由DOM元素和属性节点构成的树结构,DOM是文档对象模型(Document Object Model)
他是HTML文档的对象表示,同时也是外部内容(例如JavaScript)与HTML元素之间的接口
DOM与标记之间几乎是一一对应的,例如:

<html>
  <body>
    <p>
      Hello World
    </p>
    <div> <img src="example.png"/></div>
  </body>
</html>

可翻译成如下的DOM树:
在这里插入图片描述

瞌睡,先到这里,要感谢
https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/
https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
辛勤的付出
也要感谢自己一字一句的琢磨,敲出来…(虽然有些也不理解~~)

发布了9 篇原创文章 · 获赞 12 · 访问量 5万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览