浏览网页
文章作者：凡夫畏果 公众号：给产品经理讲技术（ID:pm_teacher）
这是一个很经典的问题，我到现在还记得，许多年前找工作的时候，面试官曾经这样问起我。
那是一个闷热下午，我辗转十几站地铁才来到面试的地方。面试官一开始问了几个简单的问题，都记不起来了。人的记忆就是这么功利，只有那些让你特别爽或特别不爽的事情，才会被记下来。
“当你输入了一个网址，敲下回车，直到你看到网页为止，浏览器都干了什么？”后来面试官似乎很有自信的问。
我擦，这算什么问题，《程序员面试宝典》上没讲啊，只能碰运气了。我试探性的说，“一开始嘛，浏览器肯定要检查你的网址对不对，合不合法啊，比如你把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：面试那段是虚构的，像本人这种自诩为「有点儿小牛逼」的程序员，怎么可能会被这种问题难倒呢，哇哈哈。
欢迎添加微信公众号：给产品经理讲技术
相关阅读
作为国内率先接入乐播投屏功能的浏览器——QQ浏览器，如期发布了9.7安卓端版本此次改版，重点改善了视频投屏功能引导及页
虽然有点看不懂，百度这个时候还在换个品牌推 PC 浏览器，但千寻浏览器还是带着一股小清新的气息，扑面而来了…… 关于千寻
flash 因为潜在的一些安全隐患，比如很容易被黑客利用，用来植入病毒。所有现在很多浏览器默认都不是启用的，要么需要询问，要不直接就给
浏览器中的前进和后退代码window.history.go(-1)，histo
history.go(),history.back(),//后退一页history.forward()//前进一页window.history.go(-1)；//后退一页window.history.go(-n)；//
新博客地址昨天遇到了这个问题，在网页端可以正常使用QQ通讯组件，但是放到了移动端就不行。试了好久终于搞定，在此分享一下我的经验，如