HTML/CSS 部分

1. 什么是盒模型？標準盒模型和IE盒模型的區(qū)別是什么？

答案： 盒模型是CSS中用于布局的基本概念，每個元素都被表示為一個矩形盒子，由內(nèi)容(content)、內(nèi)邊距(padding)、邊框(border)和外邊距(margin)組成。

區(qū)別：

• 標準盒模型(W3C盒子模型)：width和height只包含內(nèi)容(content)
• IE盒模型(怪異模式盒子模型)：width和height包含內(nèi)容(content)、內(nèi)邊距(padding)和邊框(border)

可以通過box-sizing屬性切換：

/* 標準盒模型 */
box-sizing: content-box;

/* IE盒模型 */
box-sizing: border-box;

2. CSS選擇器優(yōu)先級如何計算？

答案： CSS選擇器優(yōu)先級從高到低：

1. !important
2. 內(nèi)聯(lián)樣式(style="")
3. ID選擇器(#id)
4. 類選擇器(.class)、屬性選擇器([type="text"])、偽類(:hover)
5. 元素選擇器(div)、偽元素(::before)
6. 通配符(*)、關(guān)系選擇器(>, +, ~)

計算規(guī)則：

• ID選擇器：100
• 類/屬性/偽類：10
• 元素/偽元素：1
• 相加比較，值大的優(yōu)先級高

3. BFC是什么？如何創(chuàng)建BFC？

答案： BFC(Block Formatting Context)塊級格式化上下文，是Web頁面的可視化CSS渲染的一部分，是一個獨立的渲染區(qū)域。

創(chuàng)建BFC的方法：

• float不為none
• position為absolute或fixed
• display為inline-block、table-cell、table-caption、flex、inline-flex
• overflow不為visible

BFC特性：

1. 內(nèi)部盒子垂直排列
2. margin會重疊在同一個BFC中
3. BFC區(qū)域不會與float box重疊
4. BFC是獨立容器，外部不影響內(nèi)部

JavaScript部分

4. JavaScript中的事件循環(huán)機制是怎樣的？

答案： JavaScript是單線程語言，通過事件循環(huán)機制實現(xiàn)異步。事件循環(huán)由以下部分組成：

1. 調(diào)用棧(Call Stack)：執(zhí)行同步代碼的地方
2. 任務隊列(Task Queue)：
   • 宏任務(macrotask)：script整體代碼、setTimeout、setInterval、I/O、UI渲染等
   • 微任務(microtask)：Promise.then/catch/finally、MutationObserver等

執(zhí)行順序：

1. 執(zhí)行同步代碼（宏任務）
2. 執(zhí)行過程中遇到異步任務：
   • 微任務放入微任務隊列
   • 宏任務放入宏任務隊列
3. 同步代碼執(zhí)行完畢，檢查微任務隊列并全部執(zhí)行
4. UI渲染（如果需要）
5. 取出一個宏任務執(zhí)行，重復上述過程

5. ES6中l(wèi)et/const與var的區(qū)別？

答案：

6. Promise的原理是什么？手寫一個簡單的Promise實現(xiàn)。

答案： Promise是一種異步編程解決方案，主要解決回調(diào)地獄問題。它有三種狀態(tài)：pending、fulfilled、rejected。

簡單實現(xiàn)：

class MyPromise {
  constructor(executor) {
    this.state = 'pending';
    this.value = undefined;
    this.reason = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];
    
    const resolve = (value) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.onFulfilledCallbacks.forEach(fn => fn());
      }
    };
    
    const reject = (reason) => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        this.onRejectedCallbacks.forEach(fn => fn());
      }
    };
    
    try {
      executor(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }
  
  then(onFulfilled, onRejected) {
    if (this.state === 'fulfilled') {
      onFulfilled(this.value);
    }
    
    if (this.state === 'rejected') {
      onRejected(this.reason);
    }
    
    if (this.state === 'pending') {
      this.onFulfilledCallbacks.push(() => onFulfilled(this.value));
      this.onRejectedCallbacks.push(() => onRejected(this.reason));
    }
  }
}

React/Vue框架部分

7.React中setState是同步還是異步的？

答案： 在React中，setState的行為表現(xiàn)有時"異步"，有時"同步"：

1.大部分情況下表現(xiàn)為異步(批量更新優(yōu)化):

• React合成事件處理函數(shù)中(setTimeout/setInterval/Promise回調(diào)等原生事件外)
• React生命周期函數(shù)中

在這些情況下React會將多個setState合并為一個更新以提高性能。

2.某些情況下表現(xiàn)為同步:

• setTimeout/setInterval回調(diào)中
• DOM原生事件處理函數(shù)中
• Promise.then等異步代碼中

React18后所有情況都默認批量處理(auto batching)，如需強制同步可使用flushSync。

