浅析浏览器解析和渲染偏右LoadingParsingRenderingLayoutPaintingDNS预解析 当Chrome访问google页面的搜索结果时，它会取出链接中的域名进行预解析。预下载 利用空闲时间段的流量来预加载，提升用户访问后续页面的速度（淘宝购物车页或订单页预加载收银台的资源？）利用JS实现preload = http:/tools.w3clubs.com/pagr2/sleep.expires.png,http:/tools.w3clubs.com/pagr2/sleep.expires.js,http:/tools.w3clubs.com/pagr2/sleep.expires.css,for (i = 0, max = preload.length; i 测试各浏览器加载的页面测试文字IE 6/7 var n2 = Number(new Date();while(n2 - n) 阻塞渲染http:/stevesouders.com/cuzillion/?ex=1 .unordered-list-item 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;font-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用事实证明cssText性能高 http:/www.cnblogs.com/snandy/archive/2011/03/13/1982954. html 用事实证明cssText性能不一定高 http:/www.cnblogs.com/easyc/archive/2011/03/14/1983772.ht mlhttp:/jsperf.com/csstext-vs-multiple-style/5缓存Layout属性值/ 别这样写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:/forum.jquery.com/topic/increasing-animation-frame-interval-and-exposing-it总结1.使用GET请求2.利用JS预加载资源3.Script inject改善阻塞4.注意inline JS的位置，防止css阻塞其他资源5.将css文件放在顶部6.避免使用通配符7.避免在后代选择符的最后使用tag名8.去掉冗余的选择符9.用class代替后代选择符10.离线操作DOM11.集中修改样式12.缓存Layout属性值13.权衡动画帧宽其他 Cache iframe参考JS阻塞页面加载：http:/hi.baidu.com/dong_love_yan/blog/item/1a70ec3c7d628e2e70cf6c8c.html解放你的浏览器http:/fed.renren.com/2010/01/247浏览器内核的解析和对比http:/www.iefans.net/liulanqi-neihe-jiexi/浏览器渲染与web前端开发http:/www.slideshare.net/nwind/web-5575667页面重构应注意的repaint和reflowhttp:/www.scriptlover.com/static/821-html-repaint-reflow页面无阻塞加载研究 http:/www.ueder.net/2011/01/06/页面无阻塞加载研究/Browser Performance Wishlisthttp:/www.stevesouders.com/blog/2010/02/15/browser-performance-wishlistOptimize browser renderinghttp:/code.google.com/intl/zh-CN/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectorshttp:/www.browserscope.org/http:/stevesouders.com/cuzillion/https:/developer.mozilla.org/En/HTML/Element/ScriptThanks