记得大学的时候花时间去学习过 CSS，工作之后 CSS 写得并不多，最近在做图片编辑器的时候有一个图片裁剪镂空效果，由于对CSS了解不深，走了不少弯路，同时也遇到了IE系列的兼容问题。看了张鑫旭的《CSS世界》，觉得CSS从会写、到写好、再到深入理解，并没有想象中那么简单。很有必要去了解一下浏览器（渲染引擎），在它背后除了技术本身的发展，也是一段30年浏览器发展史和两次著名的浏览器大战。从网景一家独大，到微软95%的市场份额，再到今天微软拥抱Chromium引擎，Chrome无疑成为今天的最大赢家。感慨技术的发展不仅仅是技术本身决定，更多的依赖资本和市场。
# 背景
毫不夸张的说浏览器的诞生催生了互联网。1990年至今，从PC互联、移动互联以及未来的产业互联浏览器都扮演着极其重要的角色。
【维基百科】
网页浏览器（英语：web browser），常被简称为浏览器，是一种用于检索并展示万维网信息资源的应用程序。这些信息资源可为网页、图片、影音或其他内容，它们由统一资源标志符标志。信息资源中的超链接可使用户方便地浏览相关信息。
作为开发者很多时候我们更想去了解浏览器的工作原理？输入URL到资源完全呈现到屏幕底层到底发生了什么？做性能优化、代码优化、优化的核心到底是什么？以及浏览器的渲染原理又是什么？
任何一门技术或则工具我们都只有了解其出现的背景以及在不同阶段所解决的问题，才能站在更高的角度去理解它的发展方向。
作为 Web 浏览器， 任何一门 web 技术【 HTML、CSS、JavaScript 、webWork、PWA、webAssembly、SSR等等】的产生都一定离不开浏览器，只有充分理解技术的本质才能跟上日新月异的技术发展。
# 过去一年浏览器市场份额
主流网页浏览器主要指的是Mozilla Firefox、Internet Explorer、Microsoft Edge、Google Chrome、Opera及Safari。
我们先来看看浏览器的市场份额：
PC端： Chrome 浏览器大有一统之势，再加上在2018年底微软宣布拥抱 Chromium 引擎，chrome 无疑是最大赢家。
移动端：Chrome、Safari几乎划分了90+% 的市场份额。
作为应用开发者无疑觉得这是一件好事，不用再花很多精力去做一些“无意义的兼容性”，但当你真正了解了浏览器的发展史，就会觉得未来依旧有不可预测性。
# 浏览器与web技术
浏览器的发展伴随着web技术的不断更新，和各种新技术的诞生，才有了今天丰富的互联网体验。
## 1990年: Nexus (WorldWideWeb)诞生
web之父 蒂姆·伯纳斯-李 设计，最开始 叫 WorldWideWeb，由于担心名字和 www 有冲突，后改为 Nexus，预示着下一代。
- 1991 HTTP 超文本传输协议 (蒂姆·伯纳斯-李 发起 [经历了：http0.9、http1.0、http1.1、 http 2.0]) ，HTTP 的发展很大程度上和浏览器的发展史紧密关联的。参考：
- 1991 HTML标签 (首次由 蒂姆·伯纳斯-李 提出，其中影响最大的应该是 <a> 标签)
顺便说一句，基于伯纳斯-李对web 的贡献被 称为web之父一点不为过，可能有些人不知道他的父母都是第一台商业计算机的研发者。是不是很牛逼
## 1993年1月23日：Mosaic诞生
Internet 的流行应该归功于 Mosaic，这款浏览器将 Web 带向了大众。诸如 IE， Firefox 一类的当代浏览器仍然在延用 Mosaic 的图形化操作界面思想。
## 1994年12月：Netscape(Mozilla)诞生
由于商业原因，马克·安德森 带领 Mosaic 的程序员成立了 Netscape 公司，并发布了第一款商业浏览器 Netscape Navigator.
- 1994 W3C 由 web 之父 伯纳斯-李 创办。
## 1995年4月：Opera诞生
Telenor 是挪威最大的通讯公司，他们推出了 Opera，并在两年后进军移动市场，推出 Opera 的移动版。
- 1995 SSL (传输层安全性协议)
- 1995 HTML3 第三版超文本标记语言的草案 (但并没有取得成功，归咎于浏览器大战)
## 1995年8月16日：Internet Explorer诞生
微软针对 Netscape 发布了他们自己的浏览器，IE，第一场浏览器之战爆发。
- 1996 移动端浏览器 Pocket Internet Explorer 发布，也就是 Internet Explorer Mobile
- 1996 Flash (多媒体创作程序由Adobe公司提出， 一种多媒体平台，用于向网页添加动画、视频和互动内容。让web拥有更多可能性)
- 1997 HTML3.2 第三版超文本标记语言 (并没有取得成功)
## 1998年，Netscape 浏览器走向开源
Netscape 成立 Mozilla 开源项目，开发下一代浏览器，后来证明，使用原有代码开发新东西是一种负担，接着他们着手从新开发。
- 1998 HTML4
- 1998 CSS2
- 1999 Ajax 革命性提出（一组相互关联的网络开发方法，用于开发互动式网络应用，让web 技术迈向一）
- 2000 网络字体
- 2001 SVG（针对二维矢量图形（同时包括静态和动态）的基于 XML 文件格式的系列规范）
- 2002 IE 市场份额达到95%，借助同操作系统的捆绑优势，IE 赢得第一场浏览器之战。
## 2003年6月23日：Safari诞生
- 2004 canvas (HTML5 元素，可实现2D 图形和位图图片的动态脚本化呈现)
## 2004年11月9日：Firefox诞生
- 2005 opera mini （opera 移动版浏览器）
- 2006 XMLHTTPRequest2 （为规范引入新的功能，用于直接向网络服务器发送 HTTP 或HTTPS 请求，并直接将服务器响应数据加载回脚本中）
- 2007 IE7 (IE6 发布后的第六年，迫于 Firefox 的压力，微软匆匆推出 IE7 应战，吸取了 Firefox 的一些设计思想，如标签式浏览，反钓鱼等。但这款浏览器现在看来并不成功。)
## 2008年12月11日：Chrome诞生
Google 发布了他们自己的浏览器，加入这场战争。轻量，快，异常的稳固让这款浏览器成为不可轻视的一个对手。
- 2008 HTML5
- 2008 拖拽
- 2008 离线网络应用：AppCache （用来定义要缓存的网页文件的方法，可让这些文件离线使用）
- 2008 RegisterProtocalHandler（可让网站将自身注册为特定协议的可用处理程序的方法）
- 2009 CSS3 2D、3D、渐变、动画、Flex 等、indexDB客户端存储，网络工作线程webWork（可让脚本在后台运行以处理需要大量计算的任务，同时不会阻止用户界面或其他处理用户互动的脚本）
- 2010 音视频元素 (无需使用其他软件或插件，即可轻松地在网页中嵌入视频和声音并进行播放的HTML5 元素。)、file system api （提供一种 API，可让网络应用创建、导航和读写用户本地文件系统中的沙盒环境部分。）
- 2011 触摸事件、webGL、webRTC（可让网络浏览器执行实时通信）、内容安全策略（一种安全机制，可防止对用户和网站进行某些较严重的网络攻击）、requestAnimationFrame（ 告知浏览器执行动画，这样浏览器就可以针对下一个动画帧重新安排窗口的重新绘图）、DOM Mutation观察程序 （为开发人员提供一种应对 DOM 中变化的简单方法）、CSS3 过滤器(一种在元素出现在文档中之前先处理其呈现方式的方法。过滤器可在合成阶段前应用模糊和扭曲等特效)、Full Screen API(可通过用户的整个屏幕来呈现网络内容)
## 2015 Microsoft Edge 发布
IE 完成历史使命， Edge进场。
# 浏览器
首先我们要讨论的是主流浏览器，也就是首先具有一定市场份额，另外具有自主内核研发能力，并不是我们所看到的一些套壳浏览器（百度、UC、qq、360、搜狗等等），目前国内还没有一款自主研发浏览器？
- User Interface（用户界面）：页面显示窗口之外的部分。例：地址栏、前进、后退、刷新等。
- Browser engine（浏览器引擎）：用户界面和渲染引擎之间传送指令，或客户端本地数据缓存读写。是浏览器中各个部分之间通信的核心。
- Rendering engine（渲染引擎）：解析DOM文档和CSS规则，并将内容排版到浏览器中，呈现出页面样式。也称为排版引擎，通常说的浏览器内核主要就是指的渲染引擎。
- Networking（网络）：用来完成网络调用和资源下载模块。
- JavaScript Interpreter（js解释器）：用来解释执行 js的模块，比如：V8、JavaScriptCore。
- UI Backend（UI 后端）：用来绘制浏览器可视窗口的模块，不同浏览器绘制不同样式，但是功能原理都一样。
- Date Persistence（数据持久化存储）：浏览器在内存中保存 cookie、localStore等各种数据，可以通过浏览器提供的API进行调用。
## 浏览器内核
浏览器内核引擎通常又叫渲染引擎，主要负责 HTML、CSS 的解析，页面布局、渲染与复合层合成。浏览器内核的不同带来的主要问题是对 CSS 的支持度与属性表现差异。
1997年 Trident
1998年 KHTML
2000年 Gecko
2001年 WebKit
2003年 Presto
2008年 Chromium
2010年 混合引擎(双核）
2013年 Blink
2015年 EdgeHtml
- Blink 是在 Webkit 的基础上的改进，而WebKit是在KHTML基础上发展而来，是现在对新特性支持度最好的内核
- 移动端基本上全部是 Webkit 或 Blink 内核（除去 Android 上腾讯家的 X5），这两个内核对新特性的支持度较高，所以新特性可以在移动端大展身手。
- Trident 是 IE4+ 的内核，一直持续到 IE11，EdgeHTML 是微软抛弃 IE 后开发的全新内核
## JavaScript 引擎
JavaScript引擎 负责 JavaScript 代码的解释与执行，主流的 JavaScript 引擎有：V8、SpiderMonkey、JavaScriptCore、Chakra。
## 四个概念
【浏览器】Chrome、Firefox、Safari、Opera、IE
【浏览器内核 (渲染引擎)】Blink、Gecko、WebKit、Presto、Trident
【JS引擎】KJS 引擎 （后被 JSCore 取代，而JSCore称为 Webkit 中的一个重要组件）、Chakra 引擎、V8 引擎
【RunTime】运行时环境可以理解为浏览器的一个子集。
- Node.js 就是基于 Google V8 引擎的 JavaScript 运行时环境。
- 同样 PhantomJS其实是一个无界面的webkit浏览器（一般做爬虫快照的时候会使用）， 是基于webkit内核，和 JavaScriptCore引擎 的运行时环境。
未完.....
参考：
https://developers.google.com/web/fundamentals/performance/raildevelopers.google.com- https://zh.wikipedia.org/wiki/HTML
- http://www.evolutionoftheweb.com/?hl=zh-cn
- http://software.cnw.com.cn/software-application/htm2009/20091013_183968.shtml
- https://dvvb.club/2018/06/28/%E6%B5%8F%E8%A7%88%E5%99%A8Timeline/Timeline_of_web_browsers.svg
- https://zh.wikipedia.org/wiki/%E4%B8%87%E7%BB%B4%E7%BD%91%E8%81%94%E7%9B%9F
- 历史在重演：从KHTML到WebKit，再到Blink
- Phantomjs 使用说明
- 【全文】狼叔：如何正确的学习Node.js - CNode技术社区
扫一扫
125
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
