Submit Search
Upload
2011淘宝首页开发实践
•
114 likes
•
5,802 views
jay li
Follow
2011新年版淘宝首页开发实践总结
Read less
Read more
Design
Slideshow view
Report
Share
Slideshow view
Report
Share
1 of 51
Download now
Download to read offline
Recommended
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSS
Zoe Gillenwater
以 Vue / GSAP / D3 為核心的網頁視覺動態整合與架構設計 - 吳哲宇
以 Vue / GSAP / D3 為核心的網頁視覺動態整合與架構設計 - 吳哲宇
哲宇 吳
C3 웹기술로만드는모바일앱
C3 웹기술로만드는모바일앱
NAVER D2
Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3
M. Jackson Wilkinson
Incremental DOM and Recent Trend of Frontend Development
Incremental DOM and Recent Trend of Frontend Development
Akihiro Ikezoe
Edge of the Web
Edge of the Web
Todd Anglin
XPages Binary Output
XPages Binary Output
JohnFoldager
Maintainable Frontend Development with BEM
Maintainable Frontend Development with BEM
Varya Stepanova
Recommended
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSS
Zoe Gillenwater
以 Vue / GSAP / D3 為核心的網頁視覺動態整合與架構設計 - 吳哲宇
以 Vue / GSAP / D3 為核心的網頁視覺動態整合與架構設計 - 吳哲宇
哲宇 吳
C3 웹기술로만드는모바일앱
C3 웹기술로만드는모바일앱
NAVER D2
Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3
M. Jackson Wilkinson
Incremental DOM and Recent Trend of Frontend Development
Incremental DOM and Recent Trend of Frontend Development
Akihiro Ikezoe
Edge of the Web
Edge of the Web
Todd Anglin
XPages Binary Output
XPages Binary Output
JohnFoldager
Maintainable Frontend Development with BEM
Maintainable Frontend Development with BEM
Varya Stepanova
Developing Your Ultimate Package
Developing Your Ultimate Package
Simon Collison
Building complex and modular RIAs with OSGi and Flex
Building complex and modular RIAs with OSGi and Flex
CARA_Lyon
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Rachel Cherry
Html5
Html5
Chris Young
Basics of css and xhtml
Basics of css and xhtml
sagaroceanic11
Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011
Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011
Patrick Lauke
BP210 XPages: Enter The Dojo
BP210 XPages: Enter The Dojo
Paul Withers
Twitter bootstrap
Twitter bootstrap
Veck Hsiao
Intro to CSS3
Intro to CSS3
Denise Jacobs
Costruire applicazioni multi-tenant e piattaforme SaaS in PHP con Innomatic
Costruire applicazioni multi-tenant e piattaforme SaaS in PHP con Innomatic
Innoteam Srl
Building single page applications
Building single page applications
SC5.io
Easing ASP.NET Web and SQL Server Database Deployment withVS 2010 and MsDeploy
Easing ASP.NET Web and SQL Server Database Deployment withVS 2010 and MsDeploy
Eduardo Castro
Understanding Webkit Rendering
Understanding Webkit Rendering
Ariya Hidayat
How browser engines work?
How browser engines work?
haricot
HTML5
HTML5
Hatem Mahmoud
The Web Becomes Graceful
The Web Becomes Graceful
colorhook
Widget Summit 2008
Widget Summit 2008
Volkan Unsal
Hello websocket(cn)
Hello websocket(cn)
g65537
Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13
Walter Ebert
Oscon 20080724
Oscon 20080724
linkedin_resptest2
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Todd Anglin
The Dojo Build System
The Dojo Build System
klipstein
More Related Content
What's hot
Developing Your Ultimate Package
Developing Your Ultimate Package
Simon Collison
Building complex and modular RIAs with OSGi and Flex
Building complex and modular RIAs with OSGi and Flex
CARA_Lyon
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Rachel Cherry
Html5
Html5
Chris Young
Basics of css and xhtml
Basics of css and xhtml
sagaroceanic11
Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011
Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011
Patrick Lauke
BP210 XPages: Enter The Dojo
BP210 XPages: Enter The Dojo
Paul Withers
Twitter bootstrap
Twitter bootstrap
Veck Hsiao
Intro to CSS3
Intro to CSS3
Denise Jacobs
Costruire applicazioni multi-tenant e piattaforme SaaS in PHP con Innomatic
Costruire applicazioni multi-tenant e piattaforme SaaS in PHP con Innomatic
Innoteam Srl
Building single page applications
Building single page applications
SC5.io
Easing ASP.NET Web and SQL Server Database Deployment withVS 2010 and MsDeploy
Easing ASP.NET Web and SQL Server Database Deployment withVS 2010 and MsDeploy
Eduardo Castro
Understanding Webkit Rendering
Understanding Webkit Rendering
Ariya Hidayat
How browser engines work?
How browser engines work?
haricot
HTML5
HTML5
Hatem Mahmoud
What's hot
(15)
Developing Your Ultimate Package
Developing Your Ultimate Package
Building complex and modular RIAs with OSGi and Flex
Building complex and modular RIAs with OSGi and Flex
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Html5
Html5
Basics of css and xhtml
Basics of css and xhtml
Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011
Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011
BP210 XPages: Enter The Dojo
BP210 XPages: Enter The Dojo
Twitter bootstrap
Twitter bootstrap
Intro to CSS3
Intro to CSS3
Costruire applicazioni multi-tenant e piattaforme SaaS in PHP con Innomatic
Costruire applicazioni multi-tenant e piattaforme SaaS in PHP con Innomatic
Building single page applications
Building single page applications
Easing ASP.NET Web and SQL Server Database Deployment withVS 2010 and MsDeploy
Easing ASP.NET Web and SQL Server Database Deployment withVS 2010 and MsDeploy
Understanding Webkit Rendering
Understanding Webkit Rendering
How browser engines work?
How browser engines work?
HTML5
HTML5
Similar to 2011淘宝首页开发实践
The Web Becomes Graceful
The Web Becomes Graceful
colorhook
Widget Summit 2008
Widget Summit 2008
Volkan Unsal
Hello websocket(cn)
Hello websocket(cn)
g65537
Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13
Walter Ebert
Oscon 20080724
Oscon 20080724
linkedin_resptest2
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Todd Anglin
The Dojo Build System
The Dojo Build System
klipstein
Modern UI Development With Node.js
Modern UI Development With Node.js
Ryan Anklam
Javascript Bundling and modularization
Javascript Bundling and modularization
stbaechler
Developing web applications in 2010
Developing web applications in 2010
Ignacio Coloma
This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existin...
This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existin...
Wolf Loescher
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Sadaaki HIRAI
Web 2.0 Expo: Even Faster Web Sites
Web 2.0 Expo: Even Faster Web Sites
Steve Souders
Html5
Html5
Ben MacNeill
HTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game Tech
vincent_scheib
Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017
Matt Raible
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)
Adam Lu
HTML5 and Joomla! 2.5 Template
HTML5 and Joomla! 2.5 Template
Marvelic Engine Co., Ltd.
Technical Tips: Visual Regression Testing and Environment Comparison with Bac...
Technical Tips: Visual Regression Testing and Environment Comparison with Bac...
Building Blocks
Web開発の技術選び、 好き嫌いでやってませんか 〜技術選びで注目すべきポイントとは〜
Web開発の技術選び、 好き嫌いでやってませんか 〜技術選びで注目すべきポイントとは〜
Yuki Okada
Similar to 2011淘宝首页开发实践
(20)
The Web Becomes Graceful
The Web Becomes Graceful
Widget Summit 2008
Widget Summit 2008
Hello websocket(cn)
Hello websocket(cn)
Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13
Oscon 20080724
Oscon 20080724
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
The Dojo Build System
The Dojo Build System
Modern UI Development With Node.js
Modern UI Development With Node.js
Javascript Bundling and modularization
Javascript Bundling and modularization
Developing web applications in 2010
Developing web applications in 2010
This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existin...
This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existin...
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Web 2.0 Expo: Even Faster Web Sites
Web 2.0 Expo: Even Faster Web Sites
Html5
Html5
HTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game Tech
Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)
HTML5 and Joomla! 2.5 Template
HTML5 and Joomla! 2.5 Template
Technical Tips: Visual Regression Testing and Environment Comparison with Bac...
Technical Tips: Visual Regression Testing and Environment Comparison with Bac...
Web開発の技術選び、 好き嫌いでやってませんか 〜技術選びで注目すべきポイントとは〜
Web開発の技術選び、 好き嫌いでやってませんか 〜技術選びで注目すべきポイントとは〜
More from jay li
犀牛书第六版
犀牛书第六版
jay li
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
jay li
Jswebapps
Jswebapps
jay li
潜力无限的编程语言Javascript
潜力无限的编程语言Javascript
jay li
Responsive Web UI Design
Responsive Web UI Design
jay li
深入剖析浏览器
深入剖析浏览器
jay li
HTML/CSS/JS基础
HTML/CSS/JS基础
jay li
淘宝前端技术巡礼
淘宝前端技术巡礼
jay li
F2e security
F2e security
jay li
中国元素在设计中的应用 -如瑟
中国元素在设计中的应用 -如瑟
jay li
卫银霞 -统计数字会撒谎
卫银霞 -统计数字会撒谎
jay li
编码大全 拔赤
编码大全 拔赤
jay li
小控件、大学问
小控件、大学问
jay li
Mobile UI design and Developer
Mobile UI design and Developer
jay li
Javascript autoload
Javascript autoload
jay li
Html5form
Html5form
jay li
Slide
Slide
jay li
Js doc toolkit
Js doc toolkit
jay li
新业务新员工培训 Banner设计
新业务新员工培训 Banner设计
jay li
夏之 专题设计
夏之 专题设计
jay li
More from jay li
(20)
犀牛书第六版
犀牛书第六版
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
Jswebapps
Jswebapps
潜力无限的编程语言Javascript
潜力无限的编程语言Javascript
Responsive Web UI Design
Responsive Web UI Design
深入剖析浏览器
深入剖析浏览器
HTML/CSS/JS基础
HTML/CSS/JS基础
淘宝前端技术巡礼
淘宝前端技术巡礼
F2e security
F2e security
中国元素在设计中的应用 -如瑟
中国元素在设计中的应用 -如瑟
卫银霞 -统计数字会撒谎
卫银霞 -统计数字会撒谎
编码大全 拔赤
编码大全 拔赤
小控件、大学问
小控件、大学问
Mobile UI design and Developer
Mobile UI design and Developer
Javascript autoload
Javascript autoload
Html5form
Html5form
Slide
Slide
Js doc toolkit
Js doc toolkit
新业务新员工培训 Banner设计
新业务新员工培训 Banner设计
夏之 专题设计
夏之 专题设计
Recently uploaded
Cheap Rate ➥8448380779 ▻Call Girls In Iffco Chowk Gurgaon
Cheap Rate ➥8448380779 ▻Call Girls In Iffco Chowk Gurgaon
Delhi Call girls
CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service 🧵
CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service 🧵
anilsa9823
Fashion trends before and after covid.pptx
Fashion trends before and after covid.pptx
VanshNarang19
escort service sasti (*~Call Girls in Prasad Nagar Metro❤️9953056974
escort service sasti (*~Call Girls in Prasad Nagar Metro❤️9953056974
9953056974 Low Rate Call Girls In Saket, Delhi NCR
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
kumaririma588
VIP Call Girls Service Mehdipatnam Hyderabad Call +91-8250192130
VIP Call Girls Service Mehdipatnam Hyderabad Call +91-8250192130
Suhani Kapoor
Kindergarten Assessment Questions Via LessonUp
Kindergarten Assessment Questions Via LessonUp
mainac1
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
Call Girls in Nagpur High Profile
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
tbatkhuu1
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
Yantram Animation Studio Corporation
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...
babafaisel
VIP Kolkata Call Girl Gariahat 👉 8250192130 Available With Room
VIP Kolkata Call Girl Gariahat 👉 8250192130 Available With Room
divyansh0kumar0
VIP College Call Girls Gorakhpur Bhavna 8250192130 Independent Escort Service...
VIP College Call Girls Gorakhpur Bhavna 8250192130 Independent Escort Service...
Suhani Kapoor
Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Call Girls in Nagpur High Profile
Cheap Rate Call girls Malviya Nagar 9205541914 shot 1500 night
Cheap Rate Call girls Malviya Nagar 9205541914 shot 1500 night
Delhi Call girls
young call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Service
young call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Service
9953056974 Low Rate Call Girls In Saket, Delhi NCR
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
home
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
ranjana rawat
Cheap Rate ➥8448380779 ▻Call Girls In Huda City Centre Gurgaon
Cheap Rate ➥8448380779 ▻Call Girls In Huda City Centre Gurgaon
Delhi Call girls
NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...
NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...
Amil baba
Recently uploaded
(20)
Cheap Rate ➥8448380779 ▻Call Girls In Iffco Chowk Gurgaon
Cheap Rate ➥8448380779 ▻Call Girls In Iffco Chowk Gurgaon
CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service 🧵
CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service 🧵
Fashion trends before and after covid.pptx
Fashion trends before and after covid.pptx
escort service sasti (*~Call Girls in Prasad Nagar Metro❤️9953056974
escort service sasti (*~Call Girls in Prasad Nagar Metro❤️9953056974
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
VIP Call Girls Service Mehdipatnam Hyderabad Call +91-8250192130
VIP Call Girls Service Mehdipatnam Hyderabad Call +91-8250192130
Kindergarten Assessment Questions Via LessonUp
Kindergarten Assessment Questions Via LessonUp
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...
VIP Kolkata Call Girl Gariahat 👉 8250192130 Available With Room
VIP Kolkata Call Girl Gariahat 👉 8250192130 Available With Room
VIP College Call Girls Gorakhpur Bhavna 8250192130 Independent Escort Service...
VIP College Call Girls Gorakhpur Bhavna 8250192130 Independent Escort Service...
Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Cheap Rate Call girls Malviya Nagar 9205541914 shot 1500 night
Cheap Rate Call girls Malviya Nagar 9205541914 shot 1500 night
young call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Service
young call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Service
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
Cheap Rate ➥8448380779 ▻Call Girls In Huda City Centre Gurgaon
Cheap Rate ➥8448380779 ▻Call Girls In Huda City Centre Gurgaon
NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...
NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...
2011淘宝首页开发实践
1.
2011淘宝首页开发实践 • 拔赤 http://jayli.github.com
2011-01-14
2.
拔赤 - 前端开发工程师 2008.4
- 2009.9 Yahoo! 2009.9 - present Taobao
3.
http://www.taobao.com
4.
一、从单兵作战到团队开发
5.
约定“词汇表” css/js命名规则源自词汇表
6.
各自独立的demo.html 统一的layout.html 通过SSI调用各模块demo
7.
搭建本地a.tbcdn.cn环境,模拟cdn的combo http://wiki.ued.taobao.net/doku.php?id=ued.bj:f2e:tbcdn http://www.slideshare.net/lijing00333/yui-combo?from=ss_embed
8.
基于kissy 1.1.6 各自使用沙箱,避免全局变量冲突
9.
使用打包脚本 build.sh 统一发布js/css
10.
小结: • 约定词汇表
• 基于 SSI 和 combo 的本地开发环境 • 打包脚本 目的:减少冲突
11.
ref • http://wiki.ued.taobao.net/doku.php?id=ued.
bj:f2e:tbcdn • http://www.slideshare.net/lijing00333/yui- combo?from=ss_embed
12.
二、摆脱栅格的束缚
13.
栅格 “万变”的layout布局?
14.
淘宝现有 950 栅格原型
15.
290
990 栅格 30(列宽) x 25(列) + 10(槽宽) x 24(槽数)
16.
300
1000px “栅格”? C(列宽) x n(列) + 10(槽宽) x (n-1)(槽数) n∈[15,40],C∈Z 无解
17.
设计和实现都不必拘泥于栅格系统
18.
典型的双飞翼布局,无确切语义的多余标签
19.
标识位置的“语义” => 描述内容的“语义”
绝对定位,简单高效
20.
ref • http://grid.mindplay.dk/ • http://ued.taobao.com/blog/2008/10/22/grid
_system_research_1/ • http://ued.taobao.com/blog/2008/10/22/grid _system_research_2/ • http://ued.taobao.com/blog/2008/10/22/grid _system_research_3/ • http://ued.taobao.com/blog/2008/10/22/grid _system_research_4
21.
三、从 HTML4 到
HTML5
22.
IE 9
Chrome 4+ Safari 4+ Firefox 3.6+ Opera 10+
23.
让ie6/7/8 支持 HTML5
标签 <html> <head> <style> figure { color:orange; } </style> <script>document.createElement("figure");</script> </head> <body> <figure> 淘宝网! </figure> </body> </html>
24.
25.
Let’s Do it!
26.
淘宝网 ie6/7/8 禁用脚本访问量占
0.1%+ 如果ie6/7/8禁用脚本?
27.
<!--[if lte IE
8]> <noscript> <style> .html5-wrappers {display:none !important;} </style> <div class="ie-noscript-warning"> 您的浏览器禁用了脚本,请<a href="">查看这里</a>来启用脚本! 或者<a href="/?noscript=1">继续访问</a>. </div> </noscript> <![endif]-->
28.
如果禁用了 ie 脚本
29.
IE 禁用脚本访问 /?noscript=1 Firefox 禁用脚本 Opera
禁用脚本
30.
IE 6/7/8 禁用脚本用户的选择
• 跟随向导启用脚本 • 进入 html4 标签页面
31.
根据可用性设计的思想,这个时候,你应该 告诉用户,哪些事是不对的,以及怎样纠正, 这种做法被称之为"防御性设计" (Defensive Design)。
—— Joel Spolsky
32.
ref • http://ejohn.org/blog/html5-shiv/ • http://www.alistapart.com/articles/previewofh
tml5 • http://www.impressivewebs.com/demo- files/easy-html5-template/ • http://www.facebook.com/home.php?_fb_no script=1
33.
四、fast by default
34.
我们过于依赖 Yslow 和
pageSpeed?
35.
却忽视了影响体验最重要的因素:时间!
36.
目标:将 first rendering(绿)
提前
37.
传统优化策略依然适用
• 内容的延时加载 • Dom节点的延时渲染 • 函数的延时执行 • 将 sprites 载入提前 • 缓存、combo…
38.
最易被忽视的真相:JavaScript 执行效率
• 首页去 Tbra • 减少对DomReady的依赖 • 重构臃肿的逻辑
39.
客户端 CPU 损耗对
FirstRendering 的影响 2010c (旧)版首页 CPU 消耗 2011a (新)版首页 CPU 消耗
40.
E-Shopping 网站渲染速度
0.5s 1.0s 1.5s 2.0s 3s ebay amazone dangdang buy360 taobao
41.
ref • http://v.youku.com/v_show/id_XMjM2MTkxNTI
w.html • http://www.webpagetest.org/result/110110_0 J_879P • http://www.webpagetest.org/result/110110_7 N_87A7
42.
五、其他细节
43.
必要的菜单延时
44.
/* except for
ie 6/7/8 */ .J_slide li { -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; height:20px; } 圆角的实现
45.
/* 圆角 for
ie6,7,8 use vml */ var css = document.createStyleSheet(); css.addRule("v:roundrect", "behavior: url(#default#VML);display:inline-block;"); var rect = document.createElement('v:roundrect'); setAttribute(rect, { arcsize:"20px", stroked:false }); rect.css({ width:"20px",height:"20px", antialias:true }); IE 6/7/8使用js实现圆角
46.
首页开发文档
47.
Just for fun…
48.
ref • http://msdn.microsoft.com/en-
us/library/bb250524%28v=vs.85%29.aspx • http://wiki.ued.taobao.net/doku.php?id=team :udc:fp_2011a_dev:start
49.
鸣谢!
50.
昂首挺胸 迈进HTML5时代!
51.
拔赤
bachi@taobao.com http://jayli.github.com
Download now