2011homepage

358 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
358
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

2011homepage

  1. 1. 2011中文站首页改版 冯汉军、刘严隆11年8月19日星期五
  2. 2. 分享的目的 • 了解中文站首页的前端开发流程和规范 • 积累的经验得以传承11年8月19日星期五
  3. 3. 11版首页-⼀一屏 10版首页-⼀一屏11年8月19日星期五
  4. 4. • html-html5(标签) • css-css3 • js-fdev4 • 模块化管理总结 • 新版首页相对上⼀一版的改进点 • 性能数据11年8月19日星期五
  5. 5. html • html4 -> html5 • ie9以下的处理 • noscript • “第⼀一次”11年8月19日星期五
  6. 6. 简洁的doctype 头部加载部分js noscript 新的标签11年8月19日星期五
  7. 7. 简洁的doctype 头部加载部分js noscript 新的标签11年8月19日星期五
  8. 8. < ie9 • html5shiv; • document.createElement(”article”); • 线上的处理是所有ie载入html5shiv;11年8月19日星期五
  9. 9. < ie9 • html5shiv; • document.createElement(”article”); • 线上的处理是所有ie载入html5shiv; looks great, but...11年8月19日星期五
  10. 10. 为什么不用<figure>、<figcaption>?11年8月19日星期五
  11. 11. 为什么不用<figure>、<figcaption>?11年8月19日星期五
  12. 12. 为什么不用<figure>、<figcaption>?11年8月19日星期五
  13. 13. innerHTML append ... 为什么不用<figure>、<figcaption>?11年8月19日星期五
  14. 14. solution • innerShiv rel: http://code.google.com/p/html5shiv/ http://jdbartlett.com/innershiv/11年8月19日星期五
  15. 15. 结构的定义 •模块命名以 “mod-” 开头; •元件 “cell-”为统⼀一定义,自己不得添加; •每个模块必须有class为“content”的section,header则非必须; •内容结构复杂的,适当使用“region-”和“obj-”; •id以“hp-”开头(页面风格的统⼀一); rel: http://op.fangdeng.org/pitaya/ http://op.fangdeng.org/pages/html5.tag.usage.html11年8月19日星期五
  16. 16. 文档流的变化 以往的定义: • 描述大纲的唯⼀一方式是<h1>~<h6> • 添加⼀一个副标题会破坏原先的文档流 http://gsnedders.html5.org/outliner/process.py?url=http%3A%2F%2Fchina.alibaba.com11年8月19日星期五
  17. 17. 文档流的变化-续 html5的定义: • <h1>~<h6>方式同以往,h1不唯⼀一,下面第二点的元素内都可各自包含h1; • 有些标签也具有了定义大纲的功能,大致分为三类: 1. 无意义:类似<div>,<ul>等元素; 2. 产生新的节:类似<article>,<section>,<nav>,<aside>等; 3. 成节的根:某些元素(<blockquote>、<body>、<details>、<fieldset>、 <figure>、<td>)叫做成节的根,并且它们可以拥有自己的大纲。但是,这些元素 中的节和标题对于它们的祖先的大纲没有任何影响。 http://gsnedders.html5.org/outliner/process.py?url=http%3A%2F%2Fpage.china.alibaba.com%2Findex_new.html rel:http://www.osmn00.com/rebuild/223.html11年8月19日星期五
  18. 18. ⼀一些小点 • 预加载背景图; • logo改成<img>; • <a tabindex="0" target="_self" href="#content" id="skip-to-content">跳到内容区</a>; • ie9 pintab • ARIA attributes: <input id="alisearch-input" name="keywords" placeholder="输入产品名称" autocomplete="off" accesskey="s" class="ui-autocomplete-input" role="textbox" aria-autocomplete="list" aria- haspopup="true">11年8月19日星期五
  19. 19. 结构是否已完美?no!11年8月19日星期五
  20. 20. 结构是否已完美?no!11年8月19日星期五
  21. 21. 结构是否已完美?no!11年8月19日星期五
  22. 22. css • 文件按mod分,⼀一个mod⼀一个单独的css; • 基于fdev4-float,pitaya4; • 禁止使用无意义的标签实现样式上的展 示; rel: http://op.fangdeng.org/pitaya/11年8月19日星期五
  23. 23. 样式书写规则 1、显示与定位 display position float list-style 2、元素自身 width height margin padding border background 3、文本外观 color font line-height text-align text-decoration other11年8月19日星期五
  24. 24. css3 • 部分圆角,hover效果使用简单的动画; • 90%+的用户看不到 :( 只能小规模尝试; • rel: http://fd.aliued.cn/fdevlib/#home css3部分 MSIE6 45.81% MSIE6 MSIE8 MSIE7 Sougou MSIE9 Tt MSIE8 Chrome Firefox Theworld 37.19% Maxthon Se360 Other Safari Opera 0.07% 0.09% 0.18% 0.82% 0.83% 0.93% 0.94% 1.14% MSIE7 1.42% Sougou 2.86% 3.79% 3.93%11年8月19日星期五
  25. 25. js • 文件按mod分,⼀一个mod⼀一个单独的js; • 基于fdev4,HexJS; • 懒加载; • 大前提,首页是静态的;11年8月19日星期五
  26. 26. HexJS • 不是库 • 实现模块定义和管理 • 使用有两种方式: 1. hexjs.register(“module-xx”); // domready 后执行 2. hexjs.register(“~module-xx”); // 马上执行 rel: http://hexjs.edgarhoo.org/11年8月19日星期五
  27. 27. 头部加载库文件 • <script src="http://style.china.alibaba.com/js/app/operation/homepage/global/merge-110726.js"></script> 35.7K11年8月19日星期五
  28. 28. 头部加载库文件 • <script src="http://style.china.alibaba.com/js/app/operation/homepage/global/merge-110726.js"></script> 35.7K 目的?11年8月19日星期五
  29. 29. 头部加载库文件 • <script src="http://style.china.alibaba.com/js/app/operation/homepage/global/merge-110726.js"></script> 35.7K 目的?11年8月19日星期五
  30. 30. 头部加载库文件 • <script src="http://style.china.alibaba.com/js/app/operation/homepage/global/merge-110726.js"></script> 35.7K 目的?11年8月19日星期五
  31. 31. 头部加载库文件 • <script src="http://style.china.alibaba.com/js/app/operation/homepage/global/merge-110726.js"></script> 35.7K 目的? <script>FE.operation.pitaya.register( ~alibar-account );</script> <script>FE.operation.pitaya.register( ~hp-sign );</script>11年8月19日星期五
  32. 32. 头部加载库文件 • <script src="http://style.china.alibaba.com/js/app/operation/homepage/global/merge-110726.js"></script> 35.7K 目的? <script>FE.operation.pitaya.register( ~alibar-account );</script> <script>FE.operation.pitaya.register( ~hp-sign );</script> 性能 or 体验?11年8月19日星期五
  33. 33. 模块化管理总结11年8月19日星期五
  34. 34. 模块化管理总结 • 什么是模块化?11年8月19日星期五
  35. 35. 模块化管理总结 • 什么是模块化? 1. 可组合、可分解11年8月19日星期五
  36. 36. 模块化管理总结 • 什么是模块化? 1. 可组合、可分解 2. 易更换11年8月19日星期五
  37. 37. 模块化管理总结-html • 统⼀一的mod框架; • 统⼀一的命名格式; • cms中模块切割(也是便于运营维护的方式);11年8月19日星期五
  38. 38. 模块化管理总结-css • common,grid使用库文件,不再单独创建; • 基于独立的reset和pitaya4; • 其他公用样式基于base.css; • 以模块为单位建立独立的css; • 样式书写风格统⼀一; • 样式中如无特殊情况,以”.mod-xxx {}”开头; • 背景图基于各自的css,不做统⼀一管理; • 背景图分预加载(preLoad.png)和普通背景(bg.png);11年8月19日星期五
  39. 39. 模块化管理总结-js • 基于fdev4,HexJS; • 以模块为单位建立独立的js; • merge文件分头尾两个; • 模块的js统⼀一的书写风格,并按功能点define和register; • 统⼀一的命名空间;11年8月19日星期五
  40. 40. 新版首页的改进点 • html5标签 • 焦点图懒加载 • 结构风格统⼀一 • 更加合理的滚动加载 • 以mod为单位 • 预加载js库 • 更加合理的logo • css3 • 模块化的html,css,js管理 • 无障碍的尝试 • 预加载背景图 • noscript • 更加合理的背景图sprites • ......11年8月19日星期五
  41. 41. 我们还需努力的... • 微数据-microdata • 全方位的数据监控 • 更加友好的noscript • 其他平台的扩展 • localStorage • ...... • application cache • 更多合理的标签使用 • 更多合理的css3效果 • 多版本的管理11年8月19日星期五
  42. 42. 性能数据 • 基调网络 • 哈勃 • KeepFast 各平台本身、网络差异,数据仅作对比和参考。11年8月19日星期五
  43. 43. 基调网络 两个时间点:8月11日、8月17日,其中的变化,新版首页增加了10个请求。 8月11日 8月17日11年8月19日星期五
  44. 44. KeepFast Request Time Bytes s 11号 4.814s 43 370KB 17号 6.470s 53 361KB11年8月19日星期五
  45. 45. 请求数对性能有着实质的影响11年8月19日星期五
  46. 46. 请求数对性能有着实质的影响 High Performance Web Sites Rule 1: Make Fewer HTTP Requests11年8月19日星期五
  47. 47. • 优化是持续的,不要等到用户抱怨才优化; • ⼀一屏以下图片尽量懒加载; • 首屏图片大小严格规定;11年8月19日星期五
  48. 48. One More Thing • 首页目前的环境是static; • static的优点,快速响应; • Try your ideas;11年8月19日星期五
  49. 49. 感谢 冯汉军、洪珊珊、谢传贵、由雪伟、俞雨11年8月19日星期五
  50. 50. Thank you for your time.11年8月19日星期五

×