web開發者工具，261頁前端面試題寶典，通用流行框架大全

開頭

Web前端開發基礎知識學習路線分享，前端開發入門學習三大基礎：HTML、CSS、JavaScript。除此之外還要學習數據可視化、Vue、React、Angular相關框架，熟練運用框架提升開發效率，提升穩定性。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-jp1PHSQa-1623315473794)(//upload-images.jianshu.io/upload_images/23082890-b561553d82597393.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/771/format/webp)]

02 目錄

下面是這篇文章的目錄結構，一般比較簡單的問題我就一筆帶過了，主要是分享一下比較有難度的知識點，答案來自網上，如果有版權問題我會刪除。還有本文只是給出一個大概的知識點，如果想要深入學習還要靠自己去查一下哦！

如果答案有錯誤，歡迎指正！

計算機基礎
前端基礎（HTML/CSS）
JavaScript
前端框架
瀏覽器渲染
計算機網絡
手寫代碼
Webpack
Node
ES6

03 計算機基礎

進程與線程的區別

進程是系統進行資源分配和調度的一個獨立單位
線程是CPU調度和分派的基本單位,它是比進程更小的能獨立運行的基本單位
一個進程至少有一個線程組成

線程自己基本上不擁有系統資源,只擁有一點在運行中必不可少的資源(如程序計數器,一組寄存器和棧)，但是它可與同屬一個進程的其他的線程共享進程所擁有的全部資源

進程間通信方式

管道通信
消息隊列通信
信號量通信
共享內存通信
套接字通信

函數庫與系統庫

系統庫調用運行在內核模式，函數庫運行在用戶模式
系統調用是os提供的服務，處于內核態且不能直接調用，而要使用類似int 0x80的軟中斷陷入內核
庫函數中有很大部分是對系統調用的封裝
函數庫屬于過程調用，開銷小；系統庫需用戶空間和內核上下文環境切換，開銷大
用戶態可以調用系統提供API接口調用內核來切換成內核態（中斷方式）

二叉樹

二叉樹每一個節點不能多于兩個孩子
沒有孩子的節點就是葉子節點
一個節點有左右兩個指針，若無則指向null
深度為h的二叉樹最多有2^h-1個結點(h>=1)，最少有h個結點
二叉樹的遍歷三種方式，如下：
（1）前序遍歷（DLR），首先訪問根結點，然后遍歷左子樹，最后遍歷右子樹。簡記根-左-右。
（2）中序遍歷（LDR），首先遍歷左子樹，然后訪問根結點，最后遍歷右子樹。簡記左-根-右。
（3）后序遍歷（LRD），首先遍歷左子樹，然后遍歷右子樹，最后訪問根結點。簡記左-右-根

數據庫索引

索引是一種數據結構（B+樹）
不推薦使用索引

（1）表記錄太少；
（2）數據重復且分布平均的字段（只有很少數據值的列）；
（3）經常插入、刪除、修改的表要減少索引；

使用索引

（1）主鍵，unique字段；
（2）和其他表做連接的字段需要加索引；
（3）在where里使用＞，≥，＝，＜，≤，is null和between等字段；
（4）使用不以通配符開始的like，where object like ‘Math%’；
（5）order by和group by字段；

數據庫引擎

InnoDB存儲引擎
MyISAM存儲引擎
MEMORY存儲引擎
Archive存儲引擎

虛擬內存及緩沖區溢出

虛擬內存

虛擬內存是計算機系統內存管理的一種技術
應用程序認為它擁有連續的可用的內存，實際分隔成多個物理內存碎片，還有部分暫時存儲在外部磁盤存儲器上
虛擬內存技術可以通過覆蓋或者把處于不活動狀態的程序以及它們的數據全部交換到磁盤上等方式來實現

緩沖區溢出

計算機向緩沖區填充數據時超出了緩沖區本身的容量，覆蓋合法數據

危害

堆棧溢出，可以改變返回程序地址
程序崩潰，拒絕服務
執行非法代碼，獲取非法權限
程序運行失敗，系統宕機，重啟

排序算法

快速排序（nlogn）
選擇排序（n^2）
插入排序（n^2）
希爾排序（n^1.5）
歸并排序（nlogn）
冒泡排序（n^2）

常用git指令

下載一個項目和它的整個代碼歷史 git clone [url]
添加指定目錄到暫存區，包括子目錄 git add [dir]
提交暫存區到倉庫區 git commit -m [修改信息]
同步到遠程倉庫， git　push
列出所有本地分支 git branch
新建一個分支，并切換到該分支 git checkout -b [branch]

路由器與交換機

路由器可以給你的局域網自動分配IP，交換機只是用來分配網絡數據的
路由器在網絡層，路由器根據IP地址尋址，路由器可以處理TCP/IP協議，交換機不可以
交換機在中繼層，交換機根據MAC地址尋址
路由器提供防火墻的服務，交換機不能提供該功能

04 前端基礎（HTML/CSS）

flex容器布局

主軸屬性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

交叉軸屬性

order
flex-grow
flex-shrink
flex-basis
flex
align-self

BFC/IFC

BFC（Block Formatting Context）叫做“塊級格式化上下文"

（1）內部的盒子會在垂直方向，一個個地放置；
（2）盒子垂直方向的距離由margin決定，屬于同一個BFC的兩個相鄰Box的上下margin會發生重疊；
（3）每個元素的左邊，與包含的盒子的左邊相接觸，即使存在浮動也是如此；
（4）BFC的區域不會與float重疊；
（5）BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之也如此；
（6）計算BFC的高度時，浮動元素也參與計算。

觸發條件
（1）float的屬性不為none；
（2）position為absolute或fixed；
（3）display為inline-block，table-cell，table-caption，flex；
（4）overflow不為visible

IFC（inline Formatting Context）叫做“行級格式化上下”

（1）內部的盒子會在水平方向，一個個地放置；
（2）IFC的高度，由里面最高盒子的高度決定；
（3）當一行不夠放置的時候會自動切換到下一行；

CSS3的filter屬性詳解

blur
brightness
contrast
grayscale
hue-rotate
invert
opacity
saturate
sepia

CSS的繼承屬性（部分）

font-size：設置字體的尺寸
text-indent：文本縮進
text-align：文本水平對齊
text-shadow：設置文本陰影
line-height：行高
元素可見性：visibility
光標屬性：cursor

CSS盒模型

W3C 標準盒模型：
屬性width,height只包含內容content，不包含border和padding
IE 盒模型：
屬性width,height包含border和padding，指的是content+padding+border

content-box（標準盒模型）
border-box（IE盒模型）

CSS的四種定位

Static

這個是元素的默認定位方式，元素出現在正常的文檔流中，會占用頁面空間。
Relative

相對定位方式，相對于其父級元素（無論父級元素此時為何種定位方式）進行定位，準確地說是相對于其父級元素所剩余的未被占用的空間進行定位（在父元素由多個相對定位的子元素時可以看出），且會占用該元素在文檔中初始的頁面空間，即在使用top，bottom，left，right進行移動位置之后依舊不會改變其所占用空間的位置。可以使用z-index進行在z軸方向上的移動。
Absolute

絕對定位方式，脫離文檔流，不會占用頁面空間。以最近的不是static定位的父級元素作為參考進行定位，如果其所有的父級元素都是static定位，那么此元素最終則是以當前窗口作為參考進行定位。可以使用top，bottom，left，right進行位置移動，亦可使用z-index在z軸上面進行移動。當元素為此定位時，如果該元素為內聯元素，則會變為塊級元素，即可以直接設置其寬和高的值；如果該元素為塊級元素，則其寬度會由初始的100%變為auto。

注意：當元素設置為絕對定位時，在沒有指定top，bottom，left，right的值時，他們的值并不是0，這幾個值是有默認值的，默認值就是該元素設置為絕對定位前所處的正常文檔流中的位置。
Fixed

絕對定位方式，直接以瀏覽器窗口作為參考進行定位。其它特性同absolute定位。當父元素使用了transform的時候，會以父元素定位

CSS權重計算

第一等級：代表內聯樣式，如style=""，權值為 1000
第二等級：代表id選擇器，如#content，權值為100
第三等級：代表類，偽類和屬性選擇器，如.content，權值為10
第四等級：代表標簽選擇器和偽元素選擇器，如div p，權值為1
注意：通用選擇器（*），子選擇器（>），和相鄰同胞選擇器（+）并不在這個等級中，所以他們的權值為0