吐槽一下【揭祕Amazon反應速度超快的下拉菜單】並非超快的問題

前天看到了一篇關於揭祕Amazon反應速度超快的下拉菜單 http://www.36kr.com/p/201751.html  ，並說明其加載速度快的問題，還給出了一個三角形的算法，並給出了幾個例子說明是多麼的強大，剛剛想了想，其實本職並非這個樣子的 。

首先說一說技術上亞馬遜是如何實現的。

當鼠標移動到主菜單 鼠標在主菜單上

html代碼以下

<li class="nav_first nav_pop_li nav_cat nav_active nav_hover" id="nav_cat_0"><a href="/Kindle%E7%94%B5%E5%AD%90%E4%B9%A6/b/ref=sa_menu_top_kindle?ie=UTF8&amp;node=116169071" class="nav_a">Kindle</a></li>

普通狀態的HTML代碼

<li class="nav_pop_li nav_cat" id="nav_cat_1"><a href="/%E5%9B%BE%E4%B9%A6/b/ref=sa_menu_top_book?ie=UTF8&amp;node=658390051" class="nav_a">圖書</a></li>

當鼠標移動到子菜單的時候

<li class="nav_first nav_pop_li nav_cat nav_active" id="nav_cat_0"><a href="/Kindle%E7%94%B5%E5%AD%90%E4%B9%A6/b/ref=sa_menu_top_kindle?ie=UTF8&amp;node=116169071" class="nav_a">Kindle</a></li>

對比一下和兩個class有關

nav_active 表示當前選擇的菜單的樣式

nav_hover表示鼠標是否在當前菜單上 

而後咱們看看子菜單的代碼，採用了display的屬性來顯示和隱藏子菜單的內容。這是否是和咱們正常實現的菜單是同樣的呢。你們能夠看看博客園首頁的菜單切換體會一下。

 

爲何會感受流程呢，亞馬遜首頁的二級菜單用了一個id爲nav_subcats_wrap的div來容納上面如圖的代碼

<div id="nav_subcats_wrap" class="nav_browse_wrap" style="display: block;">(子菜單內容)
</div>

而這些子菜單所在的容器在沒有離開整個主菜單和子菜單所在的區域時不會像咱們平時實現的菜單消失掉 。這和咱們先關閉掉一個菜單而後在打開一個菜單的區別就是不會晃眼。這就和chrome吧加載進度圈的旋轉速度比firefox的快，顯得瀏覽速度快是一個道理。

在主菜單切換的時候採用了這樣一個三角形的切換代碼。這個三角形的主要功能就是在選擇子菜單的時候不用平移到子菜單在移動到要選擇的位置。使整個二級菜單的選擇減小大多數的二級菜單選擇的誤操做。

 

好了總結一下：

1.在菜單中使用了一個小技巧，當進入菜單的時候，主菜單打開並在子菜單顯示主菜單的內容，在切換菜單時，子菜單的主div並不關閉，只切換菜單的顯示和隱藏，這樣切換，不會產生菜單晃眼的感受，並且速度很快  。

2.使用了三角形的區域判斷，在從主菜單進入子菜單選擇的時候，極大的減小了子菜單的誤切換。用戶體驗是沒得說的。

 

ps. 發現亞馬遜的首頁在瀏覽器顯示不下的時候菜單會收縮起來，以讓主要的內容顯示出來，看來用戶體驗老是在細微之處體現出差距。