前端常見知識點之瀏覽器

目錄

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

1.web Quality(無障礙)

能夠被殘障人士使用的網站稱得上一個易用的（易訪問的）網站
使用alt屬性：

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

有時候瀏覽器無法顯示圖像，alt會發揮它的作用：

• 用戶關閉了圖像顯示
• 不支持顯示圖形的迷你瀏覽器
• 瀏覽器是語音瀏覽器（供盲人和弱勢群體使用）

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

2.幾個實用的BOM對象方法

BOM–瀏覽器對象。

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

history對象
history.go()-- 前進或后退指定頁面數3.
history.back()-- 后退一頁
history.forward()-- 前進一頁

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

3. cookie、sessionStroage、localStroage的區別

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

4.cookie和session的區別

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

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

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

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

讀取方式，cookie需要用document.cookie來讀取

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

XSS（跨站腳本攻擊）是指在攻擊者在返回的HTML中嵌入js腳本，當渲染DOM樹的過程中發生了不在預期內執行的js代碼時，就發生了XSS攻擊。大多數XSS攻擊的主要方式是嵌入一段遠程或者第三方域上的JS代碼。實際上是在目標網站的作用域下執行了這段JS代碼。

CSRF(跨站請求偽造)，在別的站點偽造了一個請求。專業術語來說就是在受害者訪問一個網站時，其cookie還沒有過期的情況下，攻擊者偽造一個鏈接地址發送受害者讓其點擊。從而形成CSRF攻擊。

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

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

粗暴型，禁用縮放

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

利用FastClick，其原理是：
檢測到touchend事件后，立即發出模擬click時間，并且吧瀏覽器300ms之后真正出現的時間給阻斷掉

7.addEventListener參數

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

8.前端優化

降低請求量: 合并資源、減少HTTP請求數、minify/gzip壓縮、webp、lazyload；
加快請求速度：預解析DNS、減少域名數、并行加載、CDN分發；
緩存：HTTP協議緩存請求、離線緩存manifest、離線數據緩存localStrong；
渲染：JS/CSS優化、加載順序、服務端渲染、piprline。

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

DNS解析 => TCP連接 => 發送HTTP請求 => 服務器處理請求并返回HTTP報文 => 瀏覽器解析渲染頁面 => 連接結束

在輸入URL后，首先需要找到這個url域名的服務器ip：
為了尋找這個ip，瀏覽器首先會尋找緩存，查看緩存中是否有記錄，緩存的查找記錄為：瀏覽器緩存 => 系統緩存 => 路由緩存。緩存中沒有則查找系統的hosts文件中是否有記錄，如果沒有則查詢DNS服務器，得到服務器的IP地址

瀏覽器根據ip已及相應的端口號，構造一個http請求：
這個請求報文會包括這次請求的信息，主要是請求方法，請求說明和請求附帶的數據，并將這個http請求封裝在一個tcp包中，這個tcp包會依次經過傳輸層、網絡層、數據鏈路層、物理層到達服務器。

服務器解析這個請求來作出響應，返回相應的html給瀏覽器：

因為html是一個樹型結構，瀏覽器根據這個html來構建Dom樹，

在dom樹的構建過程中如果遇到JS腳本和外部JS連接，則會停止構建DOM樹來執行和下載相應的代碼，會造成阻塞（這就是為什么推薦js代碼應該放在html代碼的后面）

之后根據外部樣式、內部樣式、內聯樣式構建一個css對象模型樹CSSOM樹；

構建完成后CSSOM樹和DOM樹合并為渲染樹，排除非視覺節點，比如script，meta標簽和排除display為none的節點。

之后進行布局，布局主要是確定各個元素的位置和尺寸

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

10.Event loop（事件輪詢）

一個程序結構，用來等待、發送，消息和事件。用來協調事件，用戶交互，腳本，渲染，網絡等任務。

在瀏覽器中，所有的同步任務都在主線程上執行，形成一個"執行棧"

主線程之外，存在一個“任務隊列”，在主線程執行過程中，同步代碼立即執行，，異步任務會被放置在任務隊列中

執行棧中的同步任務執行完之后，隊列任務中的異步任務開始執行

異步任務又分兩種：宏任務和微任務，如果是宏任務會新建一個任務隊列，微任務則直接放入微任務隊列中，所以微任務要比宏任務先執行

• 宏任務：script、定時器、I/O操作、UI渲染
• 微任務：ajax、promise

總結

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

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