天天看點

Web前端面試常識

馬上校招就要來咯,趕緊趁現在總結一下面試常識,溫習鞏固一下。

  大四校招即将席卷而來,現在臨時抱抱佛腳,百度一下大概可能會問到的知識點,願與君共勉吧!

1.Doctype(html4)

  A.strict   嚴格版本

  B.transitional  過渡版本(防止浏覽器不支援)

  C.frameset  架構版本(取代body标簽)

2.字元編碼常見類型

  ASCII碼:IOS國際标準128個字元

  GB2312編碼:國标碼,ANSI編碼裡的一種,ASCII+漢字

  GBK:漢字内碼擴充規範,GB2312的漢字擴充(包含生僻字)

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

  UTF-8:提高了Unicode的編碼效率

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

3.浏覽器預設字元編碼

  IE6、IE7、IE8、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){

    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>

  <p>元素</p>

</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并沒有一個明确的标準,而更像是一種設計的風格。

  它主要用于用戶端和伺服器互動類的軟體。基于這個風格設計的軟體可以更簡潔,更有層次,更易于實作緩存等機制。

  用戶端和伺服器之間的互動在請求之間是無狀态的。從用戶端到伺服器的每個請求都必須包含了解請求所必需的資訊。如果伺服器在請求之間的任何時間點重新開機,用戶端不會得到通知。此外,無狀态請求可以由任何可用伺服器回答,這十分适合雲計算之類的環境。用戶端可以緩存資料以改進性能。分層,底層獨立。

繼續閱讀