前端知識點整理02

53.new操做符具體幹了什麼呢?

   一、建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型。

   二、屬性和方法被加入到 this 引用的對象中。

   三、新建立的對象由 this 所引用，而且最後隱式的返回 this 。

var obj  = {};

obj.__proto__ = Base.prototype;

Base.call(obj);

54.js延遲加載的方式有哪些？

defer和async、動態建立DOM方式（建立script，插入到DOM中，加載完畢後callBack）、按需異步載入js

55.call() 和 apply() 的區別和做用？

做用：動態改變某個類的某個方法的運行環境（執行上下文）。

區別參見：JavaScript學習總結（四）function函數部分

56.哪些操做會形成內存泄漏？

內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在。

垃圾回收器按期掃描對象，並計算引用了每一個對象的其餘對象的數量。若是一個對象的引用數量爲 0（沒有其餘對象引用過該對象），或對該對象的唯一引用是循環的，那麼該對象的內存便可回收。

setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏。

閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

詳見：詳解js變量、做用域及內存
57.列舉IE 與其餘瀏覽器不同的特性？

IE支持currentStyle，FIrefox使用getComputStyle

IE 使用innerText，Firefox使用textContent

濾鏡方面：IE:filter:alpha(opacity= num)；Firefox：-moz-opacity:num

事件方面：IE：attachEvent：火狐是addEventListener

鼠標位置：IE是event.clientX；火狐是event.pageX

IE使用event.srcElement；Firefox使用event.target

IE中消除list的原點僅需margin:0便可達到最終效果；FIrefox須要設置margin:0;padding:0以及list-style:none

CSS圓角：ie7如下不支持圓角

58.WEB應用從服務器主動推送Data到客戶端有那些方式？

Javascript數據推送

Commet：基於HTTP長鏈接的服務器推送技術

基於WebSocket的推送方案

SSE（Server-Send Event）：服務器推送數據新方式

59.對前端界面工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？

前端是最貼近用戶的程序員，比後端、數據庫、產品經理、運營、安全都近。

    一、實現界面交互

    二、提高用戶體驗

    三、有了Node.js，前端能夠實現服務端的一些事情

前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好，

參與項目，快速高質量完成實現效果圖，精確到1px；

與團隊成員，UI設計，產品經理的溝通；

作好的頁面結構，頁面重構和用戶體驗；

處理hack，兼容、寫出優美的代碼格式；

針對服務器的優化、擁抱最新前端技術。

60.一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？

    分爲4個步驟：

    （1），當發送一個URL請求時，無論這個URL是Web頁面的URL仍是Web頁面上每一個資源的URL，瀏覽器都會開啓一個線程來處理這個請求，同時在遠程DNS服務器上啓動一個DNS查詢。這能使瀏覽器得到請求對應的IP地址。

    （2）， 瀏覽器與遠程`Web`服務器經過`TCP`三次握手協商來創建一個`TCP/IP`鏈接。該握手包括一個同步報文，一個同步-應答報文和一個應答報文，這三個報文在 瀏覽器和服務器之間傳遞。該握手首先由客戶端嘗試創建起通訊，然後服務器應答並接受客戶端的請求，最後由客戶端發出該請求已經被接受的報文。

    （3），一旦`TCP/IP`鏈接創建，瀏覽器會經過該鏈接向遠程服務器發送`HTTP`的`GET`請求。遠程服務器找到資源並使用HTTP響應返回該資源，值爲200的HTTP響應狀態表示一個正確的響應。

    （4），此時，`Web`服務器提供資源服務，客戶端開始下載資源。

請求返回後，便進入了咱們關注的前端模塊

簡單來講，瀏覽器會解析`HTML`生成`DOM Tree`，其次會根據CSS生成CSS Rule Tree，而`javascript`又能夠根據`DOM API`操做`DOM`

詳情：從輸入 URL 到瀏覽器接收的過程當中發生了什麼事情？
61.javascript對象的幾種建立方式

1，工廠模式

2，構造函數模式

3，原型模式

4，混合構造函數和原型模式

5，動態原型模式

