Web前端面試常識

時間 2019-11-20

標籤 web 前端面試常識欄目 HTML 简体版

原文原文鏈接

大四校招即將席捲而來，如今臨時抱抱佛腳，百度一下大概可能會問到的知識點，願與君共勉吧！javascript

1.Doctype(html4)

A.strict 嚴格版本html

B.transitional 過渡版本(防止瀏覽器不支持)前端

C.frameset 框架版本(取代body標籤)java

2.字符編碼常見類型

ASCII碼:IOS國際標準128個字符node

GB2312編碼:國標碼，ANSI編碼裏的一種，ASCII+漢字react

GBK:漢字內碼擴展規範,GB2312的漢字擴展(包含生僻字)jquery

Unicode:統一格式編碼,包含各國語言git

UTF-8:提升了Unicode的編碼效率程序員

ISO-8859-1:ASCII+西歐語言、希臘語、泰語、阿拉伯語、希伯來語對應的文字符號。es6

3.瀏覽器默認字符編碼

IE六、IE七、IE八、Firefox 默認字符編碼：gb2312；

Chrome、Safari 默認字符編碼：ISO-8859-1；

Opera默認編碼：gbk。

--摘自 http://blog.csdn.net/generalyy0/article/details/8239782

做用:

因爲NASI不支持UTF-8，所以當使用UTF-8時須要轉換編碼防止編程錯誤。

Html <meta charset="utf-8">

XML <?XML version=」1.0」 encoding=」utf-8」>

爲了擴充ASCII編碼，以用於顯示本國的語言，不一樣的國家和地區制定了不一樣的標準，由此產生了 GB2312, BIG5, JIS 等各自的編碼標準。這些使用 2 個字節來表明一個字符的各類漢字延伸編碼方式，稱爲 ANSI 編碼，又稱爲"MBCS（Muilti-Bytes Charecter Set，多字節字符集）"。在簡體中文系統下，ANSI 編碼表明 GB2312 編碼，在日文操做系統下，ANSI 編碼表明 JIS 編碼，因此在中文 windows下要轉碼成gb2312,gbk只須要把文本保存爲ANSI 編碼便可。不一樣 ANSI 編碼之間互不兼容，當信息在國際間交流時，沒法將屬於兩種語言的文字，存儲在同一段 ANSI 編碼的文本中。一個很大的缺點是，同一個編碼值，在不一樣的編碼體系裏表明着不一樣的字。這樣就容易形成混亂。致使了unicode碼的誕生。

其中每一個語言下的ANSI編碼，都有一套一對一的編碼轉換器，Unicode變成全部編碼轉換的中間介質。全部的編碼都有一個轉換器能夠轉換到Unicode，而Unicode也能夠轉換到其餘全部的編碼。

--來自百度百科http://baike.baidu.com/link?url=TFEXcDFu4Ykk_NGShT1or0ae9idefAr2Ztx6-M_2bD2y6KQpc1qIso_mIeEmJ93Ag0bLIwg8sNHnNl-tcXTK8q

4.異步編程

異步編程的方法，大概有下面四種。

回調函數

事件監聽

發佈/訂閱

Promise 對象:Promise就是爲了解決這個問題而提出的。它不是新的語法功能，而是一種新的寫法，容許將回調函數的橫向加載，改爲縱向加載。採用Promise，連續讀取多個文件

異步：

yield 命令。它表示執行到此處，執行權將交給其餘線程。也就是說，yield命令是異步兩個階段的分界線。

Generator 函數是協程在 ES6 的實現。因爲 JavaScript 沒有多線程，因此 Generator 函數交出的是函數的（而不是交出線程的）執行權。暫停執行和恢復執行;函數體內外的數據交換和錯誤處理機制。

編譯器的"傳名調用"實現，每每是將參數放到一個臨時函數之中，再將這個臨時函數傳入函數體。這個臨時函數就叫作 Thunk 函數。Thunk 函數如今能夠用於 Generator 函數的自動流程管理。

目標：使得JavaScript能夠用來編寫複雜的應用程序、函數庫和代碼的自動生成器

摘自:http://www.tuicool.com/articles/RnQVra

