前端常見(jiàn)知識(shí)點(diǎn)之瀏覽器

目錄

• • 前端常見(jiàn)知識(shí)點(diǎn)之瀏覽器
  • • 1.web Quality(無(wú)障礙)
    • 2.幾個(gè)實(shí)用的BOM對(duì)象方法
    • 3. cookie、sessionStroage、localStroage的區(qū)別
    • 4.cookie和[session](https://zhuanlan.zhihu.com/p/88499420)的區(qū)別
    • 5.描述一下XSS和CSRF攻擊？如何防御？
    • 6.click在ios上有300ms延遲，原因及如何解決
    • 7.addEventListener參數(shù)
    • 8.前端優(yōu)化
    • 9.在地址欄里輸入一個(gè)URL，到頁(yè)面呈現(xiàn)，中間會(huì)發(fā)生什么？
    • 10.Event loop（事件輪詢(xún)）

1.web Quality(無(wú)障礙)

能夠被殘障人士使用的網(wǎng)站稱(chēng)得上一個(gè)易用的（易訪問(wèn)的）網(wǎng)站
使用alt屬性：

<img src='xxx.jpg' alt='this is a xxx'/>

有時(shí)候?yàn)g覽器無(wú)法顯示圖像，alt會(huì)發(fā)揮它的作用：

• 用戶(hù)關(guān)閉了圖像顯示
• 不支持顯示圖形的迷你瀏覽器
• 瀏覽器是語(yǔ)音瀏覽器（供盲人和弱勢(shì)群體使用）

如果您使用了alt屬性，那么瀏覽器至少可以顯示或讀出有關(guān)圖像的描述。

2.幾個(gè)實(shí)用的BOM對(duì)象方法

BOM–瀏覽器對(duì)象。

location對(duì)象
location.href-- 返回或設(shè)置文檔的URl
location.search-- 返回URL中的查詢(xún)字符串部分（?id=5&name=xxx)
location.hash-- 返回URl中#后面的內(nèi)容(#/discover/playlist/?cat=xx")
location.host-- 返回域名部分
location.hostname-- 返回域名部分不包含端口
location.pathname-- 返回URL域名后的部分
location.port-- 返回URL中的端口部分
location.protocol-- 返回協(xié)議部分
location.assign-- 設(shè)置當(dāng)前文檔的URL
location.replace()-- 設(shè)置當(dāng)前文檔的URL，并且在history對(duì)象的地址列表中移除
location.reload()-- 重載當(dāng)前頁(yè)面

history對(duì)象
history.go()-- 前進(jìn)或后退指定頁(yè)面數(shù)3.
history.back()-- 后退一頁(yè)
history.forward()-- 前進(jìn)一頁(yè)

Navigator對(duì)象
navigator.userAgent-- 返回用戶(hù)胡代理 頭的字符串表示（就是包括瀏覽器版本信息等字符串）
navigator.cookieEnabled— 返回瀏覽器是否啟用cookie

3. cookie、sessionStroage、localStroage的區(qū)別

• 共同點(diǎn)：都是保存在瀏覽器，并且是同源的
• cookie：cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶（即使不需要），即cookie在瀏覽器和服務(wù)器間來(lái)回傳遞。而sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)送給服務(wù)器，僅在本地保存。cookie數(shù)據(jù)還有路徑（path）的概念。可以限制cookie只屬于某個(gè)路徑下，存儲(chǔ)大小很小只有4k左右。key：可以在瀏覽器和服務(wù)器來(lái)回傳遞，存儲(chǔ)量小，只有大約4k左右。
• sessionStorage: 僅在當(dāng)前瀏覽器窗口關(guān)閉前有效，不能持久保持。localStroage始終有效，窗口關(guān)閉或?yàn)g覽器關(guān)閉也一直保存。大小都為5M。key:本身就是一個(gè)會(huì)話(huà)過(guò)程，關(guān)閉瀏覽器后消失，session為一個(gè)會(huì)話(huà)，當(dāng)頁(yè)面不同，即使是同一頁(yè)面打開(kāi)兩次，也被視為同一會(huì)話(huà)
• localStroage：localStorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。key：同源窗口都會(huì)共享，并且不會(huì)失效，不管窗口或者瀏覽器關(guān)閉與否都會(huì)始終生效
• 補(bǔ)充cookie作用：1. 保存用戶(hù)登錄狀態(tài)。使用戶(hù)下次訪問(wèn)不需要重新登陸。cookie還可以設(shè)置過(guò)期時(shí)間，當(dāng)超過(guò)時(shí)間期限后，cookie就會(huì)失效。2. 跟蹤用戶(hù)行為。cookie能夠2保存用戶(hù)的上次的選擇。如果網(wǎng)站提供了換膚或者更換布局的功能，那么可以使用cookie來(lái)記錄用戶(hù)的選項(xiàng)。例如：背景色、分辨率等。當(dāng)用戶(hù)下次訪問(wèn)時(shí)，仍然可以保存上次訪問(wèn)的界面風(fēng)格。

