《浅析浏览器解析和渲染》由会员分享，可在线阅读，更多相关《浅析浏览器解析和渲染（48页珍藏版）》请在金锄头文库上搜索。
1、浅析浏览器解析和渲染偏右LoadingParsingRenderingLayoutPaintingDNS预解析 当Chrome访问google页面的搜索结果时，它会取出链接中的域名进行预解析。预下载 利用空闲时间段的流量来预加载，提升用户访问后续页面的速度（淘宝购物车页或订单页预加载收银台的资源？）利用JS实现preload = http:/ (i = 0, max = preload.length; i 测试各浏览器加载的页面测试文字IE 6/7 var n2 = Number(new Date();while(n2 - n) 阻塞渲染http:/ .unordered-list-item
2、color: blue;CSS Block? 不阻塞解析 阻塞渲染 Opera的闪烁行为？Put Stylesheets at the Top.LoadingParsingRenderingLayoutPaintingReflow testNode.style.border=1px solid red;testNode.style.fontSize=20px;testNode.style.background=blue;testNode.style.width=“200px”;testNode.style.cssText= color:#eee;border:1px solid red;fon
3、t-size:20px;background:blue;width:200px ;.className1 color:#eee;border:1px solid red;font-size:20px;background:blue;width:200px ;/.testNode.className = className1;简单的测试IE 6IE 9Firefox 6Chrome 14Opera 11style821ms321ms177ms149ms190msclassName210ms127ms4ms3ms32mscssText*501ms398ms156ms182ms34ms用事实证明cs
4、sText性能高 http:/ html 用事实证明cssText性能不一定高 http:/ mlhttp:/ 别这样写for(循环) el.style.top = el.offsetTop + 5 + “px“;/ 这样写好点var top = el.offsetTop, s = el.style;for(循环) top += 10;s.top = top + “px“;权衡动画帧宽 jQuery 13ms Arale 20ms YUI 20ms Google clousure 20ms Mootools 16.6ms http:/ inject改善阻塞4.注意inline JS的位置，防止css阻塞其他资源5.将css文件放在顶部6.避免使用通配符7.避免在后代选择符的最后使用tag名8.去掉冗余的选择符9.用class代替后代选择符10.离线操作DOM11.集中修改样式12.缓存Layout属性值13.权衡动画帧宽其他 Cache iframe参考JS阻塞页面加载：http:/ http:/ Performance Wishlisthttp:/ browser renderinghttp:/
