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
270
拍拍首页2012版前端技术应用
拍首改版动机、语义化、无障碍、性能优化、重构的价值
kaiye
November 01, 2012
Tweet
Share
More Decks by kaiye
See All by kaiye
大话前端黑客
kaiye
4
300
前端七年之路
kaiye
8
390
后IE6时代
kaiye
1
1.4k
CSS3/JS/Flash版动画角标的实现与比较
kaiye
0
130
GDD 2011 in Guangzhou
kaiye
0
1.8k
拍首2011前端技术分享
kaiye
1
170
Notification 3
kaiye
0
85
前端开发眼中的组件库
kaiye
3
340
Notification 2
kaiye
0
69
Other Decks in Technology
See All in Technology
第45回 MLOps 勉強会 - ML Test Score を用いた機械学習システムの定量的なアセスメント
masatakashiwagi
3
310
Semantic Kernel の Agent 機能試してみた!
okazuki
1
150
プロダクト価値を考えるための情報透明化とチーム文化づくり
nyo_taro
1
150
トークナイザー入門
payanotty
2
980
スクラム導入の舞台裏:QAエンジニアがスクラムマスターになるまで
bubo1201
0
240
kube-vipとkube-proxy置き換えCiliumを積んだ究極のK3sクラスタを建てる
logica0419
4
220
DenoでもViteしたい!インポートパスのエイリアスを指定してラクラクアプリ開発
bengo4com
2
2k
業務ヒアリングと知識の呪い
tamai_63
0
290
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
2
240
Oracle Database 23ai 新機能#4 Application Continuity
oracle4engineer
PRO
0
120
Perlで始めるeBPF: 自作Loaderの作り方 / Getting started with eBPF in Perl_How to create your own Loader
takehaya
1
930
リスクから学ぶKubernetesコンテナセキュリティ/k8s-risk-and-security
mochizuki875
1
330
Featured
See All Featured
Creatively Recalculating Your Daily Design Routine
revolveconf
217
12k
Speed Design
sergeychernyshev
22
490
The Cost Of JavaScript in 2023
addyosmani
43
5.9k
How STYLIGHT went responsive
nonsquared
95
5.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
10
1.4k
Statistics for Hackers
jakevdp
796
220k
GitHub's CSS Performance
jonrohan
1030
450k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Why Our Code Smells
bkeepers
PRO
334
57k
Building Applications with DynamoDB
mza
90
6k
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
谢谢