Web浏览器引擎如何工作以呈现网页?

时间:2018-02-18 13:28:24

标签: javascript html5 dom browser webkit

据我所知,Web浏览器引擎是一个程序,负责读取源HTML文件,解析它并在浏览器中呈现它。它由布局引擎(以及作品 - 标记器,词法分析器,解析器),CSS解析器和JavaScript引擎组成。

例如,Web浏览器引擎Webkit依赖于名为JavaScriptCore的JavaScript引擎和名为WebCore的布局引擎。同样,KDE(Web浏览器引擎)由内置的CSS Parser,KHTML,布局引擎,KParts和KJS(JavaScript引擎)组成。

但这些东西如何协同工作来呈现网页?特别:

  1. 例如,document.getElementById在哪里实施?我在哪里可以查找其源代码?

    HTML5 API是用什么语言包含WebWorker,Web存储,Canvas,2DContext等对象实现的?

    据我所知,W3C或WHATWG或DOM规范并未强制要求编程语言,而只是通过WebIDL提供DOM元素的接口定义。具体实现是选择编程语言。

    或许我的问题是,这些对象是在布局引擎(用C ++或编译语言)以及JavaScript引擎(用C ++或JavaScript,特别是两种语言中的哪一种)中实现的?

    如果它们在两个地方实现,我认为它们必须彼此完全对称并且与DOM规范/ WebIDL完全对称?

    但是,如果它们在两个地方实施,那么这意味着虽然它们共享相似的结构,但它们不共享相同的实例。因此,对一个堆中的DOM树的影响不会传播到另一个堆中。如何保持两个堆之间的同步?

  2. 我认为标准定义的DOMString定义与以下实现之间没有任何对称性:

    一个。 String的KJS实现。请参阅ustring.h不包含splicesubStrindexOf等方法。string_object.h也不是。

    同样,KJS中的这个array_instance看起来不像JavaScript数组。

    KHTML implementation of DOMString不符合DOMString as defined by the DOM specification

    ℃。 Webkit的JavaScript引擎,即JavaScriptCore有this file defining a string。这很接近,但仍然不符合标准。

    例如,我没有看到上面提到的任何功能,例如slicepadStartpadEndtoUpperCase等。

    d。同样,Gecko engine's DOMString implementation远离预期。

    即而且我想,在这里,我正在寻找SpiderMonkey's String definition,它也在数英里之外。

  3. 还是我在找错了地方?

    1. 例如,当您致电document.getElementById时会发生什么?实现是否调用布局引擎引用的相同DOM树对象?

      JavaScript引擎和布局引擎是否共享同一个堆?它们是否共享相同的DOM树,即HTMLDocumentParagraph等对象的相同对象实例?

    2. 如果对3.的回答是“否”,那么两种语言如何以及何时同步他们的DOM树?

    3. 在提出我的问题时,我正在做出以下假设,我也要求您进行验证。

      假设

      1. JavaScript引擎加载在与布局引擎相同的地址空间中;这是主机应用程序的地址空间。对于浏览器,这恰好是Web浏览器程序的地址空间。

      2. JavaScript引擎包含JavaScript类型系统和语言核心,即JavaScript数据类型对象,如String,Date,Boolean,Array,Math等,以及JavaScript解释器。解释器可以根据实现编译为字节码或本机CPU架构的机器代码。顺便说一句,编译目标语言的这个细节与我提出的问题无关。

      3. 布局引擎或Web浏览器引擎读取HTML源文件并将其解析到其DOM树中的自己的堆中(例如KHTML's DOM tree related classesHTML element related classes)。

        它还调用CSS解析器(例如KHTML's CSS parser) 本身。 Web浏览器引擎也调用JavaScript引擎, 它解析JavaScript代码。所以当遇到这样一条线时 作为document.getElementById(id)(这是我难倒的地方), 它有什么作用?它叫什么?它是否调用了C ++ API 在布局引擎内部因此重新使用布局的DOM树 引擎或它是否在其自身内重新创建一个单独的DOM树( JavaScript引擎)?如果它创建一个单独的DOM树,如何以及何时 这两个DOM树是否同步?

      4. 你能把这个谜题的各个部分放在一起吗?

0 个答案:

没有答案