5.ECMA6要點

新增Class關鍵詞，更好的定義類

新增=>，從參數到返回值

增長let,只在代碼塊內有效，至關於塊級做用域(不存在申明提高)

數組、對象解構賦值，參數傳遞更容易

增長generator，依舊是單線程,yeild暫停,next往下執行

屬性擴展，如

模塊${}，import

語言改進參考 http://kangax.github.io/compat-table/es6/

學習參考 http://es6.ruanyifeng.com/#docs/intro

6.HTML5

特性：

向前兼容性，

跨平臺運行性，

簡單易用性，

用戶友好性

WebForm(代碼簡單，用戶友好，兼容，功能強大)，

video(內置，易於腳本操做，編解碼器不統一，不支持rmvb，不能全屏，不能切換比特率，跨域限制，資源消耗過大)，

canvas（消耗資源少，2d庫，代碼長，重繪，沒有事件），

geolocation，workers，socket（comet），storage(空間大，僅本地使用，獨立，易開發，兼容，安全，時限，xss)

7.模塊加載框架 sea.js,用於解決依賴關係,相似還有requireJS

遵循CommonJS規範的JavaScript模塊加載框架，能夠實現JavaScript的模塊化開發及加載機制。與jQuery等JavaScript框架不一樣，SeaJS不會擴展封裝語言特性，而只是實現JavaScript的模塊化及按模塊加載。SeaJS的主要目的是令JavaScript開發模塊化並能夠輕鬆愉悅進行加載，將前端工程師從繁重的JavaScript文件及對象依賴處理中解放出來，能夠專一於代碼自己的邏輯。SeaJS能夠與jQuery這類框架完美集成。使用SeaJS能夠提升JavaScript代碼的可讀性和清晰度，解決目前JavaScript編程中廣泛存在的依賴關係混亂和代碼糾纏等問題，方便代碼的編寫和維護。

8.懶加載

以往的遍歷頁面中全部的圖片，將其src緩存起來後刪除圖片的src屬性，當圖片進入用戶的可視區域後再爲圖片附加src屬性。這種方案存在着如下不足：

① 在IE和FF下，懶加載的腳本運行時，有部分圖片已經於服務器創建連接，這部分abort掉，再在滾動時延遲加載，反而增長了連接數。

② 在chrome下，因爲webkit內核bug,致使沒法abort掉下載，懶加載腳本徹底無用。

③ 它只能針對圖片的懶加載，但沒法懶加載頁面的某個模塊（即延遲渲染頁面的DOM節點）。

思路以下：

① 提供一種方式來讓咱們手動爲頁面中每一個須要懶加載的圖片緩存它的src屬性，例如：原來的圖片爲<img src="xxx.jpg" />,如今改成<img data-src="xxx.jpg">。這樣，頁面在解析的時候，全部懶加載的圖片在全部的瀏覽器下都不會下載，圖片進入視野區域時再將data-src賦值給src屬性。

② 提供延遲加載頁面模塊的方案。將研究發現，textarea是個不錯的容器，瀏覽器會將該標籤內的內容看成普通文本看待。所以，能夠將頁面中須要懶加載的模塊放入textarea容器中，帶須要的時候再將其取出。淘寶美食網正是大量運用了模塊延遲加載方案。

9.先後端分離的實踐

前端：負責View和Controller層。

後端：負責Model層，業務處理/數據等。

Node.js做爲中間數據展現

10.網頁渲染與迴流

WEB 頁面運行在各類各樣的瀏覽器當中，瀏覽器載入、渲染頁面的速度直接影響着用戶體驗簡單地說，頁面渲染就是瀏覽器將HTML 代碼根據CSS 定義的規則顯示在瀏覽器窗口中的這個過程。

渲染過程

1. 用戶輸入網址（假設是個 HTML 頁面，而且是第一次訪問），瀏覽器向服務器發出請求，服務器返回 HTML 文件；

2. 瀏覽器開始載入 HTML 代碼，發現 <head> 標籤內有一個 <link> 標籤引用外部 CSS 文件；

3. 瀏覽器又發出 CSS 文件的請求，服務器返回這個 CSS 文件；

