Mobile H5 性能优化

Mobile Performance Optimization

Transcript

1. Mobile H5性能优化 淘宝航旅⽆无线前端⼩小组
2. Mobile H5性能优化 淘宝航旅⽆无线前端⼩小组
3. Why • 蜗⽜牛的⺴⽹网速 • 可怜的内存
4. ⺴⽹网络分布
5. 2012全国运营商3G⺴⽹网速对⽐比
6. https://speakerdeck.com/d2forum/ding-zhi-ban-she-ji-kai-fa-vsxiang-ying-shi-she-ji- kai-fa-zhi-xing-neng-ji-liu-liang
9. 性能优化⺫⽬目标 更⼩小 + 更快
13. 怎么做
14. Everything you’ve learned still applies 学到的知识不会过时 怎么做
15. ⽂文件加载 • 减少请求（combo, css-sprites） • ⽆无阻塞加载（异步js,css加载） • ⽼老⽣生常谈...
16. http://mobitest.akamai.com/m/index.cgi
17. 未优化前
18. combo+异步后
19. combo+异步后
20. combo+异步后 样式表阻⽌止脚本执⾏行!!!
21. 样式表放在head最后⾯面
22. 图⽚片优化
23. 图⽚片优化 552.4K!!!
24. Data URI
25. Data URI
26. Data URI 1920.6K!!!
27. Data URI • 减少图像HTTP请求 • 体积增⼤大（约30%，gzip后约10%） • 不能被缓存
28. 最佳实践 体积较⼩小并且重复率低的图⽚片使⽤用Data URI进⾏行 编码，⽐比如⼩小icon等
29. 图⽚片压缩 http://tinypng.org/
30. 图⽚片压缩
31. 图⽚片压缩 210.9K!!!
32. 压缩⼯工具 http://tinypng.org/ imageAlpha imageOptim JPEGmini
33. 压缩⼯工具 http://tinypng.org/ imageAlpha imageOptim JPEGmini $ npm install -g imageoptim-cli $ imageOptim -j -a -q -d path/to/images
34. 代码瘦⾝身 http://a.tbcdn.cn/mw/base/styles/tms_h5.css
35. 代码瘦⾝身 http://a.tbcdn.cn/mw/base/styles/tms_h5.css
38. 我们需要优化代码
39. CSS优化 • 选择器优化 • 不要滥⽤用CSS3特性 • “position:fixed” • repaint & reflow • ...
40. 选择器优化 https://speakerdeck.com/jonrohan/githubs-css-performance https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS
41. 不要滥⽤用特性 • box-shadow/text-shadow • transition/transform • background: gradient(...) • ... 滥⽤用CSS3特性会导致⻚页⾯面渲染变慢，滚动效果卡顿（⽐比如说...⼩小⽶米2）
42. 不要滥⽤用特性 • box-shadow/text-shadow • transition/transform • background: gradient(...) • ... 滥⽤用CSS3特性会导致⻚页⾯面渲染变慢，滚动效果卡顿（⽐比如说...⼩小⽶米2）
43. 不⽀支持position:fixed?
44. 不⽀支持position:fixed?
45. position:fixed http://bradfrostweb.com/blog/post/mobile-web-problems/#fixed
46. 慎⽤用position:fixed • 部分低版本系统不⽀支持 • 可视范围更⼩小 • html:100%+absolute+iscroll，代码量增加
47. js优化 • 尽量⽤用原⽣生代码 • DOM选择器性能优化 • DOM节点缓存 • 注意内存释放 • ...
48. 尽量⽤用原⽣生代码 https://speakerdeck.com/yaypie/when-not-to-use-yui var myObj = {}; var myObj = Y.Base.create(...);
49. 尽量⽤用原⽣生代码 https://speakerdeck.com/yaypie/when-not-to-use-yui var myObj = {}; var myObj = Y.Base.create(...);
50. https://speakerdeck.com/lijing00333/css-selector-performance
51. 更多 • ⺴⽹网络监控 • 缓存 • 统计
52. ⺴⽹网络监控 2G/3G/4G/Wifi?
53. 缓存 • APP存在缓存问题 • APP退出之后清空缓存
54. 统计 • 优化需要更多的数据统计⽀支持 • CNZZ，⾕谷歌分析，淘宝⽆无线指数
55. 总结 如何做好⽆无线端的性能优化?
56. 总结 • 不留余地 • 绞尽脑汁 • 鸡蛋挑⾻骨头 • 不择⼿手段 • 令⼈人发指 • 测试，测试，测试... • ...
57. to be continued.. 开发调试篇
58. The End.