前端知識點查缺補漏

# JavaScript基礎

## 變量和類型

1.JavaScript規定了幾種語言類型（原文連接：http://www.mamicode.com/info-detail-2347949.html）
    
    在 JavaScript 規範中，共定義了七種數據類型，分爲 「基本類型」 和 「引用類型」 兩大類，以下所示：

    基本類型：String、Number、Boolean、Symbol、Undefined、Null
    引用類型：Object

2.JavaScript對象的底層數據結構是什麼

3.Symbol類型在實際開發中的應用、可手動實現一個簡單的Symbol（原文連接：https://www.jianshu.com/p/f40a77bbd74e）

    Symbol是由ES6規範引入的一項新特性，它的功能相似於一種標識惟一性的ID。

4.JavaScript中的變量在內存中的具體存儲形式

5.基本類型對應的內置對象，以及他們之間的裝箱拆箱操做（原文連接：https://www.jianshu.com/p/d66cf6f711a1）

    1）所謂裝箱，就是把基本類型轉變爲對應的對象。裝箱分爲隱式和顯示。
    2）拆箱與裝箱相反，把對象轉變爲基本類型的值。拆箱過程內部調用了抽象操做 ToPrimitive 。該操做接受兩個參數，第一個參數是要轉變的對象，第二個參數  PreferredType 是對象被期待轉成的類型。第二個參數不是必須的，默認該參數爲 number，即對象被期待轉爲數字類型。有些操做如 String(obj) 會傳入 PreferredType 參數。有些操做如 obj + " " 不會傳入 PreferredType。

6.理解值類型和引用類型（原文連接：https://www.cnblogs.com/leezhxing/p/4105069.html）

    值類型：也稱爲原始數據或原始值（primitive value）。

        這類值存儲在棧（stack）中，棧是內存中一種特殊的數據結構，也稱爲線性表，棧按照後進先出的原則存儲數據，先進入的數據被壓入棧底，最後插入（push）的數據放在棧頂，須要讀取數據時從棧頂開始彈出（pop）數據，即最後一個數據被第一個讀出來。所以說，值類型都是簡單的數據段。變量的位置和變量值的位置是重疊的，也就是說值類型的數據被存儲在變量被訪問的位置。

    引用類型：這類值存儲在堆（heap）中，堆是內存中的動態區域，至關於自留空間，在程序運行期間會動態分配給代碼和堆棧。

        堆中存儲的通常都是對象，而後經過一個編號傳遞給棧內變量，這個編號就是所謂的引用指針（point），這樣變量和變量值之間是分離的，它們經過指針相聯繫。當讀寫數據時，計算機經過變量的指針找到堆中的數據塊，並進行操做。

7.null和undefined的區別（原文連接：https://blog.csdn.net/zxy9602/article/details/70243531）

    1）、定義
        （1）undefined：是全部沒有賦值變量的默認值，自動賦值
        （2）null：主動釋放一個變量引用的對象，表示一個變量再也不指向任何對象地址
    2）、什麼時候使用null?
        當使用完一個比較大的對象時，須要對其進行釋放內存時，設置爲null
    3）、null與undefined的異同點是什麼呢？
        共同點：都是原始類型，保存在棧中變量本地
        不一樣點：
           （1）undefined——表示變量聲明過但並未賦過值。
        它是全部未賦值變量默認值。
        例如：var a;    //a自動被賦值爲undefined
           （2）null——表示一個變量未來可能指向一個對象。
        通常用於主動釋放指向對象的引用。
        例如：var emps = ['ss','nn'];
                      emps = null;     //釋放指向數組的引用
    4）、延伸——垃圾回收站
        它是專門釋放對象內存的一個程序。
       （1）在底層，後臺伴隨當前程序同時運行；引擎會定時自動調用垃圾回收期；
       （2）總有一個對象再也不被任何變量引用時，才釋放。

8.至少能夠說出三種判斷JavaScript數據類型的方式，以及他們的優缺點，如何準確的判斷數組類型（原文連接：https://www.cnblogs.com/onepixel/p/5126046.html）

    （1）typeof     （2）instanceof    （3）constructor     （4）toString

