摘要:浏览器内核又叫渲染引擎,主要负责的解析,页面布局渲染与复合层合成。页面呈现原理规范定义了的词法及语法文法。解析器使用和解析生成器从语法文件中自动生成解析器。回忆一下解析器的介绍,创建一个自底向上的解析器,使用自顶向下解析器。
浏览器内核又叫渲染引擎,主要负责 HTML、CSS 的解析,页面布局、渲染与复合层合成。浏览器内核的不同带来的主要问题是对 CSS 的支持度与属性表现差异。
webkitWekbit是一个开源的Web浏览器引擎,也就是浏览器的内核。Apple的Safari, Google的Chrome, Nokia S60平台的默认浏览器,Apple手机的默认浏览器,Android手机的默认浏览器均采用的Webkit作为器浏览器内核
BlinkBlink是在Wekbit的基础上的改进,是现在对新特性支持度最好的内核
GeckoFirefox
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
当遇到