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

浅析浏览器解析和渲染 偏右 Loading Parsing Rendering Layout Painting DNS预解析 当Chrome访问google页面的搜索结果时，它会取出链接中的域名进行预解析。 link rel=dns-prefetch href=// 预下载 利用空闲时间段的流量来预加载，提升用户访问后续页面的速度（淘宝购物车页或订单页预加载收银台的资源？） link rel=prefetch href=http:// 利用JS实现 preload = [/pagr2/sleep.expires.png, /pagr2/sleep.expires.js, /pagr2/sleep.expires.css], for (i = 0, max = preload.length; i max; i += 1) { if (isIE) { new Image().src = preload[i]; continue; } o = document.createElement(object); o.data = preload[i]; o.width = 0; o.height = 0; } document.body.appendChild(o); 使用get请求 大部分浏览器（除了Firefox）在使用post时也会发送两个TCP的packet，所以性能上会有损失，而Get只有一个。 /archives/2009/08/xmlhttprequest-xhr-uses-multiple-packets-for-http-post/ 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 Loading Parsing Rendering Layout Painting Parsing 将HTML文档转化为DOM树并下载相关资源的过程。 html head title “标题” Body div h1 “文本” p “文本” 各浏览器加载策略 Demo !DOCTYPE html html head title测试各浏览器加载的页面/title link rel=stylesheet href=style1.css type=text/css / link rel=stylesheet href=style2.css type=text/css / link rel=stylesheet href=style3.css type=text/css / /head body p测试文字/p img src=“1.jpg” alt=“图1 img src=“2.jpg” alt=“图2 img src=“3.jpg” alt=“图3 script src=test1.js/script script src=test2.js/script script src=test3.js/script /body /html IE 6/7 Opera 按文档顺序解析，CSS并行加载，外部JS串行加载，阻塞后续资源 IE 8/9 JS并行加载 Firefox Chrome 分析文档结构，优先并行加载css和js 同步模型 JS引擎是基于事件驱动的单线程。 浏览器一般有三个常驻线程：JS引擎线程、界面渲染线程、浏览器事件触发线程。 GUI渲染线程负责渲染网页，GUI渲染线程与JS引擎是互斥的，当JS引擎执行时GUI线程会被挂起。页面将停止一切解析和渲染的行为。 JS阻塞 JavaScript（inline external）的执行可能改变DOM结构，因此Parser和Render都会挂起等待JS执行结束。 执行在所有浏览器中默认都是阻塞的。 external JS的下载不应该阻塞页面。 IE6/7、Opera JS执行策略 !DOCTYPE html html head title测试各浏览器加载的页面/title link rel=stylesheet href=style1.css type=text/css / link rel=stylesheet href=style2.css type=text/css / link rel=stylesheet href=style3.css type=text/css / /head body p测试文字/p script sr