簡答題 1、什麼是防抖和節流？有什麼區别？如何實現？

　　參考答案

　　防抖

　　觸發高頻事件後n秒内函數隻會執行一次，如果n秒内高頻事件再次被觸發，則重新計算時間

　　思路： 每次觸發事件時都取消之前的延時調用方法

　　節流

　　高頻事件觸發，但在n秒内隻會執行一次，所以節流會稀釋函數的執行頻率

　　思路： 每次觸發事件時都判斷當前是否有等待執行的延時函數

　　2、 get請求傳參長度的誤區、get和post請求在緩存方面的區别

　　誤區：我們經常說get請求參數的大小存在限制，而post請求的參數大小是無限制的。

　　參考答案

　　實際上HTTP 協議從未規定 GET/POST 的請求長度限制是多少。對get請求參數的限制是來源與浏覽器或web服務器，浏覽器或web服務器限制了url的長度。為了明确這個概念，我們必須再次強調下面幾點:

　　HTTP 協議 未規定 GET 和POST的長度限制GET的最大長度顯示是因為 浏覽器和 web服務器限制了 URI的長度不同的浏覽器和WEB服務器，限制的最大長度不一樣要支持IE，則最大長度為2083byte，若隻支持Chrome，則最大長度 8182byte 補充補充一個get和post在緩存方面的區别：

　　get請求類似于查找的過程，用戶獲取數據，可以不用每次都與數據庫連接，所以可以使用緩存。post不同，post做的一般是修改和删除的工作，所以必須與數據庫交互，所以不能使用緩存。因此get請求适合于請求緩存。 3、模塊化發展曆程

　　可從IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Module、script type="module" 這幾個角度考慮。

　　參考答案

　　模塊化主要是用來抽離公共代碼，隔離作用域，避免變量沖突等。

　　IIFE： 使用自執行函數來編寫模塊化，特點：在一個單獨的函數作用域中執行代碼，避免變量沖突。

　　AMD： 使用requireJS 來編寫模塊化，特點：依賴必須提前聲明好。

　　CMD： 使用seaJS 來編寫模塊化，特點：支持動态引入依賴文件。

　　CommonJS： nodejs 中自帶的模塊化。

　　UMD：兼容AMD，CommonJS 模塊化語法。

　　webpack(require.ensure)：webpack 2.x 版本中的代碼分割。

　　ES Modules： ES6 引入的模塊化，支持import 來引入另一個 js 。

　　4、npm 模塊安裝機制，為什麼輸入 npm install 就可以自動安裝對應的模塊？

　　參考答案

　　1. npm 模塊安裝機制：

　　發出npm install命令查詢node_modules目錄之中是否已經存在指定模塊若存在，不再重新安裝若不存在npm 向 registry 查詢模塊壓縮包的網址下載壓縮包，存放在根目錄下的.npm目錄裡解壓壓縮包到當前項目的node_modules目錄 2. npm 實現原理

　　輸入 npm install 命令并敲下回車後，會經曆如下幾個階段（以 npm 5.5.1 為例）：

　　執行工程自身 preinstall當前 npm 工程如果定義了 preinstall 鈎子此時會被執行。确定首層依賴模塊首先需要做的是确定工程中的首層依賴，也就是 dependencies 和 devDependencies 屬性中直接指定的模塊（假設此時沒有添加 npm install 參數）。工程本身是整棵依賴樹的根節點，每個首層依賴模塊都是根節點下面的一棵子樹，npm 會開啟多進程從每個首層依賴模塊開始逐步尋找更深層級的節點。獲取模塊獲取模塊是一個遞歸的過程，分為以下幾步：獲取模塊信息。在下載一個模塊之前，首先要确定其版本，這是因為 package.json 中往往是 semantic version（semver，語義化版本）。此時如果版本描述文件（npm-shrinkwrap.json 或 package-lock.json）中有該模塊信息直接拿即可，如果沒有則從倉庫獲取。如 packaeg.json 中某個包的版本是 ^1.1.0，npm 就會去倉庫中獲取符合 1.x.x 形式的最新版本。獲取模塊實體。上一步會獲取到模塊的壓縮包地址（resolved 字段），npm 會用此地址檢查本地緩存，緩存中有就直接拿，如果沒有則從倉庫下載。查找該模塊依賴，如果有依賴則回到第1步，如果沒有則停止。模塊扁平化（dedupe）上一步獲取到的是一棵完整的依賴樹，其中可能包含大量重複模塊。比如 A 模塊依賴于 loadsh，B 模塊同樣依賴于 lodash。在 npm3 以前會嚴格按照依賴樹的結構進行安裝，因此會造成模塊冗餘。從 npm3 開始默認加入了一個 dedupe 的過程。它會遍曆所有節點，逐個将模塊放在根節點下面，也就是 node-modules 的第一層。當發現有重複模塊時，則将其丢棄。這裡需要對重複模塊進行一個定義，它指的是模塊名相同且 semver 兼容。每個 semver 都對應一段版本允許範圍，如果兩個模塊的版本允許範圍存在交集，那麼就可以得到一個兼容版本，而不必版本号完全一緻，這可以使更多冗餘模塊在 dedupe 過程中被去掉。比如 node-modules 下 foo 模塊依賴 lodash@^1.0.0，bar 模塊依賴 lodash@^1.1.0，則 ^1.1.0 為兼容版本。而當 foo 依賴 lodash@^2.0.0，bar 依賴 lodash@^1.1.0，則依據 semver 的規則，二者不存在兼容版本。會将一個版本放在 node_modules 中，另一個仍保留在依賴樹裡。舉個例子，假設一個依賴樹原本是這樣：node_modules-- foo---- lodash@version1-- bar---- lodash@version2假設 version1 和 version2 是兼容版本，則經過 dedupe 會成為下面的形式：node_modules-- foo-- bar-- lodash（保留的版本為兼容版本）假設 version1 和 version2 為非兼容版本，則後面的版本保留在依賴樹中：node_modules-- foo-- lodash@version1-- bar---- lodash@version2安裝模塊這一步将會更新工程中的 node_modules，并執行模塊中的生命周期函數（按照 preinstall、install、postinstall 的順序）。執行工程自身生命周期當前 npm 工程如果定義了鈎子此時會被執行（按照 install、postinstall、prepublish、prepare 的順序）。最後一步是生成或更新版本描述文件，npm install 過程完成。 5、ES5的繼承和ES6的繼承有什麼區别？

