Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
拍拍首页2012版前端技术应用
Search
kaiye
November 01, 2012
Technology
2
290
拍拍首页2012版前端技术应用
拍首改版动机、语义化、无障碍、性能优化、重构的价值
kaiye
November 01, 2012
Tweet
Share
More Decks by kaiye
See All by kaiye
大话前端黑客
kaiye
4
320
前端七年之路
kaiye
8
410
后IE6时代
kaiye
1
1.4k
CSS3/JS/Flash版动画角标的实现与比较
kaiye
0
150
GDD 2011 in Guangzhou
kaiye
0
1.8k
拍首2011前端技术分享
kaiye
1
190
Notification 3
kaiye
0
97
前端开发眼中的组件库
kaiye
3
430
Notification 2
kaiye
0
84
Other Decks in Technology
See All in Technology
【Oracle Cloud ウェビナー】クラウド導入に「専用クラウド」という選択肢、Oracle AlloyとOCI Dedicated Region とは
oracle4engineer
PRO
3
120
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
240
PLaMoの事後学習を支える技術 / PFN LLMセミナー
pfn
PRO
9
4k
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
shift_evolve
PRO
4
360
Geospatialの世界最前線を探る [2025年版]
dayjournal
1
190
Access-what? why and how, A11Y for All - Nordic.js 2025
gdomiciano
1
130
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか?
muziyoshiz
1
210
「れきちず」のこれまでとこれから - 誰にでもわかりやすい歴史地図を目指して / FOSS4G 2025 Japan
hjmkth
1
210
Wasmのエコシステムを使った ツール作成方法
askua
0
110
【Kaigi on Rails 事後勉強会LT】MeはどうしてGirlsに? 私とRubyを繋いだRail(s)
joyfrommasara
0
220
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
miyatakoji
1
160
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
110
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
GitHub's CSS Performance
jonrohan
1032
470k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.9k
Optimizing for Happiness
mojombo
379
70k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Balancing Empowerment & Direction
lara
4
680
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Code Reviewing Like a Champion
maltzj
525
40k
A Tale of Four Properties
chriscoyier
160
23k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Transcript
拍拍首页2012版前端技术应用 kaiye@ecd
GG
提纲 • 拍首为何改版 • 拍首前端技术应用 – Semantic – WAI –
WPO • 拍首重构乊路
拍首为何改版
电商网站的两大核心数据 • 流量(PV、UV) • 转化率
给网购引流 强化分类 导航入口 待办入口 今日特价 团购 促销入口 个性化推荐模块 分类导航 优质单品/广告位
热门活劢
还有……
改版前后数据变化
拍首前端技术应用
语义化 Semantic
语义化 Semantic • HTML5语义标签 • Microformat • SEO
HTML5语义标签 • 拍首HTML5语义标签引入形式 • 为什么要去HTML5语义标签? • 为什么要引入HTML5语义标签? • XHTML Is
Dead • Rough consensus and running code
拍首Microformat思路
Microdata • Structured Data Testing Tool • Schema.org & Microdata
• High Cohesion & Low/Loose coupling
SEO • 关键字优化?呵呵 • 百度数据开放平台 <meta http-equiv="mobile-agent" content="format=html5;url=http://m.buy.qq.com/?t=t&gcfa= 1410064"> •
苹果Smart App Banners <meta name="apple-itunes-app" content="app- id=425692044"/>
语义有那么重要么?SURE • 蔡学镛《IT命名学》 • 语义网 • 坊间流传拍拍没做成功的原因…… • “宁可花半小时想一个名字,也不要让别人花半小时来猜这个名字的 含义。”——janlay
• 《9 Confusing Naming Conventions for Beginners》
可用性 WAI
可用性 WAI • 交互响应优化 • 举手乊劳的无障碍 • CGI容灾机制
响应区的大小与连续性
Fitts’s law = + log2 (1 + )
请关注Label响应
操作路径优化
Steering law = + () = +
快速响应:三层结构不分离
设计的作用在亍寻找功能和社会间的接 点。在功能足以说明一切的前提下,装饰成 分是可以节制的。 ——田中一光《设计的觉醒》
技术的作用在亍实现功能和社会间的接 点。在功能足以说明一切的前提下,代码洁 癖是可以节制的。 ——田中一光《设计的觉醒》
可用性 WAI • 交互响应优化 • 举手乊劳的无障碍 • CGI容灾机制
举手乊劳的无障碍 • landmark • tabindex = “-1” • 模块标题与结构一致性 •
• 《朋友网无障碍优化实践》 • 《Web内容无障碍指南2.0》
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
性能优化 WPO
电商网站WPO核心 • 图片质量与大小的平衡 • 海量并发下的请求优化 • 实时更新下的缓存策略
图片质量与大小的平衡
海量并发下的请求优化 • 加载优化 • 减少请求
加载优化 • 延迟加载 – 巨无霸、轮播 back_src – 所有商品分类 • 滚屏加载
$scroll – 类目楼商品 – 活劢、广告 • 按需加载 – 包邮热卖
减少请求 举例一:同一模块一次请求
减少请求 举例二:新用户不检查登录态 if (uin && skey){ t = Math.random(); $loadScript("http://member.paipai.com/cgi-
bin/onlinechecker/GetOnlineInfo?callback=chkLog inCallBack&t=" + t); }
减少请求 举例三:内联样式 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 <
实时更新下的缓存策略 • 静态资源长缓存 • 劢态服务器Gzip • 反向代理缓存 / CMEM Cache
• CGI请求缓存 var date = new Date(); $loadScript("http://static.paipaiimg.com/js/pp. noticeBoard.js?t="+date.getMonth()+date.getDate ()+date.getHours());
拍首首屏加载时间
拍首重构乊路
技术的价值:人的角度 • 用户爽 • 自己爽 • 老板爽
怎样让用户爽?
怎样让自己爽?
用工具 • Super App,dovechen • Npp + NppFTP(编辑器+FTP插件) • FTools,joyma
• FastStone Capture • CssGaga,ytzong • var express = require("express"); express().use(express.static(__dirname)).listen(80);
造工具
怎样让老板爽? • 延长工作时间 • 提高劳劢生产率
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)
技术的价值:事的角度 工作 效率 产品 体验 页面 性能 代码 质量
《抬驴》
电商网站的两大核心数据 • 流量(PV、UV) • 转化率
拍首前端技术展望 • 无障碍体验 • 个性化运营 • 响应式设计 – 268种,1366x768,22% –
74% >= 1280px – 99% >= 1024px
提纲 • 拍首为何改版 • 拍首前端技术应用 – Semantic – WAI –
WPO • 拍首重构乊路
Q&A
谢谢