2023前端面试题集（持续更新中～），祝大家早日拿到心仪offer
一、前端基礎
（一）HTTP/HTML/瀏覽器
1、說一下 http 和 https
https 的 SSL 加密是在傳輸層實現的。
(1)http 和 https 的基本概念
http: 超文本傳輸協議，是互聯網上應用最為廣泛的一種網絡協議，是一個客戶端和服務器端請求和應答的標準（TCP），用于從 WWW 服務器傳輸超文本到本地瀏覽器的傳 輸協議，它可以使瀏覽器更加高效，使網絡傳輸減少。
https: 是以安全為目標的 HTTP 通道，簡單講是 HTTP 的安全版，即 HTTP 下加入 SSL 層，HTTPS 的安全基礎是 SSL，因此加密的詳細內容就需要 SSL。 https 協議的主要作用是：建立一個信息安全通道，來確保數組的傳輸，確保網站的真實 性。
(2)http 和 https 的區別？
http 傳輸的數據都是未加密的，也就是明文的，網景公司設置了 SSL 協議來對 http 協議 傳輸的數據進行加密處理，簡單來說 https 協議是由 http 和 ssl 協議構建的可進行加密傳 輸和身份認證的網絡協議，比 http 協議的安全性更高。
主要的區別如下： Https 協議需要 ca 證書，費用較高。 http 是超文本傳輸協議，信息是明文傳輸，https 則是具有安全性的 ssl 加密傳輸協議。 使用不同的鏈接方式，端口也不同，一般而言，http 協議的端口為 80，https 的端口為 443 http 的連接很簡單，是無狀態的；HTTPS 協議是由 SSL+HTTP 協議構建的可進行加密傳 輸、身份認證的網絡協議，比 http 協議安全。
(3)https 協議的工作原理
客戶端在使用 HTTPS 方式與 Web 服務器通信時有以下幾個步驟： 客戶使用 https url 訪問服務器，則要求 web 服務器建立 ssl 鏈接。 web 服務器接收到客戶端的請求之后，會將網站的證書（證書中包含了公鑰），返回或 者說傳輸給客戶端。 客戶端和 web 服務器端開始協商 SSL 鏈接的安全等級，也就是加密等級。 客戶端瀏覽器通過雙方協商一致的安全等級，建立會話密鑰，然后通過網站的公鑰來加 密會話密鑰，并傳送給網站。 web 服務器通過自己的私鑰解密出會話密鑰。 web 服務器通過會話密鑰加密與客戶端之間的通信。
(4)https 協議的優點
使用 HTTPS 協議可認證用戶和服務器，確保數據發送到正確的客戶機和服務器；
HTTPS 協議是由 SSL+HTTP 協議構建的可進行加密傳輸、身份認證的網絡協議，要比 http 協議安全，可防止數據在傳輸過程中不被竊取、改變，確保數據的完整性。
HTTPS 是現行架構下最安全的解決方案，雖然不是絕對安全，但它大幅增加了中間人攻 擊的成本。 谷歌曾在 2014 年 8 月份調整搜索引擎算法，并稱“比起同等 HTTP 網站，采用 HTTPS 加密的網站在搜索結果中的排名將會更高”。
(5)https 協議的缺點
https 握手階段比較費時，會使頁面加載時間延長 50%，增加 10%~20%的耗電。 https 緩存不如 http 高效，會增加數據開銷。 SSL 證書也需要錢，功能越強大的證書費用越高。 SSL 證書需要綁定 IP，不能再同一個 ip 上綁定多個域名，ipv4 資源支持不了這種消耗。
2、tcp 三次握手，一句話概括
客戶端和服務端都需要直到各自可收發，因此需要三次握手。
三次握手可以簡化為：C 發起請求連接 S 確認，S也發起連接 C 確認
我們 再看看每次握手的作用：
第一次握手：S 只可以確認自己可以接受 C 發送的報文段第
二次握手：C 可以確認 S 收到了自己發送的報文段，并且可以確認自己可以接受 S 發送的報文段
第三次握手：S 可以確認 C 收到了自己發送的報文段
參考文章
3、TCP 和 UDP 的區別
（1）TCP 是面向連接的，UDP是無連接的即發送數據前不需要先建立鏈接。
（2）TCP 提供可靠的服務。也就是說，通過 TCP 連接傳送的數據，無差錯，不丟失， 不重復，且按序到達;UDP 盡最大努力交付，即不保證可靠交付。 并且因為 tcp 可靠， 面向連接，不會丟失數據因此適合大數據量的交換。
（3）TCP 是面向字節流，UDP 面向報文，并且網絡出現擁塞不會使得發送速率降低（因 此會出現丟包，對實時的應用比如 IP 電話和視頻會議等）。
（4）TCP 只能是 1 對 1 的，UDP 支持 1 對 1,1 對多。
（5）TCP 的首部較大為 20 字節，而 UDP 只有 8 字節。
（6）TCP 是面向連接的可靠性傳輸，而 UDP 是不可靠的。
（二）CSS
1、說一下 css 盒模型
簡介：就是用來裝頁面上的元素的矩形區域。
CSS 中的盒子模型包括 IE 盒子模型和標 準的 W3C 盒子模型。
box-sizing(有 3 個值)：border-box,padding-box,content-box.
標準盒子模型：
IE 盒子模型：
區別：從圖中我們可以看出，這兩種盒子模型最主要的區別就是 width 的包含范圍，在 標準的盒子模型中，width 指 content 部分的寬度，在 IE 盒子模型中，width 表示 content+padding+border 這三個部分的寬度，故這使得在計算整個盒子的寬度時存在著差 異：標準盒子模型的盒子寬度：左右 border+左右 padding+width IE 盒子模型的盒子寬度：width
在 CSS3 中引入了 box-sizing 屬性，box-sizing:content-box;表示標準的盒子模型， box-sizing:border-box 表示的是 IE 盒子模型 最后，前面我們還提到了，box-sizing:padding-box,這個屬性值的寬度包含了左右 padding+width 也很好理解性記憶，包含什么，width 就從什么開始算起。
2、畫一條 0.5px 的邊框線
首先 直接這樣設置
border: 0.5px solid red;0.5px的邊框，肯定是不對的，邊框大小會向上取整。
（1）box-shadow陰影實現的思路
既然border不能設置小數的邊框，那我們能不能找一個屬性有相似的效果來替代它呢，當然可以，我們可以用box-shadow屬性用陰影達到0.5px的邊框效果，box-shadow陰影屬性是允許小數值的，我們可以用它達到單條邊框和四條邊框。
（2）::after定位偽類實現的思路
直接設置偽類元素，設置指定的高度，通過定位來控制位置。
（3）transform 縮放實現的思路
我們可以設置任意大小的邊框，改變中心點，通過縮放效果（找好倍率）來達成想要的結果
（4） border-image: linear-gradient 邊框線性漸變的思路
同樣設置任意大小的邊框，通過漸變屬性改變一部分邊框的顏色效果，比如將一部分邊框融入背景，這樣就能得到想要的效果。
3、link 標簽和 import 標簽的區別
link 屬于 html 標簽，而@import 是 css 提供的
頁面被加載時，link 會同時被加載，而@import 引用的 css 會等到頁面加載結束后加載。
link 是 html 標簽，因此沒有兼容性，而@import 只有 IE5 以上才能識別。 link 方式樣式的權重高于@import 的
4、transition 和 animation 的區別
Animation 和 transition 大部分屬性是相同的，他們都是隨時間改變元素的屬性值，他們 的主要區別是 transition 需要觸發一個事件才能改變屬性，而 animation 不需要觸發任何事件的情況下才會隨時間改變屬性值，并且 transition 為 2 幀，從 from … to，而 animation 可以一幀一幀的。
5、Flex 布局
Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。 布局的傳統解決方案，基于盒狀模型，依賴 display 屬性 + position 屬性 + float 屬性。它 對于那些特殊布局非常不方便，比如，垂直居中就不容易實現。 簡單的分為容器屬性和元素屬性
采用Flex布局的元素，稱為Flex容器（flex container），簡稱”容器”。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱”項目”。
容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。項目默認沿主軸排列。單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size。
以下6個屬性設置在容器上。
- flex-direction：決定主軸的方向（即項目的排列方向），可選row | row-reverse | column |
column-reverse; - flex-wrap：定義，如果一條軸線排不下，如何換行，可選nowrap | wrap |
- wrap-reverse; flex-flow：flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row
nowrap。 - justify-content：屬性定義了項目在主軸上的對齊方式，可選flex-start | flex-end |
center | space-between | space-around; - align-items：屬性定義項目在交叉軸上如何對齊，可選flex-start | flex-end | center |
- baseline | stretch; align-content：屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
以下6個屬性設置在項目上。
- order：定義項目的排列順序。數值越小，排列越靠前，默認為0。
- flex-grow：定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大；如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據的剩余空間將比其他項多一倍。
- flex-shrink：定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。負值對該屬性無效。
- flex-basis：屬性定義了在分配多余空間之前，項目占據的主軸空間（main
size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小，可以設為跟width或height屬性一樣的值（比如350px），則項目將占據固定空間。 - flex：屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。
- align-self：屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
6、BFC（塊級格式化上下文，用于清除浮動，防止 margin 重疊等）
直譯成：塊級格式化上下文，是一個獨立的渲染區域，并且有一定的布局規則。 一個BFC區域包含創建該上下文元素的所有子元素，但是不包括創建了新的BFC的子元素的內部元素，BFC是一塊塊獨立的渲染區域，可以將BFC看成是元素的一種屬性，擁有了這種屬性的元素就會使他的子元素與世隔絕，不會影響到外部其他元素。就會為這個塊級元素生產一個獨立的塊級上下文，使這個塊級元素內部的排版完全獨立。BFC就是說獨立的塊級上下文可以包裹浮動流，全部浮動子元素也不會引起容器高度塌陷，就是說包含塊會把浮動元素的高度也計算在內，這樣就達到了清除浮動的效果，
BFC 區域不會與 float box 重疊 ，BFC 是頁面上的一個獨立容器，子元素不會影響到外面 計算 BFC 的高度時，浮動元素也會參與計算
哪些元素會生成 BFC:
·body根元素
·設置浮動，不包括none
·設置定位，absoulte或者fixed
·行內塊顯示模式，inline-block
·設置overflow，即hidden，auto，scroll
·表格單元格，table-cell
·彈性布局，flex
參看文章
應用：
解決外邊距的塌陷問題(垂直塌陷)
利用BFC解決包含塌陷
清除浮動
BFC可以阻止標準流元素被浮動元素覆蓋
7、垂直居中的方法
margin:auto 法，定位為上下左右為 0，margin：auto 可以實現脫離文檔流的居中
img{ position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; }margin 負值法
.inner{ width: 480px; height: 380px; background-color: #746; position: absolute; top: 50%; left: 50%; margin-top: -190px; /*height 的一半*/ margin-left: -240px; /*width 的一半*/ } 其實這里也可以將 marin-top 和 margin-left 負值替換成， transform：translateX(-50%)和 transform：translateY(-50%)(3)table-cell（未脫離文檔流的） 設置父元素的 display:table-cell,并且 vertical-align:middle，這樣子元素可以實現垂直居中
div{ width: 300px; height: 300px; border: 3px solid #555; display: table-cell; vertical-align: middle; text-align: center; } img{ vertical-align: middle; }(4)利用 flex 將父元素設置為 display:flex，并且設置 align-items:center;justify-content:center;
.container{ width: 300px; height: 200px; border: 3px solid #546461; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } .inner{ 14border: 3px solid #458761; 15padding: 20px; 16}8、關于 JS 動畫和 css3 動畫的差異性
首先，在js動畫是逐幀動畫，是在時間幀上逐幀繪制幀內容，由于是一幀一幀的話，所以其可操作性很高，幾乎可以完成任何想要的動畫形式。但是由于逐幀動畫的幀序列內容不一樣，會增加制作負擔，且資源占有比較大。
但它的優勢也很明顯：因為它相似與電影播放模式，很適合于表演很細膩的動畫，如3D效果、人物或動物急劇轉身等等效果。正是由于js對動畫的操作復雜度比較高，能對動畫有一個比較好的控制，如開始、暫定、回放、終止、取幀等，可以很精確的做到。因此可以js可以通過操作DOM和BOM來做一些酷炫的動態效果，以及爆炸特效，且兼容性比較好。
但是，如果幀率過低的話，會導致幀與幀之間的過渡很可能會不自然、不連貫。
缺點：
js是單線程的腳本語言，當js在瀏覽器主線程運行時，主線程還有其他需要運行的js腳本、樣式、計算、布局、交互等一系列任務，對其干擾線程可能出現阻塞，造成丟幀的情況。
其次，js在做動畫的時候，其復雜度是高于css3的，需要考慮一些計算，操作等方便問題。
優點：
JavaScript動畫控制能力很強, 可以在動畫播放過程中對動畫進行控制：開始、暫停、回放、終止、取消都是可以做到的。
動畫效果比css3動畫豐富,有些動畫效果，比如曲線運動,沖擊閃爍,視差滾動效果，只有JavaScript動畫才能完成
CSS3有兼容性問題，而JS大多時候沒有兼容性問題
css3（補間動畫）
css3動畫的制作方法簡單方便。只需確定第一幀和最后一幀的關鍵位置即可，兩個關鍵幀之間幀的內容由Composite線程自動生成，不需要人為處理。當然也可以多次添加關鍵幀的位置。
因為只設置幾個關鍵幀的位置，所以在進行動畫控制的時候時比較弱的。不能夠在半路暫停動畫，或者在動畫過程中不能對其進行一些操作等。
css3在實現一些簡單的滑動，翻轉等特效的時候會很方便，但是想要做到一些酷炫的效果的時候，其操作往往可能會比js操作有更多的冗余。
css3在做動畫的時候，瀏覽器可以對其進行一些優化，會比js使用更少的占用cpu資源，但是效果足夠流暢。
缺點：
運行過程控制較弱，無法附加事件綁定回調函數。CSS動畫只能暫停,不能在動畫中尋找一個特定的時間點，不能在半路反轉動畫，不能變換時間尺度，不能在特定的位置添加回調函數或是綁定回放事件,無進度報告
代碼冗長。如果想用 CSS 實現稍微復雜一點動畫,最后CSS代碼都會變得非常笨重。
優點：
瀏覽器可以對動畫進行優化。
代碼相對簡單,性能調優方向固定
對于幀速表現不好的低版本瀏覽器，CSS3可以做到自然降級，而JS則需要撰寫額外代碼
9、塊元素和行元素
塊元素：獨占一行，并且有自動填滿父元素，可以設置 margin 和 pading 以及高度和寬度
行元素：不會獨占一行，width 和 height 會失效，并且在垂直方向的 padding 和 margin 會失效
10、多行元素的文本省略號
display: -webkit-box ； -webkit-box-orient:vertical； -webkit-line-clamp:3 ；//要顯示幾行就寫幾 overflow:hidden11、visibility=hidden, opacity=0，display:none的區別
opacity=0，該元素隱藏起來了，但不會改變頁面布局，并且，如果該元素已經綁定一些 事件，如 click 事件，那么點擊該區域，也能觸發點擊事件的
visibility=hidden，該元素 隱藏起來了，但不會改變頁面布局，但是不會觸發該元素已經綁定的事件
display=none， 把元素隱藏起來，并且會改變頁面布局，可以理解成在頁面中把該元素刪除掉一樣。
12、雙邊距重疊問題（外邊距折疊）
多個相鄰（兄弟或者父子關系）普通流的塊元素垂直方向 marigin 會重疊 。
折疊的結果為：
兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值。
兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值。
兩個外邊距一正一負時，折疊結果是兩者的相加的和。
13、position 屬性 比較
固定定位 fixed： 元素的位置相對于瀏覽器窗口是固定位置，即使窗口是滾動的它也不會移動。Fixed 定 位使元素的位置與文檔流無關，因此不占據空間。 Fixed 定位的元素和其他元素重疊。
相對定位 relative： 如果對一個元素進行相對定位，它將出現在它所在的位置上。然后，可以通過設置垂直 或水平位置，讓這個元素“相對于”它的起點進行移動。 在使用相對定位時，無論是 否進行移動，元素仍然占據原來的空間。因此，移動元素會導致它覆蓋其它元素。
絕對定位 absolute： 絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素，那 么它的位置相對于。absolute 定位使元素的位置與文檔流無關，因此不占據空間。 absolute 定位的元素和其他元素重疊。
粘性定位 sticky：元素先按照普通文檔流定位，然后相對于該元素在流中的 flow root（BFC）和 containing block（最近的塊級祖先元素）定位。而后，元素定位表現為在跨越特定閾值前為相對定 位，之后為固定定位。粘性定位詳解
默認定位 Static： 默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲 明）。
inherit: 規定應該從父元素繼承 position 屬性的值。
14、浮動清除
在我們的開發過程中，浮動元素是css中最常用的屬性，浮動起來的元素會脫離標準流，如果我們的父級盒子沒有設置高度就會造成父級盒子的高度塌陷，就會影響我們下面盒子的正常顯示。
方法一：使用帶 clear 屬性的空元素，注意這個標簽必須是塊級元素
在浮動元素后使用一個空元素如
方法二：使用 CSS 的 overflow 屬性
給浮動元素的容器添加 overflow:hidden;或 overflow:auto;可以清除浮動，另外在 IE6 中還 需要觸發 hasLayout ，例如為父元素設置容器寬高或設置 zoom:1。 在添加 overflow 屬性后，浮動元素又回到了容器層，把容器高度撐起，達到了清理浮動 的效果。
方法三：給浮動的元素的容器添加浮動
給浮動元素的容器也添加上浮動屬性即可清除內部浮動，但是這樣會使其整體浮動，影 響布局，不推薦使用。
方法四：使用鄰接元素處理
什么都不做，給浮動元素后面的元素添加 clear 屬性。
方法五：使用 CSS 的:after 偽元素
結合:after 偽元素（注意這不是偽類，而是偽元素，代表一個元素之后最近的元素）和 IEhack ，可以完美兼容當前主流的各大瀏覽器，這里的 IEhack 指的是觸發 hasLayout。 給浮動元素的容器添加一個 clearfix 的 class，然后給這個 class 添加一個:after 偽元素實 現元素末尾添加一個看不見的塊元素（Block element）清理浮動。
方式六：造成高度塌陷的原因就是父盒子沒有高度，我們只需要給父盒子添加一個高度即可
但是這種方式并不推薦使用，因為有很多局限性，況且son盒子依然是脫離標準流，并沒有回到father盒子中，所以做一個簡單的了解即可。
參看文章
15、css3 新特性
1.CSS3邊框：
border-radius：CSS3圓角邊框。在 CSS2 中添加圓角矩形需要技巧，我們必須為每個圓角使用不同的圖片，在 CSS3 中，創建圓角是非常容易的，在 CSS3 中，border-radius 屬性用于創建圓角。border：2px solid;
box-shadow：CSS3邊框陰影。在 CSS3 中，box-shadow 用于向方框添加陰影。box-shadow:10px 10px 5px #888888;
border-image：CSS3邊框圖片。通過 CSS3 的 border-image 屬性，您可以使用圖片來創建邊框。border-image：url(border.png) 30 30 round
2.CSS3背景：
background-size： 屬性規定背景圖片的尺寸。在 CSS3 之前，背景圖片的尺寸是由圖片的實際尺寸決定的。在 CSS3 中，可以規定背景圖片的尺寸，這就允許我們在不同的環境中重復使用背景圖片。您能夠以像素或百分比規定尺寸。如果以百分比規定尺寸，那么尺寸相對于父元素的寬度和高度。
background-origin ：屬性規定背景圖片的定位區域。背景圖片可以放置于 content-box、padding-box 或 border-box 區域。
3.CSS3文字效果：
text-shadow：在 CSS3 中，text-shadow 可向文本應用陰影。text-shadow:5px 5px 5px #FFFFFF;
word-wrap :單詞太長的話就可能無法超出某個區域，允許對長單詞進行拆分，并換行到下一行：p{word-wrap:break-word;}
4.CSS3 2D轉換：
transform：通過 CSS3 轉換，我們能夠對元素進行移動、縮放、轉動、拉長或拉伸。
translate()：元素從其當前位置移動，根據給定的 left（x 坐標） 和 top（y 坐標） 位置參數：transform：translate（50px,100px）;值 translate(50px,100px) 把元素從左側移動 50 像素，從頂端移動 100 像素。
rotate()：元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉。transform:rotate(30deg);值 rotate(30deg) 把元素順時針旋轉 30 度。
scale():元素的尺寸會增加或減少，根據給定的寬度（X 軸）和高度（Y 軸）參數：transform:scale(2,4);值 scale(2,4) 把寬度轉換為原始尺寸的 2 倍，把高度轉換為原始高度的 4 倍。
skew():元素轉動給定的角度，根據給定的水平線（X 軸）和垂直線（Y 軸）參數：transform:skew(30deg,20deg);值 skew(30deg,20deg) 圍繞 X 軸把元素轉動 30 度，圍繞 Y 軸轉動 20 度。
matrix() :matrix() 方法把所有 2D 轉換方法組合在一起。
matrix() 方法需要六個參數，包含數學函數，允許您：旋轉、縮放、移動以及傾斜元素。
5.CSS3 3D轉換：
rotateX()：元素圍繞其 X 軸以給定的度數進行旋轉。transform：rotateX(120deg);
rotateY()：元素圍繞其 Y 軸以給定的度數進行旋轉。transform：rotateY(120deg);
6.CSS3 過渡：
當元素從一種樣式變換為另一種樣式時為元素添加效果。
7.CSS3動畫：
通過 CSS3，我們能夠創建動畫，這可以在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。
8.CSS3多列：
column-count：屬性規定元素應該被分隔的列數。
column-gap：屬性規定列之間的間隔。
column-rule ：屬性設置列之間的寬度、樣式和顏色規則。
9.CSS3用戶界面：
resize：屬性規定是否可由用戶調整元素尺寸。
box-sizing：屬性允許您以確切的方式定義適應某個區域的具體內容。
outline-offset ：屬性對輪廓進行偏移，并在超出邊框邊緣的位置繪制輪廓。
16、CSS 選擇器有哪些，優先級呢
id 選擇器，class 選擇器，標簽選擇器，偽元素選擇器，偽類選擇器等
-
同一元素引用了多個樣式時，排在后面的樣式屬性的優先級高； 樣式選擇器的類型不同時，優先級順序為：id 選擇器 > class 選擇器 >
標簽選擇器； -
標簽之間存在層級包含關系時，后代元素會繼承祖先元素的樣式。如果后代元素定義了 與祖先元素相同的樣式，則祖先元素的相同的樣式屬性會被覆蓋。
-
繼承的樣式的優先級 比較低，至少比標簽選擇器的優先級低；
-
帶有!important 標記的樣式屬性的優先級最高；
-
樣式表的來源不同時，優先級順序為：內聯樣式> 內部樣式 > 外部樣式 > 瀏覽器用戶 自定義樣式 > 瀏覽器默認樣式
17、怎么樣讓一個元素消失
display:none; visibility:hidden; opacity: 0; 等等
18、css 動畫如何實現
創建動畫序列，需要使用 animation 屬性或其子屬性，該屬性允許配置動畫時間、時長 以及其他動畫細節，但該屬性不能配置動畫的實際表現，動畫的實際表現是 由 @keyframes 規則實現，具體情況參見使用 keyframes 定義動畫序列小節部分。
transition 也可實現動畫。transition 強調過渡，是元素的一個或多個屬性發生變化時產生 的過渡效果，同一個元素通過兩個不同的途徑獲取樣式，而第二個途徑當某種改變發生 （例如 hover）時才能獲取樣式，這樣就會產生過渡動畫
19、CSS3 中對溢出的處理
1、容器寬度：width：value
2、強制文本在一行內顯示：white-space：nowrap；
3、溢出內容為隱藏：overflow：hidden；
4、溢出省略號：text-overflow：ellipsis；
overflow：visible/hidden(隱藏)/scroll/auto(自動)/inherit;
visible:默認值，內容不會被修剪，會呈現在元素框之外；
hidden：內容會被修剪，并且其余內容是不可見的；
scroll：內容會被修剪，但是瀏覽器會顯示滾動條，以便查看其余的內容；
auto：如果內容被修剪，則瀏覽器會顯示滾動條，以便查看其它的內容；（超出會顯示，不超出不顯示，只顯示y方向的）
inherit：規定應該從父元素繼承overflow屬性值。
2、空余空間
說明：
white-space：normal、nowwrap、pre、pre-wrap、pre-line、inherit該屬性用來社遏制如何處理元素內部的空白
normal：默認值，空白會被瀏覽器忽略
nowwrap：文本不會換行，文本會在同一行上繼續，直到遇到標簽為止
pre：空白會被瀏覽器保留，其行為方式類似HTML中的pre標簽；
pre-wrap：保留空白序列，但是保留換行符
inherit：規定應該從父元素繼承white-space屬性值；（ie瀏覽器不支持此屬性）
3、省略號顯示
說明：
text-overflow：clip、ellipsis
clip：不顯示省略號（…），而是簡單的裁切；
ellipsis：當對象文本溢出時，顯示省略標記；
說明：
text-overflow屬性僅僅是…，當行文本溢出時是否顯示省略標記，并不具備其他的樣式屬性定義，
要實現溢出時產生省略號的效果還需要定義；
20、float 的元素，display 是什么
display 為 block
21、隱藏頁面中某個元素的方法
position 移到外部，z-index 涂層遮蓋等等
（三） JavaScript基礎
1、get和post的區別主要有以下幾方面：
1、url可見性：
get，參數url可見；
post，url參數不可見
2、數據傳輸上：
get，通過拼接url進行傳遞參數；
post，通過body體傳輸參數
3、緩存性：
get請求是可以緩存的
post請求不可以緩存
4、后退頁面的反應
get請求頁面后退時，不產生影響
post請求頁面后退時，會重新提交請求
5、傳輸數據的大小
get一般傳輸數據大小不超過2k-4k（根據瀏覽器不同，限制不一樣，但相差不大）
post請求傳輸數據的大小根據php.ini 配置文件設定，也可以無限大。
6、安全性
這個也是最不好分析的，原則上post肯定要比get安全，畢竟傳輸參數時url不可見，但也擋不住部分人閑的沒事在那抓包玩。安全性個人覺得是沒多大區別的，防君子不防小人就是這個道理。對傳遞的參數進行加密，其實都一樣。
7、數據包
GET產生一個TCP數據包；POST產生兩個TCP數據包。對于GET方式的請求，瀏覽器會把http header和data一并發送出去，服務器響應200（返回數據）；而對于POST，瀏覽器先發送header，服務器響應100 continue，瀏覽器再發送data，服務器響應200 ok（返回數據）。在網絡環境好的情況下，發一次包的時間和發兩次包的時間差別基本可以無視。而在網絡環境差的情況下，兩次包的TCP在驗證數據包完整性上，有非常大的優點。并不是所有瀏覽器都會在POST中發送兩次包，Firefox就只發送一次。
2、補充 get 和 post 請求在緩存方面的區別
get 請求類似于查找的過程，用戶獲取數據，可以不用每次都與數據庫連接，所以可以 使用緩存。
post 不同，post 做的一般是修改和刪除的工作，所以必須與數據庫交互，所以不能使用 緩存。因此 get 請求適合于請求緩存。
3、說一下閉包
閉包是指有權訪問另一個函數作用域中變量的函數。
創建閉包的最常見的方式就是在一個函數內創建另一個函數，創建的函數可以訪問到當前函數的局部變量。
閉包的特點
1.讓外部訪問函數內部變量變成可能
2.變量會常駐在內存中
3.可以避免使用全局變量,防止全局變量污染;
閉包的好處和壞處
好處：可以讀取其他函數內部的變量，并將其一直保存在內存中。
壞處：可能會造成內存泄漏或溢出。
閉包有兩個常用的用途
閉包的第一個用途是使我們在函數外部能夠訪問到函數內部的變量。通過使用閉包，可以通過在外部調用閉包函數，從而在外部訪問到函數內部的變量，可以使用這種方法來創建私有變量。
閉包的另一個用途是使已經運行結束的函數上下文中的變量對象繼續留在內存中，因為閉包函數保留了這個變量對象的引用，所以這個變量對象不會被回收。
參考文章
4、說一下類的創建和繼承
5、如何解決異步回調地獄
promise、generator、async/await
參看文章
6、說說前端中的事件流
HTML 中與 javascript 交互是通過事件驅動來實現的，例如鼠標點擊事件 onclick、頁面 的滾動事件 onscroll 等等，可以向文檔或者文檔中的元素添加事件偵聽器來預訂事件。 想要知道這些事件是在什么時候進行調用的，就需要了解一下“事件流”的概念。 什么是事件流：事件流描述的是從頁面中接收事件的順序,DOM2 級事件流包括下面幾個 階段。 事件捕獲階段 處于目標階段 事件冒泡階段 addEventListener：addEventListener 是 DOM2 級事件新增的指定事件處理程序的操作， 這個方法接收 3 個參數：要處理的事件名、作為事件處理程序的函數和一個布爾值。最 后這個布爾值參數如果是 true，表示在捕獲階段調用事件處理程序；如果是 false，表示 在冒泡階段調用事件處理程序。 IE 只支持事件冒泡
7、如何讓事件先冒泡后捕獲
在 DOM 標準事件模型中，是先捕獲后冒泡。但是如果要實現先冒泡后捕獲的效果，對 于同一個事件，監聽捕獲和冒泡，分別對應相應的處理函數，監聽到捕獲事件，先暫緩 執行，直到冒泡事件被捕獲后再執行捕獲之間。
8、說一下事件委托
簡介：事件委托指的是，不在事件的發生地（直接 dom）上設置監聽函數，而是在其父 元素上設置監聽函數，通過事件冒泡，父元素可以監聽到子元素上事件的觸發，通過判 斷事件發生元素 DOM 的類型，來做出不同的響應。 舉例：最經典的就是 ul 和 li 標簽的事件監聽，比如我們在添加事件時候，采用事件委 托機制，不會在 li 標簽上直接添加，而是在 ul 父元素上添加。 好處：比較合適動態元素的綁定，新添加的子元素也會有監聽函數，也可以有事件觸發 機制
9、說一下圖片的懶加載和預加載
預加載：提前加載圖片，當用戶需要查看時可直接從本地緩存中渲染。
懶加載：懶加載的主要目的是作為服務器前端的優化，減少請求數或延遲請求數。
兩種技術的本質：兩者的行為是相反的，一個是提前加載，一個是遲緩甚至不加載。
懶加載對服務器前端有一定的緩解壓力作用，預加載則會增加服務器前端壓力
10、mouseover 和 mouseenter 的區別
mouseover：當鼠標移入元素或其子元素都會觸發事件，所以有一個重復觸發，冒泡的過程。對應的移除事件是 mouseout
mouseenter：當鼠標移到元素本身（不包含元素的子元素）會觸發事件，也就是不會冒泡，對應的移除事件是 mouseleave
11、JS 的 new 操作符做了哪些事情
new 操作符新建了一個空對象，這個對象原型指向構造函數的 prototype，執行構造函數后返回這個對象。
12、改變函數內部 this 指針的指向函數（bind，apply，call 的區別）
通過 apply 和 call 改變函數的 this 指向，他們兩個函數的第一個參數都是一樣的表示要 改變指向的那個對象，第二個參數，apply 是數組，而 call 則是 arg1,arg2…這種形式。
通 過 bind 改變 this 作用域會返回一個新的函數，這個函數不會馬上執行。
13、JS 的各種位置，比如 clientHeight,scrollHeight,offsetHeight ,以及 scrollTop, offsetTop,clientTop 的區別？
clientHeight：表示的是可視區域的高度，不包含 border 和滾動條 offsetHeight：表示可視區域的高度，包含了 border 和滾動條 scrollHeight：表示了所有區域的高度，包含了因為滾動被隱藏的部分。 clientTop：表示邊框 border 的厚度，在未指定的情況下一般為 0 scrollTop：滾動后被隱藏的高度，獲取對象相對于由 offsetParent 屬性指定的父坐標(css 定位的元素或 body 元素)距離頂端的高度。
14、JS 拖拽功能的實現
首先是三個事件，分別是 mousedown，mousemove，mouseup 當鼠標點擊按下的時候，需要一個 tag 標識此時已經按下，可以執行 mousemove 里面的 具體方法。
clientX，clientY 標識的是鼠標的坐標，分別標識橫坐標和縱坐標，并且我們用 offsetX 和 offsetY 來表示元素的元素的初始坐標，移動的舉例應該是： 鼠標移動時候的坐標-鼠標按下去時候的坐標。
也就是說定位信息為： 鼠標移動時候的坐標-鼠標按下去時候的坐標+元素初始情況下的 offetLeft. 還有一點也是原理性的東西，也就是拖拽的同時是絕對定位，我們改變的是絕對定位條件下的 left 以及 top 等等值。
15、異步加載 JS 的方法
defer：只支持 IE ，如果您的腳本不會改變文檔的內容，可將 defer 屬性加入到< script>標 簽中，以便加快處理文檔的速度。因為瀏覽器知道它將能夠安全地讀取文檔的剩余部分而不用執行腳本，它將推遲對腳本的解釋，直到文檔已經顯示給用戶為止。
async，HTML5 屬性僅適用于外部腳本，并且如果在 IE 中，同時存在 defer 和 async，那 么 defer 的優先級比較高，腳本將在頁面完成時執行。 創建 script 標簽，插入到 DOM 中
16、Ajax 解決瀏覽器緩存問題
在 ajax 發送請求前加上 anyAjaxObj.setRequestHeader(“If-Modified-Since”,“0”)。
在 ajax 發送請求前加上 anyAjaxObj.setRequestHeader(“Cache-Control”,“no-cache”)。
在 URL 后面加上一個隨機數： “fresh=” + Math.random()。
在 URL 后面加上時間搓：“nowtime=” + new Date().getTime()。
如果是使用 jQuery，直接這樣就可以了 $.ajaxSetup({cache:false})。這樣頁面的所有 ajax 都會執行這條語句就是不需要保存緩存記錄。
17、實現 AJAX 的基本步驟
1、創建XML HttpRequest 對象，即創建一個異步調用對象。
2、創建一個新的HTTP 請求，并指定該HTTP 請求的方法，URL及驗證信息
3、設置響應HTTP請求狀態變化的函數。
4、發送HTTP 請求。
5、獲取異步調用返回的數據。
6、使用JavaScript和DOM 實現局部刷新
參看文章
18、JS 的節流和防抖
參看文章
19、JS 中的垃圾回收機制
必要性：由于字符串、對象和數組沒有固定大小，所有當他們的大小已知時，才能對他們進行動態的存儲分配。JavaScript 程序每次創建字符串、數組或對象時，解釋器都必須分配內存來存儲那個實體。只要像這樣動態地分配了內存，最終都要釋放這些內存以便他們能夠被再用，否則，JavaScript 的解釋器將會消耗完系統中所有可用的內存，造成系統崩潰。
這段話解釋了為什么需要系統需要垃圾回收，JS 不像 C/C++，他有自己的一套垃圾回收機制（Garbage Collection）。JavaScript 的解釋器可以檢測到何時程序不再使用一個對象了，當他確定了一個對象是無用的時候，他就知道不再需要這個對象，可以把它所占用的內存釋放掉了。例如
var a=“hello world”; var b=“world”; var a=b; //這時，會釋放掉"hello world"，釋放內存以便再引用
垃圾回收的方法：標記清除、計數引用。
標記清除 這是最常見的垃圾回收方式，當變量進入環境時，就標記這個變量為”進入環境“,從邏 輯上講，永遠不能釋放進入環境的變量所占的內存，永遠不能釋放進入環境變量所占用 的內存，只要執行流程進入相應的環境，就可能用到他們。當離開環境時，就標記為離 開環境。 垃圾回收器在運行的時候會給存儲在內存中的變量都加上標記（所有都加），然后去掉 環境變量中的變量，以及被環境變量中的變量所引用的變量（條件性去除標記），刪除 所有被標記的變量，刪除的變量無法在環境變量中被訪問，所以會被刪除，最后垃圾回收 器，完成了內存的清除工作，并回收他們所占用的內存。
引用計數法
另一種不太常見的方法就是引用計數法，引用計數法的意思就是每個值設引用的次數， 當聲明了一個變量，并用一個引用類型的值賦值給改變量，則這個值的引用次數為 1,； 相反的，如果包含了對這個值引用的變量又取得了另外一個值，則原先的引用值引用次 數就減 1，當這個值的引用次數為 0 的時候，說明沒有辦法再訪問這個值了，因此就把 所占的內存給回收進來，這樣垃圾收集器再次運行的時候，就會釋放引用次數為 0 的這 些值。
用引用計數法會存在內存泄露，下面來看原因： function problem() { var objA = new Object(); var objB = new Object(); objA.someOtherObject = objB; objB.anotherObject = objA; }在這個例子里面，objA 和 objB 通過各自的屬性相互引用，這樣的話，兩個對象的引用 次數都為 2，在采用引用計數的策略中，由于函數執行之后，這兩個對象都離開了作用 域，函數執行完成之后，因為計數不為 0，這樣的相互引用如果大量存在就會導致內存 泄露。
特別是在 DOM 對象中，也容易存在這種問題： var element=document.getElementById（’‘）； var myObj=new Object(); myObj.element=element; element.someObject=myObj; 這樣就不會有垃圾回收的過程。
20、eval 是做什么的
它的功能是將對應的字符串解析成 JS 并執行，應該避免使用 JS，因為非常消耗性能（2 次，一次解析成 JS，一次執行）
21、如何理解前端模塊化
前端模塊化就是復雜的文件編程一個一個獨立的模塊，比如 JS 文件等等，分成獨立的 模塊有利于重用（復用性）和維護（版本迭代），這樣會引來模塊之間相互依賴的問題， 所以有了 commonJS 規范，AMD，CMD 規范等等，以及用于 JS 打包（編譯等處理）的 工具 webpack
22、說一下 CommonJS、AMD 和 CMD
參看文章
總結
以上是生活随笔為你收集整理的2023前端面试题集（持续更新中～），祝大家早日拿到心仪offer的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 随笔--读书笔记《软技能：代码之外的生存
- 下一篇： 解决微信内置浏览器屏蔽下载链接问题