1.cookie sessionStorage localStorage區別？
答：

cookie數據始終在同源的http請求中攜帶(即使不需要)，即cookie在瀏覽器和服務器間來回傳遞

cookie數據還有路徑（path）的概念，可以限制。cookie只屬于某個路徑下

存儲大小限制也不同，cookie數據不能超過4K，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數據，如回話標識。

webStorage雖然也有存儲大小的限制，但是比cookie大得多，可以達到5M或更大

數據的有效期不同sessionStorage：僅在當前的瀏覽器窗口關閉有效；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，因此用作持久數據；cookie：只在設置的cookie過期時間之前一直有效，即使窗口和瀏覽器關閉

作用域不同sessionStorage：不在不同的瀏覽器窗口中共享，即使是同一個頁面；localStorage：在所有同源窗口都是共享的；cookie：也是在所有同源窗口中共享的。

2.cookie session區別？

答：

1.cookie數據存放在客戶的瀏覽器上，session數據放在服務器上。

2.cookie不是很安全，別人可以分析存放在本地的COOKIE并進行COOKIE欺騙
考慮到安全應當使用session。

3.session會在一定時間內保存在服務器上。當訪問增多，會比較占用你服務器的性能
考慮到減輕服務器性能方面，應當使用COOKIE。

4. 單個cookie保存的數據不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie。

3.介紹知道的http返回的狀態碼？

答：

100?? Continue ???繼續。客戶端應繼續其請求

101 ? Switching Protocols ???切換協議。服務器根據客戶端的請求切換協議。只能切換到更高級的協議，例如，切換到HTTP的新版本協議

200?? OK ???請求成功。一般用于GET與POST請求

201 ? Created ???已創建。成功請求并創建了新的資源

202 ? Accepted ???已接受。已經接受請求，但未處理完成

203 ? Non-Authoritative Information ???非授權信息。請求成功。但返回的meta信息不在原始的服務器，而是一個副本

204 ?? No Content ???無內容。服務器成功處理，但未返回內容。在未更新網頁的情況下，可確保瀏覽器繼續顯示當前文檔

205 ? Reset Content ???重置內容。服務器處理成功，用戶終端（例如：瀏覽器）應重置文檔視圖。可通過此返回碼清除瀏覽器的表單域

206 ? Partial Content ???部分內容。服務器成功處理了部分GET請求

300?? Multiple Choices ???多種選擇。請求的資源可包括多個位置，相應可返回一個資源特征與地址的列表用于用戶終端（例如：瀏覽器）選擇

301 ? Moved Permanently ???永久移動。請求的資源已被永久的移動到新URI，返回信息會包括新的URI，瀏覽器會自動定向到新URI。今后任何新的請求都應使用新的URI代替

302 ? Found ???臨時移動。與301類似。但資源只是臨時被移動。客戶端應繼續使用原有URI

303 ? See Other ???查看其它地址。與301類似。使用GET和POST請求查看

304 ? Not Modified ???未修改。所請求的資源未修改，服務器返回此狀態碼時，不會返回任何資源。客戶端通常會緩存訪問過的資源，通過提供一個頭信息指出客戶端希望只返回在指定日期之后修改的資源

305 ? Use Proxy ???使用代理。所請求的資源必須通過代理訪問

306?? Unused????已經被廢棄的HTTP狀態碼

307 ?Temporary Redirect ???臨時重定向。與302類似。使用GET請求重定向

400?? Bad Request????客戶端請求的語法錯誤，服務器無法理解

401?? Unauthorized????請求要求用戶的身份認證

402?? Payment Required????保留，將來使用

403?? Forbidden????服務器理解請求客戶端的請求，但是拒絕執行此請求

404 ? Not Found ???服務器無法根據客戶端的請求找到資源（網頁）。通過此代碼，網站設計人員可設置"您所請求的資源無法找到"的個性頁面

405?? Method Not Allowed????客戶端請求中的方法被禁止

406?? Not Acceptable????服務器無法根據客戶端請求的內容特性完成請求

407? Proxy Authentication Required????請求要求代理的身份認證，與401類似，但請求者應當使用代理進行授權

408?? Request Time-out????服務器等待客戶端發送的請求時間過長，超時

409? Conflict????服務器完成客戶端的PUT請求是可能返回此代碼，服務器處理請求時發生了沖突

