前端攻城獅瀏覽器中須要知道哪些知識點 ?附贈瀏覽器面試題

前言

關於瀏覽器知識，在現在的前端中也顯的尤其重要了，面試中頻繁被問及到，在這個上邊小編也是吃過虧了的，今天就來分享一波兒一個前端攻城獅瀏覽器中須要知道哪些知識點 ?

瀏覽器內核和渲染引擎

常見的瀏覽器內核有哪些

• Trident內核：IE,360,搜狗瀏覽器等。[又稱MSHTML]
• Presto內核：Opera7及以上。[Opera內核原爲：Presto，現爲：Blink;]
• Webkit內核：Safari,Chrome等。[ Chrome的Blink（WebKit的分支）]

爲何咱們須要知道一些基本的瀏覽器內核 ? 由於全部網頁瀏覽器、電子郵件客戶端以及其它須要顯示網絡內容的應用程序都須要內核

瀏覽器渲染引擎有人說是 Css 引擎和 Js 引擎，其實具體點應該是渲染引擎和Js引擎，爲何這麼說，由於瀏覽器在渲染一個網頁時，通常有三步

一、瀏覽器經過 HTMLParser 把 HTML 解析成 DOM Tree （俗稱DOM樹）。
二、瀏覽器經過 CSSParser 把 CSS 解析成 CSS Rule Tree（俗稱CSSOM樹）。
三、瀏覽器將 JavaScript 經過 DOM API 或者 CSSOM API 將 JS 代碼解析並應用到佈局中，根據 DOM 樹和 CSSOM 樹來構造 Render Tree（Rander 樹）

最終的 Rander 樹就是整個頁面的文檔結構抽象表示，而後按要求呈現響應的結果，因此結合這三步來分析，單純的 Css 渲染引擎從字面的意思上來說，並不能徹底表達前兩步

• 渲染引擎
• Js引擎

渲染引擎：主要負責取得網頁的內容（HTML、XML、圖像等等）、以及計算網頁的顯示方式，而後會輸出至瀏覽器，瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同
JS引擎：主要負責解析和執行javascript代碼來實現網頁的動態效果

本地儲存

• cookie
• sessionStorage
• localStorage

經過一個表格來對比一下

關於 cookie 部分屬性還須要注意一下安全性

• value 若是用於保存用戶登陸態，應該將該值加密
• http-only 不能經過 Js 訪問 Cookie，減小 XSS攻擊
• secure 只能在協議爲 HTTPS 的請求中攜帶
• same-site 規定瀏覽器不能在跨域請求中攜帶 Cookie，減小 CSRF 攻擊

瀏覽器緩存

簡單來講,瀏覽器緩存其實就是瀏覽器把HTTP獲取的資源存儲在本地的一種行爲

緩存的優先級

一、先在內存中查找
二、若是內存中不存在,則在硬盤中查找
三、若是硬盤中也沒有,那麼就進行網絡請求
四、請求獲取的資源緩存到硬盤和內存

緩存分類

• 強緩存
• 協商緩存

先來捋一捋邏輯

一、當客戶端請求某個資源時，會先根據這個資源的 http header 判斷它是否命中強緩存，若是命中，則直接從本地獲取緩存資源，不會發請求到服務器
二、當沒有命中強緩存時，客戶端會發送請求到服務器，服務器經過 request header 驗證這個資源是否命中協商緩存，若是命中，服務器將返回304，告訴客戶端從緩存中獲取
三、當協商緩存也沒命中時，服務器就會將資源返回客戶端

• 當 ctrl+f5 強制刷新網頁時，直接從服務器加載，跳過強緩存和協商緩存
• 當 f5 刷新網頁時，跳過強緩存，可是會檢查協商緩存

強緩存

• Expires（是 http1.0 時的規範，值爲一個絕對時間的 GMT 格式的時間字符串，表明緩存資源的過時時間）
• Cache-Control:max-age（是 http1.1的規範，強緩存利用其 max-age 值來判斷緩存資源的最大生命週期，它的值單位爲秒）

Cache-Control 還有一些經常使用其它屬性：

一、no-cache：須要進行協商緩存，發送請求到服務器確認是否使用緩存。
二、no-store：禁止使用緩存，每一次都要從新請求數據。
三、public：能夠被全部的用戶緩存，包括終端用戶和CDN等中間代理服務器。
四、private：只能被終端用戶的瀏覽器緩存，不容許CDN等中間代理服務器對其緩存。

Cache-Control 與 Expires 能夠在服務端配置同時啓用，同時啓用的時候 Cache-Control 優先級高

協商緩存

• Last-Modified / If-Modified-Since

Last-Modified 值爲資源最後更新時間，隨服務端 response 返回， 當瀏覽器再次請求該資源時，request 請求頭中會包含 If-Modified-Since，該值爲緩存以前返回的 Last-Modified，服務器收到 If-Modified-Since 後，根據資源的最後修改時間判斷是否命中協商緩存

• ETag / If-None-Match

ETag 表示資源內容的惟一標識，隨服務器端 response 返回，服務器經過比較請求頭部的 If-None-Match 與當前資源的 ETag 是否一致來判斷資源是否在兩次請求之間有過修改，若是沒有修改，則命中協商緩存
結論

• 強緩存優先級高與協商緩存
• 只要使用緩存，服務器均不會返回資源
• 強緩存不會發送請求到服務器

• 協商緩存會發送請求到服務起

  結束語

  小編在早以前整理了一套關於瀏覽器的面試題，列舉一部分題目：

• 跨標籤頁通信
• 瀏覽器架構
• 從輸入 url 到展現的過程
• 重繪與迴流
• 存儲
• Web Worker
• V8垃圾回收機制
• 內存泄露
• reflow(迴流)和repaint(重繪)優化
• 如何減小重繪和迴流?
• 一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？
• .localStorage 與 sessionStorage 與cookie的區別總結
• 瀏覽器如何阻止事件傳播，阻止默認行爲
• 虛擬DOM方案相對原生DOM操做有什麼優勢，實現上是什麼原理？
• 瀏覽器事件機制中事件觸發三個階段
• 什麼是跨域？爲何瀏覽器要使用同源策略？你有幾種方式能夠解決跨域問題？瞭解預檢請求嘛？
• 瞭解瀏覽器緩存機制嗎？
• 爲何操做 DOM 慢?
• 什麼狀況會阻塞渲染？
• 如何判斷js運行在瀏覽器中仍是node中？
• 關於web以及瀏覽器處理預加載有哪些思考？
• http多路複用
  
  
  須要完整版瀏覽器面試題資料的小夥伴們請直接點擊這領取哦，也別忘啦點贊+評論，大家的支持是我最大動力！