一淘新首页总结

By 妙净雨异乐淘一丝

o项目背景
o协同合作
o响应式应用
o性能优化
o可用性

协同合作

这些都不是问题

协同合作 – 分工

• 6 人合作开发

• 约定 css/js/html 规范

• 各个模块分开开发，分工明确、
互不影响

• 后续版本更新开发，学习成本低

响应式设计

响应式设计概念：网站内容根据屏幕的大小进行重新调整。
同一套代码，在不同终端设备上显示不同的效果。

响应式
 响应式布局
 多平台多分辨率适配
 Media query 的兼容性
 响应式图片处理
 KISSY slide 的支持响应式

响应式 - 布局
 栅格
 flex box
 绝对定位， js 计算
 fluid grid( 流体网格 )
 Media query

响应式 - 布局 - 栅格
 栅格定宽不适用响应式

* 栅格实现扩展：
三栏左右定宽
中间内容自适应

响应式 - 布局 -flex box

CSS3!

响应式 - 布局 -fluid grid
原理：
把栅格宽度变百分比自适应

类库：
Bootstrap
Anolecss
foundation
+less 可编程

响应式 - 布局 -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/

响应式 - 布局
一淘首页选择：

栅格扩展 + mediaquery

响应式 - 多平台多分辨率适配
 一淘首页分辨率分析
 一淘首页适配
 通用多平台多分辨率适配方案

响应式 - 多平台多分辨率适配 - 一淘首页平
台分辨率分析
操作系统 : winxp 68.22% win7 19.71%

平台：手机占 0.16% ，电脑 99.84%
iphone 占 0.04% ， ipad 竖版占 0.58%

分辨率：
1024x768 最高，占 21.5%

大于 1024 约占 75% ，可再细分

响应式 - 多平台多分辨率适配 - 一淘首
页适配选择
原因：
兼容线上 990 和 1200
时间、维护成本、设计难度、产品定位
分辨率大于 1024 约占 75%

结果：
990 窄版
1200 宽版

响应式 - 多平台多分辨率适配 -
一淘首页适配选择

一淘首页适配选择
 选择：
栅格扩展 +media query 结合使用

 缺点：
窄版部分内容缺失（需改进设计）
浪费带宽，下载额外的内容

优点：
 无需做图片自适应，省运营成本
 部分内容自然延展

通用
 淘宝机票（ 960 、 768 、 480 、 320 ）
 Bootstrap demo(768 、 980 、 1200)
 主搜索响应式适配

响应式
 响应式布局
 Media query 的兼容性实现
 KISSY slide 的响应式实现

响应式 -mediaquery 兼容性实现

 现状

 Respond.js （ 326 line ）
 css3-mediaqueries.js(1033line)
 一淘首页实现方法

响应式 -mediaquery 兼容性实现 -
respond.js
 Media query 检测 -matchmedia.js
 Respond.js 的使用
 Respond.js 的原理

matchMedia.js

if (matchMedia('only screen and (max-
width: 480px)').matches) {
// maybe run some small-screen
related dom scripting?
}

 Respond.js
 Modernizr

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

respond.js
Respond.js 的原理：
1. 在 body 内容输出之前切换 css
2. 解析所有 css, 正则分析出 media
quer y css 块
3. 页面 load 和 window.resize 时根据
viewpor tWidth 加入相应的 css 块

http://scottjehl.github.com/Respond/test/test.html demo

 Respond.js （ 326 line ）
 css3-mediaqueries.js(1033line)
 一淘首页实现方法

https://github.com/livingston/css3-mediaqueries-js

一淘实现方法
Ie8- 完全模拟 mediaquery 效果

关键阶段：页面 load+ 窗口 resize

实现：
1. 类 respond.js 切换内联 css
2. 切换 css 文件 <link rel="stylesheet" media=“screen and (min-
width:500px)" href="example.css" />

3. 切换全局 class

一淘实现方法
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 加载，但其实不多

一淘实现方法
切换全局 class 实现：
Page load

Window resize

响应式
 响应式布局
 响应式图片处理（ by 雨异）
 KISSY slide 的支持响应式（ by 雨异）

响应式图片处理

1. 响应式图片

2. 图片缩放

http://10.13.124.71/tsrp/?q&loc=%BA%BC%D6%DD&app=idea&test=1


1. 响应式图片

响应式设计首先要解决的问题就是响应图片的问题。
在高的分辨率下现在高分辨率的图片，在低分辨率下则显示低分辨率的图片。
在拉伸浏览器窗口时缩放图片的同时也要考虑更换不同分辨率的图片。


1. 响应式图片

cdn 的图片常用的有 5 个规格：
60×60 ， 80×80 ， 120×120 ， 160×160 ， 210×210
有服务器输出不带规格图片的地址，然后通过 js 来获取地址，并且根据当
前分辨率的大小来选择合适规格的图片。最后生成图片放在 dom 文档里。
拉伸浏览器时会实时改写网格的高度，由此来实现图片缩放，结束时则判
断页面大小来选择对应规格的图片，替换掉原来的图片。