原理原因: React通過isBatchingUpdates標志控制是否批量更新,合成事件和生命周期會開啟此標志。

8.Vue的響應式原理是怎樣的?

答案: Vue2.x使用Object.defineProperty,Vue3使用Proxy實現(xiàn)響應式:

Vue2實現(xiàn)原理: 1.數(shù)據(jù)劫持:通過Object.defineProperty對data對象每個屬性添加getter/setter追蹤變化。

Object.defineProperty(obj, key, { 
 get() { //依賴收集 },
 set(newVal) { //觸發(fā)更新 } 
})

2.依賴收集:在getter中將觀察者Watcher實例添加到Dep訂閱器中。 3.派發(fā)更新:setter被觸發(fā)時通知Dep中的所有Watcher重新計算并更新視圖。 缺點:無法檢測對象屬性的添加刪除,數(shù)組變動需特殊處理。

Vue3使用Proxy改進:

new Proxy(data, { 
 get(target, key){},
 set(target, key, value){},
 deleteProperty(target, key){}
})

優(yōu)勢:可直接監(jiān)聽對象/數(shù)組的各種變化;無需遞歸遍歷整個對象初始化。

##性能優(yōu)化相關(guān)

9.Webpack有哪些常見的性能優(yōu)化手段?

構(gòu)建速度優(yōu)化:

1.縮小文件搜索范圍

resolve:{ modules:[path.resolve(__dirname,'node_modules')] },
module:{ noParse:/jquery|lodash/ } //忽略未模塊化庫的解析  

2.緩存loader結(jié)果(cache-loader/babel-loader?cacheDirectory=true)

3.多進程構(gòu)建(thread-loader/happyPack)

4.DllPlugin預編譯不變模塊

5.合理使用sourceMap(開發(fā)環(huán)境cheap-module-eval-source-map)

打包體積優(yōu)化:

1.Tree Shaking(ES6模塊+production模式+sideEffects配置)

2.Code Splitting:

optimization:{ splitChunks:{ chunks:'all' } },
entry:{ main:'./src/main.js', vendor:['lodash'] }  

3.Scope Hoisting(ModuleConcatenationPlugin)

4.UglifyJsPlugin壓縮混淆代碼

5.Gzip壓縮(compression-webpack-plugin)

6.CDN引入外部資源(externals)

7.PurgeCSS移除無用CSS

8.OptimizeCSSAssetsPlugin壓縮CSS

9.ImageMinimizerPlugin壓縮圖片

10.babel按需加載polyfill

算法與編程題

10.[編程題]手寫防抖和節(jié)流函數(shù)

防抖(debounce):高頻觸發(fā)時只在停止觸發(fā)后執(zhí)行一次

function debounce(fn, delay){
 let timer=null;
 return function(...args){
   clearTimeout(timer);  
   timer=setTimeout(()=>fn.apply(this,args),delay);
 }
}

節(jié)流(throttle):高頻觸發(fā)時每隔一段時間執(zhí)行一次

function throttle(fn, interval){
 let lastTime=0;  
 return function(...args){
   const now=Date.now();
   if(now-lastTime>=interval){
     fn.apply(this,args);  
     lastTime=now;  
   }  
 } 
}

//定時器版本節(jié)流:
function throttle(fn,delay){  
 let timer=null;   
 return function(...args){   
   if(!timer){     
     timer=setTimeout(()=>{      
       fn.apply(this,args);       
       timer=null;      
     },delay);     
   }   
 };   
}   

HTTP與瀏覽器相關(guān)

11.HTTPS的工作原理是什么?

HTTPS=HTTP+TLS/SSL加密層工作流程:

1.Client發(fā)送支持的加密算法列表+隨機數(shù)A給Server

2.Server選擇加密算法+發(fā)送數(shù)字證書+隨機數(shù)B給Client

3.Client驗證證書有效性(頒發(fā)機構(gòu)/過期時間/域名匹配),生成隨機數(shù)C并用證書公鑰加密發(fā)送給Server

4.Server用私鑰解密獲取隨機數(shù)C

5.Client和Server都用ABC三個隨機數(shù)生成對稱加密密鑰(session key)

6.HTTP通信開始使用該密鑰加密數(shù)據(jù)

關(guān)鍵點: -CA機構(gòu)驗證服務器身份防止中間人攻擊
-非對稱加密交換對稱密鑰提高安全性又保證性能
-TLS握手階段采用非對稱加密通信階段采用對稱加密

安全特性: 機密性(對稱加密)+完整性(MAC校驗)+身份認證(X509證書鏈)

總結(jié)

到此這篇關(guān)于2026前端面試題及答案總結(jié)大全的文章就介紹到這了,更多相關(guān)2026前端面試題及答案內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論