開頭

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

CSS優化技巧

• 合理使用選擇器
• 減少DOM操作，減少重繪和重排
• 去除無效的選擇器
• 文件壓縮
• 異步加載文件
• 減少@import的使用

px/em/rem/vh/vw

• px像素（Pixel）。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的
• em是相對長度單位。相對于當前父元素的字體尺寸。如未設置，則相對于瀏覽器的默認字體尺寸
• rem是CSS3新增的一個相對單位。使用rem為元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素
• css3新單位，view width的簡寫，是指可視窗口的寬度。假如寬度是1200px的話。那10vw就是120px
• css3新單位，view height的簡寫，是指可視窗口的高度。假如高度是1200px的話。那10vh就是120px

05 JavaScript

---

閉包以及作用域

• 作用域是可訪問變量的集合，可以分為全局作用域和局部作用域。

• 閉包就是將函數內部和函數外部連接起來的一座橋梁

• this是在函數運行時，在函數體內部自動生成的一個對象，只能在函數體內部使用

事件循環機制

• 宏任務與微任務的區別

• Node中的事件循環機制

JS垃圾回收與V8垃圾回收

• JS：標記清楚法/引用計數法
• V8：標記清除發/標記壓縮法/增量標記法/壓縮算法

原型與原型鏈

• 所有原型鏈的終點都是 Object 函數的 prototype 屬性
• 每一個構造函數都擁有一個 prototype 屬性，此屬性指向一個對象，也就是原型對象
• 原型對象默認擁有一個 constructor 屬性，指向指向它的那個構造函數
• 每個對象都擁有一個隱藏的屬性 __ proto __，指向它的原型對象

最后

給大家分享一些關于HTML的面試題，有需要的朋友可以戳這里免費領取，先到先得哦。

一個 constructor 屬性，指向指向它的那個構造函數

• 每個對象都擁有一個隱藏的屬性 __ proto __，指向它的原型對象

[外鏈圖片轉存中…(img-iPqVfqfF-1623315473799)]

最后

給大家分享一些關于HTML的面試題，有需要的朋友可以戳這里免費領取，先到先得哦。

[外鏈圖片轉存中…(img-6walGgrR-1623315473801)]
[外鏈圖片轉存中…(img-uU7Q2gNT-1623315473803)]

總結

以上是生活随笔為你收集整理的web开发者工具，261页前端面试题宝典，通用流行框架大全的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。