6，寄生構造函數模式

7，穩妥構造函數模式

62.javascript繼承的6種方法

1，原型鏈繼承

2，借用構造函數繼承

3，組合繼承(原型+借用構造)

4，原型式繼承

5，寄生式繼承

6，寄生組合式繼承

詳情：JavaScript繼承方式詳解
63.建立ajax的過程

    (1)建立`XMLHttpRequest`對象,也就是建立一個異步調用對象.

    (2)建立一個新的`HTTP`請求,並指定該`HTTP`請求的方法、`URL`及驗證信息.

    (3)設置響應`HTTP`請求狀態變化的函數.

    (4)發送`HTTP`請求.

    (5)獲取異步調用返回的數據.

    (6)使用JavaScript和DOM實現局部刷新.

 var xmlHttp = new XMLHttpRequest();

    xmlHttp.open('GET','demo.php','true');

    xmlHttp.send()

    xmlHttp.onreadystatechange = function(){

        if(xmlHttp.readyState === 4 & xmlHttp.status === 200){

        }

    }
//https://segmentfault.com/a/1190000000691919 ajax和http狀態字

64.異步加載和延遲加載

1.異步加載的方案： 動態插入script標籤

2.經過ajax去獲取js代碼，而後經過eval執行

3.script標籤上添加defer或者async屬性

4.建立並插入iframe，讓它異步執行js

5.延遲加載：有些 js 代碼並非頁面初始化的時候就馬上須要的，而稍後的某些狀況才須要的。

65.ie各版本和chrome能夠並行下載多少個資源

IE6 兩個併發，iE7升級以後的6個併發，以後版本也是6個

Firefox，chrome也是6個

66.Flash、Ajax各自的優缺點，在使用中如何取捨？

Flash適合處理多媒體、矢量圖形、訪問機器；對CSS、處理文本上不足，不容易被搜索。

-Ajax對CSS、文本支持很好，支持搜索；多媒體、矢量圖形、機器訪問不足。

共同點：與服務器的無刷新傳遞消息、用戶離線和在線狀態、操做DOM

67.請解釋一下 JavaScript 的同源策略。

概念:同源策略是客戶端腳本（尤爲是Javascript）的重要的安全度量標準。它最先出自Netscape Navigator2.0，其目的是防止某個文檔或腳本從多個不一樣源裝載。

這裏的同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議。

指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。

68.爲何要有同源限制？

咱們舉例說明：好比一個黑客程序，他利用Iframe把真正的銀行登陸頁面嵌到他的頁面上，當你使用真實的用戶名，密碼登陸時，他的頁面就能夠經過Javascript讀取到你的表單中input中的內容，這樣用戶名，密碼就輕鬆到手了。

缺點：

如今網站的JS 都會進行壓縮，一些文件用了嚴格模式，而另外一些沒有。這時這些原本是嚴格模式的文件，被 merge 後，這個串就到了文件的中間，不只沒有指示嚴格模式，反而在壓縮後浪費了字節。

69.GET和POST的區別，什麼時候使用POST？

    GET：通常用於信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，通常在2000個字符

    POST：通常用於修改服務器上的資源，對所發送的信息沒有限制。

    GET方式須要使用Request.QueryString來取得變量的值，而POST方式經過Request.Form來獲取變量的值，

    也就是說Get是經過地址欄來傳值，而Post是經過提交表單來傳值。

然而，在如下狀況中，請使用 POST 請求：

沒法使用緩存文件（更新服務器上的文件或數據庫）

向服務器發送大量數據（POST 沒有數據量限制）

發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

70.事件、IE與火狐的事件機制有什麼區別？ 如何阻止冒泡？

1. 咱們在網頁中的某個操做（有的操做對應多個事件）。例如：當咱們點擊一個按鈕就會產生一個事件。是能夠被 JavaScript 偵測到的行爲。

2. 事件處理機制：IE是事件冒泡、firefox同時支持兩種事件模型，也就是：捕獲型事件和冒泡型事件。；

3. `ev.stopPropagation()`;注意舊ie的方法 `ev.cancelBubble = true`;

