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
280
拍拍首页2012版前端技术应用
拍首改版动机、语义化、无障碍、性能优化、重构的价值
kaiye
November 01, 2012
Tweet
Share
More Decks by kaiye
See All by kaiye
大话前端黑客
kaiye
4
310
前端七年之路
kaiye
8
400
后IE6时代
kaiye
1
1.4k
CSS3/JS/Flash版动画角标的实现与比较
kaiye
0
130
GDD 2011 in Guangzhou
kaiye
0
1.8k
拍首2011前端技术分享
kaiye
1
180
Notification 3
kaiye
0
90
前端开发眼中的组件库
kaiye
3
380
Notification 2
kaiye
0
74
Other Decks in Technology
See All in Technology
どちらかだけじゃもったいないかも? ECSとEKSを適材適所で併用するメリット、運用課題とそれらの対応について
tk3fftk
2
210
役員・マネージャー・著者・エンジニアそれぞれの立場から見たAWS認定資格
nrinetcom
PRO
4
6.4k
あなたが人生で成功するための5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
310
エンジニア主導の企画立案を可能にする組織とは?
recruitengineers
PRO
1
250
Amazon Aurora のバージョンアップ手法について
smt7174
2
160
クラウド食堂とは?
hiyanger
0
120
急成長する企業で作った、エンジニアが輝ける制度/ 20250227 Rinto Ikenoue
shift_evolve
0
160
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
270
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
8
740
IAMのマニアックな話2025
nrinetcom
PRO
6
1.3k
【内製開発Summit 2025】イオンスマートテクノロジーの内製化組織の作り方/In-house-development-summit-AST
aeonpeople
2
990
偏光画像処理ライブラリを作った話
elerac
1
180
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
244
12k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Practical Orchestrator
shlominoach
186
10k
Become a Pro
speakerdeck
PRO
26
5.2k
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Visualization
eitanlees
146
15k
Building Your Own Lightsaber
phodgson
104
6.2k
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
谢谢