CSS
css盒模型
html中所有元素都是盒子
盒子組成：內(nèi)容content ,內(nèi)邊距padding, 邊框border, 外邊距margin
標(biāo)準(zhǔn)盒模型：margin+border+padding+content
IE:盒模型：margin+content(包含border+padding)
box-sizing:content-box(默認(rèn)值，標(biāo)準(zhǔn)盒模型)，border-box(IE盒模型)
css選擇器的優(yōu)先級(jí)
css的特性：繼承，層疊，優(yōu)先級(jí)
!important>內(nèi)聯(lián)>類/偽類/屬性>標(biāo)簽>全局
隱藏元素的方法
display:none
opacity:0
visibility:hidden
position:absolute
clip-path
水平垂直居中
定位+margin
.father{
width: 400px;
height: 400px;
border:1px solid;
position: relative;
}
.son{
position: absolute;
width: 200px;
height: 200px;
background-color: red;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
定位+transform
.father {
width: 400px;
height: 400px;
border: 1px solid;
position: relative;
}
.son {
position: absolute;
width: 200px;
height: 200px;
background-color: red;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
flex+定位
.father{
display: flex;
justify-content: center;
align-items: center;
width: 400px;
height: 400px;
border: 1px solid;
position: relative;
}
.son{
width: 200px;
height: 200px;
background-color: red;
//margin:auto
}
teble-cell+vertical-align
.father {
display: table-cell;
vertical-align: middle;
width: 400px;
height: 400px;
border: 1px solid;
text-align: center;
}
.son {
margin: auto;
background-color: red;
width: 200px;
height: 200px;
}
grid
.father {
display: grid;
width: 400px;
height: 400px;
border: 1px solid;
justify-content: center;
align-content: center;
}
.son {
text-align: center;
background-color: red;
width: 200px;
height: 200px;
}
px，em和rem的區(qū)別
px是像素，無法因?yàn)檫m應(yīng)頁面大小而改變，絕對(duì)單位長度
em和rem是相對(duì)長度單位，元素的width/height/padding/margin用em的話是相對(duì)于該元素的font-size，更適用于響應(yīng)式布局。
em相對(duì)于父元素，rem相對(duì)于根元素
css那些屬性可以繼承？
字體的屬性：font
文本的屬性：line-height
可見性：visibility:hidden
表格布局：border-spacing
列表屬性：list-style
BFC
BFC是格式化上下文，相當(dāng)于一個(gè)容器，容器內(nèi)外的元素不會(huì)互相影響
觸發(fā)BFC的方式：
給父元素添加如下屬性：
position: absolute / fixed
overflow: hidden(最常用)
display:flex / inline-block / inline-fixed
應(yīng)用場景： 解決外邊距重疊或浮動(dòng)導(dǎo)致的高度塌陷
overflow屬性值
visible:默認(rèn)值，超出可顯示
hidden：超出不可見
auto:設(shè)置兩個(gè)方向上的滾動(dòng)條
scroll:內(nèi)容會(huì)被修剪，會(huì)顯示滾動(dòng)條
元素內(nèi)容沒有超過寬高時(shí)，auto會(huì)隱藏滾動(dòng)條，scroll會(huì)顯示并禁用
預(yù)處理器？
增加了變量，函數(shù)，混入等功能
//全局變量&局部變量
$bgColor: #ffffff; // 全局變量
div {
$width: 1000px; // 局部變量
width: $width;
background: $bgColor;
}
//變量用在屬性中，需要寫在#{ }中
$posi: left;
div {
border-#{$posi}: 1px solid $color;
}
//sass的默認(rèn)變量是在值后面加上!default
$myLineHeight: 1.5 !default;
body{
line-height: $myLineHeight;
}
//在選擇器嵌套中，可以使用&表示父元素選擇器，
#top_btn{
&:hover{
color:#ddd;
}
}
選擇器嵌套：在一個(gè)選擇器中嵌套另一個(gè)選擇器來實(shí)現(xiàn)繼承，增強(qiáng)了sass文件的結(jié)構(gòu)性和可讀性，
選擇器繼承
sass中，選擇器繼承可以讓選擇器繼承另一個(gè)選擇器的所有樣式，并聯(lián)合聲明。使用選擇器的繼承，使用關(guān)鍵詞@extend，后面緊跟需要繼承的選擇器。
SASS,LESS
JS
基本數(shù)據(jù)類型和引用數(shù)據(jù)類型？
基本：string,number,boolean,undefined ,null
基本數(shù)據(jù)類型保存在棧內(nèi)存中，是一個(gè)具體的值
引用（復(fù)雜）：object,function,array
引用數(shù)據(jù)類型：
保存在堆內(nèi)存中，保存的是引用數(shù)據(jù)類型的地址
原型和原型鏈
原型
原型鏈就是在當(dāng)前對(duì)象中找不到定義的話，會(huì)在當(dāng)前對(duì)象的原型對(duì)象上繼續(xù)查找，直至undefined。
實(shí)例對(duì)象可以共享構(gòu)造函數(shù)原型屬性和方法，節(jié)省內(nèi)存。構(gòu)造函數(shù)原型上的屬性和方法越多，節(jié)省內(nèi)存越大。
深拷貝和淺拷貝
淺拷貝：Object.assign()
深拷貝：JSON.parse(JSON.stringify(obj))
數(shù)組方法
push()末尾添加元素
pop()刪除最終元素
unshift()開頭添加元素
shift()刪除開頭元素
Array.isArray()判斷是否為數(shù)組
map()返回一個(gè)新數(shù)組，其中元素為原始元素調(diào)用函數(shù)處理后的值
filter()創(chuàng)建1又符合條件的元素組成的新數(shù)組
splice(start,num,additem)添加或刪除元素
slice()從已有的數(shù)組中返回選定的元素
indexOf() 方法可返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置，沒有找到匹配的字符串則返回 -1
split() 方法用于把一個(gè)字符串分割成字符串?dāng)?shù)組，不改變?cè)紨?shù)組
forEach()調(diào)用每一個(gè)元素傳遞給回調(diào)函數(shù)
sort() 方法用于對(duì)數(shù)組的元素進(jìn)行排序。
reverse() 方法用于顛倒數(shù)組中元素的順序。
every()
some()
concat() 方法用于連接兩個(gè)或多個(gè)數(shù)組
數(shù)組去重
- 使用es6 set方法
VUE
vue生命周期
創(chuàng)建
beforeCreat階段屬性和方法都不能使用
created實(shí)例創(chuàng)建完成之后，完成了數(shù)據(jù)監(jiān)測，可以使用數(shù)據(jù)，修改數(shù)據(jù)，不會(huì)觸發(fā)updated,也不會(huì)更新視圖
掛載
beforeMount完成了模板的編譯，虛擬DOM完成創(chuàng)建，即將渲染，修改數(shù)據(jù)，不會(huì)觸發(fā)updated
Mounted把編譯好的模板掛載到頁面，可以發(fā)送異步請(qǐng)求，也可以訪問DOM節(jié)點(diǎn)
更新
beforeUpdate組件數(shù)據(jù)更新之前使用，數(shù)據(jù)是新的，頁面上的數(shù)據(jù)是舊的，組件即將更新，準(zhǔn)備渲染，可以改數(shù)據(jù)
updated render重新做了渲染，這是數(shù)據(jù)和頁面都是新的，避免在此更新數(shù)據(jù)
銷毀
漸進(jìn)式
MVVM
Model即數(shù)據(jù)層，從數(shù)據(jù)庫或者后端請(qǐng)求回來的數(shù)據(jù)，也有可能是自己定義的數(shù)據(jù)
View即視圖層，通常就是DOM層，主要的作用是給用戶展示各種信息
ViewModel即視圖模型層，是View和Model溝通的橋梁，實(shí)現(xiàn)了數(shù)據(jù)雙向綁定
MVVM相比于MVC，實(shí)現(xiàn)了View和Model的同步，也就是當(dāng)Model的屬性發(fā)生改變時(shí)，改屬性對(duì)應(yīng)的View層顯示會(huì)自動(dòng)改變，也就是Vue數(shù)據(jù)驅(qū)動(dòng)的思想。
三次握手，四次揮手
第一次握手：客戶端將TCP報(bào)文標(biāo)志位SYN置為1，隨機(jī)產(chǎn)生一個(gè)序號(hào)值seq=J，保存在TCP首部的序列號(hào)(Sequence Number)字段里，指明客戶端打算連接的服務(wù)器的端口，并將該數(shù)據(jù)包發(fā)送給服務(wù)器端，發(fā)送完畢后，客戶端進(jìn)入SYN_SENT狀態(tài)，等待服務(wù)器端確認(rèn)。
第二次握手：服務(wù)器端收到數(shù)據(jù)包后由標(biāo)志位SYN=1知道客戶端請(qǐng)求建立連接，服務(wù)器端將TCP報(bào)文標(biāo)志位SYN和ACK都置為1，ack=J+1，隨機(jī)產(chǎn)生一個(gè)序號(hào)值seq=K，并將該數(shù)據(jù)包發(fā)送給客戶端以確認(rèn)連接請(qǐng)求，服務(wù)器端進(jìn)入SYN_RCVD狀態(tài)。
第三次握手：客戶端收到確認(rèn)后，檢查ack是否為J+1，ACK是否為1，如果正確則將標(biāo)志位ACK置為1，ack=K+1，并將該數(shù)據(jù)包發(fā)送給服務(wù)器端，服務(wù)器端檢查ack是否為K+1，ACK是否為1，如果正確則連接建立成功，客戶端和服務(wù)器端進(jìn)入ESTABLISHED狀態(tài)，完成三次握手，隨后客戶端與服務(wù)器端之間可以開始傳輸數(shù)據(jù)了
第一次揮手： Client端發(fā)起揮手請(qǐng)求，向Server端發(fā)送標(biāo)志位是FIN報(bào)文段，設(shè)置序列號(hào)seq，此時(shí)，Client端進(jìn)入FIN_WAIT_1狀態(tài)，這表示Client端沒有數(shù)據(jù)要發(fā)送給Server端了。
第二次分手：Server端收到了Client端發(fā)送的FIN報(bào)文段，向Client端返回一個(gè)標(biāo)志位是ACK的報(bào)文段，ack設(shè)為seq加1，Client端進(jìn)入FIN_WAIT_2狀態(tài)，Server端告訴Client端，我確認(rèn)并同意你的關(guān)閉請(qǐng)求。
第三次分手： Server端向Client端發(fā)送標(biāo)志位是FIN的報(bào)文段，請(qǐng)求關(guān)閉連接，同時(shí)Client端進(jìn)入LAST_ACK狀態(tài)。
第四次分手 ： Client端收到Server端發(fā)送的FIN報(bào)文段，向Server端發(fā)送標(biāo)志位是ACK的報(bào)文段，然后Client端進(jìn)入TIME_WAIT狀態(tài)。Server端收到Client端的ACK報(bào)文段以后，就關(guān)閉連接。此時(shí)，Client端等待2MSL的時(shí)間后依然沒有收到回復(fù)，則證明Server端已正常關(guān)閉，那好，Client端也可以關(guān)閉連接了。
vite
Vite其核心原理是利用瀏覽器現(xiàn)在已經(jīng)支持ES6的import，碰見import就會(huì)發(fā)送一個(gè)HTTP請(qǐng)求去加載文件。
Vite整個(gè)過程中沒有對(duì)文件進(jìn)行打包編譯，做到了真正的按需加載，所以其運(yùn)行速度比原始的webpack開發(fā)編譯速度快出許多！
webpack：當(dāng)一個(gè)文件變化時(shí)，會(huì)重新構(gòu)建整個(gè)包文件，隨著項(xiàng)目體積的增大，構(gòu)建速度就會(huì)越來越慢
vite：當(dāng)一個(gè)文件變化時(shí)，只需要構(gòu)建相應(yīng)的模塊，無論項(xiàng)目體積多大，更新速度就很快
vite和webpack優(yōu)缺點(diǎn)對(duì)比e
優(yōu)點(diǎn)：
更快的啟動(dòng)時(shí)間和更新速度
更好的開發(fā)體驗(yàn)：自動(dòng)打開瀏覽器、自動(dòng)刷新頁面
配置簡單。不需要過多的配置就可以搭建基本的開發(fā)環(huán)境
更少的依賴。借助原生的ES模塊，避免了過多的額外依賴
缺點(diǎn)：
vite的構(gòu)建技術(shù)主要用于中小型項(xiàng)目，對(duì)于大型項(xiàng)目的支持不如webpack
vite主要是針對(duì)vue3的單頁面應(yīng)用，對(duì)于多頁面應(yīng)用、ssr應(yīng)用、自定義流程應(yīng)用不如webpack
開發(fā)環(huán)境首屏加載慢，懶加載慢
vite由于基于原生ES模塊，不支持commonJs；webpack關(guān)注兼容性，vite關(guān)注瀏覽器端的開發(fā)體驗(yàn)，vite的生態(tài)還不如webpack
ajax
他是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)
1、axios的特點(diǎn)有哪些？
答：
一、Axios 是一個(gè)基于 promise 的 HTTP 庫，支持promise所有的API
二、它可以攔截請(qǐng)求和響應(yīng)
三、它可以轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)，并對(duì)響應(yīng)回來的內(nèi)容自動(dòng)轉(zhuǎn)換成 JSON類型的數(shù)據(jù)
四、安全性更高，客戶端支持防御 XSRF
組件化和模塊化
組件化：把重復(fù)的代碼提取出來合并成為一個(gè)個(gè)組件，組件最重要的就是復(fù)用，位于框架最底層，其他功能都依賴于組件，可供不同功能使用，獨(dú)立性強(qiáng)。組件化更多關(guān)注UI部分，每個(gè)組件有獨(dú)立的HTML、css、js代碼?？梢愿鶕?jù)需要把它放在頁面的任意部位，也可以和其他組件一起形成新的組件。一個(gè)頁面是各個(gè)組件的結(jié)合，可以根據(jù)需要進(jìn)行組裝。
模塊化：分屬同一功能/業(yè)務(wù)的代碼進(jìn)行分裝，讓它成獨(dú)立的模塊，可以獨(dú)立運(yùn)行，以頁面、功能或其他不同粒度劃分程度不同的模塊，位于業(yè)務(wù)框架層，模塊間通過接口調(diào)用，目的是降低模塊間的耦合，由之前的主應(yīng)用與模塊耦合，變?yōu)橹鲬?yīng)用與接口耦合，接口與模塊耦合。側(cè)重功能的封裝，主要是針對(duì)Js代碼，隔離、組織復(fù)制的js代碼，將它封裝成一個(gè)個(gè)具有特定功能的的模塊。模塊可以通過傳遞參數(shù)的不同修改這個(gè)功能的的相關(guān)配置，每個(gè)模塊都是一個(gè)單獨(dú)的作用域，根據(jù)需要調(diào)用。一個(gè)模塊的實(shí)現(xiàn)可以依賴其它模塊。
虛擬dom原理流程
虛擬DOM其實(shí)就是用一個(gè)原生的JS對(duì)象去描述一個(gè)DOM節(jié)點(diǎn)，實(shí)際上它只是對(duì)真實(shí) DOM 的一層抽象。最終可以通過一系列操作使這棵樹映射到真實(shí)環(huán)境上。
模板 ==> 渲染函數(shù) ==> 虛擬DOM樹 ==> 真實(shí)DOM
vuejs通過編譯將模板（template）轉(zhuǎn)成渲染函數(shù)（render），執(zhí)行渲染函數(shù)可以得到一個(gè)虛擬節(jié)點(diǎn)樹
在對(duì) Model 進(jìn)行操作的時(shí)候，會(huì)觸發(fā)對(duì)應(yīng) Dep 中的 Watcher 對(duì)象。Watcher 對(duì)象會(huì)調(diào)用對(duì)應(yīng)的 update 來修改視圖。
瀏覽器內(nèi)核
分為渲染引擎和js引擎
渲染引擎在瀏覽器窗口顯示請(qǐng)求的內(nèi)容
js引擎解析和執(zhí)行js來實(shí)現(xiàn)網(wǎng)頁的動(dòng)態(tài)效果
瀏覽器渲染過程
解析HTML生成DOM樹。
解析CSS生成CSS規(guī)則樹。
解析JS,根據(jù) DOM 樹和 CSS 規(guī)則樹構(gòu)建渲染樹。
將DOM樹與CSSOM規(guī)則樹合并在一起生成渲染樹。
當(dāng)渲染對(duì)象被創(chuàng)建并添加到樹中，它們沒有位置和大小，所以當(dāng)瀏覽器生成渲染樹以后，就會(huì)根據(jù)渲染樹來進(jìn)行布局（也可以叫做回流）。這一階段瀏覽器要做的是計(jì)算出各個(gè)節(jié)點(diǎn)在頁面中確切位置和大小。通常這一行為也被稱為自動(dòng)重排。
遍歷渲染樹開始布局，計(jì)算每個(gè)節(jié)點(diǎn)的位置大小信息。
瀏覽器將所有圖層的數(shù)據(jù)發(fā)送給GPU，GPU將圖層合成并顯示在屏幕上。
回流和重繪
回流：當(dāng)DOM變化影響了元素的幾何信息（大小，位置），瀏覽器需要重新計(jì)算元素的幾何屬性，會(huì)導(dǎo)致瀏覽器重新生成渲染樹，將其放置在正確的位置，這個(gè)過程也叫重排
重繪
當(dāng)重新生成渲染樹后，就要將渲染樹每個(gè)節(jié)點(diǎn)繪制到屏幕，這個(gè)過程叫重繪。
不是所有的動(dòng)作都會(huì)導(dǎo)致回流，例如改變字體顏色，只會(huì)導(dǎo)致重繪。
回流和重繪這兩個(gè)操作代價(jià)非常大，因?yàn)?JavaScript 引擎線程與 GUI 渲染線程是互斥，它們同時(shí)只能一個(gè)在工作，因此重排和重繪會(huì)阻塞主線程。
回流必定會(huì)發(fā)生重繪，重繪不一定會(huì)引發(fā)回流。
回流所需的成本比重繪高得多
防抖和節(jié)流可減少回流重繪的次數(shù)
nextTick
nextTick函數(shù)用于在下一次DOM更新循環(huán)結(jié)束之后執(zhí)行回調(diào)函數(shù)?？梢杂脕泶_保在更新DOM后執(zhí)行某些操作，例如訪問更新后的DOM元或執(zhí)行其他依賴于DOM更新的邏輯。
vue2和vue3的區(qū)別？
vue2里面為什么不能監(jiān)聽數(shù)據(jù)下標(biāo)變化？
2.項(xiàng)目相關(guān)
1.聲明式導(dǎo)航和編程式導(dǎo)航
聲明式導(dǎo)航：以超鏈接方式實(shí)現(xiàn)的頁面跳轉(zhuǎn)，就是聲明式導(dǎo)航
編程式導(dǎo)航：通過javascript提供的api方法實(shí)現(xiàn)頁面的跳轉(zhuǎn)，就是編程式導(dǎo)航
重寫push和replace方法：
原因：push方法返回的是一個(gè)promise對(duì)象，我們知道promise對(duì)象是有成功回調(diào)和失敗回調(diào)的，但是我們并沒有傳入相應(yīng)的回調(diào)就會(huì)出錯(cuò)。所以需要進(jìn)行重寫
push 和 replace 的區(qū)別：
? ? 1）push 會(huì)增加一條歷史記錄
? ? 2）replace 不會(huì)增加歷史記錄，而是替換掉當(dāng)前的歷史記錄
先將原型對(duì)象進(jìn)行保存，如果外界傳入了resolve和rejected回調(diào)，那么就用外部傳入的，否則就傳入一個(gè)空函數(shù)作為回調(diào)，這樣就可以避免沒有傳入回調(diào)時(shí)的報(bào)錯(cuò)。
性能優(yōu)化
圖片懶加載
視區(qū)外圖片先不加載，當(dāng)進(jìn)入視區(qū)或者進(jìn)入視區(qū)之前的某個(gè)位置加載
插件：vue-lazyload
路由懶加載
把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問的時(shí)候才加載對(duì)應(yīng)組件，本質(zhì)就是Vue 的異步組件在路由組件上的應(yīng)用文章來源：http://www.zghlxwxcb.cn/news/detail-616912.html
http請(qǐng)求方式
get（獲取數(shù)據(jù)），post（增加數(shù)據(jù)），put（修改數(shù)據(jù)），delete（刪除數(shù)據(jù)），head，options，trace，connect文章來源地址http://www.zghlxwxcb.cn/news/detail-616912.html
到了這里，關(guān)于2023秋招面試題持續(xù)更新中。。。的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
