一淘新首页总结——内容简介

• 1. By 妙净 雨异 乐淘 一丝
• 2. ●项目背景   ●协同合作   ●响应式应用   ●性能优化   ●可用性
• 3. 协同合作这些都不是问题
• 4. ●项目背景   ●协同合作   ●响应式应用   ●性能优化   ●可用性
• 5. 协同合作 – 分工   ♦ 6 人合作开发     ♦ 约定 css/js/html 规范     ♦ 各个模块分开开发，分工明确、 互不影响     ♦ 后续版本更新开发，学习成本低
• 6. ●项目背景   ●协同合作   ●响应式应用   ●性能优化   ●可用性
• 7. 响应式设计 —-  响应式设计概念： 网站内容根据屏幕的大小进行重新调整。 同一套代码，在不同终端设备上显示不同的效果。
• 8. 响应式   ——   * 响应式布局     * 多平台多分辨率适配   * Media query 的兼容性   * 响应式图片处理   *KISSY slide 的支持响应式
• 9. 响应式 – 布局   —–   * 栅格   * flex box  *绝对定位， js 计算   * fluid grid( 流体网格 )   * Media query
• 10. 响应式 – 布局 – 栅格  —–   * 栅格定宽不适用响应式  * 栅格实现扩展：三栏左右定宽中间内容自适应
• 11. 响应式 – 布局  * 栅格 —–   * flex box  *绝对定位， js 计算  * fluid grid( 流体网格   )   * Media query
• 12. 响应式 – 布局 -flex box CSS3!
• 13. 响应式 – 布局  * 栅格 —–   * flex box  *绝对定位， js 计算  * fluid grid( 流体网格   )   * Media query
• 14. 响应式 – 布局  * 栅格 —–   * flex box  *绝对定位， js 计算  * fluid grid( 流体网格   )    * Media query
• 15. 响应式 – 布局 -fluid grid  原理：把栅格宽度变百分比 自适应类库：Bootstrap Anolecss  foundation  +less 可编程
• 16. 响应式 – 布局  * 栅格 —–   * flex box  *绝对定位， js 计算  * fluid grid( 流体网格   )    * Media query
• 17. 响应式 – 布局 -mediaquery引入方式 :*<link rel=”stylesheet” media=“screen and(min-width:500px)” href=”example.css” />   *@media all and (min-width:500px) { … }@media (min-width:500px) { … }   http://www.w3.org/TR/css3-mediaqueries/
• 18. 响应式 – 布局    一淘首页选择：栅格扩展 + mediaquery
• 19. 响应式   ——   * 响应式布局     * 多平台多分辨率适配   * Media query 的兼容性   * 响应式图片处理   *KISSY slide 的支持响应式
• 20. 响应式 – 多平台多分辨率适配     * 一淘首页分辨率分析  * 一淘首页适配  * 通用多平台多分辨率适配方案
• 21. 响应式 – 多平台多分辨率适配 – 一淘首页平 台分辨率分析   操作系统 : winxp 68.22% win7 19.71%    平台：手机占 0.16% ，电脑 99.84%iphone 占 0.04% ， ipad 竖版占 0.58%  分辨率：  *1024×768 最高，占 21.5%   *大于 1024 约占 75% ，可再细分
• 22. 响应式 – 多平台多分辨率适配     * 一淘首页分辨率分析  * 一淘首页适配  * 通用多平台多分辨率适配方案
• 23. 响应式 – 多平台多分辨率适配 – 一淘首 页适配选择    *原因：兼容线上 990 和 1200时间、维护成本、设计难度、产品定位分辨率大于 1024 约占 75%   *结果：990 窄版1200 宽版
• 24. 响应式 – 多平台多分辨率适配 – 一淘首页适配选择
• 25. 响应式 – 多平台多分辨率适配 – 一淘首页适配选择
• 26. 响应式 – 多平台多分辨率适配 – 一淘首页适配选择    * 选择：栅格扩展 +media query 结合使用   * 缺点：窄版部分内容缺失（需改进设计）浪费带宽，下载额外的内容    优点： * 无需做图片自适应，省运营成本  *部分内容自然延展
• 27.响应式 – 多平台多分辨率适配     * 一淘首页分辨率分析  * 一淘首页适配  * 通用多平台多分辨率适配方案
• 28. 响应式 – 多平台多分辨率适配 – 通用   * 淘宝机票（ 960 、 768 、 480 、 320 ）   * Bootstrap demo(768 、 980 、 1200)   * 主搜索响应式适配
• 29.响应式   ——   * 响应式布局     * 多平台多分辨率适配   * Media query 的兼容性   * 响应式图片处理   *KISSY slide 的支持响应式
• 30. 响应式 -mediaquery 兼容性实现
• 31. 响应式 -mediaquery 兼容性实现  * 现状
• 32. 响应式 -mediaquery 兼容性实现  * Respond.js （ 326 line ）  * css3-mediaqueries.js(1033line)  * 一淘首页实现方法
• 33. 响应式 -mediaquery 兼容性实现 – respond.js  * Media query 检测 -matchmedia.js  * Respond.js 的使用  * Respond.js 的原理
• 34. matchMedia.js   if (matchMedia(only screen and (max-width: 480px)).matches) {// maybe run some small-screenrelated dom scripting?}  * Respond.js  * Modernizr
• 35. matchMedia.js
• 36. 响应式 -mediaquery 兼容性实现 – respond.js  * Media query 检测 -matchmedia.js  * Respond.js 的使用  * Respond.js 的原理
• 37. 响应式 -mediaquery 兼容性实现 – respond.js  Respond.js 的使用：
• 1）.Css 中直接写 media query
• 2）.Css 后面 Head 中引入 respond.js （ 1k 左右）
• 3）. 跨域额外配置（ CDN ）a.cross-domain/respond-html 放到另外一个域下b.cross-domain/respond.proxy.gif 放到本域下 https://github.com/scottjehl/Respond
• 38. 响应式 -mediaquery 兼容性实现 – respond.jsRespond.js 的原理：
• 1）. 在 body 内容输出之前切换 css
• 2）. 解析所有 css, 正则分析出 mediaquer y css 块
• 3）. 页面 load 和 window.resize 时根据viewpor tWidth 加入相应的 css 块   http://scottjehl.github.com/Respond/test/test.html demo
• 39. 响应式 -mediaquery 兼容性实现  * Respond.js （ 326 line ）  * css3-mediaqueries.js(1033line)  * 一淘首页实现方法 https://github.com/livingston/css3-mediaqueries-js
• 40. 响应式 -mediaquery 兼容性实现 – 一淘实现方法Ie8- 完全模拟 mediaquery 效果    关键阶段：页面 load+ 窗口 resize
• 实现 ：1. 类 respond.js 切换内联 css
•             2. 切换 css 文件 <link rel=”stylesheet” media=“screen and (min-width:500px)” href=”example.css” />
•             3. 切换全局 class
• 41. 响应式 -mediaquery 兼容性实现 – 一淘实现方法
• 1）. 类 respond.js 切换内联 css  
• 优点：自动化、使用方便。
• 缺点：跨域配置麻烦、性能 ( 请求 css 文件，解析 mediaquery 慢、 js 偏大)
•  2）. 切换 css 文件 <link rel=“stylesheet” media=“screen and (min-width:500px)” href=“example.css” />
• 优点：文件分离， load 时按需加载， js 小。
• 缺点：多文件管理麻烦
•  3）. 切换全局 class  
• 优点：方便管理 js 小
• 缺点： load 时所有 css 加载，但其实不多。
• 42. 响应式 -mediaquery 兼容性实现 – 一淘实现方法切换全局 class 实现：  *Page loadWindow resize
• 43. 响应式   ——   * 响应式布局     * 多平台多分辨率适配   * Media query 的兼容性   * 响应式图片处理（ by 雨异）   *KISSY slide 的支持响应式（ by 雨异）
• 44. 响应式图片处理  1. 响应式图片   2. 图片缩放  http://10.13.124.71/tsrp/?q&loc=%BA%BC%D6%DD&app=idea&test=1
• 45. 响应式图片处理    1. 响应式图片 —   响应式设计首先要解决的问题就是 响应图片的问题。在高的分辨率下现在高分辨率的图片，在低分辨率下则显示低分辨率的图片。在拉伸浏览器窗口时缩放图片的同时也要考虑更换不同分辨率的图片。
• 46. 响应式图片处理  1. 响应式图片 —  cdn 的图片常用的有 5 个规格： 60×60 ， 80×80 ， 120×120 ， 160×160 ， 210×210 有服务器输出不带规格图片的地址，然后通过 js 来获取地址，并且根据当前分辨率的大小来选择合适规格的图片。最后生成图片放在 dom 文档里。 拉伸浏览器时会实时改写网格的高度，由此来实现图片缩放，结束时则判断页面大小来选择对应规格的图片，替换掉原来的图片。
• 47. 响应式图片处理   2. 图片等比缩放 —  保证图片所在的区块占百分之几， 图片要垂直居中对齐，图片缩放。高度很高的图片如何实现自动缩放。table-cell 方式和 inline-block 的方式相对 – 绝对定位的方式太麻烦
• 48. table-cell 方式 — 通过设置 display: table-cell ，并且设置宽高，就可以实现里面元素的垂直居中对齐。 table-cell 不能继承父级的宽高，除非父级是 table 。因为要自适应，所以宽度不能定死，于是父级定义我为 display: table 。 图片要能等比缩放， max-width: 100%, height: auto; 这是按宽来缩放，max-width 会导致 IE8 下图片消失，所以加上 width: auto9 。 IE6/7 不支持 table-cell ，可以使用 inline-block 来触发 hasLayout ，这样也能实现垂直居中对齐。
• 49. table-cell 方式 —    .parent{ display: table; width: 100%} .parent .child{ display: table-cell; text-align: center; vertical-align: middle} .parent .child img{ max-width: 100%; height: auto; width: auto9}这是按宽等比缩放图片并且垂直居中对齐。 Parent 的高度通过 js 实时更新如果出现图片 http://img.f2e.taobao.net/img.png?x=100×390， 高很高的情况下，图片将按原来尺寸撑开 table-cell 。除非给 table-cell 定死高，否则需要加入一个样式在打破 table 的盒模式。 .parent.vertical{ display: block; text-align: center;} .parent.vertical .child{ display: inline-block; *display: block; *zoom: 1} .parent.vertical .child img{ max-width: none; max-height: 100%; width: auto; }
• 50. Inline-block 方式 — 通过设置 display: inline-block ，不设置宽高，而是在在父节点下在添加一个 b 标签来定义高度，就可以实现垂直居中。 图片要能等比缩放， max-width: 100%, height: auto; 这是按宽来缩放，max-width 会导致 IE8 下图片消失，所以加上 width: auto9 。 对于高度太高的图片则需要设置父节点的高度，否则就只需要定义 b 标签的高度。
• 51. Inline-block 方式 —-        <div class=“parent”><b></b><div class=“child”><img src=“”/></div></div> .parent{ display: block; width: 100%;} .parent .child{ display: inline-block; *display: inline; *zoom: 1; text-align: center; vertical-align: middle} .parent .child img{ max-width: 100%; height: auto; vertical-align:middle;} .parent b{width: 1px;overflow: hidden; margin-left: -1px;vertical-align: middle; display: inline-block; *display: inline; *zoom: 1}如果是按宽等比缩放 则设置 b 的高度。如果是按高等比缩放 则设置 parent 的高度。这 2 个高度是一致的。
• 52. 响应式   ——   * 响应式布局     * 多平台多分辨率适配   * Media query 的兼容性   * 响应式图片处理   *KISSY slide 的支持响应式
• 53. KISSY slide 的响应式实现 — 响应式设计的幻灯片组件 走马灯的实现。不同于 switchable 的 slide ，响应式的走马灯每页都需要占 100% ，这样才能够实现里面内容的自动缩放，而容器也要是 100% ；这样每项内容就可以设置占容器的一个百分比。
• 54. KISSY slide 的响应式实现
• 1）. 实现 2 页之间的滚动效果 设置每页为浮动的 float: left; 通过定义 margin-left 来实现 2 页在同一水平上。然后通过 js 来让 2 页的 margin-left 递增和递减来，这样来实现动画的效果。
•  2）. 实现 2 页之间的渐显效果 设置每页为浮动的 float: left; 通过定义 margin-right ： -100%来实现每页在同一位置上。然后通过 js 来让 2 页的 opacity 来实现渐显的效果。
• 55. Slide 组件： effect = scrollx
• 56. Slide 组件： effect = fade
• 57. 响应式UI设计与实现响应式设计wiki其他相关：
• http://www.webapptrend.com
• https://github.com/scottjehl/Responsive-Images
• https://github.com/scottjehl/Respond http://adactio.com/journal/4497/  https://github.com/livingston/css3-mediaqueries-js/download
• 58. ●项目背景   ●协同合作   ●响应式应用   ●性能优化 – 从 70 分到 80 分的体验 ( by乐淘 )    ●可用性
• 59. 性能优化   YSlow提供 A-F 优化等级降低的优 红色越深优化越差化指标
• 60. 性能优化   影响当前页面得分的 要为页面加上过期标志可以利用 a che 模块 pa主 mod_ expires和 mod_ headers。要 通过配置 .hta 文件， 可以轻易地按文件 ccess因 类别设置缓存时间。素 对页面内容进行 Gzip 压缩 …… 此两项需要服务端完成
• 61. 性能优化   现在的 YSlow 测评数据 … … 还有进一步优化的可能。
• 62. 性能优化   一、尽量减少 D OM 节点 textarea中的内容不会被立即渲染。  总结：不需要初始加载就渲染的内容，尽量先不将其添加到结构中。优点：减少页面初次渲染的节点，降低渲染负荷。
• 63. 性能优化   二、尽量减少内嵌样式和脚本  内嵌式脚本，阻塞页面加载，提高维护成本 内嵌式样式，降低维护性总结：除必须情况外，在页面头部引入 CSS 文件，在页面底部引入 J 文件； S 尽可能的将所有样式合并。  成一个文件，将所有脚本合并成一个文件。   优点：减少页面阻塞，方便代码维护，提升页面性能。
• 64. 性能优化  三、合并背景图片（ Sprites）   合并背景图片，减少请求数  。  总结：合并能合并的所有背景图片，图片大小根据情况而定。   优点：减少请求数量，提升页面评分。
• 65. 性能优化  四、首屏外全局懒加载   首屏以外内容做全局懒加载。 总结：首屏以外做全局懒加载，减少首次加载资源。  优点：减少首次加载速度，减少首次渲染节点数，提升页面评分。
• 66. 性能优化  五、异步延时数据处理
• 1）. TMS 默认填入数据，防止异步数据未加载时显示空白 。
• 2）. 与开发约定好接口及数据格式，进行异步延时请求及 数据处理。
• 67. 性能优化  六、 异步脚本样式再合并  合并前 通过 KISSY 的 config.map 合并
• 68. 性能优化 ( 脚本样式合并 )  六、 异步脚本样式再合并  • kissy 组件合并为一个 js 文件 合并后  • 一淘组件合并为一个 js 文件  • 一淘组件样式合并为一个 css 文件
• 69.●项目背景   ●协同合作   ●响应式应用   ●性能优化     ●可用性 – ( by 一丝冰凉 )
• 70. 可用性 – 图片 ( 特殊字体文字使用图片 )   显示图片 隐藏文字 图片未加载
• 71. 可用性 – 图片 ( 特殊字体文字使用图片 )  HTML 结构 : <h2> <a href=”#” data-stat=”” title=” 优惠大家谈 “> 优惠大家谈 </a> </div>CSS: .we-talk .hd { background: url(“http://XXXX”) no-repeat 0 -40px; height: 20px; line-height: 20px; } .we-talk-tit { font-size: 16px; position: relative; z-index: -1; }    优点： 无空标签 , 语义化更好。           不使用绝对定位 , 减少渲染消耗。
• 72. 可用性 – 图片 ( 读屏软件 )  带有链接的图片读屏软件可能会重复读取文字
• 73. 可用性 – 文字  ( 高度比模式 )
• 74. ●项目背景   ●协同合作   ●响应式应用   ●性能优化     ●可用性
• 75. 最后感谢妙净、紫溪、玉澧、乐淘、小饭、一丝 首页项目组所有成员！