从前端角度分析阿里达摩院官网

前言

从去年十月份，马云成立阿里巴巴达摩院，到今年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的地方和优化的地方修复一哈，也希望对其他前端同学有所帮助~

这篇好文章是转载于：学新通技术网