前端面試必備知識(shí)

前端面試必備知識(shí)匯報(bào)人：<XXX>2024-01-04CATALOGUE目錄HTML/CSS基礎(chǔ)JavaScript基礎(chǔ)前端框架與庫(kù)前端工程化前端性能優(yōu)化01HTML/CSS基礎(chǔ)<h1>到<h6>，用于定義不同級(jí)別的標(biāo)題，<h1>最大，<h6>最小。標(biāo)題標(biāo)簽HTML基礎(chǔ)標(biāo)簽<p>，用于定義文本段落。段落標(biāo)簽<a>，用于創(chuàng)建超鏈接。鏈接標(biāo)簽<ul>、<ol>和<li>，分別用于創(chuàng)建無(wú)序列表、有序列表和列表項(xiàng)。列表標(biāo)簽<img>，用于插入圖片。圖片標(biāo)簽<form>、<input>、<textarea>等，用于創(chuàng)建用戶輸入表單。表單標(biāo)簽CSS選擇器與布局ID選擇器偽類選擇器以`#`開頭，如`#myId`。用于選擇特定狀態(tài)的元素，如`:hover`、`:active`等。類選擇器元素選擇器布局方式以`.`開頭，如`.myClass`。直接選擇HTML元素，如`p`、`div`等。如Flexbox、Grid等，用于控制頁(yè)面元素的排列和對(duì)齊。樣式屬性如顏色、字體、背景等。盒模型包括內(nèi)容、內(nèi)邊距、邊框和外邊距，是CSS布局的基礎(chǔ)。盒模型計(jì)算理解如何計(jì)算元素的總寬度和總高度，以及如何影響布局。CSS樣式與盒模型02JavaScript基礎(chǔ)數(shù)據(jù)類型與變量數(shù)據(jù)類型JavaScript中的數(shù)據(jù)類型包括Number、String、Boolean、Object、Null、Undefined等。了解每種數(shù)據(jù)類型的特性和使用場(chǎng)景是必要的。變量變量是存儲(chǔ)數(shù)據(jù)的容器，通過var、let或const聲明。理解變量的作用域和生命周期，以及如何正確地聲明和初始化變量是關(guān)鍵。函數(shù)是執(zhí)行特定任務(wù)的代碼塊，可以接受輸入?yún)?shù)并返回結(jié)果。理解函數(shù)的作用和如何創(chuàng)建函數(shù)（如聲明方式、參數(shù)傳遞等）是面試中的常見問題。函數(shù)作用域決定了變量的生命周期和可見性。理解函數(shù)作用域、塊級(jí)作用域和全局作用域的概念，以及如何避免常見的作用域問題是重要的。作用域函數(shù)與作用域DOM操作DOM（文檔對(duì)象模型）是網(wǎng)頁(yè)內(nèi)容的編程接口。了解如何使用JavaScript操作DOM元素（如獲取、創(chuàng)建、修改和刪除元素）是前端開發(fā)的基本技能。事件事件是用戶與網(wǎng)頁(yè)交互的觸發(fā)機(jī)制。理解事件處理程序的概念，以及如何使用JavaScript監(jiān)聽和響應(yīng)各種事件（如點(diǎn)擊、鍵盤輸入等）是面試中的常見問題。DOM操作與事件03前端框架與庫(kù)React基礎(chǔ)React是Facebook開發(fā)的一個(gè)用于構(gòu)建用戶界面的JavaScript庫(kù)，具有高效、靈活和可擴(kuò)展的特點(diǎn)。總結(jié)詞React的核心思想是組件化，通過將UI拆分成獨(dú)立的、可復(fù)用的組件，使得代碼更加模塊化和可維護(hù)。React使用虛擬DOM來(lái)提高性能，通過比較虛擬DOM和實(shí)際DOM的差異，只更新需要改變的部分。此外，React還提供了狀態(tài)管理、路由、國(guó)際化等一系列功能。詳細(xì)描述VSVue是一個(gè)漸進(jìn)式的JavaScript框架，用于構(gòu)建用戶界面。它具有簡(jiǎn)單易學(xué)、靈活性和高效的特點(diǎn)。詳細(xì)描述Vue的核心特點(diǎn)是數(shù)據(jù)驅(qū)動(dòng)和組件化。通過數(shù)據(jù)綁定，Vue能夠自動(dòng)更新UI。組件化使得代碼更加模塊化，方便復(fù)用和維護(hù)。此外，Vue還提供了路由、狀態(tài)管理、插件化等一系列功能。總結(jié)詞Vue基礎(chǔ)Angular是由Google維護(hù)的開源JavaScript框架，主要用于構(gòu)建單頁(yè)應(yīng)用程序。它具有強(qiáng)大的依賴注入、可測(cè)試性和模塊化等特點(diǎn)。Angular基于TypeScript，提供了完整的應(yīng)用程序開發(fā)框架，包括控制器、服務(wù)、指令、管道等。Angular通過依賴注入實(shí)現(xiàn)模塊間的解耦，使得代碼更加模塊化和可測(cè)試。此外，Angular還提供了路由、狀態(tài)管理、國(guó)際化等一系列功能?？偨Y(jié)詞詳細(xì)描述Angular基礎(chǔ)04前端工程化Webpack介紹Webpack是一個(gè)強(qiáng)大的模塊打包工具，可以將各種資源（如JavaScript、CSS、圖片等）打包成瀏覽器可以識(shí)別的格式。加載器Webpack通過加載器將各種資源轉(zhuǎn)換為模塊，常見的加載器有babel-loader、css-loader等。配置文件Webpack的配置文件通常為webpack.config.js，其中包含了打包過程的各種設(shè)置。插件Webpack插件可以完成各種任務(wù)，如壓縮、熱更新等，如uglifyjs-webpack-plugin、html-webpack-plugin等。Webpack配置與使用Babel介紹Babel是一個(gè)JavaScript編譯器，可以將ES6+的代碼轉(zhuǎn)譯為ES5的代碼，以在舊版本瀏覽器上運(yùn)行。配置文件Babel的配置文件通常為.babelrc或babel.config.js，其中包含了轉(zhuǎn)譯過程中的各種設(shè)置。預(yù)設(shè)和插件Babel通過預(yù)設(shè)和插件來(lái)擴(kuò)展其功能，如@babel/preset-env、@babel/plugin-transform-runtime等。Babel轉(zhuǎn)譯與插件Git介紹Git是一個(gè)分布式版本控制系統(tǒng)，用于跟蹤和管理代碼的變更。基本操作了解Git的基本操作，如commit、push、pull、branch等。分支管理熟悉Git的分支管理，如master、develop等分支的使用和切換。沖突解決了解如何解決Git中的沖突，以及如何進(jìn)行代碼合并。Git版本控制05前端性能優(yōu)化根據(jù)需求選擇合適的圖片格式，如JPEG、PNG、GIF等，以減小文件大小。圖片格式選擇圖片壓縮圖片懶加載使用工具如TinyPNG或JPEGmini等對(duì)圖片進(jìn)行壓縮，以減小文件大小并保持質(zhì)量。對(duì)于非首屏顯示的圖片，使用懶加載技術(shù)，在需要時(shí)才加載圖片，提高頁(yè)面加載速度。030201圖片優(yōu)化當(dāng)用戶滾動(dòng)到圖片位置時(shí)才加載圖片，避免首屏加載時(shí)間過長(zhǎng)。懶加載將非首屏內(nèi)容（如彈窗、下拉菜單等）異步加載，提高頁(yè)面加載速度。異步加載懶加載與異步加載CDN加速使用CDN（內(nèi)