1. cookie與session的區別
-
cookie機制
Cookie是服務器在本地機器上存儲的小段文本,並隨每一次發送至同一個服務器。網絡服務器用HTTP頭向客戶端發送cookies,在客戶端中,瀏覽器解析這些cookies並將它們保存爲一個本地文件,它會自動將同一服務器的任何請求束縛上這些cookies。
具體來說,cookie機制採用的是在客戶端保持狀態的方案.它是在客戶端的會話狀態的存儲機制,他需要用戶打開客戶端的cookie支持。cookie的作用就是爲了解決HTTP協議無狀態的缺陷所作的努力。
正統的cookie分發是通過擴展HTTP協議來實現的,服務器通過HTTP的響應頭中加上一行特殊的指示,提示瀏覽器按照指示生成相應的cookie。然而存粹的客戶端腳本如JavaScript也可以生成cookie。而cookie的使用是由瀏覽器按照一定的原則在後臺自動發送給服務器的。瀏覽器檢查所有存儲的cookie,如果某個cookie所聲明的作用範圍大於將要請求的資源所在的位置,則把該cookie附在請求資源的HTTP請求頭部上發送給服務器
cookie的內容主要包括: 名字、值,過時間,路徑和域。路徑與域一起構成cookie的作用範圍。若不設置過期時間,則表示這個cookiedd的生命週期爲瀏覽器會話期間,關閉瀏覽器窗口,cookie會消失。這種生命週期爲瀏覽器會話器的cookie被稱爲會話cookie。會話cookie一般不存儲在硬盤上而是保存在內存裏,當然這種行爲並不是規範規定的。若設置了過期時間,瀏覽器就會把cookie保存到硬盤上,關閉後再次打開瀏覽器,這些cookie仍然有效直到超過設定的過期時間。存儲在硬盤上的cookie可以在不同的瀏覽器進程間共享,比如兩個IE窗口。而對於保存在內存裏的cookie,不同的瀏覽器有不同的處理方式…
session機制
session機制是一種服務器端的機制,服務器使用一種類似於散列表的結構來保存信息
當程序需要爲某個客戶端的請求創建一個session時,服務器首先檢查這個客戶端的請求裏是否已包含了一個session標識,如果已包含則說明以前已經爲此客戶端創建過session,服務器會按照session id把這個session檢索出來使用,如果客戶端請求不包含session id,則爲此客戶端創建一個session並且生成一個與此session相關聯的session id, session id的值應該是一個既不會重用又不容易找到規律以仿造的字符串,這個session id將在本次響應中返回給客戶端保存.
cookie與session的區別
比較值 | cookie | session |
---|---|---|
存取方式 | 只能保管ASCII字符串; Unicode字符需轉義; 不能直接存取Java對象 | 能夠存取任何類型的數據;可看做是JAVA的一個容器類 |
隱私策略 | 存儲在客戶端的閱讀器上,對客戶端是可見的 | 存儲在服務器上,對客戶端是透明的 |
有效期 | 可以給Cookie的過期時間屬性設爲一個很大很大的數字 | Session保存在服務器內存中,如果過期時間設置久了,會導致內存泄漏 |
服務器壓力 | 不佔服務器資源.如果閱讀的用戶十分多,推薦使用Cookie | 每個用戶都會產生一個Session,併發訪問的用戶十分多,會產生大量session,耗費大量內存 |
瀏覽器支持 | 需要瀏覽器支持,如果用戶禁用了瀏覽器支持,則cookie不生效 | 若客戶端瀏覽器不支持cookie,則需要用到session和URL重寫.否則會失去用戶的信息跟蹤 |
跨域支持 | 支持跨域名訪問 | 不支持跨域名訪問 |
存儲位置 | 客戶端 | 服務器 |
2. cookie、sessionStorage和localStorage的區別
比較對象 | cookie | sessionSorage | localStorage |
---|---|---|---|
有效期 | 根據設置的過期時間,過期則消失;未過期,瀏覽器關閉也不會消失 | 存儲在瀏覽器的內存中,退出瀏覽器環境即消失 | 存儲在客戶端硬盤中,不主動刪除不會消失 |
作用域 | 在同源窗口中是共享的 | 在不同的瀏覽器窗口中是不共享的 | 在同源窗口中是共享的 |
數據大小 | 不能超過4K | 5M左右 | 5M左右 |
http請求 | 每次都會攜帶在http頭部 | 僅在瀏覽器中保存 | 僅在瀏覽器保存 |
應用場景 | 主要用於識別用戶登錄 | 存儲一些頁面中傳遞的參數 | 存儲一些頁面中傳遞的參數 |
3. http狀態碼分類
分類 | 分類描述 |
---|---|
1** | 信息,服務器收到請求,需要請求者繼續執行操作 |
2** | 成功,操作併成功接收並處理 |
3** | 重定向,需要進一步的操作以完成請求 |
4** | 客戶端錯誤,請求包含語法錯誤或無法完成請求 |
5** | 服務端錯誤,服務器在處理請求的過程中發生了錯誤 |
4. http狀態碼列表
狀態碼 | 描述 | 中文描述 |
---|---|---|
100 | Continue | 繼續,客戶端應繼續其請求 |
101 | Switchin Protocols | 切換協議,服務器根據客戶端的請求切換協議. |
200 | OK | 請求成功,一般用於GET與POST |
201 | Created | 已創建,成功請求並創立了新的資源 |
202 | Accepted | 已接受,已經接收請求,但未完成處理 |
203 | Non-Authoritative Information | 非授權信息,請求成功,但返回的mate信息不在原始服務器上 |
204 | Not Content | 無內容,服務器成功處理,但未返回內容 |
205 | Reset Content | 重置內容,服務器處理成功,用戶終端應重置文檔視圖 |
206 | Partial Content | 部分內容,服務器成功處理了部分GET請求 |
300 | Mutiple Choise | 多種選擇,請求的資源可包括多個位置 |
301 | Moved Permanently | 永久移動,請求的資源被永久的移動到新URL上 |
302 | Found | 臨時移動,資源臨時被移動.客戶端應繼續使用原有的URL |
303 | See Other | 查看其他地址. |
304 | Not Modified | 未修改,所請求的資源瀏覽器返回緩存(未過期)的資源 |
305 | Use Proxy | 使用代理,所請求的資源必需通過代理訪問 |
306 | Unused | 已經被廢棄的HTTP狀態碼 |
307 | Temporary Redirect | 臨時重定向,使用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 | 請求要求代理的身份認證,請求者應當使用代理進行授權 |
408 | Request Time-out | 服務器等待客戶端發送的請求時間過長,超時 |
409 | Conflict | 服務器處理請求時發生了衝突 |
410 | Gone | 客戶端請求的資源已經不存在(永久的刪除,並不是更改了URL) |
411 | Length Requried | 服務器無法處理客戶端發送不帶Content-Length 的信息 |
412 | Precondition Failed | 客戶端請求信息的先決條件錯誤 |
413 | Request Entity Too Large | 請求的實體過大,服務器無法處理 |
414 | Request-URL Too Large | 請求的URL過長,服務器無法處理 |
415 | Unsupported Media Type | 服務器無法處理請求附帶的媒體格式 |
416 | Requested range not satisfiable | 客戶端請求的範圍無效 |
417 | Expectation Failed | 無服務無法滿足Expect的請求頭信息 |
500 | Interval Server Error | 服務器內部錯誤,無法完成請求 |
501 | Not Implemented | 服務器不支持請求的功能,無法完成請求 |
502 | Bad Gateway | 作爲網關或代理工作的服務器嘗試執行請求時,從遠程服務器收到一個無效的響應 |
503 | Service Unvailable | 超荷或系統維護導致服務器暫時無法處理客戶端的請求 |
504 | Gateway Time-out | 網關(或代理服務器)未能從遠端服務器獲取請求 |
505 | HTTP Version not supported | 服務器不支持請求的HTTP協議的版本 |
5. 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 | 數字簽名,以Base64編碼的結果表示 |
Content-Type | 請求體的MIME類型(用於POST和PUT請求中) |
Date | 發送該消息的日期和時間 |
Expect | 客戶端要求服務器做出特定的行爲 |
From | 發起此請求的用戶的郵箱地址 |
Host | 服務器的域名及端口號 |
If-Match | 客戶端的實體與服務器上對應的實體相匹配時,才進行相應的操作 |
If-Modified-Since | 對應的資源未修改,返回304 |
If-None-Match | 對應的內容未被修改的情況下返回304 Not Modified |
If-Range | 如果實體未被修改,則返回所缺少的哪一個或多個部分 |
If-Unmodified-Since | 僅當該實體自某個特定時間以來未被修改的情況下,才發送迴應 |
Max-Forwards | 限制該消息可被代理及網關轉發的次數 |
Origin | 發起一個針對跨域資源共享的請求 |
Pragma | 與具體的實現相關,這些字段可能在請求/迴應鏈中的任何時候產生 |
Proxy-Authorization | 用於向代理進行認證的認證信息 |
Range | 表示請求某個實體的一部分,字節偏移以0開始 |
Refer | 表示瀏覽器所訪問的前一個頁面 |
TE | 瀏覽器預期接受的傳輸時的編碼方式 |
User-Agent | 瀏覽器的身份標識字符串 |
Upgrade | 要求服務器升級到一個高級版本協議 |
Via | 告訴服務器請求是由哪些代理髮出的 |
Warning | 一個一般性的警告,表示在實體內容中可能存在錯誤 |
6. 強緩存與協商緩存
概述
良好的緩存策略可以降低資源的重複加載提高網頁的整體加載速度
通常瀏覽器的緩存策略分爲兩種: 強緩存和協商緩存
- 基本原理
- 瀏覽器在加載資源時,根據請求頭部的
expires
和cache-control
判斷是否命中強緩存,若是強緩存,則直接從緩存讀取資源,不會發送請求到服務器 - 如果沒有名中強緩存,瀏覽器會發送一條請求給服務器,服務器會根據
last-modified
和etag
驗證資源是否命中協商緩存.如果命中,服務器會返回 304(Not Modified)給瀏覽器,瀏覽器會使用緩存中的資源進行顯示,並且修改expires
和cache-control
- 否則,服務器會返回新的數據資源.
- 瀏覽器在加載資源時,根據請求頭部的
注意點
- 強緩存字段有
expires
和cache-control
,如果同時存在,cache-control
的優先級會高於expires - 協商緩存的相關字段:
Last-Modified/If-Modified-Since
,Etag/If-None-Match
7. 常見的http狀態碼
狀態碼 | 描述 | 中文描述 |
---|---|---|
200 | Ok | 請求成功 |
201 | Created | 已經創建,成功請求並創建了新的資源 |
202 | Accepted | 已經接受請求,但是未處理 |
206 | Partial Content | 部分內容,服務器已經處理了部分GET請求 |
301 | Moved Permanently | 永久重定向,域名跳轉 |
302 | Found | 臨時重定向,讓未登錄的用戶訪問用戶中心 |
304 | Not Modified | 資源未修改,告訴瀏覽器可以使用本地緩存 |
307 | Temporary Redirect | 臨時重定向 |
400 | Bad Request | 服務器不能理解服務端的請求 |
401 | Unauthorized | 需要客戶端提供驗證信息 |
403 | Forbiden | 一般是客戶端提交的數據無法通過服務端的驗證,拒絕訪問 |
404 | Not Found | 服務器通過URL無法找到對應的資源 |
500 | Interval Server Error | 服務器收到了請求,但是服務器執行的時候發送了錯誤 |
8. 前端優化
- 降低請求量: 合併資源,減少HTTP請求數, minify / gzip壓縮, webP, lazyLoad
- 加快請求速度: 預解析DNS,減少域名數,並行加載,CDN分發
- 緩存: HTTP協議緩存請求,離線緩存manifest,離線數據緩存localStorage
- 渲染: JS/CSS優化,加載順序,服務端渲染,pipline
9. GET和POST的區別
屬性 | GET | POST |
---|---|---|
安全性 | 不安全 | 比較安全(也不是那麼安全) |
參數長度 | 被瀏覽器限制了長度 | 長度一般無限制 |
參數是否被緩存 | 可以在瀏覽歷史記錄裏看到 | 不會被保留 |
TCP數據包 | 產生1個TCP數據包 | 產生2個TCP數據包 |
編碼格式 | 只能進行url編碼 | 支持多種編碼方式 |
10. 畫一個三角形
利用邊框的均分原理
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;
}
11. 狀態碼304和200
-
狀態碼200
: 請求已成功,請求所希望的響應頭或數據體將隨此響應返回.即返回的數據未全量的數據,如果文件不通過GZIP壓縮的話,文件是多大,則要有多大傳輸量 -
狀態碼304
: 如果客戶端發送了一個帶條件的GET請求且該請求已被允許,而文檔的內容(自上次訪問以來或者根據請求的條件)並沒有改變,則服務器應當返回這個狀態碼。即客戶端和服務器端只需要傳輸很少的數據量來做文件的校驗,如果文件沒有修改過,則不需要返回全量的數據
12. 說一下瀏覽器的緩存
-
分爲強緩存和協商緩存
-
瀏覽器根據IP地址獲取資源時,首先在緩存種查找是否含義該資源,如果有且未過期則從緩存種獲取,不請求瀏覽器而直接返回資源,這種返回的資源稱爲強緩存資源
-
如果過期了:
- 如果帶有
Etag
,則會向服務器請求(帶If-None-match
),服務器根據客戶端傳入的信息,判斷客戶端中的緩存是否過期,若過期則返回新資源(200),否則返回狀態碼304,不帶有資源 - 如果不帶
Etag
,則會檢查是否帶Last-Modified
,如果有,則向服務器請求(帶If-Modified-Since
),服務器根據客戶端傳入的信息,判斷客戶端中的緩存是否過期,若過期則返回新資源(200),否則返回狀態碼304,不帶有資源 - 如果不帶
Last-Modified
則直接向服務器直接申請新資源
- 如果帶有
-
-
強緩存,是根據是否過期判斷的,協商緩存是通過服務器判斷的.
13. HTML5新增的元素
語義化
:新增了 header,footer,nav,aside,section等語義化標籤表單
: 新增加了color,email,data,range等類型存儲
: 提供了sessionStorage, localStorage 和離線緩存多媒體
: 音頻(audio) 和 視頻(vedio)其他
: 地理定位,canvas畫布、拖放(drag)、多線程(Web Worker)
14. 在地址欄輸入一個URL到這個頁面呈現出來,中間會發生什麼
-
輸入url後,首先會根據域名去尋找對應的ip
- 瀏覽器首先會去尋找緩存,查看緩存中是否有記錄,緩存的查找記錄爲: 瀏覽器緩存 --> 系統緩存 --> 路由緩存,
- 緩存中沒有則查找hosts文件中是否有記錄
- hosts文件中沒有記錄則查詢DNS服務器,得到ip地址
-
得到ip地址後,瀏覽器會根據這個ip以及相應的端口號,構造一個http請求
- 請求報文包括
- 請求方法
- 請求說明
- 請求附帶的數據
- 請求報文包括
-
然後,瀏覽器將http請求封裝在一個tcp包中
- 這個tcp包會一次經過: 傳輸層、網絡層、數據鏈路層、物理層
-
tcp請求到達服務器,服務器請求並返回資源
-
瀏覽器得到html文檔後,第一次會根據html生成一個DOM樹,其中遇到異步(如CSS和JS的加載),會將異步任務放到異步隊列中去(開一個線程去獲取)
-
當同步任務執行完畢後,會去任務隊列中去尋找已經完成資源,然後進行事件循環(每次讀取隊首完成的任務到棧內存中執行,執行完畢在去任務隊列中獲取).
-
事件循環過後,所有CSS加載完成,會生成一棵CSSOM規則.然後瀏覽器會將DOM樹和CSSOM規則合併成一棵渲染樹,主要是排除非視覺節點(
Script、meta..
) -
緊接着進行
迴流(Layout)
: 根據渲染樹,計算出它們在視口(viewPort)中的準確位置和大小. -
然後
重繪(Painting)
: 根據Render樹和迴流得到的幾何信息,得到絕對像素點 -
Display: 將像素點發送給GPU進行渲染
15. 常見的http的頭部
- 首部可以分爲:
- 通用首部
- 一些通用的信息: 如date表示報文創建時間
- 請求首部
- 請求報文中獨有的: cookie, 和緩存相關的如
if-Modified-Since
- 請求報文中獨有的: cookie, 和緩存相關的如
- 響應首部
- 響應報文中獨有的: 如
set-cookie
,和重定向相關的location
- 響應報文中獨有的: 如
- 實體首部
- 用來描述實體部分,
allow
用來描述可執行的請求方法,content-type
描述主體類型,content-Encoding
描述主體的編碼方式
- 用來描述實體部分,
- 通用首部
16. http2.0特性
- 內容安全: 基於https,天然具有安全性,通過http2.0的特性可以避免單純使用https的性能下降
- 二進制格式: http1.x的解析是基於文本的, http2.0將所有的傳輸信息分割爲更小的消息和幀,並對他們採用二進制格式編碼,基於二進制可以讓協議有更多的擴展性,比如引入了幀來傳輸數據和指令
- 多路複用,這個功能相當於是長連接的增強,每個request請求可以隨機的混雜在一起,接收方可以根據request的id將request再歸屬到各自不同的服務端請求裏面,另外多路複用中也支持了流的優先級,允許客戶端告訴服務器哪些內容是更優先的資源,可以優先輸出.