4.cookie和session的區(qū)別

cookie數(shù)據(jù)存放在客戶(hù)的瀏覽器上，session數(shù)據(jù)放在服務(wù)器上

cookie不是很安全，別人可分析存放在本地的cookie進(jìn)行cookie欺騙，考慮到安全應(yīng)當(dāng)使用session

session會(huì)在一定時(shí)間內(nèi)保存在服務(wù)器上，當(dāng)訪問(wèn)增多，會(huì)比較占用服務(wù)器的性能，考慮到減輕服務(wù)器性能方面，應(yīng)當(dāng)使用cookie

單個(gè)cookie保存額數(shù)據(jù)不能超過(guò)4k，很多瀏覽器都限制一個(gè)站點(diǎn)最多保存20個(gè)cookie

讀取方式，cookie需要用document.cookie來(lái)讀取

5.描述一下XSS和CSRF攻擊？如何防御？

XSS（跨站腳本攻擊）是指在攻擊者在返回的HTML中嵌入js腳本，當(dāng)渲染DOM樹(shù)的過(guò)程中發(fā)生了不在預(yù)期內(nèi)執(zhí)行的js代碼時(shí)，就發(fā)生了XSS攻擊。大多數(shù)XSS攻擊的主要方式是嵌入一段遠(yuǎn)程或者第三方域上的JS代碼。實(shí)際上是在目標(biāo)網(wǎng)站的作用域下執(zhí)行了這段JS代碼。

CSRF(跨站請(qǐng)求偽造)，在別的站點(diǎn)偽造了一個(gè)請(qǐng)求。專(zhuān)業(yè)術(shù)語(yǔ)來(lái)說(shuō)就是在受害者訪問(wèn)一個(gè)網(wǎng)站時(shí)，其cookie還沒(méi)有過(guò)期的情況下，攻擊者偽造一個(gè)鏈接地址發(fā)送受害者讓其點(diǎn)擊。從而形成CSRF攻擊。

• XSS防御的總體思路：對(duì)輸入（和URL參數(shù)）進(jìn)行過(guò)濾，對(duì)輸出進(jìn)行編碼，也就是對(duì)提交的所有內(nèi)容進(jìn)行過(guò)濾。對(duì)URL中的參數(shù)進(jìn)行過(guò)濾，過(guò)濾會(huì)導(dǎo)致腳本執(zhí)行的相關(guān)內(nèi)容。然后對(duì)動(dòng)態(tài)輸出到頁(yè)面的內(nèi)容進(jìn)行編碼，使腳本無(wú)法在瀏覽器中執(zhí)行。雖然對(duì)輸入過(guò)濾可以被繞過(guò)，但也還是會(huì)攔截很大一部分的xss攻擊。
  cookie如何防范xss攻擊？需要在http頭部配置：set-cookie：httponly–這個(gè)屬性可以防止xss，它會(huì)禁止js腳本來(lái)訪問(wèn)cookie； secure–這個(gè)屬性告訴瀏覽器僅在請(qǐng)求為https的時(shí)候發(fā)送cookie；
• 防御CSRF攻擊主要有三種策略：驗(yàn)證HTTP Referer字段；在本地請(qǐng)求中添加token并驗(yàn)證；在HTTP頭中自定義屬性并驗(yàn)證。

6.click在ios上有300ms延遲，原因及如何解決

粗暴型，禁用縮放

<meta name="viewport" content="width=device-width,user-scalable=no"

利用FastClick，其原理是：
檢測(cè)到touchend事件后，立即發(fā)出模擬click時(shí)間，并且吧瀏覽器300ms之后真正出現(xiàn)的時(shí)間給阻斷掉

7.addEventListener參數(shù)

addEventListener（event，function，userCapture）
event指定事件名；function指定要事件觸發(fā)時(shí)執(zhí)行的函數(shù)；useCapture事件是否在捕獲或者冒泡階段執(zhí)行。

8.前端優(yōu)化

降低請(qǐng)求量: 合并資源、減少HTTP請(qǐng)求數(shù)、minify/gzip壓縮、webp、lazyload；
加快請(qǐng)求速度：預(yù)解析DNS、減少域名數(shù)、并行加載、CDN分發(fā)；
緩存：HTTP協(xié)議緩存請(qǐng)求、離線(xiàn)緩存manifest、離線(xiàn)數(shù)據(jù)緩存localStrong；
渲染：JS/CSS優(yōu)化、加載順序、服務(wù)端渲染、piprline。

9.在地址欄里輸入一個(gè)URL，到頁(yè)面呈現(xiàn)，中間會(huì)發(fā)生什么？

