导航趣博论坛趣博论坛白菜网机械方案客户案例人才招聘新闻中心销售网络联系我们

极链科技学社:从输入URL到页面加载发生了什么?恒峰娱乐官网g22

出处:本站 责任编辑: 时间:2018-09-16 [ ] 查看全部评论

  最近经常可以看到一个前端面试题,就是从输入URL到页面加载,这个过程会发生没什么。其实,这是一个非常开放性的问题,曾看到一个调侃,如果面试官敢问这个问题,他可以用一个下午把整个流程讲一遍,从硬件方面键盘工作的原理到网路的传输都说一遍。网上大部分的回答主要是关于DNS解析和到服务端之前的过程。最近,看到一篇关于浏览器是如何工作的文章,所以我想聊下,这个问题的后半部分,就是当静态资源传输到浏览器之后,会经过哪些部分,又做了哪些处理。

  这里一个主要的部分就是呈现引擎。呈现引擎主要负责解析HTML和CSS,并将内容转化为肉眼可见的UI。

  市场上每家浏览器都使用略微不同的引擎,IE使用自己开发的Trident,火狐使用Gecko,Safari是使用开源的Webkit,Chrome和Opera fork了webkit,并在此基础上开发了Blink。每个呈现引擎在构建DOM树的方式和流程都有些不同,也导致同一份代码,在不同的浏览器上会有不用的显示效果。下面,是以WebKit为例子,看下他们的流程是什么样子的。

  解析HTML和CSS。HTML的解析过程,会把HTML标签按照顺序,组成内容树。这种解析并不是转化为机器代码,而是转换成另外一种格式保存这些数据。

  呈现树的构建。呈现树是内容树和样式规则的结合。简单总结就是HTML和CSS通过解析,转换为树状格式,方便浏览器进行渲染。

  如图所示,HTML和CSS首先会通过两个解析器,分别为HTML Parser(HTML解析器)和CSS Parser(CSS 解析器)。解析过程在呈现引擎里面是非常重要的一步。

  同理,解析器在面对HTML,CSS和Java的时候也需要去定义单词和规则,这里的单词量更大,规则更为复杂。也有了更学术的名字,词法分析(学单词)和语法分析(学语法)。

  词法分析将无关内容剔除,比如空格和换行,提取有效内容并分割成更小的单位,如具体的单词。这就相当于告诉计算机每个单词的意思。认识了单词之后,还需要学习语法,才能懂的上面公式的结果。语法分析会根据定义的规则去构建并学习单词之间的关系,最终明白了整个句子的意思。在这个过程中还会碰到很多问题,比如有些HTML写的并不是很规范或者要兼容旧的HTML规范。HTML和CSS经过解析之后,格式会经过处理,变成了树状结构,有一定的层级关系。相当于计算机通过我们定义的单词和语法,理解了我们的代码之后,经过自己的理解转换成一种更方便计算机处理的方式 --- 呈现树。

  呈现树是按照用户肉眼可见的元素排列而成,它和我们熟悉的DOM树很相似但又有些差别,比如DOM里面有些元素不会和呈现树里的元素一一相对应,如head标签,又或display为none的元素,这些元素是不会被展示出来,所以并没有被纳入到呈现树中。所以呈现树只会保留所有用户可见的元素,用来方便接下来的构建和渲染。

  在呈现树中,因为是一种树状结构,我们可以看到每个节点之间的关系,可以明显的找出上下级关系,这个上下级关系,也是最终渲染的关系,从里面可以看出是否有子节点或者同级节点。样式经过解析,也会以另外一种更加节省内存的结构储存下来。样式的规则会附加在内容树上面从而组成了最终的呈现树。

  有了呈现树,浏览器可以依次计算出具体节点的位置和大小。这个过程是个递归的过程。从顶端开始,根据从左到右,由上及下的开始计算,直到所有的节点的信息都计算完成。为了应对局部的小变化而导致整体的重新计算,浏览器会把变化的部分标记为dirty,或者children are dirty,用来表示本节点或者子节点需要重新计算。剩下的工作就是把所有计算的内容,渲染到页面上。同样,渲染的过程也会分局部和全局渲染。

  整个的渲染过程是单线程同步运行。解析器在解析HTML的过程中,如果碰到标签,会停下渲染树的构建,转而去解析Java,特别在需要异步加载Java的时候,由于资源需要网络传输,线程会停下来,直到资源加载并解析完成之后,才会继续之前的工作。遇到这个过程,用户界面会出现停滞,非常影响用户体验。而如何保证HTML和CSS的正常解析不受影响,会直接关系到用户什么时候可以看到UI界面,减少等待时间,提高用户留存率。在标签上添加defer属性,会让Java的解析延后,保证HTML优先得到展示。HTML 5 新的属性async则会让Java这些静态资源通过新的线程平行的去 下载和解析。Chrome和火狐,还可以通过提前解析,去寻找是否还有其他的静态资源去 下载,如果有,就通过新的线程去 下载。

  当我们的前端页面正确的展示在浏览器上之后,之前被延后的Java开始解析和执行。下面图2是Chrome V8的处理Java的过程。

  Ignition为Java的解释器,负责产生和运行bytecode。在运行这些bytecode的过程中,会记录下运行数据(profiling data)。如果某个方法运行的次数很多,bytecode和profiling data会被传给加速器(TurboFan)进行优化并转化为运行速度更快的机器码,一个编译过的机器码出现问题,则会被降级转回之前的bytecode。

  一般,如果我们的网站内容交互性不强,注重展示内容,我们可以延后解析Java,让主线程优先渲染HTML和CSS,以求得到更好的用户体验。也可以把加载和解析Java的任务交给其他线程来处理。良好的代码规范也可以避免触发渲染引擎的容错机制。

来顶一下
近回首页
返回首页

相关导读

    无相关信息

专题推荐

网站首页 | 关于我们 | 服务条款 | 广告服务 | 联系我们 | 网站地图 | 免责声明 | 返回顶部
Copyright © 2016-2018 趣博论坛 Inc, All rights reserved.
Powered by www.g22.com,Template designed by 趣博论坛