写在前面:
从去年十月份, 马云成立阿里巴巴达摩院, 到今年 9 月 28 号一年整, 阿里达摩院官网正式上线. 作为从事互联网行业的人, 大抵都是会去达摩院官网看看的, 本文即我个人从前端角度对达摩院官网, 进行的一次简单粗暴的测评, 细数可圈可点的地方, 并提取一些作为前端可以值得借鉴和思考的代码技巧. 第一次写体验报告类文章, 想到什么写什么, 个人角度或片面, 不足之处, 或者您有更好的见解, 在留言处欢迎交流. 当然希望有阿里达摩院的同学看到我这篇简单的测评文章, 可以把文中描述的达摩院官网中我个人觉得是 bug 的地方和优化的地方修复一哈.
一, 初体验
1.1 域名
pc 端: https://damo.alibaba.com/
移动端: https://m.damo.alibaba.com/
1.2 页面布局(直接上图了)
pc 端
移动端
总体设计风格中国风和简约科技感, 中国风主要通过水墨 (山) 背景图清澈, 科技感是用了大量纯色(带有轻微渐变的深蓝色)
二, 小测牛刀
2.1 页面加载时间
清除浏览器缓存, 打开控制台, 刷新页面, 得到如下信息(环境: 个人家庭网络 Google Chrome 浏览器), 可以看出该网站是服务端渲染的
, 请求数(requests):0/42
, 转移资源大小(transferred):15.8M
, 所有请求(finish):3.09S
,DOM 树构建完成(DOMContentLoaded):558ms
, 页面加载完毕(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 的地方和优化的地方修复一哈, 也希望对其他前端同学有所帮助~
来源: https://juejin.im/post/5baf8c5bf265da0a867c46f5