　　6、定時器的執行順序或機制？

　　7、['1','2','3'].map(parseInt) 輸出什麼,為什麼?

　　8、Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?

　　9、fetch發送2次請求的原因

　　http、浏覽器對象 1、HTTPS 握手過程中，客戶端如何驗證證書的合法性

　　2、TCP三次握手和四次揮手

　　3、img iframe script 來發送跨域請求有什麼優缺點？

　　4、http和https的區别？

　　5、什麼是Bom？有哪些常用的Bom屬性？

　　6、Cookie、sessionStorage、localStorage的區别

　　7、Cookie如何防範XSS攻擊

　　8、浏覽器和 Node 事件循環的區别？

　　9、簡述HTTPS中間人攻擊

　　10、說幾條web前端優化策略

　　11、你了解的浏覽器的重繪和回流導緻的性能問題

　　react、Vue 1、寫 React / Vue 項目時為什麼要在列表組件中寫 key，其作用是什麼？

　　2、React 中 setState 什麼時候是同步的，什麼時候是異步的？

　　3、下面輸出什麼

　　4、為什麼虛拟dom會提高性能?

　　css 1、分析比較 opacity: 0、visibility: hidden、display: none 優劣和适用場景

　　2、清除浮動的方式有哪些?比較好的是哪一種?

　　3、css sprite 是什麼,有什麼優缺點

　　4、link與@import的區别

　　5、display: block;和display: inline;的區别

　　6、容器包含若幹浮動元素時如何清理浮動

　　7、PNG,GIF,JPG 的區别及如何選

　　8、display,float,position 的關系

　　9、如何水平居中一個元素

　　JavaScript 1、JS有幾種數據類型,其中基本數據類型有哪些?

　　2、Promise 構造函數是同步執行還是異步執行，那麼 then 方法呢？

　　3、JS的四種設計模式

　　4、列舉出集中創建實例的方法

　　5、簡述一下前端事件流

　　6、Function.proto(getPrototypeOf)是什麼？

　　7、簡述一下原型 / 構造函數 / 實例

　　8、簡述一下JS繼承，并舉例

　　9、函數柯裡化

　　10、說說bind、call、apply 區别？

　　11、箭頭函數的特點

　　程序閱讀題 1、下面程序輸出的結果是什麼？

　　A: Lydia 和 undefinedB: Lydia 和 ReferenceErrorC: ReferenceError 和 21D: undefined 和 ReferenceError 2、下面代碼輸出什麼

　　3、下面的輸出結果是什麼？

　　A: orangeB: purpleC: greenD: TypeError 4、下面代碼中什麼時候會輸出1？

　　5、下面的輸出結果是什麼？

　　6、下面代碼輸出的結果是什麼？

　　7、下面代碼的輸出是什麼?

　　8、下面代碼的輸出是什麼?

　　9、下面代碼的輸出是什麼?

　　10、下面代碼的輸出是什麼?

　　11、下面代碼的輸出結果是什麼？

　　因文章篇幅較長，不能把答案一一寫出

　　最後

　　小編是一個有着5年工作經驗的前端工程師，關于web前端有一個完整學習web前端的路線，學習材料和工具。需要的夥伴可以私信我，發送“前端”就可以獲取領取地址，免費送給大家。對于學習web前端有任何問題（學習方法，學習效率，如何就業）都可以問我。希望你也能憑自己的努力，成為下一個優秀的程序員！

　　,