浅析天猫H5站点-阿里云开发者社区

开发者社区> 范大脚脚> 正文

浅析天猫H5站点

简介:
+关注继续查看
前言

我们做前端开发的时候,很有可能会做一个竞品分析,比如我就做过去哪儿、艺龙、同程等与携程的移动站点竞品分析,竞品分析的目的一般是技术对比,但是更多的是业务对比,知己知彼,百战不殆;我们同时会借鉴、学习其它网站的技术,比如网站HTML使用、class命名、使用了什么新技术,还有优化体验相关的,对大型网站的学习分析是对自己网站提高的借鉴,也是个人能力的提升途径,今天我们就来一起学习下天猫的移动站点。

PS:此文单独学习借鉴,不涉及其它,请相关同事不要在意,文中有误请提出。

打开站点首页http://www.tmall.com/,一个站点映入眼帘:



一般情况下网站加载很快,文档加载结束在200ms左右,我们看一个网站首先会看他是否遵循web标准,所谓web标准不是那么绝对,简单来说HTML、JS、CSS各干各的,并且不要犯一些低级错误,比如标签闭合、标签名小写什么的,但是当我进入第二个页面却发现一个不好的地方。

DOCTYPE不顶行

当我点击天猫精选与品牌墙时,发现其中的源文件有一个问题:



可以看到,这个doctype没有顶行,我为什么会关注这个呢,因为携程现在的站点是采用的.net,.net会在cshtml第一行写一个using XXX之类的服务器端脚本,我们在grunt打包的时候没有压缩,然后一个页面的表现十分怪异,header里面一部分html代码跑到了下面,我开始以为是有标签没有闭合,或者有标签嵌套错误导致,调了好久才发现是doctype没顶行写,这个时候页面会按照怪异模式解析,导致了莫名其妙的问题。

再看天猫超市频道:



可能因为是php的,导致页面生成的有点怪,但是这些问题应该在发布时候做html压缩。

SEO相关

从源文件与最后生成dom来说,天猫不太注重SEO,这个是阿里与百度角力所致,这种不做SEO的站点尤其适合做webapp,但是我们看到天猫依旧采用的多页的模式,可能是出于成本或者webapp不成熟考虑吧。

由于这里没有SEO需求,我们不在这里多做纠缠,但是我注意到了另外一个问题:

移动站点未使用section、header等html5标签,是因为要考虑低版本兼容,或者没有seo需求觉得这样做意义不大呢?这个不可预知。

300ms延迟

一般移动站点会有300ms延迟问题,我特地去试了点击一个按钮,响应十分迅速,这个一般是两种解决方案:

① fastclick

② tap

我们跟进一个按钮试试看,比如这个分类按钮:



<a href="javascript:void(0);" target="_self" id="J_CategoryTrigger" class="category-trigger">分类</a>
从这个点击其实可以看到一些天猫团队的素质,就简单说下这个J_CategoryTrigger钩子,因为我是做单页应用的,所以一般会将事件钩子放到class里面,这里放到id里面的,其实要移植到class里面也相当容易,这样的意义是dom结构可能变化,但是我钩子却是不变的,这个对前端样式升级会提供好处,这里扯的有点远,我们继续深入这个按钮,最后在这里发现了调用点:



这里我们还意外收获到一个信息,天猫是依赖与kissy的,kissy是阿里的一套前端框架,里面有很多组件和工具类,可惜我还没来得急拜读,这里只能瞎子摸象了。

1 a.on("click tap",
2 function(a) {
3   i.show();
4   e.later(function() {
5     i.addClass("category-dialog-unfold")
6   },
7   10);
8   t.fadeIn(.2)
9 })
可以看到这个框架里面应该封装了类似jQuery/Zepto之类的dom库,这里如此的绑定了事件,再深入我们不管,但是我认为这里还是直接使用fastclick来的好,编码时候便不用写tap这类事件模拟了。

