资讯专栏INFORMATION COLUMN

浏览器内核、JS 引擎、页面呈现原理及其优化

0x584a / 305人阅读

摘要:浏览器内核又叫渲染引擎,主要负责的解析,页面布局渲染与复合层合成。页面呈现原理规范定义了的词法及语法文法。解析器使用和解析生成器从语法文件中自动生成解析器。回忆一下解析器的介绍,创建一个自底向上的解析器,使用自顶向下解析器。

浏览器内核又叫渲染引擎,主要负责 HTML、CSS 的解析,页面布局、渲染与复合层合成。浏览器内核的不同带来的主要问题是对 CSS 的支持度与属性表现差异。

webkit

Wekbit是一个开源的Web浏览器引擎,也就是浏览器的内核。Apple的Safari, Google的Chrome, Nokia S60平台的默认浏览器,Apple手机的默认浏览器,Android手机的默认浏览器均采用的Webkit作为器浏览器内核

Blink

Blink是在Wekbit的基础上的改进,是现在对新特性支持度最好的内核

Gecko

Firefox

Trident

微软的IE,IE4+ 的内核,一直持续到 IE11,EdgeHTML 是微软抛弃 IE 后开发的全新内核

webkit组成

webkit 包含了许多不同平台对webkit封装的实现,即抽象出了与浏览器所能直接对应的一些概念的实现。如,WebView, WebPage, WebFrame等

WebCore 实现了对文档的模型化,包括了CSS,DOM,Render等的实现

JavaScript Core 对JavaScript支持的实现

浏览器内核与 JS 引擎一览

JavaScript 引擎

JavaScript 负责 JavaScript 代码的解释与执行,主流的 JavaScript 引擎有:V8、SpiderMonkey、JavaScriptCore、Chakra。

页面呈现原理

一个页面的呈现,粗略的说会经过以下这些步骤:

1. DOM 树的构建(Parse HTML)
2. 构建 CSSOM 树(Recaculate Style) 为什么是 Re-caculate Style 呢?这是因为浏览器本身有 User Agent StyleSheet,所以最终的样式是我们的样式代码样式与用户代理默认样式覆盖/重新计算得到的。
3. 合并 DOM 树与 CSSOM 树为 Render 树
4. 布局(Layout)
5. 绘制(Paint)
6. 复合图层化(Composite)图层化是自己理解后形象的意译其中布局(Layout)环节主要负责各元素尺寸、位置的计算,绘制(Paint)环节则是绘制页面像素信息,合成(Composite)环节是多个复合层的合成,最终合成的页面被用户看到。

当遇到 JavaScript 脚本或者外部 JavaScript 代码时,浏览器便停止 DOM 的构建(阻塞 1)

那是否停下 DOM 的构建的同时,立马就执行 JavaScript 代码或者下载外部脚本执行,其实还是要视情况而定,见2

当遇到

阅读需要支付1元查看
<