浅析浏览器解析和渲染.pptx
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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;
IE 6
Firefox
• 预取JS。 • JS执行过程延迟到所有
JS（inline & external） 下载完成后依次执行。
IE9
• 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 src=“block.js"></script> <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>
Loading Parsing Rendering Layout Painting
Pa并下载相关资源的过程。
html
head
Body
title
div
“标题” h1
p
“文本” “文本”
各浏览器加载策略
Demo
<!DOCTYPE html> <html> <head>
} document.body.appendChild(o);
使用get请求
• 大部分浏览器（除了Firefox）在使用post时也会 发送两个TCP的packet，所以性能上会有损失， 而Get只有一个。
• /archives/2009/08/xml httprequest-xhr-uses-multiple-packets-forhttp-post/
预下载
<link rel="prefetch" href="http://">
• 利用空闲时间段的流量来预加载，提升用户访问 后续页面的速度（淘宝购物车页或订单页预加载 收银台的资源？）
利用JS实现
preload = ['/pagr2/sleep.expires.png', '/pagr2/sleep.expires.js', '/pagr2/sleep.expires.css'],
• GUI渲染线程负责渲染网页，GUI渲染线程与JS引擎是互 斥的，当JS引擎执行时GUI线程会被挂起。页面将停止一 切解析和渲染的行为。
JS阻塞
• JavaScript（inline & external）的执行可能改变 DOM结构，因此Parser和Render都会挂起等待JS执 行结束。
• 执行在所有浏览器中默认都是阻塞的。
<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>
浅析浏览器解析和渲染
偏右
Loading Parsing Rendering Layout Painting
DNS预解析
• 当Chrome访问google页面的搜索结果时，它会 取出链接中的域名进行预解析。
<link rel="dns-prefetch" href="//">
IE 6/7 & Opera
✓ 按文档顺序解析，CSS并行加载，外部JS串行加载，阻塞 后续资源
IE 8/9
• JS并行加载
Firefox & Chrome
• 分析文档结构，优先并行加载css和js
同步模型
• JS引擎是基于事件驱动的单线程。
• 浏览器一般有三个常驻线程：JS引擎线程、界面渲染线程、 浏览器事件触发线程。
浏览器 IE 6,7 IE 8 Firefox 6 Safari 7 Chrome 15 Opera 12
http连接数
HTTP 1.1 2 6 6 6 6 6
HTTP 1.0 4 6 6 4 ? 4
• 在《Even Faster Web Sites》一书中推荐了对静态文 件服务使用HTTP/1.0协议来提高IE 6/7浏览器的速度。
IE 6
Firefox
• 预取JS。 • JS执行过程延迟到所有
JS（inline & external） 下载完成后依次执行。
IE9
• 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 src=“block.js"></script> <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>
Loading Parsing Rendering Layout Painting
Pa并下载相关资源的过程。
html
head
Body
title
div
“标题” h1
p
“文本” “文本”
各浏览器加载策略
Demo
<!DOCTYPE html> <html> <head>
} document.body.appendChild(o);
使用get请求
• 大部分浏览器（除了Firefox）在使用post时也会 发送两个TCP的packet，所以性能上会有损失， 而Get只有一个。
• /archives/2009/08/xml httprequest-xhr-uses-multiple-packets-forhttp-post/
预下载
<link rel="prefetch" href="http://">
• 利用空闲时间段的流量来预加载，提升用户访问 后续页面的速度（淘宝购物车页或订单页预加载 收银台的资源？）
利用JS实现
preload = ['/pagr2/sleep.expires.png', '/pagr2/sleep.expires.js', '/pagr2/sleep.expires.css'],
• GUI渲染线程负责渲染网页，GUI渲染线程与JS引擎是互 斥的，当JS引擎执行时GUI线程会被挂起。页面将停止一 切解析和渲染的行为。
JS阻塞
• JavaScript（inline & external）的执行可能改变 DOM结构，因此Parser和Render都会挂起等待JS执 行结束。
• 执行在所有浏览器中默认都是阻塞的。
<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>
浅析浏览器解析和渲染
偏右
Loading Parsing Rendering Layout Painting
DNS预解析
• 当Chrome访问google页面的搜索结果时，它会 取出链接中的域名进行预解析。
<link rel="dns-prefetch" href="//">
IE 6/7 & Opera
✓ 按文档顺序解析，CSS并行加载，外部JS串行加载，阻塞 后续资源
IE 8/9
• JS并行加载
Firefox & Chrome
• 分析文档结构，优先并行加载css和js
同步模型
• JS引擎是基于事件驱动的单线程。
• 浏览器一般有三个常驻线程：JS引擎线程、界面渲染线程、 浏览器事件触发线程。
浏览器 IE 6,7 IE 8 Firefox 6 Safari 7 Chrome 15 Opera 12
http连接数
HTTP 1.1 2 6 6 6 6 6
HTTP 1.0 4 6 6 4 ? 4
• 在《Even Faster Web Sites》一书中推荐了对静态文 件服务使用HTTP/1.0协议来提高IE 6/7浏览器的速度。