法門掃地僧總結前端面試題

Front-End

前端開發工程師面試寶典！   （本文部分有轉載，不按期更新！）            

前言（README.md）

本倉庫是我整理的前端常見面試題，大部分由我整理，其中個別部分參考網上其餘資料，感謝！   
本資料僅供你們學習參考使用！歡迎你們Star和提交issues。

NO.1 README
NO.2  簡歷經驗分享
NO.3  angular常見問題
NO.4 前端面試寶典初版
NO.5 前端筆記版本第二版
NO.6 前端筆記版本第三版
NO.7 前端筆記版本第四版
NO.8 vue常見問題

歡迎你們一塊兒交流提升

AMD和CMD是什麼？它們的區別有哪些？

• AMD 是 RequireJS 在推廣過程當中對模塊定義的規範化產出。
  CMD 是 SeaJS 在推廣過程當中對模塊定義的規範化產出。

  這些規範的目的都是爲了 JavaScript 的模塊化開發，特別是在瀏覽器端的。目前這些規範的實現都能達成瀏覽器端模塊化開發的目的。
  區別：
  1. 對於依賴的模塊，AMD 是提早執行，CMD 是延遲執行。不過 RequireJS 從 2.0 開始，也改爲能夠延遲執行（根據寫法不一樣，處理方式不一樣）。CMD 推崇 as lazy as possible.
  2. CMD 推崇依賴就近，AMD 推崇依賴前置。
     
  3. AMD 的 API 默認是一個當多個用，CMD 的 API 嚴格區分，推崇職責單一。好比 AMD 裏，require 分全局 require 和局部 require，都叫 require。CMD 裏，沒有全局 require，而是根據模塊系統的完備性，提供 seajs.use 來實現模塊系統的加載啓動。CMD 裏，每一個 API 都簡單純粹。

web開發常見的漏洞

• XSS（跨站腳本攻擊）：其原理是攻擊者向有XSS漏洞的網站中輸入(傳入)惡意的HTML代碼，當其它用戶瀏覽該網站時，這段HTML代碼會自動執行，從而達到攻擊的目的。如，盜取用戶Cookie、破壞頁面結構、重定向到其它網站等。
• SQL注入：用戶能夠提交一段數據庫查詢代碼，根據程序返回的結果，得到某些他想得知的數據，這就是所謂的SQL Injection，即SQL注入。

cookie和session

• 你在瀏覽網站的時候，WEB 服務器會先送一小小資料放在你的計算機上，Cookie 會幫你在網站上所打的文字或是一些選擇，
  都紀錄下來。當下次你再光臨同一個網站，WEB 服務器會先看看有沒有它上次留下的 Cookie 資料，有的話，就會依據 Cookie
  裏的內容來判斷使用者，送出特定的網頁內容給你。
  當程序須要爲某個客戶端的請求建立一個session時，服務器首先檢查這個客戶端的請求裏是否已包含了一個session標識
  （稱爲session id），若是已包含則說明之前已經爲此客戶端建立過session，服務器就按照session id把這個session檢索出來
  使用（檢索不到，會新建一個），若是客戶端請求不包含session id，則爲此客戶端建立一個session而且生成一個與此session相
  關聯的session id

MVC BFC

• mvc是模型(model)－視圖(view)－控制器(controller)的縮寫，一種軟件設計典範使用MVC的目的是將M和V的實現代碼分離，從而使同一個程序能夠使用不一樣的表現形式。MVC對應Html，CSS，js。

+BFC全稱」Block Formatting Context」, 中文爲「塊級格式化上下文」。流體特性：塊狀水平元素，如div元素（下同），在默認狀況下（非浮動、絕對定位等），水平方向會自動填滿外部的容器；BFC元素特性表現原則就是，內部子元素不會影響外部的元素。

HTTP狀態碼：

1.消息 2.成功 3.重定向 4.請求錯誤 5.服務器錯誤

304：響應禁止包含消息體，若是客戶端發送了一個帶條件的 GET 請求且該請求已被容許，而文檔的內容（自上次訪問以來或者根據請求的條件）並無改變，則服務器應當返回這個狀態碼。
305：被請求的資源必須經過指定的代理才能被訪問。
400：語義有誤，當前請求沒法被服務器理解。除非進行修改，不然客戶端不該該重複提交這個請求，或者請求參數有誤。
403：服務器已經理解請求，可是拒絕執行它。
404：請求失敗，請求所但願獲得的資源未被在服務器上發現。
500：服務器遇到了一個不曾預料的情況，致使了它沒法完成對請求的處理。通常來講，這個問題都會在服務器端的源代碼出現錯誤時出現。

理解CSS盒子模型

• 什麼是CSS的盒子模式呢？爲何叫它是盒子？先說說咱們在網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具有這些屬性。
  +CSS盒子模式
  這些屬性咱們能夠把它轉移到咱們平常生活中的盒子（箱子）上來理解，平常生活中所見的盒子也具備這些屬性，因此叫它盒子模式。那麼內容就是盒子裏裝的東西；而填充就是怕盒子裏裝的東西（貴重的）損壞而添加的泡沫或者其它抗震的輔料；邊框就是盒子自己了；至於邊界則說明盒子擺放的時候的不能所有堆在一塊兒，要留必定空隙保持通風，同時也爲了方便取出嘛。在網頁設計上，內容常指文字、圖片等元素，可是也能夠是小盒子（DIV嵌套），與現實生活中盒子不一樣的是，現實生活中的東西通常不能大於盒子，不然盒子會被撐壞的，而CSS盒子具備彈性，裏面的東西大過盒子自己最多把它撐大，但它不會損壞的。並且填充只有寬度屬性

