在整理瀏覽器相關題型的面試點中,產出了 8 篇文章,參考文獻共 68 篇文章,一塊兒折騰吧!javascript
一 目錄
不折騰的前端,和鹹魚有什麼區別css
二 前言
返回目錄
在整理 瀏覽器 相關題型的面試點中,產出了下面的 8 篇文章:html
[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] 本地存儲java
- [x] Cookie
- [x] Local Storage
- [x] Session Storage
- [x] IndexedDB
[x] 瀏覽器緩存webpack
- [x] 緩存位置:Service Worker、Memory Cache、Disk Cache、Push Cache
- [x] 緩存過程
- [x] 緩存機制:強緩存、協商緩存
- [x] 緩存實例:頻繁變更的緩存、不常變化的資源
[x] 迴流和重繪nginx
- [x] 瀏覽器渲染過程
- [x] 重繪:修改背景色/顏色、設置可見度、設置背景圖……
- [x] 迴流:添加/刪除 DOM 元素、改變邊框/邊距/寬高、改變窗口大小……
- [x] 優化:避免頻繁操做 DOM,集中操做;避免
table
佈局
[x] 跨域git
- [x] 同源策略:什麼是同源?爲何要設置跨域?
- [x] 解決跨域的方式:JSONP、CORS、postMessage、WebSocket、Node、Nginx、其餘
[x] 垃圾回收github
- [x] 棧垃圾回收:ESP 銷燬
- [x] 堆垃圾回收:新生代和老生代
- [x] 新生代:
Scavenge
算法,對象區域和空閒區域的轉換,兩次回收後還存在的進入老生區
- [x] 老生代:標記-清除、標記-整理
- [x] 全停頓:JavaScript 線程中垃圾回收和其餘腳本交替執行
[x] LRU 緩存淘汰策略web
- [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
預加載頁面
固然,還延伸到了 計算機網絡 部分,例如:
後面還會持續更新的吧!加油!
三 參考文獻
返回目錄
參考文獻共 68 篇文章,感謝前輩們的貢獻。
3.1 付費網絡書籍
返回目錄
3.2 瀏覽器
返回目錄
3.3 瀏覽器緩存
返回目錄
3.4 瀏覽器垃圾回收
返回目錄
3.5 迴流與重繪
返回目錄
3.6 跨域
返回目錄
3.7 性能優化
返回目錄
3.7.1 Webpack 優化
返回目錄
2019 年文章:
2018 年文章:
2017 年文章:
3.7.2 其餘優化
返回目錄
3.8 本地存儲
返回目錄
3.9 其餘
返回目錄
jsliang 的文檔庫由
梁峻榮 採用
知識共享 署名-非商業性使用-相同方式共享 4.0 國際 許可協議 進行許可。<br/>基於
https://github.com/LiangJunrong/document-library 上的做品創做。<br/>本許可協議受權以外的使用權限能夠從
https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 處得到。