4. 瀏覽器繼續載入 HTML 中 <body> 部分的代碼，而且 CSS 文件已經拿到手了，能夠開始渲染頁面了；

5. 瀏覽器在代碼中發現一個 <img> 標籤引用了一張圖片，向服務器發出請求。此時瀏覽器不會等到圖片下載完，而是繼續渲染後面的代碼；

6. 服務器返回圖片文件，因爲圖片佔用了必定面積，影響了後面段落的排布，所以瀏覽器須要回過頭來從新渲染這部分代碼；

7. 瀏覽器發現了一個包含一行 JavaScript 代碼的 <script> 標籤，趕快運行它；

8. JavaScript 腳本執行了這條語句，它命令瀏覽器隱藏掉代碼中的某個 <div>（style.display=」none」）。杯具啊，忽然就少了這麼一個元素，瀏覽器不得不從新渲染這部分代碼；

9. 終於等到了 </html> 的到來，瀏覽器淚流滿面……

10. 等等，還沒完，用戶點了一下界面中的「換膚」按鈕，JavaScript 讓瀏覽器換了一下 <link> 標籤的 CSS 路徑；

11. 瀏覽器召集了在座的各位 <div><span><ul><li> 們，「大夥兒收拾收拾行李，咱得從新來過……」，瀏覽器向服務器請求了新的CSS文件，從新渲染頁面。瀏覽器天天就這麼來來回回跑着，要知道不一樣的人寫出來的 HTML 和 CSS 代碼質量良莠不齊，說不定哪天跑着跑着就掛掉了。好在這個世界還有這麼一羣人——頁面重構工程師，平時挺不起眼，也就幫視覺設計師們切切圖啊改改字，其實背地裏仍是幹了很多實事的。

reflow（迴流）

說到頁面爲何會慢？那是由於瀏覽器要花時間、花精力去渲染，尤爲是當它發現某個部分發生了點變化影響了佈局，須要倒回去從新渲染，內行稱這個回退的過程叫 reflow（迴流）。

11. BigPipe

BigPipe是一個從新設計的基礎動態網頁服務體系。大致思路是，分解網頁成叫作Pagelets的小塊，而後經過Web服務器和瀏覽器創建管道並管理他們在不一樣階段的運行。這是相似於大多數現代微處理器的流水線執行過程：多重指令管線經過不一樣的處理器執行單元，以達到性能的最佳。雖然BigPipe是對現有的服務網絡基礎過程的從新設計，但它卻不須要改變現有的網絡瀏覽器或服務器，它徹底使用PHP和JavaScript來實現。

12.冒泡和事件捕獲

事件委託（代理）的原理爲冒泡。

這裏要用到事件源：event 對象，事件源，無論在哪一個事件中，只要你操做的那個元素就是事件源。

ie：window.event.srcElement

標準下:event.target

nodeName:找到元素的標籤名

