现在的位置: 主页 > 商讯 > 文章列表

浏览器是不是要把网页给转换一下啊

作者:北京东方雨泽科技有限公司 来源:www.dfyz6789.com 发布时间:2018-10-18 08:55:38
 

当你打开一个网页的时候,浏览器在干什么? 网站加载 HTML语音 网页架构 网站建设

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

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

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

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

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

“嗯,然后呢?”

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

“没了?”

“没了。”

“好,下一位。”

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

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

而看到的却是这样的:

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

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

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

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

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

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

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

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

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

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

对于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,你会发现除了编程语言不一样,知识还是那些知识,方法还是那些方法。

推荐阅读/观看:衡阳网站建设 https://www.feimao666.com/diqu/hunan/hengyang/


  • 上一篇:恰如站在万里之遥
  • 下一篇:最后一页
  •