9.可能發生隱式類型轉換的場景以及轉換原則，應如何避免或巧妙應用（原文連接：https://blog.csdn.net/baibaider/article/details/79938342）
    
    （1）運算符的轉換：
        -，*，/，%會將操做數轉換爲數字去計算，但+不同，兩邊純數字會按數字相加，純字符串會拼接，但數字和字符串也會將字符串和數字拼接起來。
    （2）雙等號的隱式轉換：
        1) 雙等號兩邊只要有以即是NaN，便返回false，且他自身不相等
        2) 布爾值會轉換爲數字，false轉換爲0，true轉換爲1
        3) 對象的轉換

10.出現小數精度丟失的緣由，JavaScript能夠存儲的最大數字、最大安全數字，JavaScript處理大數字的方法、避免精度丟失的方法（原文連接：https://www.cnblogs.com/thinkingthigh/p/8073526.html）

## 原型和原型鏈

1.理解原型設計模式以及JavaScript中的原型規則

- javascript裏面的原型設計模式：（原文連接：https://blog.csdn.net/shaowei828/article/details/81779418）
    
        設計模式（design pattern）是一套反覆使用、思想成熟、通過分類和無數實戰設計經驗的總結。
        
        是爲了代碼可重用、可擴展、可解耦、更容易被人理解和保證代碼可靠性。
        
        原型模式，就是建立一個共享的原型，經過拷貝這個原型來建立新的類，用於建立重複的對象，帶來性能上的提高。

- JavaScript中的原型規則：（原文連接：https://blog.csdn.net/shan1991fei/article/details/82669608）
        
        1）全部的引用類型（對象、數組、函數），都具備對象特性，既能夠自由擴展屬性（除了 null 之外）
            var obj = {};
            obj.a = 100;
            var arr = [];
            arr.a = 100;
            function fn(){}
            fn.a = 100;
        2）全部的引用類型（對象、數組、函數），都有一個__proto__屬性，屬性值是一個普通對象。（__proto__稱爲 隱式原型）（除了 null 之外）
            console.log(obj.__proto__);
            console.log(arr.__proto__);
            console.log(fn.__proto__);
        3）全部的函數，都有一個prototype屬性，屬性值也是一個普通對象。（prototype 稱爲 顯示原型）
            console.log(fn.prototype);
        4）全部的引用類型（對象、數組、函數），__proto__（隱式原型）屬性值指向它的構造函數的 prototype （顯示原型）屬性值
            console.log(obj.__proto__ === Object.prototype);
        5）當試圖獲得一個 引用類型（對象、數組、函數）的某個屬性時，若是這個對象自己沒有這個屬性，那麼會去它的 __proto__（即它的構造函數的 prototype ）中尋找
        （構造函數的 prototype 顯示原型和它自身的 __proto__ 隱式原型是一回事）
            //構造函數
            function Fn (name,age){
              this.name = name;  
            }
            //顯示原型
            Fn.prototype.alertName = function(){
            　　alert(this.name);
            }
            //建立實力
            var f = new Fn('clm');
            f.printName = function(){
            　　console.log(this.name);
            }
            f.printName();// clm
            //f 沒有 alertName 這時候會去它的 __proto__ 隱式原型中尋找 當前的隱式原型指向它的構造函數 prototype 顯示原型中尋找
            //this 補充 經過對象屬性去執行函數的時候，不管函數是一個自身的屬性，仍是從它的原型中獲得的屬性，它這個函數在執行當中這個this永遠指向它自己。
            //在執行f.alertName()時候，alert(this.name); 這個this就是f
            f.alertName();// clm

2.instanceof的底層實現原理，手動實現一個instanceof

- （原文連接：https://blog.csdn.net/sinat_17775997/article/details/89330468）---原理+實現
- （原文連接：https://blog.csdn.net/Picking_up_stones/article/details/70050086）---原理詳解（配圖幫助理解）

