阅读 18317

刚上线的阿里达摩院官网,从前端角度看圈点之处

写在前面:

从去年十月份,马云成立阿里巴巴达摩院,到今年9月28号一年整,阿里达摩院官网正式上线。作为从事互联网行业的人,大抵都是会去达摩院官网看看的,本文即我个人从前端角度对达摩院官网,进行的一次简单粗暴的测评,细数圈点之处,并提取一些作为前端可以值得借鉴和思考的代码技巧。第一次写体验报告类文章,想到什么写什么,个人角度或片面,不足之处,或者您有更好的见解,在留言处欢迎交流。当然希望有阿里达摩院的同学看到我这篇简单的测评文章,可以把文中描述的达摩院官网中我个人觉得是bug的地方和优化的地方修复一哈

一、初体验

1.1域名

pc端:https://damo.alibaba.com/

移动端:https://m.damo.alibaba.com/

1.2 页面布局(直接上图了)

pc端


移动端


总体设计风格中国风和简约科技感,中国风主要通过水墨(山)背景图清澈,科技感是用了大量纯色(带有轻微渐变的深蓝色)


二、小测牛刀

2.1页面加载时间

清除浏览器缓存,打开控制台,刷新页面,得到如下信息(环境:个人家庭网络Google Chrome浏览器),可以看出该网站是服务端渲染的

1、请求数(requests):0/42
2、转移资源大小(transferred):15.8M
3、所有请求(finish):3.09S
4、DOM树构建完成(DOMContentLoaded):558ms
5、页面加载完毕(Load):3.09s复制代码

再往下一看,竟然控制台有个console.log()没有去掉,尴尬了哈,具体打印的数据,就不做研究咯,有兴趣的老铁可以自己去看~


2.2 页面代码结构

看了console,肯定也就看看Elements,总得来说比较中规中矩,没有太依赖第三方的库,整体当然看了一下大概在新闻动态那边用了swiper组件,当然最后面还加了一个【友盟+】cnzz的站长统计


2.2页面缓存

1、CNZZDATA、UM_distinctid、sca:cnzz这个统计返回的

2、cna:每个阿里系的网站中都会有 cna 这个 cookie,而且是跨顶级域名的,个人猜测这玩意是用来识别设备的

3、client_lang,当然只有你点了语言切换的时候,会出现

......




三、前端圈点之处

这里就到了本文的高潮了,先抑后扬的套路来一波,先说说个人作为前端的角度说说达摩院官网的“Bug”和个人觉得设计可以优化一点的地方吧,下面先睹为快

注:测试时间为2018/09/29

3.1 发现Bug和设计优化

3.1.1(bug)导航鼠标经过事件,鼠标经过“实验室”栏目下出现一像素白边框(需要自行在官网体验就知道了)


找到代码,其实是下图这个兄弟导致的,鼠标经过的时候,这边的display状态改变


3.1.2(优化)导航中间的Logo,个人觉得应该加一个点击事件,移动端亦如此,可以跳转到首页,目前无论是pc端还是移动端都是没有点击事件的,目前代码是这样的

<div class="middle"><img class="top-logo" src="/_pc/css/img/top-logo-en.png"></div>
复制代码

3.1.3(优化)导航最后的CN,首页希望是可以点击切换各国语言的,当然子页都是ok的,可以切换语言(已修复)


3.1.4(优化)轮播图,这块鼠标放上去是可以点击的,强迫症但本身又是很小的范围可以放


3.1.5(优化)关于兼容性的问题,打开IE(默认11),咳咳,好像字体丢了,哦哦,还有轮播图,咋回事咯


当然继续往下测试,IE9就凉了(如下图),大概就兼容到IE10及以上吧


3.1.6(优化)首页和子页轮播图,2M大图,加载时间(3s+)等到你有点窒息




3.2 挖掘前端值得探究的地方


3.2.1导航

亮点:logo居中,导航栏目两边,鼠标滚动收缩导航,适配移动端

在官网导航是把导航切了两半,左中右三个div,中间div放logo,个人觉得如果导航数量可以确定的话,可以用 nth-child 空开位置留给logo,下面是我大概写的布局和样式相关的部分(没有调具体的样式,完整代码

<template>
  <div class="header_bg">
      <div class="header">
        <div class="logo">
          <a href="/"><img src="../assets/top-logo-en.png" alt=" " /></a>
        </div>
        <nav class="navbar-default">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle">
            </button>
          </div>
          <div class="navbar-collapse">
            <ul class="navbar-nav">
              <li class="act" v-for="item in navdata"><a><p class="c-title">{{item.cTitle}}</p><p class="e-title">{{item.eTitle}}</p></a></li>
              <li><a>CN</a></li>
            </ul>
          </div>
        </nav>
      </div>
  </div>
</template>

<script>
  export default {
    name: '',
    components: {},
    data() {
      return {
        navdata:[
          {"cTitle":"首页","eTitle":"HOME"},
          {"cTitle":"实验室","eTitle":"Laboratories"},
          {"cTitle":"合作生态","eTitle":"Collaboration"},
          {"cTitle":"新闻动态","eTitle":"Events"},
          {"cTitle":"加入我们","eTitle":"Careers"},
          {"cTitle":"关于我们","eTitle":"About Us"}
        ]
      }
    },
    methods: {}
  }
</script>复制代码

&:nth-child(1) {
   margin-left: 1/18 * 100%;
 }

&:nth-child(4) {
   margin-left: 3/18 * 100%;
 }复制代码

大概效果(“拼多多版”)


3.2.2 轮播图背景滤镜效果

用的是filter(滤镜) 属性


.background {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: none;
    background-size: 100% 100%;
    -webkit-filter: blur(70px);
    -moz-filter: blur(70px);
    -o-filter: blur(70px);
    -ms-filter: blur(70px);
    filter: blur(70px);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='70');
}
复制代码

3.2.3 新闻列表

swiper插件可以了解一下



3.2.4 手风琴面板展开收缩特效

主要用到了transition属性


.item-active {
    background-image: none!important;
    width: 278px;
    padding: 0 22px;
    transition: width .8s,padding-left .2s,padding-right .2s;
    -ms-transition: width .8s,padding-left .2s,padding-right .2s;
    -moz-transition: width .8s,padding-left .2s,padding-right .2s;
    -webkit-transition: width .8s,padding-left .2s,padding-right .2s;
    -o-transition: width .8s,padding-left .2s,padding-right .2s;
}
复制代码

题外话:阿里正因为是很多程序猿们向往的大厂,所以我们对你们技术上出现的小问题会更加的关注和在乎,当然我写着文章是以一种交流和分享的姿态,不是砸场子而是文章前面写的,当然希望有阿里达摩院的同学看到我这篇简单的测评文章,可以把文中描述的达摩院官网中我个人觉得是bug的地方和优化的地方修复一哈,也希望对其他前端同学有所帮助~


关注下面的标签,发现更多相似文章
评论

查看更多 >