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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

拍首为何改版

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

还有……

Slide 8

Slide 8 text

改版前后数据变化

Slide 9

Slide 9 text

拍首前端技术应用

Slide 10

Slide 10 text

语义化 Semantic

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

拍首Microformat思路

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

SEO • 关键字优化？呵呵 • 百度数据开放平台 • 苹果Smart App Banners

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

可用性 WAI

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

响应区的大小与连续性

Slide 20

Slide 20 text

Fitts’s law = + log2 (1 + )

Slide 21

Slide 21 text

请关注Label响应

Slide 22

Slide 22 text

操作路径优化

Slide 23

Slide 23 text

Steering law = + () = +

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

性能优化 WPO

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

图片质量与大小的平衡

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

减少请求举例三：内联样式 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 <

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

拍首首屏加载时间

Slide 40

Slide 40 text

拍首重构乊路

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

怎样让用户爽？

Slide 43

Slide 43 text

怎样让自己爽？

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

造工具

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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)

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

《抬驴》

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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