堆糖前端性能优化小记

[iscarecrow]

1.js，css合并压缩

目标:减少请求数(合并)，减少包体积(混淆，压缩)
基于构建工具gulp或者webpack。 在发布过程完成。可参考打包流程项目gulp-package-hugin-demo。

2.图片 雪碧图 缩略裁剪

目标： 减少请求数(雪碧图)，减少大图的大小
图片源在七牛，提供缩略规则，宽高，裁剪位置。减少图片大小。 icon使用雪碧图

http://cdn.duitang.com/uploads/item/201701/23/20170123050626_vPsRX.thumb.224_224_c.jpeg

3.使用缓存

目标：尽可能使用本地缓存，分成http的cache和打包包划分
1.http的缓存方法可见http请求缓存小记 。

以js为例子: 使用了200本地缓存

表头关于请求的内容

2.另外的打包过程对于缓存的考虑。spa类型应用，打基础包和业务包。基础班长时间不变动cache。业务包经常发布基于戳更新。 传统的页面开发类型。 共有包一份包括基础库，通用方法等。业务包按照每个页面给page.js。更新A页面的业务PageA.js。不影响PageB.js的缓存

单页应用类型的cache方案 商店首页

传统类型的cache方案

index页面

category页面

当然在这一块。我觉得还可以做三个级别的js。最底层，差不多半年不动的。按照月可能变更的。 页面级别page。 多一层抽出。 防止common那一层考虑不周，总是变动的情况。

4.使用cdn

目标：提高资源访问速度
使用七牛的cdn服务，原理可以wiki一下。静态资源的一些cache七牛后台都设置好了。

5.预加载数据

目标:能够快速看到之后的内容，减少等待时间

例子可以看图片详情页。

预览当前页的时候，预加载下一个页面数据。

进入下一页就可以快速展示。同时预加载下一页。

我这边做了下一个请求数据的预先加载。方法就是浏览此页面的时候拿到下一个页面的数据存储，翻页的时候使用。如果要预加载多个页面，可以写一个cache pool。客户端对于图片详情页面预加载了3，4页的数据。我感觉是有些冗余和额外浪费资源的。

6.懒加载，延迟加载

目标:减少请求数
无限下拉过程，图片加载的展现都会使用lazyload。
方案就是监听 滑动位置。将data-src 替换成src即可。减少瞬间非常多的图片请求的情况。

<img data-src="url"/>
<img src="url"/>

另外根据页面模块展现的有限级别。可以考虑延迟加载渲染后面不可见的数据。防止瞬间产生太多的并发http请求。

7.减少请求数量

• css,js合并
• 图片lazyload
• 延迟加载其他的api数据

8.减少dom元素的操作和对dom进行缓存

目标:减少dom的开销
这个属于代码问题。 使用事件监听方法，批量处理dom，处理完毕再渲染。缓存dom的目的是不要总是query dom。
另外从开发心得上考虑。使用jquery这一套代码review要经常提醒大家要注意这些。 使用框架能够更加规范的处理这块的问题。