首页 > 代码库 > 前端性能优化
前端性能优化
1.小图片整合技术
这个用到background会比较多，也可以用于img标签
1 <img src="http://www.mamicode.com/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="http://www.mamicode.com/third.png" class="pic1" /> 3 <img src="http://www.mamicode.com/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.利用享元模式，这个以我给我人理解举个例子，比如像淘宝加载大量的数据，每次向下滚动加载跟多的内容，在这个过程中会引起页面越来越卡的情况，所以可以在家在的同时做一个剔除的操作，当用户拖到下面，加载下面的内容，同时剔除上面的内容，等滚回最上面在加载上面的剔除下面的，当然这个剔除的过程需要做一个缓存。
（注：这个模式我也不是很了解，如理解有偏差还请指正）
前端性能优化
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。