前端筆試題收集（筆記）

前端開發知識點

HTML&CSS：

對Web標準的理解、瀏覽器內核差別、兼容性、hack、CSS基本功：佈局、盒子模型、選擇器優先級、
HTML五、CSS三、Flexbox
複製代碼

JavaScript：

數據類型、運算、對象、Function、繼承、閉包、做用域、原型鏈、事件、RegExp、JSON、Ajax、
DOM、BOM、內存泄漏、跨域、異步裝載、模板引擎、前端MVC、路由、模塊化、Canvas、ECMAScript 六、Nodejs
複製代碼

其餘：

移動端、響應式、自動化構建、HTTP、離線存儲、WEB安全、優化、重構、團隊協做、可維護、易用性、SEO、UED、架構、職業生涯、快速學習能力
複製代碼

CSS類

假設高度已知，請寫出三欄佈局，其中左欄、右欄寬度各爲100px，中間自適應。

請寫出五到七種方案，並說出各類方案的優缺點和兼容性

1. float+margin 經典的包括聖盃佈局和雙飛翼佈局;此方式不等高，並且會使用定位，擴展性差。
2. inline-block+marin+(calc) 三個並列排放都在一行,中間的寬度是calc(100%-240px) ，減去兩邊的寬度和加上margin值；另外一種是在主體中添加一層div，而後設置margin，主體margin 0 -100px，center margin：0 120px；此方式不等高，使用定位，擴展性差。
3. table 設置con爲display：table，左右和主體都是table-cell，左右寬度固定，中間自適應，而且等高。
4. position 純定位，con設置position:absolute; 左右和主體都是relative，左右定寬，左右分別設置left和right，中間設置left、right一塊兒設置。給con高度，高度固定。
5. flex 彈性盒模型佈局：設置con的display：flex；左右高度固定，中間flex：1； 可是隻能在支持flex的瀏覽器中使用。等高。
6. grid 柵格佈局：設置con爲display：grid；設置gird-template-clomuns：100px 1fr 100px; 兩邊固定，中間自適應，等高。

左側菜單欄佔300px，右側內容能夠根據瀏覽器自適應。根據此要求，編寫html css代碼

1. float+margin:左邊浮動，主體設置marginLeft
2. table: 設置con的display爲table，全部的子元素都是table-cell，左邊定寬，等高
3. flex: 設置con爲display爲flex，左邊定寬，右邊flex爲1，等高
4. grid: 設置con的display爲grid，grid-template-columns: 100px 1fr; 等高；

CSS選擇器又哪些？有哪些新特性？有哪些僞類？

• *通用選擇器：選擇全部元素，不參與計算優先級
• #X id選擇器：選擇id值爲X的元素
• .X 類選擇器：選擇class包含X的元素
• X Y後代選擇器：選擇知足X選擇器的後代節點中知足Y選擇器的元素
• X元素選擇器： 選擇全部標籤爲X的元素
• :link,:visited,:focus,:hover,:active 鏈接狀態：選擇特定狀態的連接元素
• X + Y 直接兄弟選擇器：在X以後第一個兄弟節點中選擇知足Y選擇器的元素
• X > Y 子選擇器：選擇X的子元素中知足Y選擇器的元素
• X ~ Y 兄弟：選擇X以後全部兄弟節點中知足Y選擇器的元素
• [attr] :選擇全部設置了attr屬性的元素
• [attr=value] :選擇屬性值恰好爲value的元素
• [attr~=value] :選擇屬性值爲空白符分隔，其中一個的值恰好是value的元素
• [attr|=value] :選擇屬性值恰好爲value或者以value-開頭的元素
• [attr^=value] :選擇屬性值以value開頭的元素
• [attr$=value] :選擇屬性值以value結尾的元素
• [attr*=value] :選擇屬性值中包含value的元素
• [:checked] :選擇單選框，複選框，下拉框中選中狀態下的元素
• X:after，X::after：after僞元素，選擇元素虛擬子元素（元素的最後一個元素）
• :hover ：鼠標進入狀態的元素
• :not(selector): 選擇不符合selector的元素
• ::first-letter: 僞元素，選擇塊元素第一行的第一個字母
• ::first-line : 僞元素，選擇塊元素的第一行
• :nth-child(an + b) : 僞類，選擇前面有an+b - 1個兄弟節點的元素，其中n>=0
• :nth-last-child(an + b): 僞類，選擇後面有an+b - 1個兄弟節點的元素，其中n>=0
• X:nth-of-type(an+b): 僞類，X爲選擇器，解析獲得元素標籤，選擇前面有an+b-1個相同標籤兄弟節點的元素
• X:nth-last-of-type(an+b): 僞類，X爲選擇器，解析獲得元素標籤，選擇後面有an+b-1個相同標籤兄弟節點的元素
• X:first-child: 僞類，選擇知足X選擇器的元素，而且這個元素是其父節點的第一個元素
• X:last-child: 僞類，選擇知足X選擇器的元素，而且這個元素是其父節點的最後一個元素
• X:only-child: 僞類，選擇知足X選擇器的元素，而且這個元素是其父節點的惟一一個子元素
• X:only-of-type: 僞類，選擇X選擇器的元素，解析獲得的全部元素標籤，若是該元素沒有相同類型的兄弟節點是選中它
• X:first-of-type: 僞類，選擇X選擇器的元素，解析獲得的元素標籤，若是該元素是此類型的元素的第一個兄弟，選中它。

