Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

kaiye
November 01, 2012

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

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

kaiye

November 01, 2012
Tweet

More Decks by kaiye

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

  3. 拍首为何改版

    View full-size slide

  4. 电商网站的两大核心数据
    • 流量(PV、UV)
    • 转化率

    View full-size slide

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

    View full-size slide

  6. 还有……

    View full-size slide

  7. 改版前后数据变化

    View full-size slide

  8. 拍首前端技术应用

    View full-size slide

  9. 语义化 Semantic

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. 拍首Microformat思路

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. 可用性 WAI

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. Fitts’s law
    = + log2
    (1 +


    )

    View full-size slide

  20. 请关注Label响应

    View full-size slide

  21. 操作路径优化

    View full-size slide

  22. Steering law
    = +

    ()

    = +


    View full-size slide

  23. 快速响应:三层结构不分离

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. 举手乊劳的无障碍
    • landmark
    • tabindex = “-1”
    • 模块标题与结构一致性

    • 《朋友网无障碍优化实践》
    • 《Web内容无障碍指南2.0》

    View full-size slide

  28. 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 full-size slide

  29. 性能优化 WPO

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  34. 减少请求
    举例一:同一模块一次请求

    View full-size slide

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

    View full-size slide

  36. 减少请求
    举例三:内联样式
    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 full-size slide

  37. 实时更新下的缓存策略
    • 静态资源长缓存
    • 劢态服务器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 full-size slide

  38. 拍首首屏加载时间

    View full-size slide

  39. 拍首重构乊路

    View full-size slide

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

    View full-size slide

  41. 怎样让用户爽?

    View full-size slide

  42. 怎样让自己爽?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. 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 full-size slide

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

    View full-size slide

  47. 《抬驴》

    View full-size slide

  48. 电商网站的两大核心数据
    • 流量(PV、UV)
    • 转化率

    View full-size slide

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

    View full-size slide

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

    View full-size slide