oUl.onmouseover = function(ev){

var ev = ev || window.event;

var target = ev.target || ev.srcElement;

//alert(target.innerHTML);

if(target.nodeName.toLowerCase() == "li"){

target.style.background = "red";

}

oUl.onmouseout = function(ev){

var ev = ev || window.event;

var target = ev.target || ev.srcElement;

//alert(target.innerHTML);

if(target.nodeName.toLowerCase() == "li"){

target.style.background = "";

}

提升性能，且新加的元素還會有以前的事件。

（1）冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發。

IE 5.5: div -> body -> document

IE 6.0: div -> body -> html -> document

Mozilla 1.0: div -> body -> html -> document -> window

（2）捕獲型事件(event capturing)：事件從最不精確的對象(document 對象)開始觸發，而後到最精確(也能夠在窗口級別捕獲事件，不過必須由開發人員特別指定)。

（3）DOM事件流：同時支持兩種事件模型：捕獲型事件和冒泡型事件，可是，捕獲型事件先發生。兩種事件流會觸及DOM中的全部對象，從document對象開始，也在document對象結束。

DOM事件模型最獨特的性質是，文本節點也觸發事件(在IE中不會)。

支持W3C標準的瀏覽器在添加事件時用addEventListener(event,fn,useCapture)方法，基中第3個參數useCapture是一個Boolean值，用來設置事件是在事件捕獲時執行，仍是事件冒泡時執行。而不兼容W3C的瀏覽器(IE)用attachEvent()方法，此方法沒有相關設置，不過 IE的事件模型默認是在事件冒泡時執行的，也就是在useCapture等於false的時候執行，因此把在處理事件時把useCapture設置爲false是比較安全，也實現兼容瀏覽器的效果。

事件捕獲階段：事件從最上一級標籤開始往下查找，直到捕獲到事件目標(target)。

事件冒泡階段：事件從事件目標(target)開始，往上冒泡直到頁面的最上一級標籤。

假設一個元素div，它有一個下級元素p。

<div>

</div>

這兩個元素都綁定了click事件，若是用戶點擊了p，它在div和p上都觸發了click事件，那這兩個事件處理程序哪一個先執行呢？事件順序是什麼？

兩種模型

之前，Netscape和Microsoft是不一樣的實現方式。

Netscape中，div先觸發，這就叫作事件捕獲。

Microsoft中，p先觸發，這就叫作事件冒泡。

兩種事件處理順序恰好相反。IE只支持事件冒泡，Mozilla, Opera 7 和 Konqueror兩種都支持，舊版本的Opera's 和 iCab兩種都不支持。

事件捕獲

當你使用事件捕獲時，父級元素先觸發，子級元素後觸發，即div先觸發，p後觸發。

事件冒泡

當你使用事件冒泡時，子級元素先觸發，父級元素後觸發，即p先觸發，div後觸發。

W3C模型

W3C模型是將二者進行中和，在W3C模型中，任何事件發生時，先從頂層開始進行事件捕獲，直到事件觸發到達了事件源元素。而後，再從事件源往上進行事件冒泡，直到到達document。

程序員能夠本身選擇綁定事件時採用事件捕獲仍是事件冒泡，方法就是綁定事件時經過addEventListener函數，它有三個參數，第三個參數如果true，則表示採用事件捕獲，如果false，則表示採用事件冒泡。

ele.addEventListener('click',doSomething2,true)

true=捕獲

false=冒泡

傳統綁定事件方式

在一個支持W3C DOM的瀏覽器中，像這樣通常的綁定事件方式，是採用的事件冒泡方式。

ele.onclick = doSomething2

IE瀏覽器

如上面所說，IE只支持事件冒泡，不支持事件捕獲，它也不支持addEventListener函數，不會用第三個參數來表示是冒泡仍是捕獲，它提供了另外一個函數attachEvent。

ele.attachEvent("onclick", doSomething2);

附：事件冒泡（的過程）：事件從發生的目標（event.srcElement||event.target）開始，沿着文檔逐層向上冒泡，到document爲止。

事件的傳播是能夠阻止的：

• 在W3c中，使用stopPropagation（）方法

• 在IE下設置cancelBubble = true；

在捕獲的過程當中stopPropagation（）；後，後面的冒泡過程也不會發生了~

3.阻止事件的默認行爲，例如click <a>後的跳轉~

• 在W3c中，使用preventDefault（）方法；

• 在IE下設置window.event.returnValue = false;

不是全部的事件都能冒泡，例如：blur、focus、load、unload（不知道摘自哪兒。。）。

13.JSONP(with padding)

JSONP使用script元素做爲Ajax傳輸的技術。（動態插入javascript）不受同源策略的影響，包含JSON編碼數據的響應體會自動解碼

14.熱門的前端框架React

最熱門的前端框架，毫無疑問是 React 。React 起源於 Facebook 的內部項目，由於該公司對市場上全部 JavaScript MVC 框架，都不滿意，就決定本身寫一套，用來架設 Instagram 的網站.從最先的UI引擎變成了一整套先後端通吃的 Web App 解決方案。衍生的 React Native 項目，目標更是宏偉，但願用寫 Web App 的方式去寫 Native App。

React.render 是 React 的最基本方法，用於將模板轉爲 HTML 語言，並插入指定的 DOM 節點。

上一節的代碼， HTML 語言直接寫在 JavaScript 語言之中，不加任何引號，這就是 JSX 的語法，它容許 HTML 與 JavaScript 的混寫

React 容許將代碼封裝成組件（component）

組件並非真實的 DOM 節點，而是存在於內存之中的一種數據結構，叫作虛擬 DOM （virtual DOM）。只有當它插入文檔之後，纔會變成真實的 DOM 。根據 React 的設計，全部的 DOM 變更，都先在虛擬 DOM 上發生，而後再將實際發生變更的部分，反映在真實 DOM上，這種算法叫作 DOM diff ，它能夠極大提升網頁的性能表現。

15.熱門的前端框架Angular

是一款開源 JavaScript 函式庫，由 Google 維護，用來協助單一頁面應用程式運行的。它的目標是透過 MVC 模式 (MVC) 功能加強基於瀏覽器的應用，使開發和測試變得更加容易。

函式庫讀取包含附加自定義（標籤屬性）的HTML，聽從這些自定義屬性中的指令，並將頁面中的輸入或輸出與由JavaScript變量表示的模型綁定起來。這些JavaScript變量的值能夠手工設置，或者從靜態或動態JSON資源中獲取。

Angular在呈現和資料中間，能夠簡單創建雙向的數據綁定。

一但創建雙向綁定。使用者輸入，會由Angular自動傳到一個變量中，再自動讀到全部綁到它的內容，更新它。

將應用邏輯與對DOM的操做解耦。這會提升代碼的可測試性。

將應用程序的測試看的跟應用程序的編寫同樣重要。代碼的構成方式對測試的難度有巨大的影響。

將應用程序的客戶端與服務器端解耦。這容許客戶端和服務器端的開發能夠齊頭並進，而且讓雙方的複用成爲可能。

指導開發者完成構建應用程序的整個歷程: 從用戶界面的設計，到編寫業務邏輯，再到測試。

Angular遵循軟件工程的MVC模式,並鼓勵展示，數據，和邏輯組件之間的鬆耦合.經過依賴注入（dependency injection），Angular爲客戶端的Web應用帶來了傳統服務端的服務，例如獨立於視圖的控制。所以，後端減小了許多負擔，產生了更輕的Web應用。

16.熱門的前端框架Backbone

Backbone.js爲複雜WEB應用程序提供模型(models)、集合(collections)、視圖(views)的結構。其中模型用於綁定鍵值數據和自定義事件；集合附有可枚舉函數的豐富API；視圖能夠聲明事件處理函數，並經過RESRful JSON接口鏈接到應用程序。

backbone.js提供了一套web開發的框架，經過Models進行key-value綁定及custom事件處理,經過Collections提供一套豐富的API用於枚舉功能,經過Views來進行事件處理及與現有的Application經過RESTful JSON接口進行交互.它是基於jquery和underscore的一個js框架。

主要組成：

1.model：建立數據，進行數據驗證，銷燬或者保存到服務器上

2.collection：能夠增長元素，刪除元素，獲取長度，排序，比較等一系列工具方法，說白了就是一個保存 models的集合類

3.view：綁定html模板，綁定界面元素的事件，初始的渲染，模型值改變後的從新渲染和界面元素的銷燬等

優點：

1. 將數據和界面很好的分離開來。

2. 將事件的綁定很好的剝離出來，便於管理和迭代。

3. 使得Javascript程序的模塊化更加清晰、明瞭。

應用場景：

最適合的應用場景是單頁面應用，而且頁面上有大量數據模型，模型之間須要進行復雜的信息溝通

17.REST

REST（英文：Representational State Transfer，簡稱REST）描述了一個架構樣式的網絡系統，好比 web 應用程序。它首次出如今 2000 年 Roy Fielding 的博士論文中，他是 HTTP 規範的主要編寫者之一。在目前主流的三種Web服務交互方案中，REST相比於SOAP（Simple Object Access protocol，簡單對象訪問協議）以及XML-RPC更加簡單明瞭，不管是對URL的處理仍是對Payload的編碼，REST都傾向於用更加簡單輕量的方法設計和實現。值得注意的是REST並無一個明確的標準，而更像是一種設計的風格。