清除浮動的幾種方式，優缺點

1. 給父元素設置高度，可是這樣的話若是內容是動態的，有可能出現滾動條。
2. 給每個子元素後邊加一個div或者br標籤，設置clear：both;清除浮動，可是會增長頁面標籤。代碼冗餘。
3. 使用僞類，設置父元素after僞類，clear：both； 配合zoom屬性使用。

圖片如何實現垂直劇中的

1. table-cell:設置div的display爲table-cell,vertical-align:middle;text-align:center; img標籤垂直居中。
2. position: 設置div的position:relative; 設置img標籤position：absolute; left: 50%; top: 50%; margin-left: 負寬度的一半，margin-top：負高度的一辦，可是隻能用在一直寬高的圖片中。
3. css3的box：設置divstyle：text-align: center;display: -webkit-box;-webkit-box-align: center;-webkit-box-pack: center;display: -moz-box;-moz-box-align: center;-moz-box-pack: center;display: -o-box;-o-box-align: center;-o-box-pack: center;display: -ms-box;-ms-box-align: center;-ms-box-pack: center;display: box;box-align: center;box-pack: center;

css hack你知道哪些？

1. 屬性前綴法(即內部類hack)："-"減號是IE6專屬hack，"\9"是IE六、七、八、九、10都生效，"\0"是IE八、九、10都生效，"\9\0"是 只對IE九、10生效。
2. 條件註釋法：<!--[if IE]>只有IE瀏覽器顯示<--[endif]>，<!--[if IE 6]>只有IE6顯示<--[endif]>，<!--[if gte IE 6]>IE6及以上版本瀏覽器顯示<--[endif]>，<!--[if ! IE 8]>不是IE8的其餘IE瀏覽器顯示<--[endif]>
3. 選擇器前綴法：*html 前綴只對IE6生效；+html *+前綴只對IE7生效；@media screen\9{...}只對IE6/7生效；@media \0screen {body { background: red; }}只對IE8有效；@media \0screen,screen\9{body { background: blue; }}只對IE6/7/8有效；@media screen\0 {body { background: green; }} 只對IE8/9/10有效；@media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效

談談你對CSS盒模型的認識

盒模型就是指box的content padding margin border

• 標準模型和IE模型的區別?

1. 標準模式盒模型的width和height指的是content的寬高，IE盒模型的width和height指的是content加上border和padding的總和。標準模式適用於如今的絕大多數瀏覽器，IE模型只適用於IE6及如下的瀏覽器中。

• CSS是如何設置這兩種模型?

1. css新增屬性：box-sizing，content-box是默認值，指的是按照標準模式盒模型展現，border-box指的是怪異模式，按照IE盒模型展現。

• JS如何設置和獲取盒模型對應的寬和高?

獲取：

1. element.style.width/height：此種方式只能獲取元素行內樣式，不能獲取style標籤中的樣式和外聯的css文件中的樣式
2. element.currentStyle.width/height：此方式是IE獨有的方式
3. window.getComputedStyle(element).width/height：此種方式是兼容性比較好的方式。
4. element.offsetWidth/offsetHeight：此種方式是通用性最強的一中獲取方式。

設置：

只能經過style設置

• 什麼是優雅降級和漸進加強?

1. css屬性，有不少新屬性是舊版本的瀏覽器不支持，這時候在開發的過程當中就會出現一個問題，是先考慮低版本瀏覽器仍是先考慮主流瀏覽器，因此出現兩種觀點或者說方式。1. 優雅降級：就是開發的時候主要仍是考慮當前主流瀏覽器的效果，低版本瀏覽器的兼容問題後期進行適當處理。2.漸進加強：在開發時，首先保證全部瀏覽器的展現效果都沒問題，而後逐漸完善效果和功能，向更高的瀏覽器更好的效果前進。

談談你對BFC的瞭解

• 什麼是BFC?

