简介

之前对浏览器渲染，js加载这些一直一知半解，这回查阅了很多资料，又看了本浏览器内核介绍的书，终于对浏览器的渲染过程和浏览体系有了一个整体的了解。下面从几个方面介绍一下浏览器内核和渲染过程。

浏览器内核历史

浏览器内核英文叫做：Rendering Engine，中文翻译很多，排版引擎、解释引擎、渲染引擎，现在流行称为浏览器内核，至于为什么流行这么称呼，请自行领悟。内核可以分成两部分：渲染引擎（layout engineer）或（Rendering Engine）和 JS 引擎。内核负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。JS 引擎则是解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果。
最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于单指渲染引擎。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多，如加上没什么人使用的非商业的免费内核，可能会有 10 多种，但是常见的浏览器内核可以分这四种：Gecko、Trident、Webkit、Blink。

Gecko

1997年，网景收购了DigitalStyle。当时，网景浏览器在各方面的表现已经比不上她的主要竞争对手。
Internet Explorer。这包括程序的执行速度、对W3C标准的支持度等等。网景开始研发下一代的排版引擎，并期望把新的排版引擎应用于下一版本的网景浏览器上。
1998年初，Mozilla计划开始执行。这个新的排版引擎名为Raptor，以开发源码的方式发放于因特网上。后来，因为商标问题，Raptor改外为NGLayout（即next generation layout之意）。而最后NGLayout就被网景重新命名为Gecko。但由于Gecko为网景的商标，所以有一段时期Mozilla组织（属于网景的非正式组织，亦为Mozilla基金会的前身）以NGLayout来称呼这个新的排版引擎，而在该时，Gecko这字亦指XPFE（cross-platform front-end），一个以XML为基础的使用者接口。不过，现时Gecko这字只用于排版引擎。
1998年10月，网景公布下一版的浏览器将会使用这个排版引擎，而该浏览器亦需要被大幅度重写。对于致力推动网上标准的人，这是一个令人振奋的消息。然而，对于网景开发者而言，这是一个长达六个月的大工程，而他们在网景5.0上（包括Mariner排版引擎）所花的心血亦被白白浪费。结果，网景6.0在2000年11月才被正式发布。
随著Gecko的开发，越来越多应用程序开始利用她。AOL作为网景的母公司，终于在CompuServe 7.0和AOL for Mac OS X上使用Gecko。可惜，Windows版的AOL浏览器始终没有利用过Gecko。
2003年7月15日时代华纳解散了网景公司，大部分开发者被解雇。而Mozilla基金会亦在当天成立，继续推动著Gecko的发展。时至今天，Gecko仍继续由Mozilla的雇员和义工所维护和发展。

Trident

Trident(IE内核)：该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修改而来的，并沿用到IE11，也被普遍称作”IE内核”。Trident实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用IE内核而非IE的浏览器(壳浏览器)涌现。
由于IE本身的“垄断性”（虽然名义上IE并非垄断，但实际上，特别是从Windows 95年代一直到XP初期，就市场占有率来说IE的确借助Windows的东风处于“垄断”的地位）而使得Trident内核的长期一家独大，微软很长时间都并没有更新Trident内核，这导致了两个后果——一是Trident内核曾经几乎与W3C标准脱节（2005年），二是Trident内核的大量 Bug等安全性问题没有得到及时解决，然后加上一些致力于开源的开发者和一些学者们公开自己认为IE浏览器不安全的观点，也有很多用户转向了其他浏览器，Firefox和Opera就是这个时候兴起的。非Trident内核浏览器的市场占有率大幅提高也致使许多网页开发人员开始注意网页标准和非IE浏览器的浏览效果问题。
补充：IE从版本11开始，初步支持WebGL技术。IE8的JavaScript引擎是Jscript，IE9开始用Chakra，这两个版本区别很大，Chakra无论是速度和标准化方面都很出色。
Trident内核的常见浏览器有：[1] 　IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）；[1] 360安全浏览器（1.0-5.0为Trident，6.0为Trident+Webkit，7.0为Trident+Blink）猎豹极轻浏览器，360极速浏览器（7.5之前为Trident+Webkit，7.5为Trident+Blink）猎豹安全浏览器（1.0-4.2版本为Trident+Webkit，4.3及以后版本为Trident+Blink）猎豹极轻浏览器，傲游浏览器（傲游1.x、2.x为IE内核，3.x为IE与Webkit双核）、百度浏览器（早期版本）、世界之窗浏览器[2] （最初为IE内核，2013年采用Chrome+IE内核）、2345浏览器、腾讯TT、淘宝浏览器、采编读浏览器、搜狗高速浏览器（1.x为Trident，2.0及以后版本为Trident+Webkit）、阿云浏览器（早期版本）、瑞星安全浏览器、Slim Browser、 GreenBrowser、爱帆浏览器（12 之前版本）、115浏览器、155浏览器、闪游浏览器、N氧化碳浏览器、糖果浏览器、彩虹浏览器、瑞影浏览器、勇者无疆浏览器、114浏览器、蚂蚁浏览器、飞腾浏览器、速达浏览器、佐罗浏览器、海豚浏览器（iPhone/iPad/Android）、UC浏览器（Blink内核+Trident内核）等。
其中部分浏览器的新版本是“双核”甚至是“多核”，其中一个内核是Trident，然后再增加一个其他内核。国内的厂商一般把其他内核叫做“高速浏览模式”，而Trident则是“兼容浏览模式”，用户可以来回切换。

Webkit

