浏览器及html解析.ppt

,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,浏览器及,HTML,解析,FORM,表单对象,document,文档对象,location,地址对象,浏览器,Window,窗口对象,浏览器对象的分层结构,window.document.myform.text1,控制,浏览器主要组件,用户界面,浏览器引擎,渲染引擎,网络,UI,后端,JS,解释器,数据存储,浏览器内核工作流程图,XML/HTML,解析（分词）,构建DOM树,Javascript,解析,窗口管理,网络,侧,数据,渲染,网页,Loading,Parsing,Rendering,Layout,Painting,基本处理流程,Layout engine,Release version,Used by,Gecko,1.9.2.14,所有的 Mozilla,系列,包括Firefox，Thunderbird等,KHTML,Konqueror,Presto,2.7.62,Opera,;,Opera Mobile,Sony PlayStation,Trident,4.0(IE 8),Internet Explorer,Internet Explorer,for windows mobile,WebKit,533,Google Chrome,Maxthon 3,Safari(Mac版和IPhone版),Shiira,Android browser,Palm webOS browser,Symbian S60 browser。,浏览器渲染引擎,浏览器引擎,浏览器,引擎,Trident,Internet Explorer,Maxthon,搜狗浏览器,360 浏览器,Green Browser,Opera,Presto,Gecko,Mozilla firefox,Thunderbird,Camino,Webkit,Mac Safari,Chrome,Midori,嵌入式浏览器引擎,嵌入式,浏览器,Trident,MobileIE,Opera Mobile,Presto,Gecko,Mozilla firefox,Thunderbird,Camino,Webkit,Iphone Safari,Android browser,Netfront Browser,Symbian Browser,渲染引擎基本流程,构建,dom,树,-,构建,render,树,-,布局,render,树,-,绘制,render,树,webkit,渲染引擎主流程,webkit,使用,render,树,这个名词来命名由渲染对象组成的树。,元素的定位称为,布局,。,利用,dom,节点及样式信息去构建,render,树的过程为,attachment,Gecko,渲染引擎主流程,Gecko,称可见的格式化元素组成的树为,frame,树,，每个元素都是一个,frame,。,元素的定位称为,回流,。,Gecko,在,html,和,dom,树之间附加了一层，这层称为,内容接收器,，相当制造,dom,元素的工厂。,HTML,解析,HTML,文法定义,HTML DTD,DTD,（,Document Type Definition,文档类型定义）,这一格式是用于定义,SGML,家族的语言，包括了对所有允许元素及它们的属性和层次关系的定义。,DTD,定义了,HTML,的解析语法,HTML,解析树,DOM,树,HTML,解析器输出的树，也就是解析树，是由,DOM,元素及属性节点组成的。,DOM,是文档对象模型的缩写，它是,html,文档的对象表示，作为,html,元素的外部接口供,js,等调用。,www.w3.org/DOM/DOMTR,解析算法,hmtl,不能被一般的自顶向下或自底向上的解析器所解析。,原因是：,1.,这门语言本身的宽容特性,2.,浏览器对一些常见的非法,html,有容错机制,3.,解析过程是往复的，通常源码不会在解析过程中发生改变，但在,html,中，脚本标签包含的“,document.write”,可能添加标签，这说明在解析过程中实际上修改了输入,不能使用正则解析技术，浏览器为,html,定制了专属的解析器。,Html5,规范中描述了这个解析算法，算法包括两个阶段,符号化及构建树,。,Dom,例子,Trees,trees,everywhere Trees,trees,everywhere Welcometoareallyboringpage.Comeagainsoon.,通常的,html,文档,Html,是一个树形结构,渲染树,渲染树由,元素显示序列中的可见元素组成,，它是文档的可视化表示，构建这棵树是为了以正确的顺序绘制文档内容。,Firefox,将渲染树中的元素称为,frames,，,webkit,则用,render,或渲染对象来描述这些元素。,一个渲染对象知道怎么布局及绘制自己及它的,children,。每个渲染对象用一个和该节点的,css,盒模型相对应的,矩形区域,来表示，正如,css2,所描述的那样，它包含诸如宽、高和位置之类的几何信息。盒模型的类型受该节点相关的,display,样式属性的影响。元素的类型也需要考虑，例如，表单控件和表格带有特殊的框架。,渲染树和,DOM,树的关系,渲染对象和,DOM,元素相对应，但这种对应关系,不是一对一,的，,不可见的,Dom,元素不会被插入渲染树,，例如,head,元素。另外，,display,属性为,none,的元素也不会在渲染树中出现,（,visibility,属性为,hidden,的元素将出现在渲染树中）。,还有一些,Dom,元素对应几个可见对象，它们一般是一些具有复杂结构的元素，无法用一个矩形来描述。例如，,select,元素有三个渲染对象,一个显示区域、一个下拉列表及一个按钮。,当文本因为宽度不够而折行时，,新行将作为额外的渲染元素被添加,。,根据,css,规范，一个行内元素只能仅包含行内元素或仅包含块状元素，在,存在混合内容时，将会创建匿名的块状渲染对象包裹住行内元素。,渲染树和,DOM,树的关系,一些渲染对象和所对应的,Dom,节点不在树上相同的位置，例如，浮动和绝对定位的元素在文本流之外，在两棵树上的位置不同，渲染树上标识出真实的结构，并用一个占位结构标识出它们原来的位置。,布局,当渲染对象被创建并添加到树中，它们并没有位置和大小，计算这些值的过程称为,layout,或,reflow,。,Html,使用基于流的布局模型。流中靠后的元素并不会影响前面元素的几何特性，所以布局可以在文档中从右向左、自上而下的进行。也存在一些例外，比如,html tables,。,坐标系统相对于根,frame,，使用,top,和,left,坐标。,根渲染对象的位置是,0,0,，它的大小是,viewport,浏览器窗口的可见部分。,布局是一个递归的过程，由根渲染对象开始，它对应,html,文档元素，布局继续递归的通过一些或所有的,frame,层级，为每个需要几何信息的渲染对象进行计算。,layout,过程,parent,渲染对象决定它的宽度,parent,渲染对象读取,chilidren,，并：,放置,child,渲染对象（设置它的,x,和,y,）,在需要时（它们当前为,dirty,或是处于全局,layout,或者其他原因）调用,child,渲染对象的,layout,，这将计算,child,的高度,parent,渲染对象使用,child,渲染对象的累积高度，以及,margin,和,padding,的高度来设置自己的高度这将被,parent,渲染对象的,parent,使用,将,dirty,标识设置为,false,绘制顺序,这个就是元素压入堆栈的顺序，这个顺序影响着绘制，堆栈从后向前进行绘制。,一个块渲染对象的堆栈顺序是：,背景色,背景图,border,children,outline,css2,定义了绘制过程的顺序：,www.w3.org/TR/CSS21/zindex.html,Reflow&Repaint,当,DOM,元素的属性发生变化,(,如,color),时,而这些属性只是影响元素的外观风格，浏览器会通知,render,重描相应的元素，此过程称为,Repaint,。,如果该次变化涉及元素布局,(,如,width),，浏览器则抛弃原有属性，重新计算并把结果传递给,render,以重新描绘页面元素,此过程称为,Reflow,。,Reflow,必将引起,Repaint,，而,Repaint,不一定会引起,Reflow,。,什么操作会引起,Reflow&Repaint,DOM,元素的添加、修改（内容）、删除,隐藏元素,display:none(Reflow),visibility:hidden(Repaint),应用新的样式或者修改任何影响元素外观的属性,用户的操作，如改变浏览器大小，改变浏览器的字体大小等,浏览器的优化,很多浏览器会维护一个队列，把所有会引起,Reflow/Repaint,的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会把,flush,队列，进行一个批处理。这样就会让多次的,Reflow,、,Repaint,变成一次。,破坏优化,offsetTop,offsetLeft,offsetWidth,offsetHeight,scrollTop/Left/Width/Height,clientTop/Left/Width/Height,width,height,请求了,getComputedStyle(),或者,ie,的,currentStyle,当你请求上面的一些属性的时候，浏览器为了给你最精确的值，需要,flush,队列，,因为队列中可能会有影响到这些值的操作。,如何做？,离线操作,DOM,集中修改样式,缓存,Layout,属性值,权衡动画帧宽,离线操作,DOM,使用,documentFragment,或,div,等元素进行缓存操作。,display:none,隐藏元素，然后对该元素进行所有的操作，最后再显示该元素,代码,不规范的,HTML,结构会降低页面解析效率（,HTML,）,HTML,的节点、层级越少页面解析效率越高（,HTML,）,通配选择符对性能的影响几乎可以忽略（,CSS,）,包含选择符的层级过多会导致降低样式解析效率（,CSS,）,不显示的对象不会被渲染（,CSS,）,动态变化,浏览器总是试着以最小的动作响应一个变化,一个元素颜色的变化将只导致该元素的重绘,元素位置的变化将导致元素的布局和重绘,添加一个,Dom,节点，也会大致这个元素的布局和重绘,一些主要的变化，比如增加,html,元素的字号，将会导致缓存失效，从而引起整数的布局和重绘。,总结,使用,GET,请求,利用,JS,预加载资源,Script inject,改善阻塞,注意,inline JS,的位置，防止,css,阻塞其他资源,将,css,文件放在顶部,避免使用通配符,避免在后代选择符的最后使用,tag,名,去掉冗余的选择符,用,class,代替后代选择符,离线操作,DOM,集中修改样式,缓存,Layout,属性值,权衡动画帧宽,Thank you!,