jsliang 求職系列 - 24 - 瀏覽器系列彙總

在整理瀏覽器相關題型的面試點中，產出了 8 篇文章，參考文獻共 68 篇文章，一塊兒折騰吧！

一 目錄

不折騰的前端，和鹹魚有什麼區別

目錄
一 目錄
二 前言
三 參考文獻
3.1 付費網絡書籍
3.2 瀏覽器
3.3 瀏覽器緩存
3.4 瀏覽器垃圾回收
3.5 迴流與重繪
3.6 跨域
3.7 性能優化
3.7.1 Webpack 優化
3.7.2 其餘優化
3.8 本地存儲
3.9 其餘

二 前言

返回目錄

在整理 瀏覽器 相關題型的面試點中，產出了下面的 8 篇文章：

• [x] 從輸入 URL 到頁面呈現

  • [x] 總體過程：DNS 解析 -> TCP 鏈接 -> 發送 HTTP 請求 -> 服務器響應 -> 瀏覽器解析渲染頁面
  • [x] DNS 解析過程：瀏覽器緩存 -> 系統緩存（host） -> 路由器緩存 -> ISP DNS 服務器 -> 遞歸查詢
  • [x] TCP 鏈接：創建鏈接階段 -> 數據傳輸階段 -> 斷開鏈接階段，3 次握手和 4 次揮手
  • [x] 發送 HTTP 請求：請求行、請求報文和請求正文，GET 和 POST 區別，HTTP 狀態碼
  • [x] 服務器響應：狀態碼、響應報頭和響應報文
  • [x] 瀏覽器解析渲染頁面：DOM 樹 -> CSS 規則樹 -> 渲染樹（Render Tree） -> 佈局渲染樹（Layout tree） -> 繪製渲染樹（Painting tree），迴流和重繪
  • [x] 性能優化：……

• [x] 本地存儲

  • [x] Cookie
  • [x] Local Storage
  • [x] Session Storage
  • [x] IndexedDB

• [x] 瀏覽器緩存

  • [x] 緩存位置：Service Worker、Memory Cache、Disk Cache、Push Cache
  • [x] 緩存過程
  • [x] 緩存機制：強緩存、協商緩存
  • [x] 緩存實例：頻繁變更的緩存、不常變化的資源

• [x] 迴流和重繪

  • [x] 瀏覽器渲染過程
  • [x] 重繪：修改背景色/顏色、設置可見度、設置背景圖……
  • [x] 迴流：添加/刪除 DOM 元素、改變邊框/邊距/寬高、改變窗口大小……
  • [x] 優化：避免頻繁操做 DOM，集中操做；避免 table 佈局

• [x] 跨域

  • [x] 同源策略：什麼是同源？爲何要設置跨域？
  • [x] 解決跨域的方式：JSONP、CORS、postMessage、WebSocket、Node、Nginx、其餘

• [x] 垃圾回收

  • [x] 棧垃圾回收：ESP 銷燬
  • [x] 堆垃圾回收：新生代和老生代
  • [x] 新生代：Scavenge 算法，對象區域和空閒區域的轉換，兩次回收後還存在的進入老生區
  • [x] 老生代：標記-清除、標記-整理
  • [x] 全停頓：JavaScript 線程中垃圾回收和其餘腳本交替執行

• [x] LRU 緩存淘汰策略

  • [x] 常見淘汰策略：先進先出（FIFO）、最少使用（LFU）、最近最少使用（LRU）
  • [x] 最近最少使用：若是數據最近被訪問過，那麼接下來被訪問的機率也越高
  • [x] 實現原理：新數據插入到鏈表表頭；鏈表中有數據被訪問，也提高到表頭；鏈表滿後，鏈表尾部數據被淘汰