4.實現繼承的幾種方式以及他們的優缺點（原文連接：https://blog.csdn.net/ll_0801xyz/article/details/78278993）

    原文連接：https://blog.csdn.net/zwli96/article/details/89515124
    原文連接：https://blog.csdn.net/zwli96/article/details/89515193
    
    插入：面向對象+原型+繼承+做用域鏈+閉包+this使用（原文連接：https://blog.csdn.net/Monster_man/article/details/77455323）

5.至少說出一種開源項目(如Node)中應用原型繼承的案例（）

6.能夠描述new一個對象的詳細過程，手動實現一個new操做符（）

7.理解es6 class構造以及繼承的底層實現原理
（原文連接：https://blog.csdn.net/qq_34149805/article/details/86105123）

## 做用域和閉包

1.理解詞法做用域和動態做用域

    做用域共有兩種主要工做模型--詞法做用域和動態做用域，js採用詞法做用域。

    詞法做用域就是定義在詞法階段的做用域。詞法做用域由寫代碼時將變量和塊做用域書寫位置來決定。
    
    詞法做用域的建立發生在預編譯階段，詞法階段屬於預編譯的一個過程。
        
        eg.
        function foo(a) {
            var b = a * 2;
            function bar(c) {
                console.log( a, b, c );
            }
            bar( b * 3 );
        }
        foo( 2 ); // 2, 4, 12
    
![avatar][base64str-zyy-01]
    
        - 1包含着整個全局做用域，其中只有一個標識符：foo
        - 2包含着foo 所建立的做用域，其中有三個標識符：a、bar 和b
        - 3包含着bar 所建立的做用域，其中只有一個標識符：c
    
    不管函數在哪裏被調用，也不管它如何被調用，它的詞法做用域都只由函數被聲明時所處的位置決定
    
        function foo(){
            var a = 200;
            bar();
        }
        function bar(){
            console.log(a);//100
        }
        var a = 100;
        foo();
    
    雖然函數bar在foo中被調用，可是bar是定義在全局的，也就是說，bar的詞法做用域嵌套關係爲(由內到外)：bar自己的詞法做用域–>全局做用域。因此foo中的a並不影響輸出結果。


2.理解JavaScript的做用域和做用域鏈

![avatar][base64str-zyy-04]

3.理解JavaScript的執行上下文棧，能夠應用堆棧信息快速定位問題

![avatar][base64str-zyy-03]

4.this的原理以及幾種不一樣使用場景的取值
（原文連接：https://blog.csdn.net/w_q_1025/article/details/64227429）

>由於 this 的取值是函數執行上下文(context)的一部分，每次調用函數，都會產生一個新的執行上下文環境。當代碼中使用了 this，這個 this 的值就直接從執行的上下文中獲取了，而不會從做用域鏈中搜尋。

關於 this 的取值，大致上能夠分爲如下七種狀況：

>因爲嚴格模式下，禁止this指向全局對象，因此如下示例均運行在非嚴格模式下

5.閉包的實現原理和做用，能夠列舉幾個開發中閉包的實際應用
（原文連接：https://www.cnblogs.com/taodan/articles/4042682.html）

>閉包的概念：**閉包**是指有權訪問另外一個函數做用域中的變量的函數。建立閉包的常見方式，就是在一個函數內部建立另外一個函數。（原文連接：https://www.imooc.com/article/16915）

    在理解閉包以前有一些關於函數的基本概念須要先了解：
    
    做用域是程序中定義的一個變量的有效區域，做用域鏈規定了函數中調用一個變量時查找變量的順序，做用域鏈的用途是保證對執行環境有權訪問的全部變量和函數的有序訪問。
    
    執行環境定義了變量或函數有權訪問的其餘數據，每一個執行環境都有一個與之關聯的變量對象，裏面保存了執行環境中定義的全部變量和函數。每一個函數都有本身的執行環境，當執行流進入一個函數時，函數的環境就被推入一個環境棧中。而在函數執行以後，棧將其環境彈出，把控制權返回給以前的執行環境。
    
    僅僅看概念幾乎沒法理解閉包，因此仍是經過代碼來實際看看閉包起到的做用。

6.理解堆棧溢出和內存泄漏的原理，如何防止

