首页 > 站长学院 > 建站经验 > 正文
当你打开一个网页的时候,浏览器在干什么?
2016-04-23 09:06:03       个评论    来源:产品100  
收藏    我要投稿

网站加载 HTML语音 网页架构 网站建设

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

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

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

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

“嗯,然后呢?”

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

“没了?”

“没了。”

“好,下一位。”

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

网站加载 HTML语音 网页架构 网站建设

而看到的却是这样的:

网站加载 HTML语音 网页架构 网站建设

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

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

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

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

网站加载 HTML语音 网页架构 网站建设

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

网站加载 HTML语音 网页架构 网站建设

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

网站加载 HTML语音 网页架构 网站建设

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

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

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

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

1、生成DOM树。

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

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

网站加载 HTML语音 网页架构 网站建设

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

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

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

那么问题来了,既然浏览器如此庞大、如此复杂、如此吃性能,如何才能保证手机上的浏览器流畅运行呢?改天再告诉你。

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

点击复制链接 与好友分享!回本站首页
相关TAG标签 浏览器 时候 网页
上一篇:一篇文章让你全面了解社区运营
下一篇:没有内容的营销是放空枪你的内容能让人尖叫吗?
相关文章
图文推荐
文章
推荐
热门新闻

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心
版权所有: 红黑联盟--致力于做实用的IT技术学习网站