CSS JavaScript 前端 编程 ·

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

写在前面:

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

参与评论