>1，內存泄漏（memory leak）：是指程序在申請內存後，沒法釋放已申請的內存空間，致使系統沒法及時回收內存而且分配給其餘進程使用。一般少次數的內存沒法及時回收並不會到程序形成什麼影響，可是若是在內存自己就比較少獲取屢次致使內存沒法正常回收時，就會致使內存不夠用，最終致使內存溢出。
    
>二、內存溢出 （out of memory）：:指程序申請內存時，沒有足夠的內存供申請者使用，致使數據沒法正常存儲到內存中。也就是說給你個int類型的存儲數據大小的空間，可是卻存儲一個long類型的數據，這樣就會致使內存溢出。

    內存泄漏：
    
    以發生的方式來分類，內存泄漏能夠分爲4類：
        1.常發性內存泄漏。發生內存泄漏的代碼會被屢次執行到，每次執行都會致使一塊內存泄漏。
        
        2.偶發性內存泄漏。發生內存泄漏只有在某些特定環境或操做過程下才會發生。常發性和偶發性是相對的。對於特定的環境，偶發性也許變成了常發性的。因此測試環境和測試方法對檢測內存泄漏相當重要。
        
        3.一次性內存泄漏。發生內存泄漏的代碼只會執行一次，因爲算法上的缺陷，致使總會有一塊僅且一塊內存發生泄漏。好比在類的構造函數中分配內存，在析構函數中卻沒有釋放該內存，因此內存泄漏只會發生一次。
        
        4.隱式內存泄漏。程序在運行中不停的分配內存，可是知道結束時在釋放內存。嚴格的說這裏並無發生內存泄漏，由於最終釋放了全部申請的內存。但對於一個服務器程序，須要運行幾天，幾周甚至幾個月，不及時釋放內存也可能致使耗盡系統的全部內存。因此咱們稱這類內存泄漏爲隱式內存泄漏。

    內存溢出的緣由以及解決辦法：
        1.內存中加載的數據量過於龐大，如一次從數據庫中取出過多數據；
        2.集合類中有對對象的引用，使用後未清空，是的JVM不能回收；
        3.代碼中存在死循環或者循環產生過多重複的對象實體；
        4.使用第三方軟件中的BUG；
        5.啓動參數內存值設定的太小
    
    內存溢出的解決方案：
        1.修改JVM啓動參數，直接增長內存。（-Xms,-Xms參數必定不要忘記加）
        
        2.檢查錯誤日誌，查看「OutOfMemory」錯誤前是否有其餘異常或錯誤。
        
        3.對代碼進行走查和分析，找出可能發生內存溢出的位置。
        
        重點排查如下幾點：
            
            1）檢查對數據庫查詢中，是否有一次得到所有數據的查詢。通常來講，若是一次取十萬條記錄到內存，就可能引發內存溢出。這個問題比較隱蔽，在上線前，數據庫中數據較少，不容易出問題，上線後，數據庫中數據多了，一次查詢就有可能引發內存溢出。對數據庫查詢儘可能採用分頁查詢。
            
            2）檢查代碼是否有死循環或遞歸調用。
            
            3）檢查是否有大循環重複產生新對象實體。
            
            4）檢查List、Map等集合對象是否有使用後，未清除的問題。List、Map等集合對象會始終存有對對象的引用，使得這些對象不能被GC回收。
        
        4.使用內存查看工具動態查看內存使用狀況。