1. BFC是塊級格式化上下文，就是頁面中相對獨立的一個區域。BDC的原理(渲染規則)：一、BFC裏邊的元素，在垂直反向會發生邊距重疊現象。二、BFC在頁面中獨立的容器，裏邊的元素不會影響外面的元素，一樣外邊的元素也不會影響裏邊的元素怒。三、BFC區域不去旁邊的float box區域重疊，能夠用來消除浮動帶來的影響。四、計算BFC的高度時，浮動的子元素也會參與計算。

• 如何建立BFC?

1. overflow屬性不爲visible，能夠是hidden或者auto。
2. float 中，屬性不爲none，只要是設置了浮動，當前元素就建立了BFC。
3. position中，屬性石absolute或者fixed，當前元素生成BFC。
4. display屬性設置爲：inline-block、table-cell、table-caption、flex、inline-flex

• BFC使用場景?

1. 解決margin重疊
2. 解決float重疊
3. 清除浮動

JS類

DOM事件

DOM事件級別有哪些?

• DOM0級事件：在元素的事件屬性綁定一個函數，缺點是不能綁定多個函數，後綁定的函數會覆蓋先綁定的函數
• DOM2級事件：addEventListener和removeEventListener兩個函數添加事件，IE8及如下須要用attachEvent和detachEvent實現
• DOM3級事件：DOM3級事件在DOM2級事件的基礎上添加了更多的事件類型，所有類型以下：1.UI事件，當用戶與頁面上的元素交互時觸發，如：load、scroll。2.焦點事件，當元素得到或失去焦點時觸發，如：blur、focus。3.鼠標事件，當用戶經過鼠標在頁面上執行操做時觸發如：dbclick、mouseup。4.滾輪事件，當使用鼠標滾輪或相似設備時觸發如：mousewheel。5.文本事件，當在文檔中輸入文本是觸發，如：textInput。6.鍵盤事件，當用戶經過鍵盤在頁面上執行操做時觸發如：keydown、keypress。7.合成事件，當爲IME(輸入法編輯器)輸入字符時觸發，如：compositionstart。8.變更事件，當底層DOM結構發生變化時觸發，如：DOMsubtreeModified

描述DOM事件捕獲和冒泡的具體流程?

• 事件捕獲：是事件從上到下發生，事件從最外層document開始觸發，到點擊的標籤元素。
• 事件冒泡：事件從下到上發生，從點擊的元素標籤開始觸發到document爲止。

Event對象的常見應用場景?

• Event對象實在事件發生時產生的默認形參，event對象包含一些屬性和方法，同時還有一些IE獨有的屬性。

事件委託是什麼？

• 事件委託就是根據事件冒泡的原理，把事件綁定到目標的父元素或者其餘祖先元素上，觸發執行效果。事件委託優勢：一、能夠提升js性能，提升事件的處理速度，減小內存的佔用。二、動態添加dom元素，不須要修改事件綁定。

事件冒泡,e.target和e.currentTarget的區別

• 事件委託中，e.target指的是當前點擊的標籤，e.currentTarget指的是this，綁定事件的元素。

瀏覽器的兼容問題(js)

• 瀏覽器寬高問題：網頁可見區域寬：document.body.clientWidth || document.documentElement.clientWidth; 網頁可見區域高：document.body.clientHeight || document.documentElement.clientHeight; 整個網頁的寬：document.body.scrollWidth || document.documentElement.scrollWidth; 整個網頁的高：document.body.scrollHeight || document.doacumentElement.scrollHeight; 網頁被捲去的高：document.body.scrollTop || document.documentELement.scrollTop; 網頁左邊捲去的距離：document.body.scrollLeft || document.docuemntElement.scrollLeft;
• event事件問題：e = event || window.event;
• DOM節點相關問題：獲取下一個兄弟節點：ele.nextElementSibling和ele.nextSibling; 獲取上一個兄弟節點：ele.previousElementSibling和ele.previousSibling; 獲取第一個子節點：ele.firstElementChild和ele.firstChild; 獲取最後一個子節點：ele.lastElementChild和ele.lastChild
• document.getELementsByCLassName問題：IE678不支持getElementsByClassName,經過另外一種方式去實現該方法，獲取全部元素，判斷是否包含當前class，包含的話放到一個數組中，而後獲取完全部包含改類名的元素後，返回當前數組。
• 獲取元素的非行間樣式值：object當前元素，oCss樣式值：IE下：object.currentStyle[oCss];非IE下：getComputedStyule(object,null)[oCss]
• 事件監聽和事件移除，IE下使用attachEvent和detachEvent，其餘使用addEventListener和removeEventListener。
• 阻止事件傳播：e.stopPropagation()或者e.cancelBubble = true;
• 阻止默認事件：e.preventDefault()或者e.returnValue = 'false';
• Event對象中的target：獲取target的兼容寫法：e.target || e.srcElement; 鼠標來的地方：e.relatedTarget || e.formELement; 鼠標去的地方：e.relatedTarget || e.toElement;
• 火狐中的鼠標滾輪事件：火狐：監聽DOMMoustScroll事件，非火狐：document.onmousewheel

