# 浏览器工作原理系列之1-发展历史
# 前言
本文分为一下几个部分：
- 浏览器的发展历程
- 浏览器之间的差异
- 浏览器进程架构演化
# 一、浏览器的发展历程
# 1990年 The WorldWideWeb browser（Nexus平台）
- Tim Berners Lee 使⽤Objective-C在NeXT上开发
- 世界第⼀款⽹⻚浏览器
- 双击链接跳转、所⻅即所得⽹⻚编辑器、⾃定义style
- 模拟器：https://worldwideweb.cern.ch/browser/
# 1993年 NCSA Mosaic
- 马克·安德森在伊利诺大学的NCSA组织开发 （NCSA：国家超级电脑应用中心）
- Mosaic名字由来：镶嵌图案
- 第一个可以在文字中嵌入图片，而不是在单独的窗口中显示图片的浏览器
- 引发1990年代互联网泡沫的网页浏览器
# 1994年 Netscape Navigator
- 马克·安德森离开NCSA后创立 Netscape 公司
- 软件最初以 Mozilla（Mosaic Killer） 名称公开，后因市场取向更名为 NetScape
- 添加JavaScript、Gif动画等独有功能，在1996年70%市占率；
- 第一次浏览器大战输给了IE，2006年年底，不到1%，为第二次浏览器大战埋下伏笔。
# 1995年 Microsoft Internet Explorer
- 微软基于 Spyglass Mosaic 重新设计而出 IE1.0
- 首个支持CSS技术的主流浏览器。它引进ActiveX控件、Java Applet
- 1995年，内置在各个新版本的Windows操作系统
- 2003年，达到95%使用率
- 2020年，微软宣布将于11月底前将陆续停止支持Internet Explorer
# 1996年 Opera
- 挪威软件公司
- 个性化：鼠标手势、键盘快捷键
- 定制化：自定义菜单、工具栏
- 实用功能：免费VPN（导致被禁）
- 美国网络安全公司Purewire数据显示有26%的黑客使用Opera
- 2013年，被中国财团和360收购
# 2003年，Apple Safari
- safari在斯瓦希里语为旅行，字源来自阿拉伯语同意词 سفرة （safra）
- NetScape->IE->Safari
- Apple产品的默认浏览器
# 2004年 Mozilla Firefox
- 开源浏览器，由Mozilla基金会及其子公司Mozilla公司开发
- 独立于 Mozilla Application Suite 开发的浏览器
- MDN（Mozilla Developer Network）
- Phoenix -> Mozilla Firefox
# 2008年 Google Chrome
- 是化学元素”铬“的英文名称
- 提升稳定性、速度和安全性
- 多进程架构
- 自动更新
- 黑名单、沙箱
- 基于WebKit 自研了 Blink
- 开发出V8高性能JS引擎
# 2015年 Microsoft Edge
- EdgeHTML版Edge浏览器
- 后改为基于Chromium开发
- 第三次浏览器大战？
# 2016年 Vivaldi
- 原Opera创始人创办
- 有不少专属功能
- 高端技术专家、重度的互联网用户为主
# 浏览器市场份额
https://gs.statcounter.com/browser-market-share
# 二、浏览器的差异在哪里？
# 排版/渲染引擎
负责将标记内容、样式信息排版后输出至显示器或打印机
- Chrome：Blink
- Safari：Webkit
- Mozilla：Gecko
- Internet Explorer：Trident
- Microsoft Edge：EdgeHTML
- QQ浏览器：Trident、Blink
- 世界之窗：Trident
- 搜狗浏览器：Trident，Blink
# JS引擎
- Rhino，由Mozilla基金会管理，开放源代码，完全以Java编写。
- SpiderMonkey，第一款JavaScript引擎，早期用于Netscape Navigator，现时用于Mozilla Firefox。
- V8，开放源代码，由Google丹麦开发，是Google Chrome的一部分。
- JavaScriptCore，开放源代码，用于Safari。
- Chakra (JScript引擎)，用于Internet Explorer。
- Chakra (JavaScript引擎)，用于Microsoft Edge。
# 浏览器User-Agent
首部包含了一个特征字符串，用来让网络协议的对端来识别发起请求的用户代理软件的应用类型、操作系统、软件开发商以及版本号
User-Agent: Mozilla/<version> (<system-information>) <platform> (<platform-details>) <extensions>
一点历史：
- Netscape Navigator2.0 支持GIF，而Mosaic不支持，因此引入UA标识，告诉服务器有Mozilla标识时才发送GIF；
- IE出版，也支持GIF了，但是UA上没有Mozilla标识，于是微软也在UA上加上了Mozilla标识；
- Netscape在第一次浏览器大站中输给了IE，接着以MozillaFirefox重生，搞出了Gecko引擎，并在UA上加上了Gecko，Gecko开源后有许多其他浏览器基于它的代码二次开发，因此也都在UA上加上了Gecko。每一个都假装自己是Mozilla，每一个都使用了Gecko的代码。
- 接着一帮搞Linux的人弄了个浏览器Konqueror，引擎叫KHTML，他们觉得KHTML和Gecko一样好，于是在UA上加上了（KTHML，like Gecko）
- Apple弄出了Safari，已KTHML为基础打造出Webkit，然后叫 AppleWebKit（KHTML，like Gecko）
- Google又基于Webkit搞出了Chrome，因此它为了伪装成safari，webkit伪装成KTHML，KHTML伪装成Gecko，最后所有的浏览器都伪装成 Mozilla。
# 三、浏览器进程架构演化
# 单进程
- 特点：所有页面都运行在一个主进程中
- IE6：单标签，一个页面一个窗口
- 缺点：不稳定、不流畅、不安全
不稳定：早期浏览器需要借助于插件来实现诸如 Web 视频、Web 游戏等各种强大的功能，但是插件是最容易出问题的模块，并且还运行在浏览器进程之中，所以一个插件的意外崩溃会引起整个浏览器的崩溃。
不流畅：所有页面的渲染模块、JavaScript 执行环境以及插件都是运行在同一个线程中的，这就意味着同一时刻只能有一个模块可以执行，死循环或内存泄漏
不安全：通过插件可以获取到操作系统的任意资源，当你在页面运行一个插件时也就意味着这个插件能完全操作你的电脑。如果是个恶意插件，那么它就可以释放病毒、窃取你的账号密码，引发安全性问题。至于页面脚本，它可以通过浏览器的漏洞来获取系统权限，这些脚本获取系统权限之后也可以对你的电脑做一些恶意的事情，同样也会引发安全问题
这是一段不堪回首的过去，也许你没有经历过，不过你可以想象一下这样的场景：当你正在用浏览器打开多个页面时，突然某个页面崩溃了或者失去响应，随之而来的是整个浏览器的崩溃或者无响应，然后你发现你给老板写的邮件页面也随之消失了，这时你的心情会不会和页面一样崩溃呢？
# 多进程
结构：
- 1个浏览器主进程：负责界面显示、用户交互、子进程管理，同时提供存储等功能
- 1个GPU进程：最初是为了实现3D CSS的效果，后来网页和浏览器UI界面也采用GPU绘制
- 1个网络进程：负责页面的网络资源加载
- 多个渲染进程：将HTML、CSS、JavaScript转换为用户可以与之交互的网页
- 多个插件进程：负责插件的运行
优点：
- 稳定性：进程间相互隔离
- 流畅性：JS只影响当前的渲染进程；关闭页面，进程所占用的内存会被系统回收
- 安全性：安全沙箱
由于进程是相互隔离的，所以当一个页面或者插件崩溃时，影响到的仅仅是当前的页面进程或者插件进程，并不会影响到浏览器和其他页面，这就完美地解决了页面或者插件的崩溃会导致整个浏览器崩溃，也就是不稳定的问题。
JavaScript 也是运行在渲染进程中的，所以即使 JavaScript 阻塞了渲染进程，影响到的也只是当前的渲染页面，而并不会影响浏览器和其他页面，因为其他页面的脚本是运行在它们自己的渲染进程中的。所以当我们再在 Chrome 中运行上面那个死循环的脚本时，没有响应的仅仅是当前的页面。对于内存泄漏的解决方法那就更简单了，因为当关闭一个页面时，整个渲染进程也会被关闭，之后该进程所占用的内存都会被系统回收，这样就轻松解决了浏览器页面的内存泄漏问题。
采用多进程架构的额外好处是可以使用安全沙箱，你可以把沙箱看成是操作系统给进程上了一把锁，沙箱里面的程序可以运行，但是不能在你的硬盘上写入任何数据，也不能在敏感位置读取任何数据，例如你的文档和桌面。Chrome 把插件进程和渲染进程锁在沙箱里面，这样即使在渲染进程或者插件进程里面执行了恶意程序，恶意程序也无法突破沙箱去获取系统权限。
缺点
- 更高的资源占用、更复杂的体系架构
# 未来面向服务的架构
-（Services Oriented Architecture，简称 SOA）进程
- 最终要把 UI、数据库、文件、设备、网络等模块重构为基础服务，类似操作系统底层服务