Tancy's Blog

性能 CheckList v1.0

性能 CheckList v1.0

  • 图片性能

    • webp格式支持 :Android 推荐使用.
    • DPI 图片适配 :DPI>=2 的情况下2x图片,其余使用1x图片
    • 弱网适配 Q值配置 :推荐DPI>=2的情况下强网q50 弱网q30 ,DPI<2 强网使用q9,弱网使用q75。锐化可根据实际情况选择 s150。可以适当根据实际情况选择q90,q75,q50,q30.
    • 图片文件大小 kb控制 : 单张图片不要大于50kb。
    • 图片渲染高宽和实际大小控制(内存消耗控制):切图推荐最小尺寸裁剪,不能超过展示区域大小(retina下小于2x)。
    • CDN适配尺寸 : 推荐根据显示区域大小适配CDN规范中的最佳尺寸图片。
    • IconFont 正确使用(不引用无效资源) : 无线端只加载1个字体文件。
    • 合理使用(CSS3, SVG,ICONFONT)替代UI图片 :
    • 合理使用PNG GIF 等图片(如运营填写的图片地址): 不推荐商品图片,运营图片使用PNG,GIF 文件格式(不是扩展名)。
推荐使用

- [lib.img](http://gitlab.alibaba-inc.com/mtb/lib-img) 无前端框架依赖
- [km-lazyload](http://kimi.taobao.net/index.php#issues/81) kimi的组件
  • 域名收敛

    尽量控制在5个域名左右。

    • 图片同域 gw.alicdn.com
    • 静态脚本CSS同域 g.alicdn.com
    • 动态数据请求 使用MTOP
  • 加载性能

    • Gzip 静态资源
    • 首屏显示(必要)资源加载控制 :检测显示的图片是否在首屏区域内。
    • 首屏1个数据接口请求 :首屏需要的数据接口控制在1个。
    • 按需加载资源 :
    • 合并CSS,Javascript资源 :
    • 避免重定向 :如脚本资源301
    • 禁止图片空地址 :
    • Slider Banner 滚动时间不宜过快
    • 使用 lib.mtop 最新版本
  • 渲染性能

如有新的建议可以反馈给@晓田,或者提issues。


晓田 ronntx@gmail.com