2. 图片等比缩放

保证图片所在的区块占百分之几，图片要垂直居中对齐，图片缩放。

高度很高的图片如何实现自动缩放。

table-cell 方式和 inline-block 的方式

相对 - 绝对定位的方式太麻烦

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 ，这
样也能实现垂直居中对齐。

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=100x390，高很高的情况
下，图片将按原来尺寸撑开 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;
}

Inline-block 方式

通过设置 display: inline-block ，不设置宽高，而是在在父节点下在
添加一个 b 标签来定义高度，就可以实现垂直居中。

图片要能等比缩放， max-width: 100%, height: auto; 这是按宽来
缩放，
max-width 会导致 IE8 下图片消失，所以加上 width: auto9 。

对于高度太高的图片则需要设置父节点的高度，否则就只需要定
义 b 标签的高度。

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 个高度是一致的。

响应式
 响应式布局
 KISSY slide 的响应式实现

KISSY slide 的响应式实现

响应式设计的幻灯片组件走马灯的实现。
不同于 switchable 的 slide ，响应式的走马灯每页都需要占 100% ，
这样才能够实现里面内容的自动缩放，而容器也要是 100% ；这样每
项内容就可以设置占容器的一个百分比。

KISSY slide 的响应式实现

1. 实现 2 页之间的滚动效果
设置每页为浮动的 float: left; 通过定义 margin-left 来实现 2 页
在同一水平上。然后通过 js 来让 2 页的 margin-left 递增和递减来，这
样来实现动画的效果。
2. 实现 2 页之间的渐显效果
设置每页为浮动的 float: left; 通过定义 margin-right ： -100%
来实现每页在同一位置上。然后通过 js 来让 2 页的 opacity 来实现渐显
的效果。

Slide 组件： effect = scrollx

响应式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

o项目背景
o协同合作
o响应式应用
o性能优化 - 从 70 分到 80 分的体验 ( by
乐淘 )
o可用性

性能优化
YSlow

提
供 A-F 优化等级降低

的
优红色越深优化越差

化
指
标

性能优化

影
响
当
前
页
面
得
分
的要为页面加上过期标志可以利用 a che 模块 pa
主 mod_ expires和 mod_ headers。
要通过配置 .hta 文件，可以轻易地按文件
ccess
因类别设置缓存时间。

素
对页面内容进行 Gzip 压缩

……
此两项需要服务端完成

性能优化

现在的 YSlow 测评数据

… … 还有进一步优化的可能。

性能优化
一、尽量减少 D OM 节点

textarea中的内容不会被立即渲染

总结：不需要初始加载就渲染的内容，尽量先不将其添加到结构中。

优点：减少页面初次渲染的节点，降低渲染负荷。

性能优化
二、尽量减少内嵌样式和脚本

内嵌式脚本，阻塞页面加载，提高维护成本

内嵌式样式，降低维护性

总结：除必须情况外，在页面头部引入 CSS 文件，在页面底部引入 J 文件；
S
尽可能的将所有样式合并成一个文件，将所有脚本合并成一个文件。

优点：减少页面阻塞，方便代码维护，提升页面性能。

性能优化
三、合并背景图片（ Sprites）

合并背景图片，减少请求数

总结：合并能合并的所有背景图片，图片大小根据情况而定。

优点：减少请求数量，提升页面评分。

性能优化

四、首屏外全局懒加载

首屏以外内容做全局懒加载

总结：首屏以外做全局懒加载，减少首次加载资源。

优点：减少首次加载速度，减少首次渲染节点数，提升页面评分。

性能优化
五、异步延时数据处理
1. TMS 默认填入数据，防止异步数据未加载时显示空白
。
2. 与开发约定好接口及数据格式，进行异步延时请求及
数据处理。

性能优化

六、异步脚本样式再合并
合并前
通过 KISSY 的 config.map 合并

性能优化 ( 脚本样式合并 )
六、异步脚本样式再合并

• kissy 组件合并为一个 js 文件合并后

• 一淘组件合并为一个 js 文件

• 一淘组件样式合并为一个 css 文件

o项目背景
o协同合作
o响应式应用
o性能优化
o可用性 – ( by 一丝冰凉 )

可用性 – 图片 ( 特殊字体文字使用图片 )

显示图片隐藏文字图片未加载

可用性 – 图片 ( 特殊字体文字使用图片 )

HTML 结构 :
<h2 class="hd ">
<a href="#" class="we-talk-tit left" 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;
}

优点：无空标签 , 语义化更好
不使用绝对定位 , 减少渲染消耗

可用性 – 图片 ( 读屏软件 )

带有链接的图片读屏软件可能会重复读取文字

可用性 – 文字 ( 高度比模式 )

最后感谢妙净、紫溪、玉澧、乐淘
、小饭、一丝首页项目组所有成
员！

一淘新首页总结

Recommended

Recommended

More Related Content

Similar to 一淘新首页总结

Similar to 一淘新首页总结 (20)

一淘新首页总结