当你打开一个网页的时候，浏览器在干什么？

　　这是一个很经典的问题，我到现在还记得，许多年前找工作的时候，面试官曾经这样问起我。

　　那是一个闷热下午，我辗转十几站地铁才来到面试的地方。面试官一开始问了几个简单的问题，都记不起来了。人的记忆就是这么功利，只有那些让你特别爽或特别不爽的事情，才会被记下来。

　　当你输入了一个网址，敲下回车，直到你看到网页为止，浏览器都干了什么?后来面试官似乎很有自信的问。

　　我擦，这算什么问题，《程序员面试宝典》上没讲啊，只能碰运气了。我试探性的说，一开始嘛，浏览器肯定要检查你的网址对不对，合不合法啊，比如你把www.cctv.com敲成了www.ccav.com，它肯定觉得你是傻逼，不理你吧。

　　嗯，然后呢?

　　然后啊，然后它就连接到了网站的服务器，把网页下载下来，就ok了。

　　没了?

　　没了。

　　好，下一位。

　　哎等等，我想起来了，浏览器是不是要把网页给转换一下啊，毕竟我们下载下来网页文件是这样的:

　　而看到的却是这样的：

　　

　　是要转换一下。何转换呢，这才是重点。面试官有点不大耐烦。 这个。。。

　　我支支吾吾了半天，也没说出个所以然。后来面试结果如何，我也记不清了，可能是被鄙视了，也可能是勉强过了，这不重要。重要的是，我们今天一定要搞清楚这个问题。

　　想象一下，如果你来做一个浏览器，你准备如何处理下载下来的网页和其他资源呢?

　　我们知道，网页是由HTML语言写的，一般会有CSS来描述网页的样子，有的还有JavaScript来实现一些复杂的功能。这三者各司其职，其中HTML负责构建网页的框架，它规定了哪里是标题区域，哪里是内容区域，哪里是导航区域。

　　

　　CSS负责美化网页的外表，它主要关心这个标题该用多大的字体，用什么颜色之类的问题。

　　

　　JavaScript是一门正儿八经的编程语言，用它来做一些高级的功能，比如对用户的操作做出相应，再比如后台上传一个文件。

　　

　　对应的，浏览器也要具备转换和解析这三个家伙的能力。

　　对于HTML和CSS，不同的浏览器有不同的解析引擎，比如IE用的是自家的Trident内核，Safari和早期的Chrome用的是苹果开源的webkit内核(后来chrome换成了谷歌的blink内核)。不管用什么内核，其功能都是一样的，就是把下载下来的网页代码绘制出来。

　　对于JavaScript，webkit有默认的JavaScript解析引擎，但是chrome替换成了V8。我们之前讲过，像这种脚本语言，需要有个东西把它翻译成计算机能理解的机器语言。对应到浏览器里，则是把JavaScript翻译成浏览器能理解的代码。

　　凑齐了家伙之后，就可以开工了。主要有三个阶段：

　　1、生成DOM树。

　　你仔细看上面的HTML代码，他们是有层级之分的，最外层的是里面是内容，再里面是段落

　　，就好像我们盖楼，先搭最外面的架子，然后是楼梯和一层又一层，每一层有很多户，每一户又有厨房、客厅、卧室。DOM树也是如此。树是数据结构的一种，我们改天详细讲，你只需要知道它是用来辅助处理HTML的层级结构的，就行了。

　　

　　2、生成渲染树。有了DOM树，我们知道了网页里节点和节点之间的层级关系。再加上CSS对这些节点的样式描述，我们就可以生成另外一棵树，渲染树。顾名思义，渲染树就是用来渲染和显示的。离我们的目标又近了一步，不是吗?

　　3、测量、排版、绘制。还记得《什么是渲染?》吗?这篇文章讲的是操作系统渲染的过程，跟浏览器是一模一样的。可见技术是相通的。你今天在做前端，明天派你去做Android，你会发现除了编程语言不一样，知识还是那些知识，方法还是那些方法。

　　看起来很简单是不?其实不然。一般浏览器代码量非常庞大，因为它需要处理的事情实在是太多了。连接服务器下载网页需要非常可靠的网络模块;解析HTML、CSS、JavaScript要用程序员最头疼的编译原理;有的网页非常复杂，特效、装饰、挂件满天飞(没错，你知道我在说什么网站)，浏览器要非常小心的处理渲染的性能问题。

　　那么问题来了，既然浏览器如此庞大、如此复杂、如此吃性能，如何才能保证手机上的浏览器流畅运行呢?

　　改天再告诉你。这个公众号，我可是要准备写一年的呢。

　　PS：面试那段是虚构的，像本人这种自诩为「有点儿小牛逼」的程序员，怎么可能会被这种问题难倒呢，哇哈哈。

　　文章作者：凡夫畏果 公众号：给产品经理讲技术(ID:pm_teacher)

　　欢迎添加微信公众号：给产品经理讲技术

*请认真填写需求信息，我们会在24小时内与您取得联系。