讀書筆記 --- > [基礎知識點] 小結3

1. cookie與session的區別

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. 強緩存與協商緩存

參考 - 瀏覽器緩存機制

概述

良好的緩存策略可以降低資源的重複加載提高網頁的整體加載速度

通常瀏覽器的緩存策略分爲兩種: 強緩存和協商緩存

  • 基本原理
    • 瀏覽器在加載資源時,根據請求頭部的expirescache-control判斷是否命中強緩存,若是強緩存,則直接從緩存讀取資源,不會發送請求到服務器
    • 如果沒有名中強緩存,瀏覽器會發送一條請求給服務器,服務器會根據last-modifiedetag驗證資源是否命中協商緩存.如果命中,服務器會返回 304(Not Modified)給瀏覽器,瀏覽器會使用緩存中的資源進行顯示,並且修改expirescache-control
    • 否則,服務器會返回新的數據資源.

注意點

  • 強緩存字段有expirescache-control,如果同時存在,cache-control的優先級會高於expires
  • 協商緩存的相關字段:Last-Modified/If-Modified-Since,Etag/If-None-Match
服務器決策
服務器決策
200
304
瀏覽器請求
有緩存
是否過期
Etag?
從緩存讀取
向web服務器請求帶If-None-Match
Last-Modified
向Web服務器請求帶If-Modified-Since
200 or 304
向web服務器請求
請求響應,緩存協商
呈現

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
    • 響應首部
      • 響應報文中獨有的: 如set-cookie,和重定向相關的location
    • 實體首部
      • 用來描述實體部分, allow用來描述可執行的請求方法,content-type描述主體類型,content-Encoding描述主體的編碼方式

16. http2.0特性

  1. 內容安全: 基於https,天然具有安全性,通過http2.0的特性可以避免單純使用https的性能下降
  2. 二進制格式: http1.x的解析是基於文本的, http2.0將所有的傳輸信息分割爲更小的消息和幀,並對他們採用二進制格式編碼,基於二進制可以讓協議有更多的擴展性,比如引入了幀來傳輸數據和指令
  3. 多路複用,這個功能相當於是長連接的增強,每個request請求可以隨機的混雜在一起,接收方可以根據request的id將request再歸屬到各自不同的服務端請求裏面,另外多路複用中也支持了流的優先級,允許客戶端告訴服務器哪些內容是更優先的資源,可以優先輸出.
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章