从前端角度分析阿里达摩院官网
前言
从去年十月份,马云成立阿里巴巴达摩院,到今年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的地方和优化的地方修复一哈,也希望对其他前端同学有所帮助~
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanekff
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01