前端面試題總結(一)

 

 

一，從輸入一個url到瀏覽器頁面展現都經歷了哪些過程？

 1，DNS查詢

   1) 瀏覽器首先搜索瀏覽器自身緩存的DNS記錄。

  2) 若是瀏覽器緩存中沒有找到須要的記錄或記錄已通過期，則搜索hosts文件和操做系統緩存。

  3) 若是在hosts文件和操做系統緩存中沒有找到須要的記錄或記錄已通過期，則向域名解析服務器發送解析請求。

  4) 若是域名解析服務器也沒有該域名的記錄，則開始遞歸+迭代解析。

  5) 獲取域名對應的IP後，一步步向上返回，直到返回給瀏覽器。

2 發起TCP三次握手

• 第一次握手：創建鏈接時，客戶端向服務端發送請求報文

• 第二次握手：服務器收到請求報文後，如贊成鏈接，則向客戶端發送確認報文

• 第三次握手，客戶端收到服務器的確認後，再次向服務器給出確認報文，完成鏈接。

3 瀏覽器向web服務器發送http請求；

• 請求行：指定http請求的方法、url、http協議版本等

• 請求頭：描述瀏覽器的相關信息，語言、編碼等。

• 請求正文：當發送POST, PUT等請求時，一般須要向服務器傳遞數據。這些數據就儲存在請求正文中。

四、服務器處理HTTP請求

服務器處理http請求，並返回響應報文。響應報文包括三個部分：

• 狀態碼，

• 響應頭：包含了響應的相關信息，如日期等 

• 響應正文：服務器返回給瀏覽器的文本信息，一般的html、js、css、圖片等就包含在這一部分裏面

五、瀏覽器頁面渲染

瀏覽器接受到http服務器發送過來的響應報文，並開始解析html文檔，渲染頁面。具體的渲染過程包括：構建DOM樹、構建渲染樹、定位頁面元素、繪製頁面元素等

二，new生成一個對象的過程

  以 var p=new ClassA( ) 爲列

   1. 建立空對象；

     var p= {};

  2. 設置新對象的__proto__屬性指向構造函數的prototype對象；

     p.__proto__ = ClassA.prototype;

  3. 使用新對象調用內部函數call，函數中的this被指向新實例對象：

     ClassA.call(p);　　

  4. 將初始化完畢的新對象地址，保存到等號左邊的變量中。

     這裏有一點須要說明： 正常來說構造函數中是不用寫return語句的，由於它會默認返回新建立的對象。可是，若是在構造函數中寫了return語句並且return的是一個對象，那麼函數就會覆蓋掉新建立的對象，而返回此對象；若是return的是基本類型如字符串、數字、布爾值等，那麼函數會忽略掉return語句，仍是返回新建立的對象。

三，請簡單說明什麼是事件冒泡和事件捕獲以及事件委託

   先簡單的解釋一下

   事件捕獲：是從document到觸發事件的那個節點，即自上而下的去觸發事件

   事件冒泡：IE提出的事件流，和事件捕獲相反，即事件開始時由最具體的元素接收，而後逐級向上傳播到較爲不具體的節點，是由下而上的去觸發事件

   事件委託：事件委託是利用事件冒泡，只指定一個事件處理程序來管理某一類型的全部事件。

   爲何要用事件委託？

    1.在JavaScript中添加到頁面上的事件處理程序的個數直接關係到頁面的總體運行性能。爲何呢？由於，每一個事件處理函數都是對象，對象會佔用內存，內存中的對象越多，性能就越差。此外，必須事先指定全部的事件處理程序而致使的DOM訪問次數，會延遲整個頁面的交互就緒時間。

    2.對有不少個數據的表格以及很長的列表逐個添加事件，簡直就是噩夢。因此事件委託，能極大地提升頁面的運行性能，減小開發人員的工做量。

四，請實現一個兩邊寬度固定中間自適應的三列布局

方法一：聖盃佈局

先看一下dom節點構成

1.設置基本樣式

爲了高度保持一致給left main right都加上min-height:130px。

2.聖盃佈局是一種相對佈局，首先設置父元素container的位置： 

實現效果是左右分別空出200px和300px區域，效果如圖：

3.將主體部分的三個子元素都設置左浮動

出現了以下狀況，怎麼辦，彆着急慢慢來：

4.設置main寬度爲width:100%,讓其單獨佔滿一行

5.設置left和right 負的外邊距

咱們的目標是讓left、main、right依次並排，可是上圖中left和right都是位於下一行，這裏的技巧就是使用負的margin-left: 

負的margin-left會讓元素沿文檔流向左移動，若是負的數值比較大就會一直移動到上一行。關於負的margin的應用也是博大精深，這裏確定是不能詳細介紹了。 
　　設置left部分的margin-left爲-100%,就會使left向左移動一整個行的寬度，因爲left左邊是父元素的邊框，因此left繼續跳到上一行左移，一直移動到上一行的開頭，並覆蓋了main部分（仔細觀察下圖，你會發現main裏面的字「main」不見了，由於被left遮住了），left上移事後，right就會處於上一行的開頭位置，這時再設置right部分margin-left爲負的寬度，right就會左移到上一行的末尾。 

 

6.接下來只要把left和right分別移動到這兩個留白就能夠了。可使用相對定位移動 left和right部分。

至此，咱們完成了三列中間自適應的佈局，也就是傳說中的聖盃佈局。完整的代碼以下：

方法二：雙飛翼佈局

聖盃佈局和雙飛翼佈局解決問題的方案在前一半是相同的，也就是三欄所有float浮動，但左右兩欄加上負margin讓其跟中間欄div並排，以造成三欄佈局。不一樣在於解決 「中間欄div內容不被遮擋」問題的思路不同。 
　　他的HTML結構發生了變化：

直接貼出代碼，讀者能夠自行參透他們的異同：

雙飛翼佈局比聖盃佈局多使用了1個div，少用大體4個css屬性（聖盃佈局container的 padding-left和padding-right這2個屬性，加上左右兩個div用相對佈局position: relative及對應的right和left共4個屬性，；而雙飛翼佈局子div裏用margin-left和margin-right共2個屬性，比聖盃佈局思路更直接和簡潔一點。簡單提及來就是：雙飛翼佈局比聖盃佈局多建立了一個div，但不用相對佈局了

方法三：Flex佈局

1.首先將container塊設置爲一個Flex容器

那麼container下屬的main、left和right這三個子元素自動成爲容器成員，稱爲 Flex 項目（flex item），簡稱」項目」。

2.對這三個項目作初始設置 

項目根據內容進行彈性佈局：

3.經過order屬性設置排列順序

能夠看出三個項目的排序方式不同了，main排在了第一個，要讓main在中間，left在左邊，能夠經過Flex容器下的項目的屬性「order」屬性來設置

對於order屬性：定義項目的排列順序，越小越靠前，默認爲0。

４.經過項目屬性flex-grow設置main的放大比例，將空餘的空間用main來填充，使三個項目不滿一整行；默認爲0，也就是對剩餘空間不作處理。

5.經過項目屬性flex-basis 設置left和right的固定寬度

這樣就實現了咱們的目標，是否是很簡單？這就是flex佈局的魅力。。。

6.最後，完整的代碼以下：

方法四：絕對定位佈局

實現結果固然是同樣的啦！