如图，这张图就是雅虎的性能优化工程师统计了世界流量最大的网站，然后他们这个页面在下载的时候，下载他们的HTML，和下载HTML中引用的图片和js、css的耗时，然后把他们做了一个对比，会发现8020原则在这里面表现得非常明显，就是说用户花了百分之二十的时间或者百分之二十不到的时间去下载主文档，但是花了更多的时间去下载主文档里面引用的其他资源，就是右边这一列，然后左边这一列是主文档的耗时，这个就是说用户花了更多时间是在页面引用的其他资源，那么右边就相当于是在浏览器中的，那么我们在浏览器中要做的优化，效果应该更加显著。
浏览器性能优化的19条规则
规则1，把css放在head中加载，这个能让页面更早的开始渲染，同时能够避免把css放在页面尾部，因为可能会出现闪屏，就是如果css加载的很慢，DOM结构先出来，css后出来，然后web页面样式突然发生变化，这就叫做闪屏，最后能包含关键渲染路径的样式：首屏
规则2，把js放在body末尾加载，因为js它本身会阻塞HTML的解析以及css的渲染。
规则3，不要使用css的表达式，css的表达式一方面是兼容性问题，虽然看起来比较强大，但是实际性能开销很大，因为它实际的执行频率是远远超出预期的，如果使用了css的表达式，可能导致页面卡顿。
规则4，就是用外链的方式引用css和js，可以有效的减少HTML的体积，并且外链了之后，css和js作为静态资源可以给他设置合适的缓存的响应头，能够合理的利用浏览器的缓存。
规则5，压缩js和css，在生产环境里面可以删除这一类文件不必要的注释、空白，并且对js进行变量名压缩，混淆压缩，对css进行属性的合并，然后选择符的合并。
规则6，不重复加载js，因为在IE里面，还是会多个请求，不能发挥缓存优势，并且你重复加载js，意味着要更长的js执行时间。
规则7，让Ajax请求可缓存，GZIP、内容压缩都可以适用。
规则8，用GET方式发起Ajax请求，因为GET方式可以缓存，如果是获取信息的，那么GET方式是更语义化的。
规则9，是组件延迟加载，保障页面的关键的静态资源优先加载，因为并发数限制，还有一些延迟加载的典型手段叫做“lazyload”。
规则10，减少DOM节点数，那么DOM节点这个规则是非常容易理解，就是如果你的DOM结构非常的复杂，那么浏览器在解析的时候，进行布局、渲染时计算量更大，那么少一点的话，浏览器的开销会少一些，渲染布局的速度就会快一些。
规则11，是避免在页面中使用iframe，因为iframe它会阻塞父文档的onload，即使它是一个空白的也会比较耗时。
规则12，要减少COOKIE的体积，因为COOKIE在每一次请求，就是跟主文档相关的，只要是同域的，COOKIE的全部内容都可以带上。
规则13，使用无cookie域名加载静态资源，可以减少静态资源加载时的网络传输量，静态资源加载通常是不需要cookie的，阿里在精简cookie后，每年节省的流量TB记。
规则14，是减少js中的DOM访问，这个有一些常见的web前端工程师优化手段，就是对于你查找到的元素，缓存在js的变量中，后面就不需要在去查找DOM树了，还有节点增加是合理利用documentfragment，然后在把documentfragment放在实际的DOM树里面，然后还有一个建议是不要用js去频繁修改样式。
规则15，使用更只能的事件监听机制，基于事件冒泡的委托机制，你可以有效减少绑定的数量。
规则16，就是你要学会使用常见的图片优化手段，因为对于代码来说，图片的体积很大，常用的图片压缩工具有“PNGCrush”“JPEGTRAN”“PNGQUANT”，JPG图片的就常用的渐进式编。
规则17，就是不要在HTML中缩放图片，你实际上在页面上用到多大图片，那你就提供适当尺寸即可，不然它只会徒增渲染的开销。
规则18，就是不要把图片SRC置空，因为在主文档的浏览器里面都会引发额外的请求。
规则19，任何资源尽量在25k以内，因为iPhone无法缓存25k以上的资源。