「前端諮詢」剛上線的阿里達摩院官網，從前端角度看圈點之處
寫在前面：
從去年十月份，馬雲成立阿里巴巴達摩院，到今年9月28號一年整，阿里達摩院官網正式上線。作為從事網際網路行業的人，大抵都是會去達摩院官網看看的，本文即我個人從前端角度對達摩院官網，進行的一次簡單粗暴的測評，細數圈點之處，並提取一些作為前端可以值得借鑑和思考的程式碼技巧。第一次寫體驗報告類文章，想到什麼寫什麼，個人角度或片面，不足之處，或者您有更好的見解，在留言處歡迎交流。當然希望有阿里達摩院的同學看到我這篇簡單的測評文章，可以把文中描述的達摩院官網中我個人覺得是bug的地方和優化的地方修復一哈。
一、初體驗
1.1域名
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的地方和優化的地方修復一哈，也希望對其他前端同學有所幫助~
個人部落格
更多前端技術文章、美術設計、wordpress外掛、優化教程、學習筆記盡在我的個人部落格喵容 - 和你一起描繪生活，歡迎一起交流學習，一起進步：http://panmiaorong.top