JS原生

JS中有哪些數據類型

• String、Number、Boolean、null、undefined五種基本數據類型。Object是複雜數據類型。

什麼是閉包？閉包做用？在工做中是如何應用的?

• 一、外部函數定義的內部函數就是閉包。二、可讓函數外部獲取到函數內部的值，還能夠抑制保留函數內部的變量。三、好比給某些對象添加實例方法，封裝相關的功能集。

JS實現繼承的幾種方式?

• js實現繼承有六種方式：一、原型鏈繼承：利用原型讓一個引用類型繼承另外一個引用類型的屬性和方法。二、借用構造函數繼承：在子類型內部調用父類的構造函數，使用call或者apply能夠在新建立的對象上執行父類構造函數。三、組合繼承：將原型鏈繼承和構造函數繼承整合在一塊兒，發揮兩者長處。四、原型式繼承：藉助原型能夠利用已有的對象建立新對象，同時還沒必要須所以建立自定義的類型。五、寄生式繼承：建立一個僅用來封裝繼承過程的函數，在該函數內部以某種方式加強對象，最後再像真正使她作了全部工做同樣返回他。六、寄生組合式繼承。

建立對象的三種方式?

• 一、經過字面量形式建立對象。二、經過構造函數形式建立對象。三、經過new Object()建立對象。

new Person()時發生了什麼?

• 一、建立一個對象。二、將構造函數中的this指向該對象。三、將構造函數的原型指向對象的原型，這樣對象就有了構造函數中的方法。四、執行構造函數中的代碼。

什麼是深拷貝和淺拷貝？本身不用JSON.parse實現一個深拷貝的方法

• 深拷貝就是把全部的屬性方法從新那一份放在新對象上，淺拷貝就是指拷貝引用，拷貝先後指向的都是同一個東西。深拷貝就是遍歷全部的屬性方法，而後建立新對象，給新對象添加一樣的屬性方法，返回新對象。

手工模擬完整的bind方法

Function.prototype.myBind = function(context){
  var that = this,
  slice = Array.prototype.slice,
  args = slice.apply(arguments,[1]),
  Func = Function(){},
  bound = function(){
    return that.apply(context instanceof Func ? context : this || window, args.contact(Array.propotype.slice.apply(arguments, [0])));
  };
  Func.prototype = that.prototype;
  bound.prototype = new Func();
  return bound;
}
複製代碼

什麼是節流和防抖？

• throttle:函數節流是指須要間隔必定時間觸發回調來控制函數調用頻率。讓函數有規律的調用，但不要太頻繁，而是每隔一段時間調用一次。好比：咱們可讓scroll中的回調函數每隔500ms調用一次，而不是每觸發一次滾動就進行一次函數調用。函數節流是下降事件回調函數的執行頻率，當事件一直被觸發時，回調函數將以某個頻率不斷地執行。
• debounce:函數防抖是指對於連續的事件響應咱們只須要執行一次回調。好比：註冊用戶名驗證或者下拉模糊搜索：這類效果通常是在像搜索框中輸入字符時，從後臺服務器拉取相應的驗證結果或者模糊查詢的結果，一般作法是在鍵盤擡起keyup時觸發某個函數，用來向後端請求數據，可是若是每次擡起都進行一次請求，那咱們搜索過程當中就會進行超級超級多的請求，而咱們實際須要的只是對最後一次鍵盤擡起時輸入框中的文字進行請求，全部解決方式：在鍵盤擡起後的一段時間中，若是不進行按鍵操做，就執行回調函數。通俗來說就是說用戶輸入不間斷的時候，暫時不執行回調函數，當用戶輸入間隔超過必定時間的時候才執行回調函數。函數防抖是在某時間結束後的一段時間內，若是不在觸發該事件，就執行相應的回調函數。

上拉刷新和下拉加載的實現原理？

寫一個驗證郵件的正則表達式

• ^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$;
• ^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$

事件綁定和普通事件的區別（能夠舉例說明）

• 普通事件會覆蓋，就是一般所說的DOM0級事件。時間綁定的話能夠綁定多個事件，不會覆蓋。

javascript 模版引擎用過哪些？實現原理是什麼？

• 模板引擎：artTemplate，其餘沒用過的xtemplate、mustache、handlebars.js、doT、underscore.template
• 實現原理：一、正則匹配替換 二、拼接成字符串 三、使用Function函數把字符串變成js代碼執行

