前端勸退之前端知識(shí)體系（前端面試體系）
作者：last_order
https://juejin.cn/post/6994657097220620319
前言
雖然馬上就要金九銀十了，面試的人應(yīng)該不少，雖然我也有在面，寫文的目的主要是梳理下知識(shí)，能對(duì)復(fù)習(xí)有點(diǎn)幫助就行，本文主要針對(duì)前端知識(shí)體系相關(guān)，涉及的內(nèi)容有：
瀏覽器 計(jì)算機(jī)網(wǎng)絡(luò) 前端基礎(chǔ)（html、css、js） node webpack 數(shù)據(jù)結(jié)構(gòu)和算法 web安全 前端工程化（編譯原理的應(yīng)用） 渲染優(yōu)化 性能監(jiān)控
不包括：
跨端（小程序、混合應(yīng)用） 框架 typescript 移動(dòng)端
不過(guò)前端是真的內(nèi)卷啊，內(nèi)容是真多，并丟了點(diǎn)面試題作為參考，以上基本涵蓋前端整個(gè)知識(shí)體系。
其余部分的話，就不算很熟了，所以有人要整第二部分嗎？
其它
看了下評(píng)論，有人對(duì)自己的能力感覺(jué)受限，這也正常，由于前端體系本身內(nèi)容比較多，該文也只是整理了下，沒(méi)必要全部都關(guān)注，只是目前的一個(gè)趨勢(shì)而已。
目前的前端領(lǐng)域方向：
可視化 跨端 小程序 工程化 游戲 DevOps webAssembly（rust、c、cpp）通過(guò)其他語(yǔ)言對(duì)前端進(jìn)行擴(kuò)展，實(shí)現(xiàn)前端無(wú)法做到的方案 音視頻（FFmpeg） 全棧
必備：
html、css、js typescirpt（2021了，現(xiàn)在ts也差不多算必備技能了） 框架 瀏覽器相關(guān)知識(shí) 監(jiān)控、埋點(diǎn) 團(tuán)隊(duì)協(xié)作
可選：
計(jì)算機(jī)網(wǎng)絡(luò) 編譯原理 數(shù)據(jù)結(jié)構(gòu)和算法 單元測(cè)試
本文內(nèi)的鏈接
應(yīng)評(píng)論要求，本文所有內(nèi)容都可以在這上面找到，并且只會(huì)增加，基本不會(huì)減少，鏈接可能有的并沒(méi)什么內(nèi)容，如數(shù)據(jù)結(jié)構(gòu)和算法這個(gè)，后續(xù)應(yīng)該會(huì)慢慢補(bǔ)充吧，只限于個(gè)人的知識(shí)體系范圍，至于其他告辭。
吐槽：
用飛書的思維筆記做的（變相打廣告？），說(shuō)下體驗(yàn)
優(yōu)點(diǎn)：
ui不錯(cuò) 可以通過(guò)@鏈接到其他文檔 缺點(diǎn)： 粘貼的鏈接沒(méi)辦法修改title，- 默認(rèn)自動(dòng)識(shí)別 沒(méi)辦法換行 不支持圖片 采用2邊結(jié)構(gòu)的時(shí)候，沒(méi)辦法拖拽 分享不支持文件夾（讓我添加協(xié)作者？？？？？），文件多了，分享就很麻煩。 預(yù)覽感覺(jué)會(huì)糊？編輯的時(shí)候明顯要比預(yù)覽更清晰
鏈接：
html暫無(wú)內(nèi)容cssjsts暫無(wú)內(nèi)容nodeVue暫無(wú)內(nèi)容Reactwebpack前端工程化瀏覽器計(jì)算機(jī)網(wǎng)絡(luò)數(shù)據(jù)結(jié)構(gòu)和算法性能優(yōu)化
前端知識(shí)體系
瀏覽器
從輸入網(wǎng)址到看到網(wǎng)頁(yè)發(fā)生了什么 dom 解析規(guī)則 css、js是否會(huì)阻塞渲染 xss、csrf 重繪和重排的區(qū)別 瀏覽器緩存是怎樣的 跨域 作為個(gè)前端，畢竟每天都和瀏覽器打交道，不懂瀏覽器的前端不算好前端。
瀏覽器渲染詳細(xì)過(guò)程：重繪、重排和 composite 只是冰山一角
瀏覽器工作原理與實(shí)踐_瀏覽器_V8原理-極客時(shí)間
圖解 Google V8_虛擬機(jī)_JavaScript_Node.js_前端_Google-極客時(shí)間 (geekbang.org)
前端基礎(chǔ)
CSS
css 盒模型 bfc 居中 偽類和偽元素 css選擇器優(yōu)先級(jí)
CSS層疊上下文
js
事件循環(huán) 原型鏈 this 作用域 閉包 柯里化 事件流 數(shù)據(jù)類型 promise、generator、async await 0.1 + 0.2 為什么不等于0.3 (IEEE754) 浮點(diǎn)精度
(圖靈社區(qū) (ituring.com.cn))
事件循環(huán)
一文搞懂V8引擎的垃圾回收 (juejin.cn)
JavaScript 深入之浮點(diǎn)數(shù)精度 (juejin.cn)
計(jì)算機(jī)網(wǎng)絡(luò)
https 為什么安全 http2的特點(diǎn) tcp阻塞 http狀態(tài)碼 http3 http和https握手
HTTP/3 原理實(shí)戰(zhàn) - 知乎 (zhihu.com)
前端工程化
amd、cmd、esmodule、commonjs區(qū)別 import from 和require、import()區(qū)別 babel vite eslint postcss ast 微前端
git commit 規(guī)范指南
node
模塊查找機(jī)制 stream 流 非阻塞異步io 中間件
深入淺出node中間件原理
Node.js理論實(shí)踐之《異步非阻塞IO與事件循環(huán)》
webpack
loader和plugin的區(qū)別 tapable webpack hmr原理 webpack 編譯流程 webpack 優(yōu)化 tree shaking
Webpack HMR 原理解析
性能優(yōu)化
常見(jiàn)的性能優(yōu)化方案 一些性能指標(biāo)
performance各階段：
前端性能優(yōu)化之雅虎35條軍規(guī) (juejin.cn)
網(wǎng)站性能監(jiān)測(cè)
Performance - Web API
前端監(jiān)控
一篇講透自研的前端錯(cuò)誤監(jiān)控
數(shù)據(jù)結(jié)構(gòu)和算法
宮水三葉的刷題日記
算法面試通關(guān)40講_算法面試_LeetCode刷題
javascript-algorithms
VisuAlgo - 數(shù)據(jù)結(jié)構(gòu)和算法動(dòng)態(tài)可視化
書：
算法導(dǎo)論劍指offer小灰的漫畫算法
結(jié)束
整理這個(gè)，也算是自己的復(fù)習(xí)，也算總結(jié)，馬上9月了，dalao們加油。
愛(ài)心三連擊
1.看到這里了就點(diǎn)個(gè)在看支持下吧，你的在看是我創(chuàng)作的動(dòng)力。
2.關(guān)注公眾號(hào)腦洞前端，獲取更多前端硬核文章！加個(gè)星標(biāo)，不錯(cuò)過(guò)每一條成長(zhǎng)的機(jī)會(huì)。
3.如果你覺(jué)得本文的內(nèi)容對(duì)你有幫助，就幫我轉(zhuǎn)發(fā)一下吧。
后臺(tái)回復(fù)：typescript，獲取我寫的 typescript 系列文章，絕對(duì)精品 后臺(tái)回復(fù)：電子書，自動(dòng)獲取我為大家整理的大量經(jīng)典電子書，省去你篩選以及下載的時(shí)間 后臺(tái)回復(fù)：不一樣的前端，自動(dòng)獲取精選優(yōu)質(zhì)前端文章。 后臺(tái)回復(fù)：算法，自動(dòng)獲取精選算法文章。另外也可關(guān)注我的另外一個(gè)專注算法的公眾號(hào)力扣加加。 后臺(tái)回復(fù)：每日一薦，自動(dòng)獲取我為大家總結(jié)的每日一薦月刊，內(nèi)含精品文章，實(shí)用技巧，高效工具等等。 