DNS的工做原理（遞歸和迭代）（應用層）

DNS的工做原理及過程分下面幾個步驟：
第一步：客戶機提出域名解析請求，並將該請求發送給本地的域名服務器。
第二步：當本地的域名服務器收到請求後，就先查詢本地的緩存，若是有該紀錄項，則本地的域名服務器就直接把查詢的結果返回。
第三步：若是本地的緩存中沒有該紀錄，則本地域名服務器就直接把請求發給根域名服務器，而後根域名服務器再返回給本地域名服務器一個所查詢域(根的子域) 的主域名服務器的地址。
第四步：本地服務器再向上一步返回的域名服務器發送請求，而後接受請求的服務器查詢本身的緩存，若是沒有該紀錄，則返回相關的下級的域名服務器的地址。
第五步：重複第四步，直到找到正確的紀錄。
第六步：本地域名服務器把返回的結果保存到緩存，以備下一次使用，同時還將結果返回給客戶機。

什麼是DOM事件處理程序？

首先要理解什麼是DOM？Dom是針對HTML文檔的一個API。什麼是事件流？事件流分爲：事件冒泡（IE的事件流）和事件捕獲。事件冒泡就是由最具體的元素開始接收，而後逐級向上；事件捕獲就是由不太具體的元素開始接收，逐級向下，最具體的元素最後才接收到事件。
DOM事件處理程序分爲DOM0級、DOM2級。DOM0級具備簡單，跨瀏覽器的優點，它是把函數賦值給一個事件的處理程序屬性。

若是給一個元素同時綁定兩個事件，會怎麼樣？

Dom 0級和Dom 2級均可以給一個元素添加多個事件，Dom 0級的每一個事件只支持一個事件處理程序，若是綁定同一個事件，那麼後邊的那個事件，函數會覆蓋掉前邊的那個事件函數。Dom2級能夠添加多個事件處理程序，他們會按照添加的順序觸發。

jQuery源碼分析：

選擇器 Sizzle引擎 回調對象 - Callbacks 事件綁定 - 綁定設計
DOM操做方法與核心 Ajax - 總體結構
 選擇器 Sizzle引擎：我的認爲，sizzle選擇器是加強版的querySelectorAll 函數：返回指定元素節點的子樹中匹配selector的節點集合，採用的是深度優先預查找；若是沒有匹配的，這個方法返回空集合）

幾個前端框架的區別：

jQuery
核心js只有50K，小而精，佔用帶寬小，側重於對js dom編程。有靈活便捷的Ajax請求和回調操做。
ExtJS
一整套帶有UI的js庫，封裝得不少，核心js就600多K，這麼大的東西門戶網站固然就別想了，裏面的效果固然也不會運用到門戶網站，因此它是專門爲管理系統而生的。
三、YUI
或者是相似於網盤應用這種東東。
4.Dojo
Dojo是功能最爲強大的javascript框架，刻意提醒一下：功能最強大。因此它幾乎包含了全部你可能想要用到的東西。）。 Dojo更適合企業應用和產品開發的須要，
五、Prototype
最成熟的。但我的認爲能夠被Jquery取代。二者類似度也比較高。

前端性能優化

①對於頁面來講：儘可能減小DOM元素的數量
減小iframe的數量
減小http的請求次數
提早加載
②對於CSS來講：將樣式表置頂
使用link代替@important
　　區別1：link引用CSS時，在頁面載入時同時加載；@import須要頁面網頁徹底載入之後加載。
　　區別2：link是XHTML標籤，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。link支持定義RSS(簡易信息聚合).
區別3：link支持使用Javascript控制DOM去改變樣式；而@import不支持。

③對於JS來講： 將腳本置底
使用外部JS和CSS文件
精簡JS和CSS文件，去除重複腳本

目前，前端性能測試的執行工具也有不少，好比YSlow，Page Speed，dynaTrace AJAX Edition，webload等等。

HTML語義化

就是當你寫html時，要按照人們的思考邏輯寫。不但要本身能看懂，也要讓別人也能看懂，不要讓別人以爲你的代碼很亂。語義化的主要目的就是讓你們直觀的認識標籤(markup)和屬性(attribute)的用途和做用。
語義化的網頁的好處，最主要的就是對搜索引擎友好，有了良好的結構和語義你的網頁內容天然容易被搜索引擎抓取，你網站的推廣即可以省下很多的功夫。
語義 Web 技術有助於利用基於開放標準的技術，從數據、文檔內容或應用代碼中分離出意義。

說說jsonp，getJSON(),getScript():

Jsonp（解決跨域）
一種非正式傳輸協議，人們把它稱做JSONP，該協議的一個要點就是容許用戶傳遞一個callback參數給服務端，而後服務端返回數據時會將這個callback參數做爲函數名來包裹住JSON數據，這樣客戶端就能夠隨意定製本身的函數來自動處理返回數據了。
由於，

刷新評論 刷新頁面 返回頂部