合併兩個對象

• Object.assign(): 該方法能夠將參數進行合併，參數都是對象，若是第一個對象也是須要合併的對象，那也會改變該對象的內容，若是第一個對象是空，則合併其餘參數對象。
• 經過for in遍歷每個對象，而後拷貝到新對象中。
• $.extend(): 合併參數，第一個參數能夠是true或者false，也能夠是空對象，這樣的話就是合併後邊的參數對象，若是第一個參數也是要合併的對象，就會更改第一個對象的內容。變成和合並之後的對象同樣。

動態向一個div中插入1000個div標籤，如何實現？（考性能）

• 使用文檔碎片，一次添加

html5新特性

• http://blog.csdn.net/gane_cheng/article/details/52819118
• 一、語義特性：HTML5新標籤，具備特定的語義特點，方便搜索引擎識別和快速識別內容區域。二、本地存儲特性：HTML5提供了網頁存儲的api，包括web應用的離線試用，相比較cookie更安全更高效，更大的存儲空間。離線存儲主要包括應用程序緩存、本地存儲、索引數據庫、文件接口。三、設備訪問特性：包括Geolocation地理位置和視頻影音可直接與攝像頭等設備鏈接。四、鏈接特性：基於網頁的實時聊天，更快的網頁遊戲體驗，更優化的在線交流，更有效的服務器推送技術，如：Server-Sent Event和WebSockets，這兩個特性實現服務器將數據推送到客戶端的功能。五、網頁多媒體特性：支持網頁端的Audio、Video等多媒體功能。六、三維、圖形以及特效特性：基於SVG、Canvas、WebGL以及CSS3的3d功能。七、性能與集成特性：HTML5 的XMLHttpRequest2等技術，解決之前的跨域等問題，幫助網站和web應用在多樣化的環境中更快速的工做。

嚴格模式和非嚴格模式的區別

1. 嚴格模式下，delete運算符後跟隨非法標識符，會拋出語法錯誤；非嚴格模式下，會靜默失敗或者返回false
2. 嚴格模式下，對象直接定義同名屬性會拋出語法錯誤；非嚴格模式下不會報錯；
3. 嚴格模式下，函數形參存在同名的，拋出錯誤；非嚴格模式不會；
4. 嚴格模式不允許直接只用八進制變量。
5. 嚴格模式下，arguments是傳入函數內實參列表的靜態副本；非嚴格模式下，arguments對象裏的元素和實參對象是同一個值得引用。
6. 嚴格模式下，evel和arguments不能用做變量聲明和賦值，只能當作關鍵字。
7. 嚴格模式下，會限制對調用棧的檢測能力，訪問arguments.callee.caller會拋出異常。
8. 嚴格模式下，變量必須先聲明，不能直接賦值，不會隱式建立全局變量，不能使用with；
9. 嚴格模式下，call和apply傳入null和undefined保持原樣不會被轉換爲window。

對於js中浮點數計算會丟失精度的問題，你有什麼解決思路？

• 首先判斷要進行計算的浮點數的小數位數多的一項獲得小數位數n，而後把要進行計算的全部項都乘以10的n次冪，變成整數，而後再計算結果，以後再除以10的n次冪，變成小數。若是是乘法就是計算之後除以小數位數的總和，除法的話不用除。

JQuery

jquery.extend , jquery.fn.extend的區別

• jQuery.extend擴展的是類自己，jQuery.fn.extend擴展的事類實例的對象。jQuery.extend對應的是('#id').xxx；

談一下jquery中的bind，live，delegate，on區別

• bind是直接綁定在元素上，不支持動態元素；live使用過冒泡的方式綁定到元素上，適合綁定到doucment或者列表元素的父元素上，支持動態數據；delegate適用於更小範圍的事件代理，性能優於live；on是最新的時間綁定機制，1.7版本之後整合了其餘三種方式進行時間綁定；同時1.7版本以上刪除了live事件，經過on事件代替；jQuery3.0版本之後刪除了bind、live、delegate方法。
• bind只能支持已存在的元素的事件綁定，其餘三種都是支持動態元素的事件綁定；
• 刪除方式不一樣。bind使用unbind刪除事件；live使用die刪除事件；delegate使用undelegate刪除事件；on使用off刪除綁定事件；

document.ready和document.load和$(function(){})有什麼區別？

• document.onload事件是當頁面全部資源都加載完畢之後纔會執行其中的代碼。(function(){})
• document.onload只能寫一個，寫多個會被覆蓋。$(document).ready(function(){})能夠編寫多個，而且按順序執行。

('#aaa').data()各自做用是什麼？有什麼區別

