浏览器工作原理/浏览器是如何渲染页面？

特别提醒：本文出自B站的卢克。

为什么我们要去了解浏览器的工作原理呢？很简单，让你写出更好的代码和提供更好的用户体验。浏览器对于前端工程师，就像赛车对于一个赛车手一样，你需要对自己的战车足够的了解，才能跑的更快，弯道拐的更优雅。伟大的作家鲁迅曾说过，不懂浏览器的前端工程师不是好码农。

1.浏览器发展史

1991年：Berners-Lee建立了第一代网络浏览器：WorldWideWeb。对了，上一期讲的互联网，他也是发明者之一，真大神，牛批！当时的WorldWideWeb的功能十分简单，只支持显示文本，图片等。

1993年: Mosaic问世，这是一种可以同时显示文本和图像的浏览器，一经推出就受到全球用户的欢迎

1994年：网景浏览器发布，它是由曾经参与开发Mosaic的人共同创建，虽然网景的功能也十分有限，只能显示简单的静态html，没有js，css，但依然大受欢迎，获得世界范围内的成功，并占领了绝大多数市场份额。同年也出现了Opera，这个大家可能用的比较少

然后1995年微软发布了万恶的IE1.0,IE2.0，自此第一次浏览器大战正式打响。接着1996年发布的IE3.0和windows操作系统集成在了一起，而此时网景的市场份额已经达到了86%。IE发行后的4年内，在windows操作系统的帮助下，逐渐取代了网景浏览器的领导地位，达到了市场份额的75％，到1999年，它已经占据了浏览器市场的99％，简直恐怖，前端工程师的噩梦来临了。

然而网景公司并没有一蹶不振，网景在1998年成立了Mozilla基金会，在该基金会的推动下，网景公司开发了著名的开源项目火狐浏览器Firefox来迎击IE，并在2004年发布了1.0版本，拉开了第二次浏览器大战的序幕

在Firefox发布的前一年2003年，苹果发布了Safari浏览器，而且该浏览器被包含在所有苹果操作系统中，更重要的是，在2005年苹果开源了Safari浏览器的内核webkit。

2008年，谷歌以苹果开源项目WebKit作为内核，创建了一个新的项目Chromium，在该项目的基础上苹果发布了自己的浏览器产品Chrome，Chrome发展十分迅速，现在已经成为全球最受欢迎的浏览器。

由于IE的性能和体验问题，IE逐渐掉队。2015微软也放弃了IE，推出了基于webkit内核的Edge浏览器作为IE的替代品，但为时已晚。

咱们再看看国内的浏览器。

我记得小时候身边的人的浏览器都是被360或者qq浏览器统治了，后来才知道，长大后才知道你们都是披着马甲的IE！！不过近几年国内浏览器的都是IE和chromium双内核。那我们就没有自己研发的浏览器内核么？至今是没有的，08年曾闹过一个笑话，红芯科技为了融资宣称自主研发的红芯浏览器使用的是公司自己开发的内核。结果被技术圈内网友打脸，最后证实是使用的是blink内核。研发内核是十分耗时耗力的，就拿chromium来说，据传Google最多时候召集过1000个硅谷的程序员集中力量去开发 Chromium内核，花了至少10年。所以自研国产浏览器内核任重而道远啊。

虽然浏览器品类众多，但他们的提供的功能都基本类似，框架结构也都大同小异。

2.浏览器结构

渲染引擎下面还有很多小的功能模块，比如负责网络请求的网络模块，用于解析和执行js的js解释器。还有数据存储持久层，帮助浏览器保存各种数据，比如cookie等等

渲染引擎可以说是一个浏览器的核心与灵魂，也是本期视频内容的重点。我们往往会把渲染引擎称为浏览器内核。不同浏览器使用的内核也不大一样，其中IE使用的Trident,Firefox是Gecko，Sarafi使用的webkit, 并将其开源，Chrome是使用的基于webkit改造优化的Blink渲染引擎，也将其开源，Opera和Edge也是使用的Blink。可以看到webkit项目的开源对浏览器的发展做了多大的贡献。

我们这期视频主要以Chrome为例，那下面如果不做特殊说明都是以chrome为例来讲解浏览器是如何工作的。

现在，我们换一个角度来拆解一下浏览器的组成结构。

浏览器是运行在操作系统上的一个应用程序，那我们在小学二年级就学过，每个应用程序必须至少启动一个进程来执行其功能。那一个程序往往需要运行很多任务，那进程就会创建一些线程来帮助它去执行这些细小的任务。这里我们就引入了两个概念，进程和线程。给你3秒钟时间想想进程和线程的联系和区别。三、二、一。没想起来的同学自行拿出小学课本《计算机操作系统教程》复习一下。

来，我给大家补补课~