拍拍首页2012版前端技术应用

拍首改版动机、语义化、无障碍、性能优化、重构的价值

Transcript

1. 拍拍首页2012版前端技术应用
   kaiye@ecd
   

   View Slide

2. GG
   

   View Slide

3. 提纲
   • 拍首为何改版
   • 拍首前端技术应用
   – Semantic
   – WAI
   – WPO
   • 拍首重构乊路
   

   View Slide

4. 拍首为何改版
   

   View Slide

5. 电商网站的两大核心数据
   • 流量（PV、UV）
   • 转化率
   

   View Slide

6. 给网购引流
   强化分类
   导航入口
   待办入口
   今日特价
   团购
   促销入口
   个性化推荐模块
   分类导航
   优质单品/广告位
   热门活劢
   

   View Slide

7. 还有……
   

   View Slide

8. 改版前后数据变化
   

   View Slide

9. 拍首前端技术应用
   

   View Slide

10. 语义化 Semantic
    

    View Slide

11. 语义化 Semantic
    • HTML5语义标签
    • Microformat
    • SEO
    

    View Slide

12. HTML5语义标签
    • 拍首HTML5语义标签引入形式
    • 为什么要去HTML5语义标签？
    • 为什么要引入HTML5语义标签？
    • XHTML Is Dead
    • Rough consensus and running code
    

    View Slide

13. 拍首Microformat思路
    

    View Slide

14. Microdata
    • Structured Data Testing Tool
    • Schema.org & Microdata
    • High Cohesion & Low/Loose coupling
    

    View Slide

15. SEO
    • 关键字优化？呵呵
    • 百度数据开放平台
    content="format=html5;url=http://m.buy.qq.com/?t=t&gcfa=
    1410064">
    • 苹果Smart App Banners
    
    

    View Slide

16. 语义有那么重要么？SURE
    • 蔡学镛《IT命名学》
    • 语义网
    • 坊间流传拍拍没做成功的原因……
    • “宁可花半小时想一个名字，也不要让别人花半小时来猜这个名字的
    含义。”——janlay
    • 《9 Confusing Naming Conventions for Beginners》
    

    View Slide

17. 可用性 WAI
    

    View Slide

18. 可用性 WAI
    • 交互响应优化
    • 举手乊劳的无障碍
    • CGI容灾机制
    

    View Slide

19. 响应区的大小与连续性
    

    View Slide

20. Fitts’s law
    = + log2
    (1 +
    
    
    )
    

    View Slide

21. 请关注Label响应
    

    View Slide

22. 操作路径优化
    

    View Slide

23. Steering law
    = +
    
    ()
    
    = +
    
    
    

    View Slide

24. 快速响应：三层结构不分离
    

    View Slide

25. 设计的作用在亍寻找功能和社会间的接
    点。在功能足以说明一切的前提下，装饰成
    分是可以节制的。
    ——田中一光《设计的觉醒》
    

    View Slide

26. 技术的作用在亍实现功能和社会间的接
    点。在功能足以说明一切的前提下，代码洁
    癖是可以节制的。
    ——田中一光《设计的觉醒》
    

    View Slide

27. 可用性 WAI
    • 交互响应优化
    • 举手乊劳的无障碍
    • CGI容灾机制
    

    View Slide

28. 举手乊劳的无障碍
    • landmark
    • tabindex = “-1”
    • 模块标题与结构一致性
    •
    • 《朋友网无障碍优化实践》
    • 《Web内容无障碍指南2.0》
    

    View Slide

29. CGI容灾机制
    $batchBiXuanPin({
    idList: [61],
    staticFileUrl:
    "http://static.paipaiimg.com/sinclude/tws/xpfre
    e/2012/8/xpfreef61.js",
    onSuccess : function(){
    console.log(this.dataList);
    }
    });
    p_batchBiXuanPin_byCgi = true
    

    View Slide

30. 性能优化 WPO
    

    View Slide

31. 电商网站WPO核心
    • 图片质量与大小的平衡
    • 海量并发下的请求优化
    • 实时更新下的缓存策略
    

    View Slide

32. 图片质量与大小的平衡
    

    View Slide

33. 海量并发下的请求优化
    • 加载优化
    • 减少请求
    

    View Slide

34. 加载优化
    • 延迟加载
    – 巨无霸、轮播 back_src
    – 所有商品分类
    • 滚屏加载 $scroll
    – 类目楼商品
    – 活劢、广告
    • 按需加载
    – 包邮热卖
    

    View Slide

35. 减少请求
    举例一：同一模块一次请求
    

    View Slide

36. 减少请求
    举例二：新用户不检查登录态
    if (uin && skey){
    t = Math.random();
    $loadScript("http://member.paipai.com/cgi-
    bin/onlinechecker/GetOnlineInfo?callback=chkLog
    inCallBack&t=" + t);
    }
    

    View Slide

37. 减少请求
    举例三：内联样式
    28K = 1ReqConect = 0.1s
    (0.1 + 0.1F/28)*ℎ
    + 0.1*304
    + 0*ℎ
    F < 28New/Old，New > F/(F + 28)
    拍首，新用户69%，老用户31%，index.css Gzip 14K
    F < 62K ， New > 33%
    0.1F / 28 (0.1 + 0.1F/28)*New + (0 + 0)*Old
    <
    

    View Slide

38. 实时更新下的缓存策略
    • 静态资源长缓存
    • 劢态服务器Gzip
    • 反向代理缓存 / CMEM Cache
    • CGI请求缓存
    var date = new Date();
    $loadScript("http://static.paipaiimg.com/js/pp.
    noticeBoard.js?t="+date.getMonth()+date.getDate
    ()+date.getHours());
    

    View Slide

39. 拍首首屏加载时间
    

    View Slide

40. 拍首重构乊路
    

    View Slide

41. 技术的价值：人的角度
    • 用户爽
    • 自己爽
    • 老板爽
    

    View Slide

42. 怎样让用户爽？
    

    View Slide

43. 怎样让自己爽？
    

    View Slide

44. 用工具
    • Super App，dovechen
    • Npp + NppFTP（编辑器+FTP插件）
    • FTools，joyma
    • FastStone Capture
    • CssGaga，ytzong
    • var express = require("express");
    express().use(express.static(__dirname)).listen(80);
    

    View Slide

45. 造工具
    

    View Slide

46. 怎样让老板爽？
    • 延长工作时间
    • 提高劳劢生产率
    

    View Slide

47. Little Fish
    • PPMS可视化编辑插件，brianliu
    • javascript:(function(q){!!q?q.catchFish():(function(d,j
    ){j=d.createElement('script');j.src='//ppms.paipaioa.co
    m/js/pageInit.js';d.getElementsByTagName('head')[0].app
    endChild(j)})(document)})(window._littleFish)
    

    View Slide

48. 技术的价值：事的角度
    工作
    效率
    产品
    体验
    页面
    性能
    代码
    质量
    

    View Slide

49. 《抬驴》
    

    View Slide

50. 电商网站的两大核心数据
    • 流量（PV、UV）
    • 转化率
    

    View Slide

51. 拍首前端技术展望
    • 无障碍体验
    • 个性化运营
    • 响应式设计
    – 268种，1366x768，22%
    – 74% >= 1280px
    – 99% >= 1024px
    

    View Slide

52. 提纲
    • 拍首为何改版
    • 拍首前端技术应用
    – Semantic
    – WAI
    – WPO
    • 拍首重构乊路
    

    View Slide

53. Q&A
    

    View Slide

54. 谢谢
    

    View Slide