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
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
180
Notification 3
kaiye
0
95
前端开发眼中的组件库
kaiye
3
410
Notification 2
kaiye
0
80
Other Decks in Technology
See All in Technology
2年でここまで成長!AWSで育てたAI Slack botの軌跡
iwamot
PRO
4
790
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
150
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.3k
AIのAIによるAIのための出力評価と改善
chocoyama
2
580
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
320
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
190
MySQL5.6から8.4へ 戦いの記録
kyoshidaxx
1
260
Prox Industries株式会社 会社紹介資料
proxindustries
0
330
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
150
Kotlin Coroutine Mechanisms: A Surprisingly Deep Rabbithole
amanda_hinchman
2
100
Wasm元年
askua
0
150
AI導入の理想と現実~コストと浸透〜
oprstchn
0
110
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
77
9.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Bash Introduction
62gerente
614
210k
KATA
mclloyd
30
14k
The Language of Interfaces
destraynor
158
25k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
950
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Optimizing for Happiness
mojombo
379
70k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
For a Future-Friendly Web
brad_frost
179
9.8k
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
谢谢