浅析浏览器解析和渲染课件

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2011/9/1,#,浅析浏览器解析和渲染,偏右,浅析浏览器解析和渲染偏右,1,Loading,Parsing,Rendering,Layout,Painting,LoadingParsingRenderingLayoutP,2,DNS,预解析,当,Chrome,访问,google,页面的搜索结果时，它会取出链接中的域名进行预,解析。,DNS预解析当Chrome访问google页面的搜索结果时，,3,预下载,利用,空闲时间段的流量来预加载,，提升用户,访问后续页面的,速度（淘宝购物车页或订单页预加载收银台的资源？）,预下载利用空闲时间段的流量来预加载，提升用户访问后续页面的速,4,利用,JS,实现,preload=http:/ max;i+=1),if(isIE),new Image().src=preloadi;,continue;,o=document.createElement(object);,o.data=preloadi;,o.width =0;,o.height=0;,document.body.appendChild(o);,利用JS实现preload=http:/tools,5,使用,get,请求,大部分,浏览器（除了,Firefox,）在使用,post,时也会发送两个,TCP,的,packet,，所以性能上会有,损失，而,Get,只有一个。,http:/josephscott.org/archives/2009/08/xmlhttprequest-xhr-uses-multiple-packets-for-http-post,/,使用get请求大部分浏览器（除了Firefox）在使用pos,6,http,连接数,在,Even,Faster Web,Sites,一,书,中推荐,了对静态文件服务使用,HTTP/1.0,协议来提高,IE 6/7,浏览器的,速度,。,浏览器,HTTP 1.1,HTTP 1.0,IE 6,7,2,4,IE 8,6,6,Firefox,6,6,6,Safari,7,6,4,Chrome,15,6,?,Opera,12,6,4,http连接数在Even Faster Web Sites,7,Loading,Parsing,Rendering,Layout,Painting,LoadingParsingRenderingLayoutP,8,Parsing,将,HTML,文档转化为,DOM,树并下载相关资源的过程。,html,head,title,“,标题,”,Body,div,h1,“,文本,”,p,“,文本,”,Parsing将HTML文档转化为DOM树并下载相关资源的过,9,各浏览器加载策略,各浏览器加载策略,10,Demo,测试各浏览器加载的页面,测试文字,Demo,11,IE 6/7&Opera,按文档顺序,解析,，,CSS,并行加载，外部,JS,串行加载，,阻塞,后续,资源,IE 6/7&Opera按文档顺序解析，CSS并行加载，,12,IE 8/9,JS,并行加载,IE 8/9JS并行加载,13,Firefox&Chrome,分析文档结构，优先,并行,加载,css,和,js,Firefox&Chrome分析文档结构，优先并行加载c,14,同步模型,JS,引擎是基于事件驱动的单线程。,浏览器,一般有三,个常驻,线程：,JS,引擎线程、界面,渲染,线程、浏览器,事件触发,线程。,GUI,渲染,线程负责,渲染网页，,GUI,渲染线程与,JS,引擎是互斥的，当,JS,引擎执行,时,GUI,线程会被,挂起。,页面将停止一切解析和渲染的行为。,同步模型JS引擎是基于事件驱动的单线程。,15,JS,阻塞,JavaScript,（,inline,&external,）的执行可能改变,DOM,结构，因此,Parser,和,Render,都会挂起等待,JS,执行结束。,执行在所有浏览器中默认都是阻塞,的。,external JS,的下载不应该阻塞页面。,IE6/7,、,Opera,JS阻塞JavaScript（inline&extern,16,JS,执行策略,测试各浏览器加载的页面,测试文字,JS执行策略,17,IE 6,IE 6,18,Firefox,预取,JS,。,JS,执行过程延迟到所有,JS,（,inline&external,）下载完成后依次执行。,Firefox预取JS。,19,IE9,分段解析。,每获得一定字节量的,html,后，先读取其中所有外部资源并加载，再同步解析这段文档。,IE9分段解析。,20,小结,http:/www.browserscope.org,/,注意,script,的位置，避免阻塞,css,和,img,的下载,小结http:/www.browserscope.org/,21,Inline Script,阻塞,渲染,阻塞,css,文件,Inline Script阻塞渲染,22,阻塞渲染,我被阻塞了,var n=Number(new Date();,var n2=Number(new Date();,while(n2-n)5000),n2=Number(new Date();,阻塞渲染我被阻塞了,23,阻塞渲染,http:/ Scripts at the,bottom(,交互型页面的问题,),defer,&,async,（浏览器兼容？）,Script inject,*,（提前载入,js,，延迟执行）,解决JS阻塞Put Scripts at the botto,25,阻塞,css,文件,Suppose,an inline script block was placed between the stylesheets LINK tag and the image IMG tag.The result,for some browsers,is that the image isnt downloaded until the stylesheet finishes.,The,inline script block doesnt execute until after the stylesheet is downloaded and,parsed,(in case the inline script block depends on CSS rules in the stylesheet),.,阻塞css文件Suppose an inline scrip,26,阻塞,css,文件,CSS,本来是并行加载的（包括,IE6,）。,内嵌,JS,会打断并行。,尽量把,inline js,写在,css,前面。,阻塞css文件CSS本来是并行加载的（包括IE6）。尽量把i,27,阻塞,css,文件,IE 6/7/8,Opera,阻塞css文件IE 6/7/8,28,Loading,Parsing,Rendering,Layout,Painting,LoadingParsingRenderingLayoutP,29,Render tree,根据,selector,计算节点的样式,Dom+Style=,Render,tree,只和呈现有关（,display:none,、,head,）,等待,CSS,Render tree根据selector计算节点的样式,30,Render tree,html,head,title,“,标题,”,Body,div,h1,“,文本,”,p,“,文本,”,Render treehtmlheadtitle“标题”Bo,31,efficient CSS,selectors,Avoid,a universal key,selector,Make,your rules as specific as possible.,Prefer,class and ID selectors over tag selectors.,Remove,redundant qualifiers.,ID,selectors qualified by class and/or tag,selectors,Class,selectors qualified by tag selectors(when a class is only used for one tag,which is a good design practice anyway).,Use,class selectors instead of descendant,selectors,ul li color:blue,;,.,unordered-list-item color:blue,;,efficient CSS selectorsAvoid a,32,CSS,B,lock,?,不阻塞解析,阻塞渲染,Opera,的闪烁,行为？,Put Stylesheets at the Top.,CSS Block?不阻塞解析Put Stylesheets,33,Loading,Parsing,Rendering,Layout,Painting,LoadingParsingRenderingLayoutP,34,Reflow&Repaint,当,DOM,元素的属性发生变化,(,如,color),时,而这些属性只是影响元素的,外观风格，浏览器,会通知,render,重描相应,的,元素，此,过程称为,Repaint,。,如果该次变化涉及元素布局,(,如,width),，浏览器,则抛弃原有,属性，重新,计算并把结果传递给,render,以重新描绘页面元素,此过程称为,Reflow,。,Reflow,必将引起,Repaint,，而,Repaint,不一定,会,引起,Reflow,。,Reflow&Repaint当 DOM 元素的属性发生变,35,什么操作会,引起,Reflow&Repaint,DOM,元素的添加、修改（内容）、,删除,隐藏元素,display:none(Reflow),visibility:hidden(,Repaint,),应用新的样式或者修改任何影响元素外观的属性,用户,的操作,，如,改变浏览器大小，改变浏览器的字体大小,等,什么操作会引起Reflow&RepaintDOM元素的添,36,浏览器的优化,很多浏览器,会,维护一个,队列，把所有会,引起,Reflow/Repaint,的,操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会把,flush,队列，进行一个批处理。这样就会让多次,的,Reflow,、,Repaint,变成,一,次。,浏览器的优化很多浏览器会维护一个队列，把所有会引起Reflo,37,破坏优化,offsetTop,offsetLeft,offsetWidth,offsetHeight,scrollTop/Left/Width/Height,clientTop/Left/Width/Height,width,height,请求,了,getComputedStyle(),或者,ie,的,currentStyle,当你请求上面的一些属性的时候,，浏览器为了给,你最精确的值,，需要,flush,队列,，,因为队列中可能会有,影响到这些值的操作。,破坏优化offsetTop,offsetLeft,off,38,如何做？,离线操作,DOM,集中修改样式,缓存,Layout,属性,值,权衡动画帧宽,如何做？离线操作DOM,39,离线操作,DOM,使用,documentFragment,或,div,等元素进行缓存,操作。,display:none,隐藏,元素，然后对该元素进行所有的操作，最后再显示该,元素,离线操作DOM使用documentFragment或div等,40,集中,修改,样式,testNode.style.color=#eee;,testNode.style.border=1px so