Webkit(Safari内核,Chrome内核原型,开源):它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软件，在GPL条约下授权，同时支持BSD系统的开发。所以Webkit也是自由软件，同时开放源代码。在安全方面不受IE、Firefox的制约，所以Safari浏览器在国内还是很安全的。
限于Mac OS X的使用不广泛和Safari浏览器曾经只是Mac OS X的专属浏览器，这个内核本身应该说市场范围并不大；但似乎根据最新的浏览器调查表明，该浏览器的市场甚至已经超过了Opera的Presto了——当然这一方面得益于苹果转到x86架构之后的人气暴涨，另外也是因为Safari 3终于推出了Windows版的缘故吧。Mac下还有OmniWeb、Shiira等人气很高的浏览器。
Google Chrome、360极速浏览器以及搜狗高速浏览器高速模式也使用Webkit作为内核(在脚本理解方面，Chrome使用自己研发的V8引擎)。WebKit 内核在手机上的应用也十分广泛，例如 Google 的手机 Gphone、 Apple 的iPhone， Nokia’s Series 60 browser 等所使用的 Browser 内核引擎，都是基于 WebKit。

Blink

Blink是一个由Google和Opera Software开发的浏览器排版引擎，Google计划将这个渲染引擎作为Chromium计划的一部分，并且在2013年4月的时候公布了这一消息。这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器中使用。
相关新闻
2013年4月3日，谷歌在Chromium Blog上发表博客[3] ，称将与苹果的开源浏览器核心Webkit分道扬镳，在Chromium项目中研发Blink渲染引擎（即浏览器核心），内置于Chrome浏览器之中。
苹果在Safari中采用Webkit核心，并于2005年将Webkit公开为开源软件。谷歌当时采用苹果的Webkit核心打造了Chrome浏览器。Opera也宣布称将会转向Webkit核心，但是谷歌宣布此举后，Opera表示将会跟随谷歌采用其Blink浏览器核心，同时参与了Blink的开发。

渲染过程

不同浏览器内核渲染的流程也是不同的，下面以webkit内核做例子。引擎将开始从网络层获取所请求文档的内容。这通常是以8K块的形式完成的。
这是渲染引擎的基本流程：

渲染引擎将开始解析HTML文档并将标记转换为名为“内容树”的树中的DOM节点。它将解析外部CSS文件和样式元素中的样式数据。样式信息与HTML中的可视指令一起用于创建另一个树 - 渲染树。

渲染树包含具有视觉属性（如颜色和尺寸）的矩形。矩形的顺序正确，可以在屏幕上显示。

在构建渲染树之后，它将经历“ 布局 ”过程。这意味着为每个节点提供它应该出现在屏幕上的确切坐标。下一个阶段是绘制 - 将遍历渲染树，并使用UI后端层绘制每个节点。

重要的是要理解这是一个渐进的过程。为了获得更好的用户体验，渲染引擎将尝试尽快在屏幕上显示内容。在开始构建和布局渲染树之前，它不会等到解析所有HTML。将解析和显示部分内容，同时继续处理来自网络的其余内容。

下面引用几个《webkit技术内部》中的介绍，讲解的很到位.

浏览器渲染与浏览器内核相关杂谈相关推荐

java浏览器渲染_浏览器的渲染机制
一.前言我们熟知的浏览器的主要功能就是向服务器发送请求,然后显示服务器返回的资源. 而这里的资源一般指的就是HTML文档. (当然资源还包括xml.图片) 那浏览器是如何将一个HTML文档解析为我们 ...
网站性能优化实战（二）——深入浅出浏览器渲染机制
--从Webkit内部渲染机制出发,谈网站渲染性能优化本文是对前文:imweb.io/topic/5b6fd- 相关知识的补充,文中的"前文"一词同此. 特以此文向<Web ...
html图片视频渲染原理,初识浏览器渲染原理和CSS动画
1.浏览器渲染原理浏览器到底是怎么将一个html文件渲染成生动的页面的?话不多说,直接看图以图中的过程,浏览器的渲染过程大致就是: 通过HTML解析将HTML文件解析为 DOM 树; 通过CSS解 ...
浏览器渲染原理的学习与总结
参考文章:浏览器渲染原理浏览器渲染原理 1. 进程和线程进程包涵线程, 微信是一个进程, 里面有很多诸如用户登录等线程. a.线程共享内存, 进程独立内存: 进程与进程之间是相互独立的, 他们各自 ...
【读书笔记】【WebKit 技术内幕（一）】浏览器架构与浏览器内核；chromium、webkit和blink的渲染过程；chromium、webkit的架构与代码结构；webkit2架构
文章目录前言 Something great 第1章浏览器和浏览器内核浏览器用户代理和浏览器行为内核特征 WebKit与blink 第2章 HTML网页和结构网页构成与结构 WebKit的 ...
【转】不同内核浏览器的差异以及浏览器渲染简介
一.简单介绍一下什么是浏览器内核. 浏览器最重要或者说核心的部分是"Rendering Engine",可大概译为"解释引擎",不过我们一般习惯将之称为&quo ...
不同内核浏览器之间的差异以及浏览器渲染
1.什么叫浏览器内核? 浏览器最重要或者说核心的部分是"Rendering Engine",可大概译为"渲染引擎",不过我们一般习惯将之称为&qu ...
深入浅出浏览器渲染原理
前言浏览器的内核是指支持浏览器运行的最核心的程序,分为两个部分的,一是渲染引擎,另一个是JS引擎.渲染引擎在不同的浏览器中也不是都相同的.比如在 Firefox 中叫做 Gecko,在 Chrome ...
浏览器渲染引擎学习总结
简单介绍浏览器渲染引擎情况很多人就只会用浏览器,不知道浏览器的工作原理或者说浏览器最核心的东西,浏览器的内核是最核心的东西,也叫做渲染引擎,那这个东西到底是干嘛的呢,下面本教程就为大家好好介绍一下 ...

浏览器渲染与浏览器内核相关杂谈

简介