DNS解析 => TCP連接 => 發(fā)送HTTP請(qǐng)求 => 服務(wù)器處理請(qǐng)求并返回HTTP報(bào)文 => 瀏覽器解析渲染頁(yè)面 => 連接結(jié)束

在輸入U(xiǎn)RL后，首先需要找到這個(gè)url域名的服務(wù)器ip：
為了尋找這個(gè)ip，瀏覽器首先會(huì)尋找緩存，查看緩存中是否有記錄，緩存的查找記錄為：瀏覽器緩存 => 系統(tǒng)緩存 => 路由緩存。緩存中沒(méi)有則查找系統(tǒng)的hosts文件中是否有記錄，如果沒(méi)有則查詢(xún)DNS服務(wù)器，得到服務(wù)器的IP地址

瀏覽器根據(jù)ip已及相應(yīng)的端口號(hào)，構(gòu)造一個(gè)http請(qǐng)求：
這個(gè)請(qǐng)求報(bào)文會(huì)包括這次請(qǐng)求的信息，主要是請(qǐng)求方法，請(qǐng)求說(shuō)明和請(qǐng)求附帶的數(shù)據(jù)，并將這個(gè)http請(qǐng)求封裝在一個(gè)tcp包中，這個(gè)tcp包會(huì)依次經(jīng)過(guò)傳輸層、網(wǎng)絡(luò)層、數(shù)據(jù)鏈路層、物理層到達(dá)服務(wù)器。

服務(wù)器解析這個(gè)請(qǐng)求來(lái)作出響應(yīng)，返回相應(yīng)的html給瀏覽器：

因?yàn)閔tml是一個(gè)樹(shù)型結(jié)構(gòu)，瀏覽器根據(jù)這個(gè)html來(lái)構(gòu)建Dom樹(shù)，

在dom樹(shù)的構(gòu)建過(guò)程中如果遇到JS腳本和外部JS連接，則會(huì)停止構(gòu)建DOM樹(shù)來(lái)執(zhí)行和下載相應(yīng)的代碼，會(huì)造成阻塞（這就是為什么推薦js代碼應(yīng)該放在html代碼的后面）

之后根據(jù)外部樣式、內(nèi)部樣式、內(nèi)聯(lián)樣式構(gòu)建一個(gè)css對(duì)象模型樹(shù)CSSOM樹(shù)；

構(gòu)建完成后CSSOM樹(shù)和DOM樹(shù)合并為渲染樹(shù)，排除非視覺(jué)節(jié)點(diǎn)，比如script，meta標(biāo)簽和排除display為none的節(jié)點(diǎn)。

之后進(jìn)行布局，布局主要是確定各個(gè)元素的位置和尺寸

之后是渲染頁(yè)面，加載資源，對(duì)圖片視頻等資源進(jìn)行并行下載（瀏覽器對(duì)每個(gè)域的并行下載有一定的限制，一般是4-6個(gè)，當(dāng)然在這些所有的請(qǐng)求中我們還需要關(guān)注的就是緩存，緩存一般通過(guò)cache-control、last-Modify、expires等首部字段控制 ）在請(qǐng)求這些有設(shè)置了緩存的數(shù)據(jù)時(shí)，會(huì)先查看是否過(guò)期，如果沒(méi)有過(guò)期則直接使用本地緩存，過(guò)期則請(qǐng)求并在服務(wù)器校驗(yàn)文件是否修改，決定是否返回304

10.Event loop（事件輪詢(xún)）

一個(gè)程序結(jié)構(gòu)，用來(lái)等待、發(fā)送，消息和事件。用來(lái)協(xié)調(diào)事件，用戶(hù)交互，腳本，渲染，網(wǎng)絡(luò)等任務(wù)。

在瀏覽器中，所有的同步任務(wù)都在主線(xiàn)程上執(zhí)行，形成一個(gè)"執(zhí)行棧"

主線(xiàn)程之外，存在一個(gè)“任務(wù)隊(duì)列”，在主線(xiàn)程執(zhí)行過(guò)程中，同步代碼立即執(zhí)行，，異步任務(wù)會(huì)被放置在任務(wù)隊(duì)列中

執(zhí)行棧中的同步任務(wù)執(zhí)行完之后，隊(duì)列任務(wù)中的異步任務(wù)開(kāi)始執(zhí)行

異步任務(wù)又分兩種：宏任務(wù)和微任務(wù)，如果是宏任務(wù)會(huì)新建一個(gè)任務(wù)隊(duì)列，微任務(wù)則直接放入微任務(wù)隊(duì)列中，所以微任務(wù)要比宏任務(wù)先執(zhí)行

• 宏任務(wù)：script、定時(shí)器、I/O操作、UI渲染
• 微任務(wù)：ajax、promise

總結(jié)

以上是生活随笔為你收集整理的前端常见知识点二之浏览器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。