标签：
1.小图片整合技术
这个用到background会比较多，也可以用于img标签
1 <img src="third.png" class="pic1"/> 2 3 <style> 4 .wrap img { 5 width: 630px; /*所有图片的宽*/ 6 height: 64px; 7 position:absolute; 8 clip : rect(0px,64px,64px,0px); /*top, right, bottom, left*/ 9 } 10 </style>
如果我有很多个要怎么办呢？
1 <div class="wrap"> 2 <img src="third.png" class="pic1" /> 3 <img src="third.png" class="pic2" /> 4 </div> 5 6 7 <style> 8 .wrap img { 9 width: 630px; /*所有图片的宽*/ 10 height: 64px; 11 position:absolute; 12 } 13 .wrap img.pic1 { 14 clip : rect(0px,64px,64px,0px); /*top, right, bottom, left*/ 15 } 16 .wrap img.pic2 { 17 clip : rect(0px,134px,64px,70px); /*top, right, bottom, left*/ 18 } 19 </style>
当然，我这部分是用一张横向的图片举例的，如果有需要可调整rect的值。
2.css文件和js文件合并压缩（例如grunt压缩）
3.js按需加载（可利用requirejs）
4.图片预加载或是延迟加载
5.避免重复查找
6.减少重绘
7.async、defer等属性来更灵活的控制是否异步加载
说明：两个属性都可以做到不阻塞页面的渲染，同样含有onload事件，但使用这两个属性的脚本中不能调用document.write方法;
两个属性的差异是async会在加载完毕后执行，如果有N个脚本一同加载并含有依赖关系时，有可能出错;而defer会在页面解析完毕后在按原来顺序执行。
一个常用的优化性能的方法是： 当脚本不需要立即运行时，在<SCRIPT>标签中设置“defer”属性。
8.利用享元模式，这个以我给我人理解举个例子，比如像淘宝加载大量的数据，每次向下滚动加载跟多的内容，在这个过程中会引起页面越来越卡的情况，所以可以在家在的同时做一个剔除的操作，当用户拖到下面，加载下面的内容，同时剔除上面的内容，等滚回最上面在加载上面的剔除下面的，当然这个剔除的过程需要做一个缓存。
（注：这个模式我也不是很了解，如理解有偏差还请指正）
标签：
原文地址：http://www.cnblogs.com/xizai/p/4193275.html