410?? Gone ???客戶端請求的資源已經不存在。410不同于404，如果資源以前有現在被永久刪除了可使用410代碼，網站設計人員可通過301代碼指定資源的新位置

411 Length Required????服務器無法處理客戶端發送的不帶Content-Length的請求信息

412?? Precondition Failed????客戶端請求信息的先決條件錯誤

413 ? Request Entity Too Large ???由于請求的實體過大，服務器無法處理，因此拒絕請求。為防止客戶端的連續請求，服務器可能會關閉連接。如果只是服務器暫時無法處理，則會包含一個Retry-After的響應信息

414 Request-URI Too Large????請求的URI過長（URI通常為網址），服務器無法處理

415?? Unsupported Media Type????服務器無法處理請求附帶的媒體格式

416?? Requested range not satisfiable????客戶端請求的范圍無效

417?? Expectation Failed????服務器無法滿足Expect的請求頭信息

500?? Internal Server Error????服務器內部錯誤，無法完成請求

501?? Not Implemented????服務器不支持請求的功能，無法完成請求

502? Bad Gateway????作為網關或者代理工作的服務器嘗試執行請求時，從遠程服務器接收到了一個無效的響應

503 ?Service Unavailable ???由于超載或系統維護，服務器暫時的無法處理客戶端的請求。延時的長度可包含在服務器的Retry-After頭信息中

504? Gateway Time-out????充當網關或代理的服務器，未及時從遠端服務器獲取請求

505 ?HTTP Version not supported ???服務器不支持請求的HTTP協議的版本，無法完成處理。

4.http常用請求頭？

協議頭	說明
Accept	可接受的響應內容類型（Content-Types）。? ? ?
Accept-Charset	可接受的字符集
Accept-Encoding	可接受的響應內容的編碼方式。???
Accept-Language	可接受的響應內容語言列表
Accept-Datetime	可接受的按照時間來表示的響應內容版本
Authorization	用于表示HTTP協議中需要認證資源的認證信息
Cache-Control	用來指定當前的請求/回復中的，是否使用緩存機制。
Connection	客戶端（瀏覽器）想要優先使用的連接類型
Cookie	由之前服務器通過Set-Cookie（見下文）設置的一個HTTP協議Cookie

Content-Length	以8進制表示的請求體的長度
Content-MD5	請求體的內容的二進制 MD5 散列值（數字簽名），以 Base64 編碼的結果
Content-Type	請求體的MIME類型 （用于POST和PUT請求中）
Date	發送該消息的日期和時間（以RFC 7231中定義的"HTTP日期"格式來發送） ? ?
Expect	表示客戶端要求服務器做出特定的行為
From	發起此請求的用戶的郵件地址
Host	表示服務器的域名以及服務器所監聽的端口號。如果所請求的端口是對應的服務的標準端口（80），則端口號可以省略。
If-Match	僅當客戶端提供的實體與服務器上對應的實體相匹配時，才進行對應的操作。主要用于像 PUT 這樣的方法中，僅當從用戶上次更新某個資源后，該資源未被修改的情況下，才更新該資源。
If-Modified-Since	允許在對應的資源未被修改的情況下返回304未修改
If-None-Match	允許在對應的內容未被修改的情況下返回304未修改（ 304 Not Modified ），參考 超文本傳輸協議 的實體標記

If-Range	如果該實體未被修改過，則向返回所缺少的那一個或多個部分。否則，返回整個新的實體
If-Unmodified-Since	僅當該實體自某個特定時間以來未被修改的情況下，才發送回應。
Max-Forwards	限制該消息可被代理及網關轉發的次數。
Origin	發起一個針對跨域資源共享的請求（該請求要求服務器在響應中加入一個Access-Control-Allow-Origin的消息頭，表示訪問控制所允許的來源）。? ?
Pragma	與具體的實現相關，這些字段可能在請求/回應鏈中的任何時候產生。
Proxy-Authorization	用于向代理進行認證的認證信息。
Range	表示請求某個實體的一部分，字節偏移以0開始。
Referer	表示瀏覽器所訪問的前一個頁面，可以認為是之前訪問頁面的鏈接將瀏覽器帶到了當前頁面。Referer其實是Referrer這個單詞，但RFC制作標準時給拼錯了，后來也就將錯就錯使用Referer了。
TE	瀏覽器預期接受的傳輸時的編碼方式：可使用回應協議頭Transfer-Encoding中的值（還可以使用"trailers"表示數據傳輸時的分塊方式）用來表示瀏覽器希望在最后一個大小為0的塊之后還接收到一些額外的字段。
User-Agent ? ? ?	瀏覽器的身份標識字符串

