寫在前面：
從去年十月份，馬雲成立阿里巴巴達摩院，到今年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的地方和優化的地方修復一哈，也希望對其他前端同學有所幫助~