71.ajax的缺點和在IE下的問題？

詳情請見：JavaScript學習總結（七）Ajax和Http狀態字
ajax的缺點

  一、ajax不支持瀏覽器back按鈕。

  二、安全問題 AJAX暴露了與服務器交互的細節。

  三、對搜索引擎的支持比較弱。

  四、破壞了程序的異常機制。

  五、不容易調試。

IE緩存問題

在IE瀏覽器下，若是請求的方法是GET，而且請求的URL不變，那麼這個請求的結果就會被緩存。解決這個問題的辦法能夠經過實時改變請求的URL，只要URL改變，就不會被緩存，能夠經過在URL末尾添加上隨機的時間戳參數('t'= + new Date().getTime())

或者：

open('GET','demo.php?rand=+Math.random()',true);//

Ajax請求的頁面歷史記錄狀態問題

能夠經過錨點來記錄狀態，location.hash。讓瀏覽器記錄Ajax請求時頁面狀態的變化。

還能夠經過HTML5的history.pushState，來實現瀏覽器地址欄的無刷新改變

72.談談你對重構的理解

網站重構：在不改變外部行爲的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行爲。也就是說是在不改變UI的狀況下，對網站進行優化， 在擴展的同時保持一致的UI。

對於傳統的網站來講重構一般是：

表格(table)佈局改成DIV+CSS

使網站前端兼容於現代瀏覽器(針對於不合規範的CSS、如對IE6有效的)

對於移動平臺的優化

針對於SEO進行優化

深層次的網站重構應該考慮的方面

減小代碼間的耦合

讓代碼保持彈性

嚴格按規範編寫代碼

設計可擴展的API

代替舊有的框架、語言(如VB)

加強用戶體驗

一般來講對於速度的優化也包含在重構中

壓縮JS、CSS、image等前端資源(一般是由服務器來解決)

程序的性能優化(如數據讀寫)

採用CDN來加速資源加載

對於JS DOM的優化

HTTP服務器的文件緩存

73.HTTP狀態碼

    100  Continue  繼續，通常在發送post請求時，已發送了http header以後服務端將返回此信息，表示確認，以後發送具體參數信息

    200  OK   正常返回信息

    201  Created  請求成功而且服務器建立了新的資源

    202  Accepted  服務器已接受請求，但還沒有處理

    301  Moved Permanently  請求的網頁已永久移動到新位置。

    302 Found  臨時性重定向。

    303 See Other  臨時性重定向，且老是使用 GET 請求新的 URI。

    304  Not Modified  自從上次請求後，請求的網頁未修改過。

    400 Bad Request  服務器沒法理解請求的格式，客戶端不該當嘗試再次使用相同的內容發起請求。

    401 Unauthorized  請求未受權。

    403 Forbidden  禁止訪問。

    404 Not Found  找不到如何與 URI 相匹配的資源。

    500 Internal Server Error  最多見的服務器端錯誤。

    503 Service Unavailable 服務器端暫時沒法處理請求（多是過載或維護）。

74.說說你對Promise的理解

依照 Promise/A+ 的定義，Promise 有四種狀態：

pending: 初始狀態, 非 fulfilled 或 rejected.

fulfilled: 成功的操做.

rejected: 失敗的操做.

settled: Promise已被fulfilled或rejected，且不是pending

另外， fulfilled 與 rejected 一塊兒合稱 settled。

Promise 對象用來進行延遲(deferred) 和異步(asynchronous ) 計算。

Promise 的構造函數

構造一個 Promise，最基本的用法以下：

 var promise = new Promise(function(resolve, reject) {

        if (...) {  // succeed

            resolve(result);

        } else {   // fails

            reject(Error(errMessage));

        }
    });

Promise 實例擁有 then 方法（具備 then 方法的對象，一般被稱爲 thenable）。它的使用方法以下：

promise.then(onFulfilled, onRejected)

接收兩個函數做爲參數，一個在 fulfilled 的時候被調用，一個在 rejected 的時候被調用，接收參數就是 future，onFulfilled 對應 resolve, onRejected 對應 reject。