• $('#aaa').data()方法是設置和獲取aaa元素data-屬性開頭的值。

ES6

何時應該用箭頭函數？何時不能用？

• 箭頭函數中的this是直接定義的，建立函數的時候就會定義當前this的值爲當前做用域。當須要提早定義this的時候可使用箭頭函數，或者函數中用不到this的時候可使用箭頭函數。
• 當存在動態上下文的時候，不能使用箭頭函數。好比：對象中的函數、原型上定義的方法、構造函數中的方法、事件綁定的回調函數中、以及別人不容易看懂的簡單函數中都不能使用或者不該該使用箭頭函數。

請寫出ES6中Array.isArray()的實現代碼

• Object.prototype.toString.call(arr) === '[object Array]'

如何在項目中解析處理es6和es7代碼

• babel把ES6代碼轉換成ES5代碼而且是嚴格模式下的ES5代碼。

Promise經常使用方法，Promise.race的做用，then方法裏reject和catch的區別

• Promise經常使用方法resolve,reject,catch,all,race; Promise.race的做用是把幾個Promise對象一塊兒執行，哪一個執行最快，就用他的返回結果； then方法裏的reject函數是當狀態變成rejected的時候執行的，可是catch方法是發生異常時調用的，若是不寫then的第二個函數，那麼reject執行的時候也會跳轉到catch中。

渲染機制

什麼是DOCTYPE及做用?標準模式和兼容模式有什麼區別?

• DOCTYPE是告訴瀏覽器以哪一種模式解析文檔，有的話就是標準模式，沒有或者不正確的話就是兼容模式解析。
• 標準模式的排版和js運做模式都是以瀏覽器支持的最高標準運行。兼容模式是向後兼容，確保更多的內容顯示，重點在於內容的顯示。

瀏覽器是如何渲染頁面的?

• 當瀏覽器加載html頁面的時候，瀏覽器會將html頁面解析成DOM樹，將css樣式解析成樣式表模型，而後整合DOM樹和樣式表模型，建立渲染樹，render tree是計算之後的，瀏覽器把整個渲染樹繪製到屏幕上顯示出來。（DOM樹 + Css樣式表模型 --> render tree渲染樹 --> 繪製到屏幕上）

什麼是重排？何時會觸發重排?

• 重排也叫回流，就是由於元素改變位置或者文檔內容結構發生變化的時候，從新佈局渲染樹的過程。DOM操做如增刪節點、元素爲止變化、元素樣式變化、元素隱藏顯示、樣式表發生變化、瀏覽器調整窗口大小、僞類樣式激活等都會觸發重排。

什麼是重繪？何時會觸發重繪?

• 重繪是局部樣式改變例如顏色背景色引起的渲染樹變化，就是樣式改變不影響元素在文檔流中的位置的時候發生的。

JS運行機制

如何理解JS的單線程

• 單線程就是當js代碼執行的時候，是按照從上到下的順序一次執行同步代碼，異步代碼執行的時候，實際上是把他們放在了任務隊列中，當主線程的代碼都執行完之後，會依次執行任務隊列中的代碼。就算是html5新增的async和defer，也只是不阻塞當前代碼執行，異步加載，可是加載完之後仍是會放在任務隊列中排隊等待執行。

什麼是Event Loop,請簡述其過程

• Event Loop是js中的事件循環機制，主要就是由於js是單線程的，全部一些異步的操做回調函數都會放在消息隊列或者說任務隊列中，而後噹噹前js主線程執行完全部代碼的時候，就去去消息隊列中取消息，其實就是回調函數，而後執行他，消息隊列遵循的是先進先出的原則，最早放到隊列中的消息優先取出。

頁面性能

前端性能優化的方法有哪些？至少說出10種以上

• 雅虎軍規：

1. 儘可能減小http請求次數
2. 減小DNS查找次數
3. 避免跳轉，301,302
4. 可緩存的AJAX
5. 推遲加載內容
6. 預加載
7. 減小DOM元素數量
8. 根據域名劃分頁面內容
9. 使iframe的數量最小
10. 不要出現404錯誤
11. 使用內容分發網絡
12. 爲文件頭制定Expires或者Cache-Control
13. Gzip壓縮文件內容
14. 配置Etag
15. 儘早刷新輸出緩衝
16. 使用GET來完成AJAX請求
17. 把樣式表置於頂部
18. 避免使用css表達式
19. 使用外部JavaScript和Css
20. 減小JavaScript和css
21. 用代替@import
22. 避免使用濾鏡
23. 把腳本置於頁面底部
24. 剔除重複腳本
25. 減小DOM訪問
26. 開發智能事件處理程序
27. 減少cookie體積
28. 對於頁面內容使用無cookie的域名
29. 優化圖像
30. 優化css Spirite，雪碧圖
31. 不要再HTML中縮放圖像
32. fovicon.ico要小並且可緩存
33. 保持單個內容小於25k
34. 打包組件成複合文本