Upgrade	要求服務器升級到一個高版本協議。
Via	告訴服務器，這個請求是由哪些代理發出的。
Warning ? ? ?	一個一般性的警告，表示在實體內容體中可能存在錯誤。

5.強緩存、協商緩存什么時候用哪個？

答：因為服務器上的資源不是一直固定不變的，大多數情況下它會更新，這個時候如果我們還訪問本地緩存，那么對用戶來說，那就相當于資源沒有更新，用戶看到的還是舊的資源；所以我們希望服務器上的資源更新了瀏覽器就請求新的資源，沒有更新就使用本地的緩存，以最大程度的減少因網絡請求而產生的資源浪費。

6.前端優化有哪些策略？

答：

降低請求量：合并資源，減少HTTP請求數，minify/gzip壓縮，webP，lazyLoad。

加快請求速度：預解析DNS，減少域名數，并行加載，CDN 分發。

緩存：HTTP協議緩存請求，離線緩存manifest，離線數據緩存localStorage。

渲染：JS/CSS優化，加載順序，服務端渲染，pipeline。

7.GET和POST的區別？

答：

get參數通過url傳遞，post放在request body中。

get請求在url中傳遞的參數是有長度限制的，而post沒有。

get比post更不安全，因為參數直接暴露在url中，所以不能用來傳遞敏感信息。

get請求只能進行url編碼，而post支持多種編碼方式

get請求會瀏覽器主動cache，而post支持多種編碼方式。

get請求參數會被完整保留在瀏覽歷史記錄里，而post中的參數不會被保留。

GET和POST本質上就是TCP鏈接，并無差別。但是由于HTTP的規定和瀏覽器/服務器的限制，導致他們在應用過程中體現出一些不同。

GET產生一個TCP數據包；POST產生兩個TCP數據包。

8.HTTP支持的方法？

答：

GET, POST, HEAD, OPTIONS, PUT, DELETE, TRACE, CONNECT

9.如何畫一個三角形？

答：

三角形原理：邊框的均分原理

div {width:0px;height:0px;border-top:10px solid red;border-right:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid transparent;}

10.狀態碼304和 200？

答：

狀態碼200：請求已成功，請求所希望的響應頭或數據體將隨此響應返回。即返回的數據為全量的數據，如果文件不通過GZIP壓縮的話，文件是多大，則要有多大傳輸量。

狀態碼304：如果客戶端發送了一個帶條件的 GET 請求且該請求已被允許，而文檔的內容（自上次訪問以來或者根據請求的條件）并沒有改變，則服務器應當返回這個狀態碼。即客戶端和服務器端只需要傳輸很少的數據量來做文件的校驗，如果文件沒有修改過，則不需要返回全量的數據。

11.說一下瀏覽器緩存？

答：

緩存分為兩種：強緩存和協商緩存，根據響應的header內容來決定。

強緩存相關字段有expires，cache-control。如果cache-control與expires同時存在的話，cache-control的優先級高于expires。

協商緩存相關字段有Last-Modified/If-Modified-Since，Etag/If-None-Match。

12.html5新增的元素？

答：

首先html5為了更好的實踐web語義化，增加了header，footer，nav,aside,p等語義化標簽，在表單方面，為了增強表單，為input增加了color，emial,data,range等類型，在存儲方面，提供了sessionStorage，localStorage,和離線存儲，通過這些存儲方式方便數據在客戶端的存儲和獲取，在多媒體方面規定了音頻和視頻元素audio和vedio，另外還有地理定位，canvas畫布，拖放，多線程編程的web worker和websocket協議。

13.在地址欄里輸入一個URL,到這個頁面呈現出來，中間會發生什么？

答：