• [x] 性能優化

  • [x] 從 URL 輸入到頁面解析過程查看性能優化點：DNS 解析、TCP 鏈接、發送 HTTP 請求、服務器響應、瀏覽器解析渲染頁面
  • [x] 發送 HTTP 請求：瀏覽器緩存、Cookie 和 Web Storage、CDN 的使用、負載均衡
  • [x] 服務器響應：Webpack 優化、圖片優化、Gzip 壓縮、服務端渲染（SSR）
  • [x] 瀏覽器渲染解析頁面：渲染過程、渲染過程優化、迴流和重繪優化
  • [x] 其餘：Chrome 插件可視化、長列表、preload 預加載頁面

固然，還延伸到了 計算機網絡 部分，例如：

• [x] 計算機網絡 - DNS
• [x] 計算機網絡 - TCP

後面還會持續更新的吧！加油！

三 參考文獻

返回目錄

參考文獻共 68 篇文章，感謝前輩們的貢獻。

3.1 付費網絡書籍

返回目錄

• [x] 極客時間 - 瀏覽器工做原理與實踐【閱讀建議：11.5h】
• [x] 掘金小冊 - 前端性能優化原理與實踐【閱讀建議：4h】

3.2 瀏覽器

返回目錄

• [x] (1.6w字)瀏覽器靈魂之問，請問你能接得住幾個？【閱讀建議：4h】
• [x] 前端經典面試題: 從輸入URL到頁面加載發生了什麼？【閱讀建議：50min】
• [x] 瀏覽器層合成與頁面渲染優化【閱讀建議：20min】
• [x] 瀏覽器頁面資源加載過程與優化【閱讀建議：無】
• [x] 深刻淺出瀏覽器渲染原理【閱讀建議：30min】
• [x] 瀏覽器的渲染原理簡介【閱讀建議：10min】
• [x] 瀏覽器的渲染：過程與原理【閱讀建議：10min】
• [x] 經典面試題：從 URL 輸入到頁面展示到底發生什麼【閱讀建議：30min】

3.3 瀏覽器緩存

返回目錄

• [x] 深刻理解瀏覽器的緩存機制【閱讀建議：1h】
• [x] 瀏覽器緩存【閱讀建議：30min】
• [x] 前端必需要懂的瀏覽器緩存機制【閱讀建議：10min】
• [x] 關於瀏覽器緩存你知道多少【閱讀建議：10min】
• [x] 設計一個無懈可擊的瀏覽器緩存方案：關於思路，細節，ServiceWorker，以及HTTP/2【閱讀建議：20min】
• [x] 前端緩存最佳實踐【閱讀建議：20min】

3.4 瀏覽器垃圾回收

返回目錄

• [x] JavaScript進階-內存機制(表情包初探)【閱讀建議：20min】

3.5 迴流與重繪

返回目錄