如何實現JS的異步加載? async和defer的區別是什麼?

• js異步加載主要方式：動態建立script、async、defer
• async和defer的區別在於async是當前js只要加載完成之後就會執行，defer是當全部元素解析完成之後，纔會按照加載順序執行。

緩存

Expires和Cache-Control是如何工做的？

• Expires是設置資源過時時間，Cache-Control是設置過多長時間失效。Expires是http 1.0裏邊的緩存設置方式，Cache-Control是http 1.1之後設置緩存的方式，若是兩者同時存在Cache-Control會覆蓋Expires,當客戶端發送請求的時候會先判斷是否過時，若是沒有過時就直接從緩存中讀取內容，再也不發送請求。

Last-Modified和Etag是如何工做的？

• Last-Modified是資源在服務端最後修改的日期，會在響應頭中返回給客戶端，客戶端存儲Last-Modified，當客戶端再次發送請求的時候，若是緩存已通過期，就會帶着Last-Modified的日期發送到服務端，若是時間沒變化，直接304，返回空的響應體，客戶端仍是從緩存中取數據。若是修改時間不一致，就會響應修改之後的內容，而且在響應頭中返回新的last-modified給客戶端。
• Etag是資源在服務端的標識碼，當客戶端請求資源的時候，服務端會生成相應的標識碼在響應頭中返回給客戶端，客戶端存儲Etag，當客戶端再次請求該資源的時候，會帶着Etag，若是服務端的Etag和請求體中的Etag相同的話，就是直接304，從緩存中讀取數據。若是不一致，就會響應修改之後的內容，同時在響應頭中返回一個新的Etag給客戶端。

請描述cookie、sessionStorage和localStorage的區別

• cookie和loaclStorage、sessionStorage都是存儲在客戶端。
• 一、大小不一樣：cookie存儲最多4k的內容，storage能夠存儲差很少5M的內容。二、有效時間：cookie是設置過時時間，只要是在過時時間以前都是有效的；localStorage是持久數據，除非手動清除，不然會一直存儲在客戶端中；sessionStorage是session級別的，當瀏覽器窗口關閉的時候就會清除。三、他們與服務端的交互方式：cookie會在請求資源的時候帶着，在請求體中，同時服務端也能夠寫cookie到客戶端，storage不會在請求的時候帶着。

框架

前端路由的實現原理

1. hash：經過#拼接的方式，改變當前地址，同時不會向服務器發送請求，可是會觸發hashState事件，而後再hashState事件中處理地址和其餘相應的操做。
2. history API: pushState,replaceState兩者都會像頁面中添加一條歷史記錄同時地址欄發生變化，可是不會向服務端發送請求，會觸發popState事件，同時在popState事件中獲取url處理相應的內容變化。

MVVM框架解決了什麼問題？帶來了什麼問題？

1. 關注點分離；操做數據即操做DOM；動態模板

瀏覽器地址欄裏面的'＃' 如何清楚？mode共有幾個參數，參數有什麼區別？

1. 經過history的pushState和relaceState方法能夠改變地址欄的連接並且不會刷新當前頁面。路由的另外一種方式。
2. mode暫時不知道是什麼。

vue中父組件如何給子組件傳遞值

1. 使用props進行傳遞，子組件須要監聽watch並賦值，不然獲取到的數據是空數組。
2. 父組件經過ref屬性調用子組件中的方法，經過參數把數據傳遞給子組件，子組件獲取參數數據並使用。

react的優缺點

• 優勢：一、React速度很是快，由於它採用的是虛擬dom的技術，性能好。二、一切都是component，代碼複用更容易，更加模塊化。三、跨瀏覽器兼容，虛擬DOM解決了跨瀏覽器問題，在IE8中也沒有問題。四、代碼兼容性好，由於只是view層，能夠更好的如今的代碼結合。五、基於this.props和this.state生成HTLML，bug少。
• 缺點：一、React只是view層，必須結合使用Redux、ReactRouter等才能構建大型應用程序。

React組件中props和state有什麼區別？

• props通常用於父組件想子組件傳遞數據使用，父子組件通訊使用。state主要用於組件內的狀態維護，數據更新渲染傳遞等。

什麼是JSX

• JSX是react中的一種語法，JavaScript XML語法，方便模板的生成輸出。

React中不一樣組件傳遞數據的方式有哪些？至少說出三種