这里获得的第二个信息是,天猫团队是采用了模块加载的,同样也是依赖kissy的:

 1 KISSY.add("fp-m/mods/category", function(e, a, r) {
 2     var i = e.one("#J_CategoryDialog");
 3     var t = e.one("#J_CategoryMask");
 4     var n = {init: function() {
 5             var e = this;
 6             e._initCategoryTrigger();
 7             e._initCategoryClose()
 8         },_initCategoryTrigger: function() {
 9             var a = e.one("#J_CategoryTrigger");
10             if (!i || !t || !a)
11                 return;
12             a.on("click tap", function(a) {
13                 i.show();
14                 e.later(function() {
15                     i.addClass("category-dialog-unfold")
16                 }, 10);
17                 t.fadeIn(.2)
18             })
19         },_initCategoryClose: function() {
20             var a = e.one("#J_CategoryClose");
21             if (!i || !t || !a)
22                 return;
23             a.on("click tap", function(e) {
24                 e.halt();
25                 i.removeClass("category-dialog-unfold");
26                 t.fadeOut(.2)
27             })
28         },_loginHandler: function() {
29         }};
30     return n
31 }
虽然并未使用kissy,但是一套框架完成这么多事情,我觉得是不是kissy对于移动端来说可能有点笨重,这个问题的答案是:



第二个应该是kissy的核心库,感觉还行,具体还得深入了解kissy才行,这里不多说,其中一段代码我非常感兴趣:

 View Code
 1 KISSY.add("component/control/render-xtpl", [], function() {
 2     return function(f) {
 3         var c, g = this;
 4         c = this.config.utils;
 5         var k = c.runBlockCommand, m = c.renderOutput, h = c.getProperty, e = c.runInlineCommand, i = c.getPropertyOrRunCommand;
 6         c = '<div id="';
 7         var d = i(g, f, {}, "id", 0, 1);
 8         c += m(d, !0);
 9         c += '"\n class="';
10         var d = {}, n = [];
11         n.push("");
12         d.params = n;
13         e = e(g, f, d, "getBaseCssClasses", 2);
14         c += m(e, !0);
15         c += "\n";
16         e = {};
17         d = [];
18         n = h(g, f, "elCls", 0, 3);
19         d.push(n);
20         e.params = d;
21         e.fn = function(a) {
22             var b;
23             b = "\n ";
24             a = i(g, a, {}, ".", 0, 4);
25             b += m(a, !0);
26             return b + "  \n"
27         };
28         c += 
29         k(g, f, e, "each", 3);
30         c += '\n"\n\n';
31         e = {};
32         d = [];
33         n = h(g, f, "elAttrs", 0, 8);
34         d.push(n);
35         e.params = d;
36         e.fn = function(a) {
37             var b;
38             b = " \n ";
39             var c = i(g, a, {}, "xindex", 0, 9);
40             b += m(c, !0);
41             b += '="';
42             a = i(g, a, {}, ".", 0, 9);
43             b += m(a, !0);
44             return b + '"\n'
45         };
46         c += k(g, f, e, "each", 8);
47         c += '\n\nstyle="\n';
48         e = {};
49         d = [];
50         h = h(g, f, "elStyle", 0, 13);
51         d.push(h);
52         e.params = d;
53         e.fn = function(a) {
54             var b;
55             b = " \n ";
56             var c = i(g, a, {}, "xindex", 0, 14);
57             b += m(c, !0);
58             b += ":";
59             a = i(g, a, {}, ".", 0, 14);
60             b += m(a, !0);
61             return b + ";\n"
62         };
63         c += k(g, f, e, "each", 13);
64         return c + '\n">'
65     }
66 });
可以看到,这个应该是html模块化的东西,以underscore的模板引擎来说是这样的:

<div><span>我是:</span><%=name%></div>
1 var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};
2 with(obj||{}){
3 __p+='<div><span>我是:</span>'+
4 ((__t=(name))==null?'':__t)+
5 '</div>';
6 }
7 return __p;
我们会有一个预编译操作,将对应的模块文件转为下面这种AMD规范模式,这样做可能会使体积有一丝丝的增加,但是却可以绕过一次javascript编译,对手机的执行效率以及电池的耗损都有好处,而这一工作一般是配合grunt在发布前完成的。

但是,天猫或者说kissy的做法,由于代码是压缩的,我有点看不出深浅,希望不是在拼接字符串吧。

PS:这里说300ms延迟扯得有点远。

层级关系

一般来说一个站点的z-index应该由js开发与css同时设计,但是阿里的规则是必须同时get javascript与css两项技能,所以这个zindex可能是自己规划的,首先这里的图片轮播导航条跑到了侧边栏上面:



