技術(shù)棧面試題及答案技術(shù)棧面試題一、前端技術(shù)棧1.HTML部分請簡述HTML5中新增的語義化標(biāo)簽有哪些，并說明它們的作用。如何在HTML中嵌入視頻和音頻？2.CSS部分請解釋CSS盒模型的組成部分。如何實(shí)現(xiàn)元素的水平和垂直居中？3.JavaScript部分什么是閉包？請舉例說明閉包的應(yīng)用場景。簡述JavaScript中異步編程的幾種方式。二、后端技術(shù)棧1.Node.js部分簡述Node.js的事件循環(huán)機(jī)制。如何在Node.js中創(chuàng)建一個簡單的HTTP服務(wù)器？2.Python（Flask框架）部分請簡述Flask框架的基本工作原理。如何在Flask中實(shí)現(xiàn)路由？3.數(shù)據(jù)庫（MySQL）部分請寫出創(chuàng)建一個簡單的用戶表的SQL語句，表中包含id、username、password字段。如何優(yōu)化MySQL數(shù)據(jù)庫的查詢性能？三、全棧技術(shù)棧1.前后端交互部分請簡述AJAX的工作原理。如何處理跨域請求？2.項(xiàng)目部署部分簡述將一個全棧項(xiàng)目部署到服務(wù)器的基本步驟。如何使用Nginx作為反向代理服務(wù)器？答案一、前端技術(shù)棧1.HTML部分HTML5中新增的語義化標(biāo)簽有`<header>`、`<nav>`、`<article>`、`<section>`、`<aside>`、`<footer>`等。`<header>`：通常用于頁面或區(qū)域的頭部，包含網(wǎng)站標(biāo)題、導(dǎo)航等信息。`<nav>`：用于定義導(dǎo)航鏈接的部分。`<article>`：表示一個獨(dú)立的、完整的內(nèi)容塊，如博客文章、新聞報道等。`<section>`：用于對頁面進(jìn)行分塊，通常包含一個主題的內(nèi)容。`<aside>`：用于定義與頁面主要內(nèi)容相關(guān)的側(cè)邊欄信息。`<footer>`：通常用于頁面或區(qū)域的底部，包含版權(quán)信息、聯(lián)系方式等。在HTML中嵌入視頻可以使用`<video>`標(biāo)簽，示例代碼如下：```html<videowidth="320"height="240"controls><sourcesrc="movie.mp4"type="video/mp4"><sourcesrc="movie.ogg"type="video/ogg">您的瀏覽器不支持視頻播放。</video>```嵌入音頻可以使用`<audio>`標(biāo)簽，示例代碼如下：```html<audiocontrols><sourcesrc="audio.mp3"type="audio/mpeg"><sourcesrc="audio.ogg"type="audio/ogg">您的瀏覽器不支持音頻播放。</audio>```2.CSS部分CSS盒模型由內(nèi)容區(qū)（content）、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。內(nèi)容區(qū)是元素實(shí)際顯示的內(nèi)容，內(nèi)邊距是內(nèi)容區(qū)與邊框之間的距離，邊框圍繞在內(nèi)邊距之外，外邊距是元素與其他元素之間的距離。實(shí)現(xiàn)元素水平和垂直居中的方法有多種，以下是幾種常見的方法：對于行內(nèi)元素：可以使用`text-align:center`和`line-height`等于元素高度來實(shí)現(xiàn)水平和垂直居中。對于塊級元素：使用`flexbox`布局：```css.parent{display:flex;justify-content:center;align-items:center;}.child{/子元素樣式/}```使用絕對定位和負(fù)邊距：```css.parent{position:relative;}.child{position:absolute;top:50%;left:50%;margin-top:-50px;/元素高度的一半/margin-left:-50px;/元素寬度的一半/}```3.JavaScript部分閉包是指有權(quán)訪問另一個函數(shù)作用域中變量的函數(shù)。簡單來說，即使該函數(shù)已經(jīng)執(zhí)行完畢，其作用域內(nèi)的變量也不會被銷毀，而是會被閉包引用。閉包的應(yīng)用場景有很多，例如實(shí)現(xiàn)私有變量和方法：```javascriptfunctionCounter(){letcount=0;return{increment:function(){count++;returncount;},decrement:function(){count--;returncount;}};}letcounter=Counter();console.log(counter.increment());//輸出1console.log(counter.decrement());//輸出0```JavaScript中異步編程的方式主要有以下幾種：回調(diào)函數(shù)：將一個函數(shù)作為參數(shù)傳遞給另一個函數(shù)，在異步操作完成后調(diào)用該回調(diào)函數(shù)。Promise：是一種處理異步操作的對象，它有三種狀態(tài)：pending（進(jìn)行中）、fulfilled（已成功）和rejected（已失?。？梢允褂胉then()`方法處理成功的結(jié)果，使用`catch()`方法處理失敗的結(jié)果。async/await：是基于Promise的語法糖，使用`async`關(guān)鍵字定義異步函數(shù)，使用`await`關(guān)鍵字等待Promise的結(jié)果。二、后端技術(shù)棧1.Node.js部分Node.js的事件循環(huán)機(jī)制是其處理異步I/O操作的核心。事件循環(huán)主要分為幾個階段：定時器階段（Timers）：執(zhí)行`setTimeout()`和`setInterval()`的回調(diào)函數(shù)。I/O回調(diào)階段（I/Ocallbacks）：處理一些系統(tǒng)級的回調(diào)，如TCP連接錯誤等?？臻e、預(yù)備階段（Idle,prepare）：僅在內(nèi)部使用。輪詢階段（Poll）：檢索新的I/O事件，執(zhí)行I/O回調(diào)。如果沒有定時器到期，事件循環(huán)會在這個階段停留。檢查階段（Check）：執(zhí)行`setImmediate()`的回調(diào)函數(shù)。關(guān)閉回調(diào)階段（Closecallbacks）：執(zhí)行一些關(guān)閉操作的回調(diào)，如`socket.on('close',...)`。在Node.js中創(chuàng)建一個簡單的HTTP服務(wù)器的示例代碼如下：```javascriptconsthttp=require('http');constserver=http.createServer((req,res)=>{res.statusCode=200;res.setHeader('Content-Type','text/plain');res.end('Hello,World!\n');});server.listen(3000,'',()=>{console.log('服務(wù)器運(yùn)行在:3000/');});```2.Python（Flask框架）部分Flask框架的基本工作原理是基于WSGI（WebServerGatewayInterface）協(xié)議。當(dāng)有客戶端請求到達(dá)時，Web服務(wù)器（如Gunicorn、uWSGI等）將請求封裝成符合WSGI規(guī)范的對象，然后將其傳遞給Flask應(yīng)用。Flask應(yīng)用根據(jù)請求的URL匹配相應(yīng)的路由處理函數(shù)，執(zhí)行處理函數(shù)并返回響應(yīng)，最后由Web服務(wù)器將響應(yīng)發(fā)送給客戶端。在Flask中實(shí)現(xiàn)路由可以使用`@app.route()`裝飾器，示例代碼如下：```pythonfromflaskimportFlaskapp=Flask(__name__)@app.route('/')defindex():return'Hello,World!'@app.route('/about')defabout():return'Thisistheaboutpage.'if__name__=='__main__':app.run(debug=True)```3.數(shù)據(jù)庫（MySQL）部分創(chuàng)建一個簡單的用戶表的SQL語句如下：```sqlCREATETABLEusers(idINTAUTO_INCREMENTPRIMARYKEY,usernameVARCHAR(255)NOTNULL,passwordVARCHAR(255)NOTNULL);```優(yōu)化MySQL數(shù)據(jù)庫的查詢性能的方法有很多，以下是一些常見的方法：創(chuàng)建合適的索引：根據(jù)查詢條件創(chuàng)建索引可以加快查詢速度。優(yōu)化查詢語句：避免使用`SELECT`，盡量只查詢需要的字段；使用`EXPLAIN`分析查詢語句，找出性能瓶頸。分區(qū)表：對于大表，可以將表按照一定的規(guī)則進(jìn)行分區(qū)，提高查詢效率。定期清理無用數(shù)據(jù)：刪除不再使用的數(shù)據(jù)可以減少數(shù)據(jù)庫的負(fù)擔(dān)。三、全棧技術(shù)棧1.前后端交互部分AJAX（AsynchronousJavaScriptandXML）的工作原理是通過瀏覽器提供的`XMLHttpRequest`對象（現(xiàn)代瀏覽器也可以使用`fetchAPI`）在不刷新整個頁面的情況下與服務(wù)器進(jìn)行異步通信。具體步驟如下：創(chuàng)建`XMLHttpRequest`對象。打開一個與服務(wù)器的連接。發(fā)送請求。監(jiān)聽`XMLHttpRequest`對象的狀態(tài)變化，當(dāng)狀態(tài)為`4`且狀態(tài)碼為`200`時，表示請求成功，獲取服務(wù)器返回的數(shù)據(jù)。更新頁面的部分內(nèi)容。處理跨域請求的方法有以下幾種：JSONP（JSONwithPadding）：利用`<script>`標(biāo)簽的`src`屬性可以跨域的特點(diǎn)，通過動態(tài)創(chuàng)建`<script>`標(biāo)簽來實(shí)現(xiàn)跨域請求。CORS（Cross-OriginResourceSharing）：是一種現(xiàn)代的跨域解決方案，服務(wù)器端需要設(shè)置響應(yīng)頭`Access-Control-Allow-Origin`來允許指定的域名進(jìn)行跨域請求。代理服務(wù)器：在同源的服務(wù)器上設(shè)置代理，將客戶端的請求轉(zhuǎn)發(fā)到目標(biāo)服務(wù)器，并將響應(yīng)返回給客戶端。2.項(xiàng)目部署部分將一個全棧項(xiàng)目部署到服務(wù)器的基本步驟如下：服務(wù)器環(huán)境搭建：選擇合適的服務(wù)器（如阿里云、騰訊云等），安裝操作系統(tǒng)（如Ubuntu），安裝必要的軟件（如Node.js、Python、MySQL等）。代碼上傳：將項(xiàng)目代碼上傳到服務(wù)器，可以使用`git`進(jìn)行代碼管理。依賴安裝：在服務(wù)器上安裝項(xiàng)目所需的依賴，如`npminstall`或`pipinstall`。配置環(huán)境變量：設(shè)置數(shù)據(jù)庫連接信息、API密鑰等環(huán)境變量。啟動項(xiàng)目：啟動后端服務(wù)器和前端開發(fā)服務(wù)器（如果需要）。使用Nginx或Apache作為反向代理服務(wù)器：將客戶端的請求轉(zhuǎn)發(fā)到相應(yīng)的應(yīng)用程序。使用Nginx作為反向代理服務(wù)器的步驟如下：安裝Nginx：在服務(wù)器上安裝Nginx。配置Nginx：編輯Nginx的配置文件（通常位于`/etc/nginx/sites-available/`目錄下），添加以下配置：```nginxserver{listen80;server_nameyour_;