瀏覽器
瀏覽器緩存（http緩存）
瀏覽器緩存是將文件保存在客戶端嫌松，在同一個會話中會檢查緩存的副本是否足夠新沪曙，在后退網(wǎng)頁時，訪問過的資源可以直接從緩存中拿出來使用萎羔。通過這種方式減少服務(wù)器處理請求量液走，用戶獲得更快的 訪問體驗。
瀏覽器的緩存分為強緩存和協(xié)商緩存贾陷。瀏覽器向服務(wù)端發(fā)送請求時缘眶，先判斷是否命中強緩存在判斷是否命中協(xié)商緩存。所以強緩存不發(fā)送request到服務(wù)端髓废。
-
強緩存根據(jù)header信息中的expires和cache-control判斷巷懈。Cache-Control 與 Expires 可以在服務(wù)端配置同時啟用，同時啟用的時候 Cache-Control 優(yōu)先級高慌洪。 expires是http1.0的規(guī)范顶燕，它包含一個gmt格式的絕對事件字符串凑保，代表資源失效時間。cache-control是http1.1出現(xiàn)的header信息涌攻，通過該字段中的max-age值來判斷資源失效時間欧引，是一個相對事件，單位是秒恳谎。還有其他幾個設(shè)置值：
s-maxage 它用于設(shè)置代理服務(wù)器的緩存時間
no-cache：需要進行協(xié)商緩存芝此，發(fā)送請求到服務(wù)器確認是否使用緩存。
no-store：禁止使用緩存惠爽，每一次都要重新請求數(shù)據(jù)。
public：可以被所有的用戶緩存瞬哼，包括終端用戶和 CDN 等中間代理服務(wù)器婚肆。
private：只能被終端用戶的瀏覽器緩存，不允許 CDN 等中繼緩存服務(wù)器對其緩存
如果沒有命中強緩存坐慰，發(fā)送請求到服務(wù)器查看是否命中協(xié)商緩存较性。服務(wù)器通過請求中的header的內(nèi)容判斷如果命中協(xié)商緩存，服務(wù)器返回304告訴瀏覽器使用本地緩存结胀，否則返回新的資源赞咙。
last-modify/if-modify-since 瀏覽器第一次請求一個資源時，瀏覽器返回的header中會包含一個last-modify值糟港，這是資源最后一次更新的時間攀操。再次發(fā)送請求時，header中會包含一個if-modify-since值秸抚，該值等于之間返回的last-modify速和。服務(wù)器收到后判斷是否命中緩存，如果命中則返回304剥汤，且不會返回任何資源颠放。這樣做的缺點是當資源在一個周期內(nèi)有回到原來的樣子，last-modify會認為無法使用吭敢，于是有了ETag/If-None-Match
ETag根據(jù)資源內(nèi)容編碼碰凶，當資源回到原來的樣子，ETag值保持不變鹿驼。服務(wù)器通過瀏覽器request header中If-None-Match判斷hi否命中緩存欲低。
Last-Modified 與 ETag 是可以一起使用的，服務(wù)器會優(yōu)先驗證 ETag畜晰，一致的情況下伸头，才會繼續(xù)比對 Last-Modified，最后才決定是否返回 304舷蟀。
同源政策與跨域
- 同源策略可防止 JavaScript 發(fā)起跨域請求恤磷。源被定義為協(xié)議面哼、主機名和端口號的組合。兩個頁面同時擁有相同的協(xié)議扫步、主機名和端口號魔策，則被認為是同源的。此策略可防止頁面上的惡意腳本通過該頁面的文檔對象模型河胎，訪問另一個網(wǎng)頁上的敏感數(shù)據(jù)闯袒。常見的處理跨域的方法，jsonp和cors游岳。
-
JSONP （JSON with Padding） 這種方式跨域是通過script標簽引入js文件政敢，這個js文件又會返回一個js函數(shù)調(diào)用，也就是請求后通過callback的方式回傳結(jié)果胚迫，將需要的數(shù)據(jù)通過參數(shù)傳入
優(yōu)點: 兼容性更好,支持老版本瀏覽器
缺點：只支持get請求 -
CORS （Cross Origin Resources Sharing）
其原理是使用自定義的http頭部請求喷户，能是服務(wù)器支持XMLHttpRequest跨域請求。
優(yōu)點：
1.支持所有類型的http請求
2.比jsonp有更好的錯誤處理機制
3.被大多數(shù)瀏覽器所支持 - h5的postMessage方法
window.postMessage(message,targetOrigin) 方法是html5新引進的特性访锻，可以使用它來向其它的window對象發(fā)送消息褪尝，無論這個window對象是屬于同源或不同源。這種方法不能和服務(wù)端交換數(shù)據(jù)期犬，只能在兩個窗口（iframe）之間交換數(shù)據(jù)河哑。
瀏覽器渲染
- 將html代碼按深度優(yōu)先遍歷生成dom樹，將css渲染成cssom樹龟虎，dom樹和cssom樹構(gòu)成render tree璃谨。瀏覽器進入layout環(huán)節(jié)，將所有的節(jié)點位置計算出來鲤妥，最后繪制（paint）所有節(jié)點的內(nèi)容
回流（reflow）和重繪（repaint）
- 回流發(fā)生在頁面中的元素發(fā)生布局變化時睬罗，比如改變寬高，元素的規(guī)模尺寸和布局旭斥。每個頁面都會至少經(jīng)歷一次回流容达，就是頁面第一次渲染的時候
- 重繪發(fā)生在元素的樣式發(fā)生變化，頁面只需要重新渲染垂券，比如顏色改變花盐，而不改變盒子的位置、大小等其他屬性菇爪。
為什么css放在頂部算芯，js放在后面
- 瀏覽器預(yù)先加載css后可以，可以提前開始渲染
- js大部分事件處理功能在頁面渲染后才執(zhí)行凳宙，這樣可以節(jié)省加載時間熙揍，提高用戶體驗
輸入url到瀏覽器地址欄
- 輸入url到地址欄按下回車
- 瀏覽器開始解析url，并在緩存中查找氏涩，比較緩存是否過期
- dns解析url對應(yīng)的ip
- 根據(jù)ip建立tcp連接
- http發(fā)起請求届囚，請求對應(yīng)的資源
- 服務(wù)端處理請求有梆，瀏覽器處理http響應(yīng)
- 瀏覽器html解析器將html文件解析，按代碼深度遍歷生成dom樹意系，css解析器構(gòu)建cssom樹泥耀。根據(jù)dom樹cssom樹構(gòu)成渲染樹。瀏覽器進入layout環(huán)節(jié)蛔添，將所有的節(jié)點位置計算出來痰催，最后繪制（paint）所有節(jié)點的內(nèi)容。
- 關(guān)閉tcp連接
瀏覽器的垃圾回收
?
儲存方式與運輸方式
cookie迎瞧，sessionStorage夸溶，localStorage
- cookie是在客戶端記錄用戶信息的一種機制，保存在客戶端凶硅，最大4kb
- session實在服務(wù)端記錄用戶狀態(tài)的一種機制缝裁。session對象數(shù)據(jù)儲存在服務(wù)端，通過瀏覽器和服務(wù)端之間傳輸session_id找到對應(yīng)的session對象咏尝。
- sessionstorage和localstorage是webstorage提供的兩種存儲方式压语，sessionstorage僅在會話存在期間可用啸罢，localstorage除非數(shù)據(jù)被清除编检，否則一直可用。
token扰才、cookie允懂、session
- token是令牌，他的身份認證是唯一的衩匣，安全性最好蕾总，用于判斷用戶是否授權(quán)
- cookie是儲存在客戶端的txt文件，用于存儲用戶信息
- session實在服務(wù)端記錄用戶狀態(tài)的一種機制琅捏。session對象數(shù)據(jù)儲存在服務(wù)端生百，通過瀏覽器和服務(wù)端之間傳輸session_id找到對應(yīng)的session對象，回話完成即被銷毀柄延。cookie存在session_id蚀浆。
http
http狀態(tài)碼
- 1** 請求正在處理
- 2** 請求被成功接收并處理( 200 請求成功；201 用戶新建或修改數(shù)據(jù)成功搜吧；202 一個請求已成功進入后臺市俊；204 用戶刪除成功）
- 3** 重定向，需要進一步操作以完成請求( 304命中緩存)
- 4** 客戶端錯誤滤奈，請求包含語法錯誤或無法完成請求(400 格式錯誤摆昧；401 用戶沒有權(quán)限，要求身份驗證蜒程；403绅你，用戶得到權(quán)限伺帘，但是禁止訪問；404 錯誤路徑找不到文件)
- 5** 服務(wù)器錯誤勇吊，服務(wù)器在處理請求的過程中發(fā)生了錯誤 （500 服務(wù)器出錯曼追；503 服務(wù)器超負荷或停機維護）
http1、http2汉规、http3
-
Http1.0 與 http1.1
Http1.0 為了支持多種類型的文件下載礼殊，引入了請求頭響應(yīng)頭，還提供了Cache機制针史、狀態(tài)碼等基本參數(shù)晶伦。
http1.1 引入了持久連接來提高效率，即在一個tcp連接中傳輸多個http請求啄枕，瀏覽器為每個域名最多支持六個tcp持久連接婚陪。 使用CDN實現(xiàn)域名分片機制。
-
Http1.1 與 http2.0
http1.1的缺陷：1. tcp慢啟動 2. 多條tcp連接會競爭固定帶寬 3. 表頭阻塞問題：在一個請求沒有結(jié)束之前频祝，其他請求只能是等待狀態(tài)泌参。
http2.0 的改進： 1. 一個與域名只使用一個tcp連接 2. 多路復(fù)用 解決表頭阻塞。
HTTP2 使用了多路復(fù)用技術(shù)常空，可以將請求通過二進制分幀層分成多個帶有ID編號的幀數(shù)據(jù)去傳輸沽一，這樣帶來了一個額外的好處，就是當收到一個優(yōu)先級高的請求時漓糙，比如接收到JavaScript或者CSS關(guān)鍵資源的請求铣缠，服務(wù)器可以暫停之前的請求來優(yōu)先處理關(guān)鍵資源的請求。
-
Http2.0 與 http3.0
http2.0 的缺陷： tcp的隊頭阻塞昆禽，tcp建立連接的延時
http3.0 的改進： QUIC協(xié)議（Quick UDP Internet Connections）
http/https
- http無需證書蝗蛙，https需要申請證書
- http是超文本傳輸協(xié)議，是明文傳輸醉鳖。https是具有安全性的ssl加密傳輸協(xié)議
- http的端口號是80捡硅，https的端口號是443
- https的加密過程：https是http將報文信息傳輸給ssl socket進行加密，ssk socket加密后再將報文發(fā)送給tcp socket盗棵，目的主機將tcp套接字報文獲取后傳給ssl socket壮韭，ssl解密后交給對應(yīng)的進程。
get/post
- get：從指定的資源請求數(shù)據(jù) post： 向指定的資源提交已處理的數(shù)據(jù)
- get：get數(shù)據(jù)放在url后漾根，用泰涂？分隔url和傳輸數(shù)據(jù)，參數(shù)用&相連 post：post數(shù)據(jù)在http的header包的body中傳輸
- get：get移交的數(shù)據(jù)長度有限制辐怕，因為瀏覽器對url長度有限制（2048字符）逼蒙，post沒有限制
- get可被瀏覽器緩存，產(chǎn)生的url地址可以存為書簽,get請求參數(shù)會被保存在瀏覽器的歷史記錄里寄疏，post均不行
- get的數(shù)據(jù)在url中對所有人都可見是牢，安全性更差
TCP三次握手
- 客戶端傳給服務(wù)端syn包請求建立連接客戶端進入syn_send狀態(tài)僵井，服務(wù)端返回確認碼ack并發(fā)出一個自己的syn包，服務(wù)端進入syn_recv狀態(tài)驳棱，客戶端收到收到服務(wù)端的syn+ack包批什，返回確認碼ack∩缃粒客戶端和服務(wù)端進入established狀態(tài)驻债，三次握手完成
TCP四次揮手
- 客戶端向服務(wù)端發(fā)送fin碼請求關(guān)閉客戶端到服務(wù)端的數(shù)據(jù)連接，服務(wù)端返回ack碼形葬。服務(wù)端關(guān)閉與客戶端的數(shù)據(jù)連接合呐，發(fā)送一個fin碼，客戶端返回ack碼確認笙以。收到ack淌实，服務(wù)端進入closed狀態(tài)，客戶端再等待2msl（最大生存時間）時間后進入closed狀態(tài)猖腕。為什么要等2msl拆祈？如果最后傳給服務(wù)端的ack丟失，服務(wù)端將在超時后重發(fā)fin包倘感，如果在2msl時間內(nèi)沒有等到服務(wù)端重發(fā)的fin包放坏，則證明四次揮手完成。
網(wǎng)絡(luò)七層模型
- 應(yīng)用層: 向客戶提供應(yīng)用侠仇，文件傳輸轻姿，電子郵件犁珠，虛擬終端 http,ftp,telent,dns,smtp
- 表達層： 數(shù)據(jù)格式化逻炊，代碼轉(zhuǎn)化
- 會話層： 解除或建立與別的節(jié)點之間的聯(lián)系
- 傳輸層: 對報文進行分組或重組，以tcp/udp的形式封裝報文 tcp,udp
- 網(wǎng)絡(luò)層： 為數(shù)據(jù)包選擇路由犁享，將報文發(fā)送給目標網(wǎng)絡(luò)或主機 ip
- 鏈路層： 負責封裝和解析ip報文
- 物理層： 物理形式上的數(shù)據(jù)傳輸
CDN
- Content Delivery Network 內(nèi)容分發(fā)網(wǎng)絡(luò)余素。是一組在地理上分散的服務(wù)器，他們協(xié)同工作以應(yīng)對互聯(lián)網(wǎng)的內(nèi)容的快速交付炊昆。CDN可以將用戶請求重定向到最近的服務(wù)節(jié)點上桨吊，解決網(wǎng)絡(luò)擁堵的問題，提高用戶的瀏覽體驗凤巨。
常見的web安全與防御
- sql注入 ：將sql代碼偽裝到請求的輸入?yún)?shù)中视乐，傳入到服務(wù)器解析并執(zhí)行的一種方法。防御：對用戶輸入進行校驗
- xss（cross site scripting）：跨站腳本攻擊敢茁，往web頁面中插入惡意的html標簽和js腳本佑淀，比如在論壇中放置一個看似安全的連接，來獲取用戶的cookie信息彰檬。防御： 將重要的cookie設(shè)置為http only伸刃，js中的document.cookie會失效
- csrf（cross site request forgery）：跨站點請求偽造谎砾，偽裝受信任的用戶發(fā)送請求。防御：通過驗證碼捧颅，強制用戶進行交互景图，避免用戶在不知情的情況下被發(fā)送請求。
