Demystifying the Amazon pull-down menu with ultra-fast response speed is not an ultra-fast problem

I saw an article aboutUncover Amazon's ultra-fast pull-down menuHttp://www.36kr.com/p/201751.html, and describe its loading speed, also gives a triangle algorithm, and gives a few examples to illustrate how powerful, just want to think, actually, this is not the case.

First, let's talk about how Amazon is implemented technically.

When you move the cursor to the main menu, move the cursor to the main menu.

The HTML code is as follows:

<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 code in normal state

<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 "> books </a> </LI>

When you move the mouse over the sub-menu

<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>

The comparison is related to the two classes.

Nav_active indicates the style of the selected menu

Nav_hover indicates whether the mouse is on the current menu

Then let's look at the sub-menu code and use the display attribute to display and hide the sub-menu content. Is this the same as the menu we normally implement. You can refer to the menu switching experience on the blog homepage.

 

Why does it feel like the process? The second-level menu on the Amazon Homepage uses a div with the ID nav_subcats_wrap to accommodate the above Code

<Div id = "nav_subcats_wrap" class = "nav_browse_wrap" style = "display: block;"> (sub-menu content) </div>

However, the container where these sub-menus are located does not disappear when the entire main menu and sub-menu are not left. This is different from closing a menu and then opening a menu, that is, it will not shake your eyes. In this case, the speed of rotating the loading progress circle of chrome bar is faster than that of Firefox, and it seems that the browsing speed is faster.

This triangle switching code is used when switching the main menu. The main function of this triangle is to move the sub-menu to the desired position without translating it to the sub-menu when selecting the sub-menu. Reduce the misoperation of most level-2 menus.

 

Let's sum up:

1. A tip is used in the menu. When you enter the menu, the main menu is opened and the content of the main menu is displayed in the sub menu. When you switch the menu, the main Div of the sub menu is not closed, you can only switch between display and hide of menus. In this way, you do not have to change the display speed.

2. When you select a sub-menu from the main menu, the incorrect switchover of the sub-menu is greatly reduced. There is nothing to say about the user experience.

 

PS. It is found that the menu will shrink when the browser cannot be displayed on the homepage of Amazon to display the main content. It seems that the user experience always shows a gap in nuances.