网站运营 | 站长学院 | 技术文档 | 成语 | 歇后语 | 桌面壁纸 | 帝国时代 | 代码收藏 | IP地址查询 | 生活百科 | 生日密码 | CSS压缩 | 用户评论

拔赤:淘宝2011新版首页开发实践

【 作者:拔赤 更新时间:2011-01-12 | 字体:
[导读]新年钟声刚过,淘宝新版首页全“心”上线了<<,这次设计大胆的将布局从 960px 伸展至 1000px<,页面更通透<,新首页更大范围的实践了 HTML5 和 CSS3<,全面兼容 iPad,并在可访问性方面有了更多积极的尝试。对于...

新年钟声刚过<<,淘宝新版首页全“心”上线了<<,这次设计大胆的将布局从 960px 伸展至 1000px,页面更通透<,新首页更大范围的实践了 HTML5 CSS3,全面兼容 iPad,并在可访问性方面有了更多积极的尝试<<。对于我来讲<,这次开发着实是一次奇妙的经历<<,也让我对可访问性<、html5 和性能优化有了新的认识<。
 

其实 html5 并不是那么遥不可及<,现在也有着不少针对 pc 终端的 html5 template<<,如果不甚考虑 ie6/7/8 禁用脚本的情况<,完全可以放手运用 html5 标签。那么针对那些 ie6/7/8 禁用脚本的用户<,我们参照了 facebook 的做法,即引导用户进入带有noscript标识的 “/?_fb_noscript=1”页面<<,用 html4 标签替换 html5 标签<,这要比为了保持兼容性而写大量 hack 的做法更轻便一些<。

如果你足够细心,就会发现新首页并未完全遵循“栅格”,因为一个很纯粹的文档中<,实现栅格效果所使用的层层 wrap 本身就缺乏语义,html5 带来了更多语义化的标签<,这和缺乏语义的栅格实现是如此格格不入<<,摆脱栅格<,容器用绝对定位<<,不用写那么多 hack,岂不多快好省~

另外<,关于性能优化,之前我们的确过于依赖 yslow<、pagespeed 的评分,其实,这些条条框框才是真正阻碍我们作 WPO 的拦路虎,不是说这些指标不科学<,而是他们限制住了我们的思维和视野,更何况<,他们都缺少对“加载/渲染时间”这个最重要的因素的评估,当用户更快的看到并可用页面(尤其是首屏),才是真正的性能提升<,因此,这次开发特意针对 First Rendering(首次渲染)的指标进行一些重构,重写了几乎所有的逻辑层 js 代码 (domready 之前,甚至 Render 出 UI 之前,js 已经在运行了),当 js 效率更高,CPU 损耗更少时<<,浏览器才会更多的将硬件资源投入到渲染 Dom 本身<<,First Rendering 自然会更加提前<,后续的渲染也会提速<<?<?梢圆握招戮商员κ滓车?CPU 耗能对比<,以及其对 First Rendering(绿线)的影响<<。

2010(旧)首页加载 CPU 损耗

2011(新)首页加载 CPU 损耗:

当然<,延迟加载、延迟渲染等技术在这里依然适用,上次淘宝首页改版云谦同学作了详尽的总结<,这里就不再赘述了<<。更多内容大家可以到这里下载 ppt。

此致<,鸣谢法海、承玉<、王松<<、玉澧<、黑三<<,最后要特别感谢下玉澧童鞋<,有了你的妙笔<<<,这次首页才会如此闪亮<。

原文:http://www.chinawobo.com/blog/2011/01/11/dev-share-for-taobao-new-homepage/

  • 转载请注明来源:网站运营 网址:http://www.chinawobo.com/ 向您的朋友推荐此文章
  • 特别声明: 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载<,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意<。如果本站转载的文章有版权问题请联系我们<,我们会尽快予以更正<。
RSS订阅
  • QQ邮箱
  • 填写您的邮件地址,订阅我们的精彩内容:
更多
© 2017 网站运营 - T086.com(原itlearner.com)
微商货源 | 冠珠陶瓷 | 迪威乐云商devmsn | 易奇八字 | wwe美国职业摔角 | 八字算命 | 河南旅游景点大全 |
RunTime:7.57ms QueryTime:7