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