輸入url后，首先需要找到這個url域名的服務器ip,為了尋找這個ip，瀏覽器首先會尋找緩存，查看緩存中是否有記錄，緩存的查找記錄為：瀏覽器緩存-》系統緩存-》路由器緩存，緩存中沒有則查找系統的hosts文件中是否有記錄，如果沒有則查詢DNS服務器，得到服務器的ip地址后，瀏覽器根據這個ip以及相應的端口號，構造一個http請求，這個請求報文會包括這次請求的信息，主要是請求方法，請求說明和請求附帶的數據，并將這個http請求封裝在一個tcp包中，這個tcp包會依次經過傳輸層，網絡層，數據鏈路層，物理層到達服務器，服務器解析這個請求來作出響應，返回相應的html給瀏覽器，因為html是一個樹形結構，瀏覽器根據這個html來構建DOM樹，在dom樹的構建過程中如果遇到JS腳本和外部JS連接，則會停止構建DOM樹來執行和下載相應的代碼，這會造成阻塞，這就是為什么推薦JS代碼應該放在html代碼的后面，之后根據外部央視，內部央視，內聯樣式構建一個CSS對象模型樹CSSOM樹，構建完成后和DOM樹合并為渲染樹，這里主要做的是排除非視覺節點，比如script，meta標簽和排除display為none的節點，之后進行布局，布局主要是確定各個元素的位置和尺寸，之后是渲染頁面，因為html文件中會含有圖片，視頻，音頻等資源，在解析DOM的過程中，遇到這些都會進行并行下載，瀏覽器對每個域的并行下載數量有一定的限制，一般是4-6個，當然在這些所有的請求中我們還需要關注的就是緩存，緩存一般通過Cache-Control、Last-Modify、Expires等首部字段控制。Cache-Control和Expires的區別在于Cache-Control使用相對時間，Expires使用的是基于服務器 端的絕對時間，因為存在時差問題，一般采用Cache-Control，在請求這些有設置了緩存的數據時，會先 查看是否過期，如果沒有過期則直接使用本地緩存，過期則請求并在服務器校驗文件是否修改，如果上一次 響應設置了ETag值會在這次請求的時候作為If-None-Match的值交給服務器校驗，如果一致，繼續校驗 Last-Modified，沒有設置ETag則直接驗證Last-Modified，再決定是否返回304。

14.常見的HTTP的頭部?

答：

可以將http首部分為通用首部，請求首部，響應首部，實體首部。

通用首部表示一些通用信息，比如date表示報文創建時間，

請求首部就是請求報文中獨有的，如cookie，和緩存相關的如if-Modified-Since。

響應首部就是響應報文中獨有的，如set-cookie，和重定向相關的location，

實體首部用來描述實體部分，如allow用來描述可執行的請求方法，content-type描述主題類型，content-Encoding描述主體的編碼方式

15.HTTP2.0 的特性？

答：

http2.0的特性如下：

1、內容安全，應為http2.0是基于https的，天然具有安全特性，通過http2.0的特性可以避免單純使用https的性能下降。

2、二進制格式，http1.X的解析是基于文本的，http2.0將所有的傳輸信息分割為更小的消息和幀，并對他們采用二進制格式編碼，基于二進制可以讓協議有更多的擴展性，比如引入了幀來傳輸數據和指令。

3、多路復用，這個功能相當于是長連接的增強，每個request請求可以隨機的混雜在一起，接收方可以根據request的id將request再歸屬到各自不同的服務端請求里面，另外多路復用中也支持了流的優先級，允許客戶端告訴服務器那些內容是更優先級的資源，可以優先傳輸。

16.cache-control的值有哪些？

答：

cache-control是一個通用消息頭字段被用于HTTP請求和響應中，通過指定指令來實現緩存機制，這個緩存指令是單向的，常見的取值有private、no-cache、max-age、must-revalidate等，默認為private。

17.瀏覽器在生成頁面的時候，會生成那兩顆樹？

答：

構造兩棵樹，DOM樹和CSSOM規則樹

當瀏覽器接收到服務器相應來的HTML文檔后，會遍歷文檔節點，生成DOM樹。

CSSOM規則樹由瀏覽器解析CSS文件生成。

注意本文的答案僅作為參考答案

關注公眾號，后臺回復“PDF001”，免費獲取
計算機基礎知識+操作系統核心筆記

總結

以上是生活随笔為你收集整理的前端面试题之http/HTML/浏览器（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。