• [x] 瀏覽器的迴流與重繪 (Reflow & Repaint)【閱讀建議：10min】
• [x] 你真的瞭解迴流和重繪嗎【閱讀建議：10min】
• [x] 頁面重繪和迴流以及優化【閱讀建議：5min】
• [x] [瀏覽器重繪(repaint)重排(reflow)與優化[瀏覽器機制]](https://juejin.im/post/684490...【閱讀建議：10min】
• [x] 迴流與重繪：CSS性能讓JavaScript變慢？【閱讀建議：10min】

3.6 跨域

返回目錄

• [x] 瀏覽器同源策略與ajax跨域方法彙總【閱讀建議：15min】
• [x] 九種跨域方式實現原理（完整版）【閱讀建議：15min】
• [x] 前端開發如何獨立解決跨域問題【閱讀建議：5min】
• [x] CORS 原理及實現【閱讀建議：30min】
• [x] JSONP 原理及實現【閱讀建議：30min】
• [x] 面試題：nginx 有配置過嗎?反向代理知道嗎?【閱讀建議：10min】
• [x] 10 種跨域解決方案（附終極大招）【閱讀建議：1h】
• [x] [CORS跨域請求[簡單請求與複雜請求]](https://www.cnblogs.com/qunxi...【閱讀建議：20min】

3.7 性能優化

返回目錄

3.7.1 Webpack 優化

返回目錄

2019 年文章：

• [x] Webpack優化——將你的構建效率提速翻倍【閱讀建議：10min】
• [x] 性能優化篇---Webpack構建速度優化【閱讀建議：10min】
• [x] 使用webpack4提高180%編譯速度【閱讀建議：10min】
• [x] 多進程並行壓縮代碼【閱讀建議：5min】
• [x] webpack 的 scope hoisting 是什麼？【閱讀建議：5min】
• [x] webpack 4: Code Splitting和chunks切分優化【閱讀建議：5min】

2018 年文章：

• [x] Tree-Shaking性能優化實踐 - 原理篇【閱讀建議：10min】
• [x] 體積減小80%！釋放webpack tree-shaking的真正潛力【閱讀建議：10min】
• [x] 你的Tree-Shaking並沒什麼卵用【閱讀建議：5min】
• [x] webpack 如何經過做用域分析消除無用代碼【閱讀建議：5min】
• [x] 讓你的Webpack起飛—考拉會員後臺Webpack優化實戰【閱讀建議：5min】
• [x] webpack dllPlugin打包體積和速度優化【閱讀建議：5min】
• [x] webpack優化之code splitting【閱讀建議：5min】

2017 年文章：

• [x] Webpack 打包優化之速度篇【閱讀建議：5min】
• [x] 加速Webpack-縮小文件搜索範圍【閱讀建議：5min】
• [x] 經過Scope Hoisting優化Webpack輸出【閱讀建議：5min】
• [x] Webpack 大法之 Code Splitting【閱讀建議：5min】

3.7.2 其餘優化

返回目錄

• [x] 網站性能優化實戰——從12.67s到1.06s的故事【閱讀建議：30min】
• [x] 聊聊前端開發中的長列表【閱讀建議：30min】
• [x] 再談前端虛擬列表的實現【閱讀建議：30min】
• [x] 淺說虛擬列表的實現原理【閱讀建議：30min】
• [x] 用 preload 預加載頁面資源【閱讀建議：20min】
• [x] （譯）2019年前端性能優化清單 — 上篇【閱讀建議：20min】
• [x] （譯）2019年前端性能優化清單 — 中篇【閱讀建議：20min】
• [x] （譯）2019年前端性能優化清單 — 下篇【閱讀建議：20min】
• [x] App內網頁啓動加速實踐：靜態資源預加載視角【閱讀建議：20min】
• [x] 騰訊HTTPS性能優化實踐【閱讀建議：30min】
• [x] 5 分鐘擼一個前端性能監控工具【閱讀建議：20min】
• [x] 現代化懶加載的方式【閱讀建議：5min】
• [x] 懶加載和預加載【閱讀建議：10min】

3.8 本地存儲

返回目錄

• [x] cookie、Session、Token、sessionStorage、localStorage簡介【閱讀建議：5min】
• [x] session,cookie,sessionStorage,localStorage,token的區別？【閱讀建議：5min】
• [x] 什麼是Http無狀態？Session、Cookie、Token三者之間的區別【閱讀建議：5min】
• [x] Session是怎麼實現的？存儲在哪裏？【閱讀建議：5min】
• [x] 用戶登陸，先後端如何交互判斷是否登陸超時！【閱讀建議：5min】
• [x] 先後端分離模式下，如何跟蹤用戶狀態？【閱讀建議：5min】

3.9 其餘

返回目錄

• [x] 拋棄console.log()，擁抱瀏覽器Debugger【閱讀建議：10min】
• [x] 瀏覽器IMG圖片原生懶加載loading=」lazy」實踐指南【閱讀建議：10min】
• [x] 瀏覽器頁面資源加載過程與優化【閱讀建議：無】

---

jsliang 的文檔庫由 梁峻榮 採用 知識共享 署名-非商業性使用-相同方式共享 4.0 國際 許可協議 進行許可。<br/>基於 https://github.com/LiangJunrong/document-library 上的做品創做。<br/>本許可協議受權以外的使用權限能夠從 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 處得到。