这里视觉上脱离文档流的元素有:

① 图片轮播导航

.slide_1425130247393-631fader-nav-div {
display: inline-block;
position: absolute;
bottom: 6px;
left: 12px;
padding: 0;
z-index: 10;
}
② 侧边栏

③ 侧边栏隶属的mask蒙版

④ 最下面的导航条

但是真实场景与我预料的却大不一样,他的导航条是relative的,然后里面的元素全部是absolute的......

说实话,因为我不是专业的CSS,这里有点看不出深浅,但是relative的话,我要是页面有resize操作,可能要出问题,比如:





最后统计站点的几个关键z-index值:

① 轮播图片导航白点 absolute zIndex:10

② 侧边栏包裹层 relative zIndex:4

③ 侧边栏内部元素 absolute zIndex:100

④ 广告栏 fixed zIndex:9999

这个在zIndex应该是没有规划的,我再看看后面一个页面的弹出层:



absolute,zIndex为100



absolute 在zIndex:9999

经过观察我得到一个结论,天猫全站弹出层z-index未做规划,这个在多页应用中问题不大,但是一旦采用webapp模式或者伪单页模式,弹出层一多便容易出问题,戒之慎之。

规范化事件

天猫站点我觉得另外一个有问题的地方是,事件未被统一化,比如上面的弹出层弹出后有一个关闭按钮,那么他的事件绑定在哪呢?

这里的dom结构是:

<a href="javascript:void(0);" id="J_CategoryClose" class="category-close" target="_self" data-spm-anchor-id="875.7403452.0.0">关闭</a>
 1 _initCategoryClose: function() {
 2   var a = e.one("#J_CategoryClose");
 3   if (!i || !t || !a) return;
 4   a.on("click tap",
 5   function(e) {
 6     e.halt();
 7     i.removeClass("category-dialog-unfold");
 8     t.fadeOut(.2)
 9   })
10 }
可以看到,这里的事件绑定依旧在采用on、bind之类的做法,其实这种方式应该摒弃,每个模块都可以看成一个组件,在模块show后,统一将事件点代理到根元素,比如这样:

events: {
  'click selector': function() {}
  //......
}
这样的话,效果好得多,不必显示的时候绑定事件,消失的时候移除事件什么的。

另外一个体验上的问题是,这个侧边栏我觉得应该采用局部滚动方式fixed布局,采用类似IScroll类方案,体验可能会更好,这里点击蒙版关闭组件的操作也应该有。

这块有点太细了,我们再看看其它地方,比如非常常用的图片轮播组件。

图片轮播

天猫的图片轮播组件,采用的也是transform的方式做移动,传统的是采用移动left,这种方式基本被摒弃。

transform: translate(-1600px, 0px)
全站的图片都是做了延迟加载的,但是就图片轮播组件这里的延迟加载却让我有点不理解了,请看dom结构:



可以看到,他是图片滑到对应index索引位置才动态的将img标签插入进去,而上面的导航一致在重绘,如果网络比较慢的话就会出现这种情况:



对的,因为节点已经生成,出来了一个白屏的项目,其实这里可以加上延迟加载那个图标的,便不会出现白屏。

PS:为什么我这里关注的这么清楚呢,因为我这块也没做最近被业务团队提了需求......

其次图片轮播组件与下面用到的这个模块可以统一:



轮播组件继承他稍作扩展即可,上面关注点基本聚焦到了一些细节上,再看看其它部分。

结语

今天的观察还是过于细节化,停留在表面,加之家里装备不足,没能将天猫的精髓看到,我们接下来几天再观察下,看看是否能观察出天猫的性能处理方案,今天太晚了,暂时到此。

文中有何不足或者错误请您指正




本文转自叶小钗博客园博客,原文链接:http://www.cnblogs.com/yexiaochai/p/4306281.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
6935 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
7772 0
阿里云服务器远程登录用户名和密码的查询方法
阿里云服务器远程连接登录用户名和密码在哪查看?阿里云服务器默认密码是什么?云服务器系统不同默认用户名不同
444 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
3834 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
3230 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
16851 0
+关注
3656
文章
0
问答
来源圈子
更多
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载