7.如何處理循環的異步操做
(原文連接：https://www.cnblogs.com/YikaJ/p/4133516.html)

8.理解模塊化解決的實際問題，可列舉幾個模塊化方案並理解其中原理


    
## 執行機制

1.爲什麼try裏面放return，finally還會執行，理解其內部機制
(原文連接：https://www.cnblogs.com/lc5910/p/6438074.html)


2.JavaScript如何實現異步編程，能夠詳細描述EventLoop機制
(原文連接：http://www.ruanyifeng.com/blog/2014/10/event-loop.html)
(原文連接：https://blog.csdn.net/Rnger/article/details/81908070)


3.宏任務和微任務分別有哪些
(原文連接：https://blog.csdn.net/weixin_42420703/article/details/82790942)

    宏任務、微任務有哪些

    宏任務包括：script(總體代碼), setTimeout, setInterval, setImmediate, I/O, UI rendering。
    
    微任務包括： Promises, Object.observe, MutationObserver

    宏任務、微任務的執行順序

    執行順序：先執行同步代碼，遇到異步宏任務則將異步宏任務放入宏任務隊列中，遇到異步微任務則將異步微任務放入微任務隊列中，當全部同步代碼執行完畢後，再將異步微任務從隊列中調入主線程執行，微任務執行完畢後再將異步宏任務從隊列中調入主線程執行，一直循環直至全部任務執行完畢。


4.能夠快速分析一個複雜的異步嵌套邏輯，並掌握分析方法


5.使用Promise實現串行
(原文連接：https://blog.csdn.net/zuoyiran520081/article/details/85068301)


6.Node與瀏覽器EventLoop的差別
（原文連接：https://blog.csdn.net/Fundebug/article/details/86487117）


7.如何在保證頁面運行流暢的狀況下處理海量數據
（原文連接：https://blog.csdn.net/ken_ding/article/details/86601844）
（原文連接：https://www.askhtml5.com/question/3）


## 語法和API

1.理解ECMAScript和JavaScript的關係
(原文連接：https://blog.csdn.net/liuk10/article/details/50829399)

>ECMAScript是JavaScript的規格，JavaScript是ECMAScript的一種實現


    JavaScript由三部分組成：ECMAScript、BOM以及DOM
    (原文連接：https://blog.csdn.net/zhouziyu2011/article/details/52837040)


2.熟練運用es五、es6提供的語法規範



3.熟練掌握JavaScript提供的全局對象（例如Date、Math）、全局函數（例如decodeURI、isNaN）、全局屬性（例如Infinity、undefined）
(原文連接：https://www.bbsmax.com/A/rV57nR4aJP/)


4.熟練應用map、reduce、filter 等高階函數解決問題
(原文連接：https://blog.csdn.net/xiao_shutong/article/details/77941560)


5.setInterval須要注意的點，使用settimeout實現setInterval
(原文連接：https://www.jianshu.com/p/32479bdfd851)


6.JavaScript提供的正則表達式API、可使用正則表達式（郵箱校驗、URL解析、去重等）解決常見問題


7.JavaScript異常處理的方式，統一的異常處理方案
(原文連接：https://blog.csdn.net/hulk_oh/article/details/52957962)


# 二 HTML和CSS

## HTML

1.從規範的角度理解HTML，從分類和語義的角度使用標籤


2.經常使用頁面標籤的默認樣式、自帶屬性、不一樣瀏覽器的差別、處理瀏覽器兼容問題的方式


3.元信息類標籤(head、title、meta)的使用目的和配置方法


4.HTML5離線緩存原理


5.可使用Canvas API、SVG等繪製高性能的動畫


## CSS

1.CSS盒模型，在不一樣瀏覽器的差別


2.CSS全部選擇器及其優先級、使用場景，哪些能夠繼承，如何運用at規則


3.CSS僞類和僞元素有哪些，它們的區別和實際應用


4.HTML文檔流的排版規則，CSS幾種定位的規則、定位參照物、對文檔流的影響，如何選擇最好的定位方式，雪碧圖實現原理


5.水平垂直居中的方案、能夠實現6種以上並對比它們的優缺點


6.BFC實現原理，能夠解決的問題，如何建立BFC


7.可以使用CSS函數複用代碼，實現特殊效果


8.PostCSS、Sass、Less的異同，以及使用配置，至少掌握一種


9.CSS模塊化方案、如何配置按需加載、如何防止CSS阻塞渲染


10.熟練使用CSS實現常見動畫，如漸變、移動、旋轉、縮放等等


11.CSS瀏覽器兼容性寫法，瞭解不一樣API在不一樣瀏覽器下的兼容性狀況


12.掌握一套完整的響應式佈局方案


## 手寫

1.手寫圖片瀑布流效果

2.使用CSS繪製幾何圖形（圓形、三角形、扇形、菱形等）

3.使用純CSS實現曲線運動（貝塞爾曲線）

4.實現經常使用佈局（三欄、聖盃、雙飛翼、吸頂），但是說出多種方式並理解其優缺點


# 三 計算機基礎

## 編譯原理

1.理解代碼究竟是什麼，計算機如何將代碼轉換爲能夠運行的目標程序


2.正則表達式的匹配原理和性能優化


3.如何將JavaScript代碼解析成抽象語法樹(AST)


4.base64的編碼原理


5.幾種進制的相互轉換計算方法，在JavaScript中如何表示和轉換

## 網絡協議

1.理解什麼是協議，瞭解TCP/IP網絡協議族的構成，每層協議在應用程序中發揮的做用


2.三次握手和四次揮手詳細原理，爲何要使用這種機制


3.有哪些協議是可靠，TCP有哪些手段保證可靠交付


4.DNS的做用、DNS解析的詳細過程，DNS優化原理


5.CDN的做用和原理


6.HTTP請求報文和響應報文的具體組成，能理解常見請求頭的含義，有幾種請求方式，區別是什麼


7.HTTP全部狀態碼的具體含義，看到異常狀態碼能快速定位問題


8.HTTP1.一、HTTP2.0帶來的改變


9.HTTPS的加密原理，如何開啓HTTPS，如何劫持HTTPS請求


10.理解WebSocket協議的底層原理、與HTTP的區別

## 設計模式

1.熟練使用前端經常使用的設計模式編寫代碼，如單例模式、裝飾器模式、代理模式等

2.發佈訂閱模式和觀察者模式的異同以及實際應用

3.能夠說出幾種設計模式在開發中的實際應用，理解框架源碼中對設計模式的應用


# 四 數據結構和算法

## JavaScript編碼能力

1.多種方式實現數組去重、扁平化、對比優缺點

2.多種方式實現深拷貝、對比優缺點

3.手寫函數柯里化工具函數、並理解其應用場景和優點

4.手寫防抖和節流工具函數、並理解其內部原理和應用場景

5.實現一個sleep函數

## 手動實現前端輪子

1.手動實現call、apply、bind


2.手動實現符合Promise/A+規範的Promise、手動實現async await


3.手寫一個EventEmitter實現事件發佈、訂閱


4.能夠說出兩種實現雙向綁定的方案、能夠手動實現


5.手寫JSON.stringify、JSON.parse


6.手寫一個模版引擎，並能解釋其中原理


7.手寫懶加載、下拉刷新、上拉加載、預加載等效果

## 數據結構

1.理解常見數據結構的特色，以及他們在不一樣場景下使用的優缺點

2.理解數組、字符串的存儲原理，並熟練應用他們解決問題

3.理解二叉樹、棧、隊列、哈希表的基本結構和特色，並能夠應用它解決問題

4.瞭解圖、堆的基本結構和使用場景

## 算法

1.可計算一個算法的時間複雜度和空間複雜度，可估計業務邏輯代碼的耗時和內存消耗


2.至少理解五種排序算法的實現原理、應用場景、優缺點，可快速說出時間、空間複雜度


3.瞭解遞歸和循環的優缺點、應用場景、並可在開發中熟練應用


4.可應用回溯算法、貪心算法、分治算法、動態規劃等解決複雜問題


5.前端處理海量數據的算法方案


#五 運行環境
咱們須要理清語言和環境的關係：

>ECMAScript描述了JavaScript語言的語法和基本對象規範

>瀏覽器做爲JavaScript的一種運行環境，爲它提供了：文檔對象模型（DOM），描述處理網頁內容的方法和接口、瀏覽器對象模型（BOM），描述與瀏覽器進行交互的方法和接口

>Node也是JavaScript的一種運行環境，爲它提供了操做I/O、網絡等API

## 瀏覽器API

1.瀏覽器提供的符合W3C標準的DOM操做API、瀏覽器差別、兼容性


2.瀏覽器提供的瀏覽器對象模型 (BOM)提供的全部全局API、瀏覽器差別、兼容性


3.大量DOM操做、海量數據的性能優化(合併操做、Diff、requestAnimationFrame等)


4.瀏覽器海量數據存儲、操做性能優化


5.DOM事件流的具體實現機制、不一樣瀏覽器的差別、事件代理


6.前端發起網絡請求的幾種方式及其底層實現、能夠手寫原生ajax、fetch、能夠熟練使用第三方庫


7.瀏覽器的同源策略，如何避免同源策略，幾種方式的異同點以及如何選型


8.瀏覽器提供的幾種存儲機制、優缺點、開發中正確的選擇


9.瀏覽器跨標籤通訊

## 瀏覽器原理

1.各瀏覽器使用的JavaScript引擎以及它們的異同點、如何在代碼中進行區分


2.請求數據到請求結束與服務器進行了幾回交互


3.可詳細描述瀏覽器從輸入URL到頁面展示的詳細過程


4.瀏覽器解析HTML代碼的原理，以及構建DOM樹的流程


5.瀏覽器如何解析CSS規則，並將其應用到DOM樹上


6.瀏覽器如何將解析好的帶有樣式的DOM樹進行繪製


7.瀏覽器的運行機制，如何配置資源異步同步加載


8.瀏覽器迴流與重繪的底層原理，引起緣由，如何有效避免


9.瀏覽器的垃圾回收機制，如何避免內存泄漏


10.瀏覽器採用的緩存方案，如何選擇和控制合適的緩存方案


## Node

1.理解Node在應用程序中的做用，可使用Node搭建前端運行環境、使用Node操做文件、操做數據庫等等


2.掌握一種Node開發框架，如Express，Express和Koa的區別


3.熟練使用Node提供的API如Path、Http、Child Process等並理解其實現原理


4.Node的底層運行原理、和瀏覽器的異同


5.Node事件驅動、非阻塞機制的實現原理


# 六 框架和類庫

>輪子層出不窮，從原理上理解纔是正道

## TypeScript

1.理解泛型、接口等面向對象的相關概念，TypeScript對面向對象理念的實現


2.理解使用TypeScript的好處，掌握TypeScript基礎語法


3.TypeScript的規則檢測原理


4.能夠在React、Vue等框架中使用TypeScript進行開發


## React
1.React和vue選型和優缺點、核心架構的區別


2.React中setState的執行機制，如何有效的管理狀態


3.React的事件底層實現機制


4.React的虛擬DOM和Diff算法的內部實現


5.React的Fiber工做原理，解決了什麼問題


6.React Router和Vue Router的底層實現原理、動態加載實現原理


7.可熟練應用React API、生命週期等，可應用HOC、render props、Hooks等高階用法解決問題


8.基於React的特性和原理，能夠手動實現一個簡單的React


## Vue

1.熟練使用Vue的API、生命週期、鉤子函數

2.MVVM框架設計理念

3.Vue雙向綁定實現原理、Diff算法的內部實現

4.Vue的事件機制

5.從template轉換成真實DOM的實現機制

## 多端開發


1.單頁面應用（SPA）的原理和優缺點，掌握一種快速開發SPA的方案


2.理解Viewport、em、rem的原理和用法，分辨率、px、ppi、dpi、dp的區別和實際應用


3.移動端頁面適配解決方案、不一樣機型適配方案


4.掌握一種JavaScript移動客戶端開發技術，如React Native：能夠搭建React Native開發環境，熟練進行開發，可理解React Native的運做原理，不一樣端適配


5.掌握一種JavaScript PC客戶端開發技術，如Electron：可搭建Electron開發環境，熟練進行開發，可理解Electron的運做原理


6.掌握一種小程序開發框架或原生小程序開發


7.理解多端框架的內部實現原理，至少了解一個多端框架的使用


## 數據流管理


1.掌握React和Vue傳統的跨組件通訊方案，對比採用數據流管理框架的異同


2.熟練使用Redux管理數據流，並理解其實現原理，中間件實現原理


3.熟練使用Mobx管理數據流，並理解其實現原理，相比Redux有什麼優點


4.熟練使用Vuex管理數據流，並理解其實現原理


5.以上數據流方案的異同和優缺點，不狀況下的技術選型


## 實用庫


1.至少掌握一種UI組件框架，如antd design，理解其設計理念、底層實現


2.掌握一種圖表繪製框架，如Echart，理解其設計理念、底層實現，能夠本身實現圖表


3.掌握一種GIS開發框架，如百度地圖API


4.掌握一種可視化開發框架，如Three.js、D3


5.工具函數庫，如lodash、underscore、moment等，理解使用的工具類或工具函數的具體實現原理


## 開發和調試

1.熟練使用各瀏覽器提供的調試工具

2.熟練使用一種代理工具實現請求代理、抓包，如charls

3.可使用Android、IOS模擬器進行調試，並掌握一種真機調試方案

4.瞭解Vue、React等框架調試工具的使用


# 七 前端工程

>前端工程化：以工程化方法和工具提升開發生產效率、下降維護難度

## 項目構建

1.理解npm、yarn依賴包管理的原理，二者的區別


2.可使用npm運行自定義腳本


3.理解Babel、ESLint、webpack等工具在項目中承擔的做用


4.ESLint規則檢測原理，經常使用的ESLint配置


5.Babel的核心原理，能夠本身編寫一個Babel插件


6.能夠配置一種前端代碼兼容方案，如Polyfill


7.Webpack的編譯原理、構建流程、熱更新原理，chunk、bundle和module的區別和應用


8.可熟練配置已有的loaders和plugins解決問題，能夠本身編寫loaders和plugins


## nginx

1.正向代理與反向代理的特色和實例

2.可手動搭建一個簡單的nginx服務器、

3.熟練應用經常使用的nginx內置變量，掌握經常使用的匹配規則寫法

4.能夠用nginx實現請求過濾、配置gzip、負載均衡等，並能解釋其內部原理


## 開發提速

1.熟練掌握一種接口管理、接口mock工具的使用，如yapi

2.掌握一種高效的日誌埋點方案，可快速使用日誌查詢工具定位線上問題

3.理解TDD與BDD模式，至少會使用一種前端單元測試框架


## 版本控制

1.理解Git的核心原理、工做流程、和SVN的區別

2.熟練使用常規的Git命令、git rebase、git stash等進階命令

3.能夠快速解決線上分支回滾、線上分支錯誤合併等複雜問題


## 持續集成


1.理解CI/CD技術的意義，至少熟練掌握一種CI/CD工具的使用，如Jenkins


2.能夠獨自完成架構設計、技術選型、環境搭建、全流程開發、部署上線等一套完整的開發流程（包括Web應用、移動客戶端應用、PC客戶端應用、小程序、H5等等）


# 八 項目和業務

## 後端技能

1.瞭解後端的開發方式，在應用程序中的做用，至少會使用一種後端語言

2.掌握數據最終在數據庫中是如何落地存儲的，能看懂表結構設計、表之間的關聯，至少會使用一種數據庫


## 性能優化

1.瞭解前端性能衡量指標、性能監控要點，掌握一種前端性能監控方案


2.瞭解常見的Web、App性能優化方案


3.SEO排名規則、SEO優化方案、先後端分離的SEO


4.SSR實現方案、優缺點、及其性能優化


5.Webpack的性能優化方案


6.Canvas性能優化方案


7.React、Vue等框架使用性能優化方案

## 前端安全

1.XSS攻擊的原理、分類、具體案例，前端如何防護

2.CSRF攻擊的原理、具體案例，前端如何防護

3.HTTP劫持、頁面劫持的原理、防護措施

## 業務相關


1.能理解所開發項目的總體業務形態、業務目標、業務架構，能夠快速定位線上業務問題


2.能理解所開發項目總體的技術架構、能快讀的根據新需求進行開發規劃、能快速根據業務報警、線上日誌等定位並解決線上技術問題


3.能夠將本身的想法或新技術在業務中落地實踐，儘可能在團隊中擁有必定的不可替代性