浏览器和内核杂谈

把目前浏览器占有率以及内核分布情况了解一下,写一份简单的报告,然后加一下自己的分析和总结

1.全球浏览器的一个占有率（http://liulanmi.com/category/top）
根据Net Applications于今日发布了2013年3月份浏览器市场份额的数据报告，数据显示如下：（3月份的浏览器排列顺序为IE、Firefox、Chrome、Safari、Opera。它们在三月份的 市场份额分别为55.83%、20.21%、16.45%、5.31%、1.74%）

2.国内浏览器的一个占有率
数据来自CNZZ数据中心（http://brow.data.cnzz.com/）

3.浏览器内核介绍

主流浏览器所使用的内核分类：
	Trident内核：IE,MaxThon,腾讯TT,The World,360,搜狗浏览器等
	Gecko内核： Firefox,Netscape6及以上版本,MozillaSuite/SeaMonkey等
	Presto内核： Opera7及以上
	Webkit内核：Safari,Chrome等
	前阵子网传google要在webkit的基础上分出blink取代旗下所有平台的现有浏览器引擎,opera也放弃自己浏览器引擎追随google。另外，说下国内的浏览器，用着人家的内核，速度比不上人家，插件和功能样样不如。手机端的浏览器的分布和差别这里就不说啦。
	在网上看到大家讨论blink的一些文章，这篇是比较好的：PPK 谈 Blink，http://t.cn/zTykb16
	文中谈到:Blink is a new rendering engine, which means that it won’t interpret CSS and JavaScript quite the same as WebKit (or Gecko or Trident, for that matter). It will power all browsers that use Chromium, Google’s open source browser.
另外Why Blink？里面也有解释：
Google wasn’t happy with the lack of progress in the WebKit project. This lack is mostly caused because the actual WebKit rendering engine is intertwined with implementation details that are only important for one platform — and the number of supported platforms is growing, especially in the mobile world.

4.渲染引擎 
　　渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。
　　默认情况下，渲染引擎可以显示html、xml文档及图片，它也可以借助插件（一种浏览器扩展）显示其他类型数据，例如使用PDF阅读器插件，可以显示PDF格式，将由专门一章讲解插件及扩展，这里只讨论渲染引擎最主要的用途——显示应用了CSS之后的html及图片。
　　渲染引擎简介
　　下面所讨论的浏览器——Firefox、Chrome和Safari是基于两种渲染引擎构建的，Firefox使用Geoko——Mozilla自主研发的渲染引擎，Safari和Chrome都使用webkit。
　　Webkit是一款开源渲染引擎，它本来是为Linux平台研发的，后来由Apple移植到Mac及Windows上，相关内容请参考  http://webkit.org

渲染引擎首先通过网络获得所请求文档的内容，通常以8K分块的方式完成
渲染引擎的工作流程:
解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树
　　　　

　　渲染引擎开始解析html，并将标签转化为内容树中的dom节点。接着，它解析外部CSS文件及style标签中的样式信息。这些样式信息以及html中的可见性指令将被用来构建另一棵树——render树。
　　Render树由一些包含有颜色和大小等属性的矩形组成，它们将被按照正确的顺序显示到屏幕上。
　　Render树构建好了之后，将会执行布局过程，它将确定每个节点在屏幕上的确切坐标。再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。
　　值得注意的是，这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。
　　

图1：webkit主流程

图2：Mozilla的Geoko渲染引擎主流程
　　从图3和4中可以看出，尽管webkit和Gecko使用的术语稍有不同，他们的主要流程基本相同。Gecko称可见的格式化元素组成的树为frame树，每个元素都是一个frame，webkit则使用render树这个名词来命名由渲染对象组成的树。Webkit中元素的定位称为布局，而Gecko中称为回流。Webkit称利用dom节点及样式信息去构建render树的过程为attachment，Gecko在html和dom树之间附加了一层，这层称为内容接收器，相当制造dom元素的工厂。
具体每个流程可以看：http://kb.cnblogs.com/page/129756/
5.firefox和 chrome 性能比较
   以前看过chrome.firefox和opera在js和css加载和渲染上速度的差别.我目前的做法是firefox作为主浏览器，把Chrome作为辅助浏览器，这样当我需要打开一个链接的时候，Chrome会很快的帮我打开网站，当我长时间上网的时候，firefox能够给我带来很好的体验。下面主要比较chrome和firefox的一些性能：（可以参考http://www.oschina.net/question/54100_8847）
1.速度。其实为什么感官上firefox真的慢于chrome呢？这是因为firefox是等资源下载完再开始渲染，而chrome则是边下载边渲染，从而使人有一种错觉：chrome打 开速度比较快。
2.插件启动。就启动速度而言，chrome的确比firefox快。但是拖慢火狐速度 的，就是那些插件而已
3.硬件加速。有人做过测试，firefox363，256个 图标能跑到34fps，很流畅而chromium仅仅16个icons就5fps了。
4.安全。关于这两个浏览器的安全性，没有什么好说的，基本上裸奔无障碍，不论是js引擎，还是浏览器内核，亦或linux， 都能为安全性提供强大的保证。
下面有张很搞笑的图片：

6.wekbit的深入了解

　　对于许多开发者而言，WebKit 是一个黑盒子。我们把 HTML, CSS, JS 和一堆资源放进去，然后 WebKit 以某种方式，奇妙地变幻出一个美观而实用的页面。
　　对于webkit的实现有很多，淘宝UED里面有篇讲这个的文章：
"翻译：WebKit for Developers”:http://ued.taobao.com/blog/2013/03/webkit-for-developers/
对于webkit其实我们需要明白一下几点：1.WebKit 是什么？2. WebKit 不是什么？3.基于 WebKit 的浏览器使如何运用 WebKit ？4.为什么所有的 WebKit并不一样？ 
　　顺便翻了下webkit的官方文档，都是英文，看了些些，似懂非懂，然后看完写不出东西了...