「前端资讯」刚上线的阿里达摩院官网，从前端角度看圈点之处

写在前面：

从去年十月份，马云成立阿里巴巴达摩院，到今年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.2（优化）导航最后的CN,首页希望是可以点击切换各国语言的，当然子页都是ok的，可以切换语言（已修复）

3.1.3（优化）轮播图，这块鼠标放上去是可以点击的，强迫症但本身又是很小的范围可以放

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

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

3.1.4（优化）首页和子页轮播图，2M大图，加载时间（3s+）等到你有点窒息

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

此处会把达摩院官网好玩的地方，用代码分析和写一个类似的demo，并贡献代码（国庆期间更新吧）

本文未完待续…

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