2018Web前端面試試題總結及答案

1、完成的http請求過程需要經過哪些環節？
1）、域名解析；
2）、發起TCP的3次握手；
3）、建立TCP連線後發起http請求，瀏覽器得到html程式碼；
4）、瀏覽器解析HTML程式碼，並請求HTML程式碼中的資源（如js, css，圖片）
5）、瀏覽器對頁面進行渲染頁面給使用者；
2、簡述瀏覽器渲染頁面的過程。
1）、基本流程：
解析HTML以構建dom樹 –> 構建render樹 –>佈局render樹 —> 繪製render樹。
（1） 、因此瀏覽器會解析HTML、svg、XHTML這三種檔案生成一個Dom tree.
（2）、解析css產生一個規則樹
（3）、js指令碼，主要是通過DOM API和CSS API來操作DOM Tree和css Rule Tree。
3、有哪些方式可以實現多個頁面見通訊？
使用cookie,使用web worker，使用localeStorage和sessionStorage
三者的區別：
（1）、 cookie：相容性好，只能存在不大於4kb,可永久存在，要關閉標籤頁回話立即結束時，不要cookie，因為它還會很可能存在一段時間，即使是session-cookie。
（2）、sessionStorage：不支援跨標籤頁共享資料集，比如，每次新開啟一個標籤頁都要求使用者重新登入。
（3）、localStorage：此處作用localstorage事件來解決這個問題。思路：當開啟一個新的標籤的時候，先詢問是否有sessionstorage,有的話就通過localstorage事件向新頁面傳遞sessionstorage，新頁面獲取後設定。
4、同步載入和非同步載入分別有什麼優缺點？
同步請求即是當前發出請求，瀏覽器什麼都不做，必須等到請求完成返回資料之後，才能執行後續的程式碼，相當於是排隊。
非同步請求
當發出請求的同時，瀏覽器可以寄繼續做任何事，ajax請求並不會影響頁面的載入與使用者的操作
5、對效能優化認識：
1）、 減少http請求次數；
2）、減少DNS查詢次數；
3）、快取ajax；
4）、延遲載入；
6、如何對網站的檔案和資源進行優化
1）、檔案合併（目的是減少http請求）；
2）、檔案壓縮（目的是直接減少檔案下載的體積）
3）、使用cdn託管資源
4）、使用快取
5）、gizp壓縮你的js和css檔案
6）、反向連結，網站外連結優化
7、http狀態碼有哪些？分別代表什麼含義？
（1）、資訊類：表示接收到請求並且繼續處理
100 —-> 客戶必須繼續發出請求
1001—–>客戶要求伺服器根據請求轉換HTTP協議版本
（2）、響應成功：表示動作被成功地完成，所請求的資源傳送回客戶端
200 —>表明請求被成功的完成，所請求的資源傳送回客戶端
201 —>提示知道新檔案的url;
202 —–>接受和處理、但處理未完成
203 —-> 返回資訊不確定或不完整
204——請求收到，但返回資訊為空
205——伺服器完成了請求，使用者代理必須復位當前已經瀏覽過的檔案
206——伺服器已經完成了部分使用者的GET請求
（3）、重定向類：為了完成指定的動作，必須接受進一步處理
300——請求的資源可在多處得到
301——本網頁被永久性轉移到另一個url
302——請求的網頁被轉移到一個新的地址，但客戶訪問仍繼續通過原始URL地址，重定向
303—–建議客戶訪問其他url或者訪問方式
304——自從上次請求後，請求的網頁未修改過，伺服器返回此響應時，不會返回網頁內容，代表上次的文件已經被快取了，還可以繼續使用
305——請求的資源必須從伺服器指定的地址得到
306——前一版本HTTP中使用的程式碼，現行版本中不再使用
307——申明請求的資源臨時性刪除
4**(客戶端錯誤類)：請求包含錯誤語法或不能正確執行
400——客戶端請求有語法錯誤，不能被伺服器所理解
401—–請求未經授權你，這個狀態程式碼必須和www-Authenticate報頭域一起使用;
404——一個404錯誤表明可連線伺服器，但伺服器無法取得所請求的網頁，請求資源不存在;
405——使用者在Request-Line欄位定義的方法不允許;
5**(服務端錯誤類)：伺服器不能正確執行一個正確的請求
HTTP 500 - 伺服器遇到錯誤，無法完成請求。
HTTP 502 - 閘道器錯誤
HTTP 503：由於超載或停機維護，伺服器目前無法使用，一段時間後可能恢復正常
8、實現兩等列高的例子


方法一：
<style>
.mainbox{
width: 600px;
margin: 0 auto;
}
.col{
display:table-cell;
width: 400px;
}
.col:first-child{
background: #D0E9C6;
}
.col:last-child{
background: #F05B4F;
}
</style>
<div class="mainbox">
<div class="col">
<h1>雖然很難過，一切很糟糕啊啊啊啊！</h1>
<p>我們本來及時很好的吧回到家看到！</p>
</div>
<div class="col">
<p>我們應該好好學習的，你說呢！</p>
</div>
</div>
方法二：

.mainBox{
display: flex;
}
.left{
flex: 1;
}
.right{
width: 300px;
}
.right{
background: #F05B4F;
}
.left{
background: #E4B9B9;
}