1. props：父組件經過props把數據傳遞給子組件
2. context：經過設置當前組件的context，能夠再他的子孫組件中經過this.context獲取數據
3. 父組件調用子組件的函數而且把數據當作參數傳遞給子組件
4. 父組件把函數傳遞給子組件，子組件調用函數並傳遞參數

請描述React的組件加載生命週期函數以及shouldComponentUpdate方法的實際使用場景?

• getInitialState、componentWillMount、render、componentDidMount、componentWillUnmount
• componentWillReseiveProps、shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate、componentWillUnmount
• shouldComponentUpdate是在組件接收到新的props的時候調用，經過接收到的數據進行判斷是否進行更新。

說一下angular、vue、react的相同點和不一樣點?各適用於什麼樣的項目場景?

工程化

什麼叫模塊化？你用過哪些模塊化解決方案？

什麼叫組件化？你在工做中是如何實現組件化的？

gulp和webpack的相同點和不一樣點?

什麼是熱加載?

HTTP

HTTP報文的組成部分

GET和POST的區別

HTTP常見狀態碼

什麼是Restful API?

HTTPS和HTTP的區別是什麼?

從在瀏覽器中輸入URL到頁面渲染出來都通過了什麼過程？

JSON和JSONP 區別是什麼？JSONP的原理是？

用過那些跨域技術

ajax的參數

先後端通訊

什麼是同源策略及限制?

先後端如何通訊?

用原生JS模擬一下jquery的ajax方法

跨域通訊的幾種方式?

安全

CSRF的原理以及如何防護

XSS的原生和如何防護

服務器

如何在web應用中在實現權限控制?

Web服務器、應用服務器、Web容器、反向代理服務器的區別和聯繫?

錯誤處理

前端錯誤的分類?

程序出現bug了，你是如何調試的?

如何分類捕獲不一樣的錯誤?

如何把生產環境的錯誤上報？

項目問題

介紹一下你的項目？這個項目有哪些模塊？你負責哪些模塊？

你在項目中的角色

你以爲在項目中作的最出彩的點有哪些？

遇到過哪些很是難以解決的問題？最終是如何解決的？

若是你是項目負責人，你會如何分配任務？如何保證按時完成？如何讓成員夠持續成長？

正常非技術問題

請你自我介紹一下你本身？

你以爲你個性上最大的優勢是什麼？

說說你最大的缺點？

你對加班的見解？

在五年的時間內，你的職業規劃？

你朋友對你的評價？

你還有什麼問題要問個人嗎？

你的業餘愛好是什麼？

你爲何從上家公司離職?

故意挖坑的問題

你的直屬上級和頂級上級對一件事情的意見不一致，你會聽誰的意見？

若是部門開發的時候和你的主管發生了爭吵，你會如何處理？

與上級意見不一致，你將怎麼辦？

你喜歡跟什麼樣的主管共事？

咱們爲何要聘用你?

你沒有工做經驗如何能勝任這份工做？

你最崇拜的人是誰?

你有創業的想法嗎？

代碼運行結果，並解釋

if(!("a" in window)){
  var a = 1;
}
console.log(a);
複製代碼

function MyObj(){
  this.p.pid++;
}
MyObj.prototype.p = {'pid':0}
MyObj.prototype.getNum = function(num){
  return this.p.pid+num;
}
var _obj1 = new MyObj();
var _obj2 = new MyObj();
console.log(_obj1.getNum(1)+_obj2.getNum(2))
複製代碼

var func = (function(a){
  this.a = a;
  return function(a){
    a+=this.a;
    return a;
  }
})(function(a,b){
  return a;
}(1,2));
func(4);
複製代碼

function Foo() {
 getName = function () { alert (1); };
 return this;
}
Foo.getName = function () { alert (2);};
Foo.prototype.getName = function () { alert (3);};
var getName = function () { alert (4);};
function getName() { alert (5);}

//請寫出如下輸出結果：
Foo.getName();
getName();
Foo().getName();
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();
複製代碼

for(var i=0;i<10;i++){
       alert(i);
       break;
   }
   alert(i);

   for(var i=0;i<10;i++){
      continue;
      alert(i);
   }
   alert(i)
複製代碼

function C1(name){
	if(name) this.name = name;
}
function C2(name){
this.name =name;
}
function C3(name){
 this.name = name ||'join';
}
C1.prototype.name='Tom';
C2.prototype.name='Tom';
C3.prototype.name='Tom';
alert(new C1().name)+(new C2().name)+(new C3().name);

複製代碼

var a=1;
Var obj ={
   「name」:」tom」
}
function fn(){
   var a2 = a,
   obj2 = obj,
   a2 =a,
   obj2.name =」jack」
}
fn();
console.log(a);
console.log(obj);
複製代碼