前言
一句老話說的好：一圖勝千言。這句話對學前端也適用，有時候，一個demo被一大堆文字有用的多。下面我就給大家總結幾個。由於文中引用的部分項目僅支持http，下面的iframe中如果出現空白，請移步本文的http地址查看👉http://www.cnblogs.com/imgss/p/10583107.html ，或者直接點擊給出的原文鏈接。
防抖/節流
將鼠標在灰色方塊中移動，可以觀察正常觸發，防抖（debounce）和節流（throttle）后繪制出的圖像的區別。原項目地址
從圖中可以看出，防抖的作用是，在若干秒后如果不再有事件（如滾動，mousemove等）發生，就觸發處理函數，如果在這期間又發生了新的事件，則重新計時；節流則是每隔若干秒就觸發一次，只是將原來的高頻率降低了。
'=='是怎么計算的
下面的demo給出了當使用 ==時，js引擎是如何對兩邊的值進行隱式轉換，最終得出一個true或者false的,原文鏈接
規則：以 x==y 為例子
- 如果x和y的類型相同
1.a. 返回 x === y的結果. - 如果x是 null 而且y 是 undefined, 返回 true
- 如果 x 是 undefined 而 y 是 null, 返回 true
- 如果 x 是 number 而 y 是 string, 將 y 轉換成 number 再比較.
- 如果 x 是 string 而 y 是 number, 將 x 轉換成 number 再比較.
- 如果 x 是 布爾值, 將 x 轉換成 number 再比較.
- 如果 y 是 布爾值, 將 y 轉換成 number 再比較.
- 如果 x 是 number，string，symbol三種類型之一， typeof y是 object, 將y轉換成原始類型再比較.
- 如果 y 是 number，string，symbol三種類型之一， typeof x是 object, 將x轉換成原始類型再比較.
- 返回 false.
ease-in,ease-out,cubic-bezier
無論是css還是js動畫庫，繞不開的一個概念就是緩動函數。linear,ease-in,ease-out分別會對動畫產生什么效果？下面這個網站將緩動函數之間的區別可視化。
GreenSock提供了更復雜的緩動函數及可視化，地址：https://greensock.com/ease-visualizer
bezier曲線
二階，三階貝塞爾曲線的區別是什么，控制點的作用是什么？可以把玩一下下面這個demo，給定3個及以上控制點，生成你想要的曲線。原文鏈接
使用方法也很簡單，首先點擊3個及以上的點，然后點擊 繪制 即可看到生成bezier曲線的動畫。
進階閱讀：A Primer on Bézier Curves
svg中的path -- m,h,v,l,z,q,t,c,s
svg <path>里的那些一個字母的命令看着頭昏腦漲？M是啥，L又是啥？下面這個項目來拯救你。地址
配合張鑫旭大神這篇文章食用更佳。
函數調用棧
當js引擎執行一個函數時，函數調用棧是什么？js從主函數開始，如果函數中又有函數被調用，這個函數入棧，調用結束后出棧。
astExplorer
babel是如何把es6,轉換成es5的，vue是怎么把模板轉換成render函數的，AST在其中起着重要作用。https://astexplorer.net/
算法可視化
https://algorithm-visualizer.org/
大家還見過哪些有助於理解前端概念的網站呢，歡迎在評論區留言哦🦉