浏览器性能优化

1.开启gzip压缩：Apache 使用 mod_deflate;

2.隐藏父元素，浏览器不会加载这张图片：
<div id="parent"><div></div></div>
#parent div { background:url(image.jpt); }
@media(max-width:600px){ #parent{display:none;} }

3.用不同的媒体查询告诉浏览器什么屏幕尺寸加载什么background-image，浏览器会加载匹配媒体查询和图片：
<div id="match"></div>
@media(min-width:601px){ #match{background:rul(big.jpg);} }
@media(max-width:600px){ #match{background:url(small.jpg);} }

4.通过给脚本添加async标记来告诉浏览器这个脚本不需要被立即执行，这样就不会阻塞内容渲染：
<script src="main.js" async></script>
这样浏览器会继续构建DOM，在脚本加载完成并准备好后再执行它。

5.用媒体查询指定视网膜屏版来确保只加载视网膜版图片：
<div id="match"></div>
#match{ background:url(regular.png); }
@media(-webkit-min-device-pixel-ratio:1.5),(min-moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){ #match{background:url(retina.png);} }

6.HTML的picture元素