預編譯和css

① hbuild 預編譯怎麼scss自動生成css

最新版可以直接編譯的
在scss文件或者less文件中直接右鍵在跳出的菜單里選擇編譯選項就會自動生成這個編譯後的文件

② 2024年面試必問的Web前端面試八股文及答案整理！純干貨、超詳細

2024年Web前端面試常見問題及答案概覽：

JavaScript部分： 函數式編程：理解其概念、優缺點，並能討論在Web開發中的應用場景。 Web安全：了解常見的Web攻擊方式及防禦策略。 內存泄漏：掌握內存泄漏的原因及檢測方法，知道如何避免。 繼承實現：熟悉JavaScript中的繼承機制，包括原型鏈繼承和類繼承。 數字精度丟失：理解浮點數精度丟失的原因，並能給出解決方案。 尾遞歸：理解尾遞歸的概念，知道其應用場景及優化方法。

CSS部分： 像素相關：了解設備像素、CSS像素、設備獨立像素、DPR、PPI的區別。 單位換算：熟悉em、px、rem、vh、vw等單位的區別和使用場景。 小於12px文字處理：知道Chrome支持小於12px文字的方法及其區別。 迴流與重繪：理解迴流與重繪的概念，知道其觸發場景及優化方法。 CSS預編譯：了解Sass、Less等CSS預編譯語言的特點和區別。 性能優化：掌握CSS性能優化的常用方法。

ES6部分： Promise：理解Promise的概念、使用場景及鏈式調用。 Mole：熟悉ES6模塊化的語法及與CommonJS的區別。 Generator：了解Generator函數的特點及在非同步編程中的應用。 Decorator：掌握Decorator的概念及在類裝飾中的應用。 Set、Map：熟悉Set、Map數據結構的特點及使用場景。 Proxy：理解Proxy的作用及在數據劫持中的應用。

Vue2/Vue3部分： keepalive：理解其作用及在SPA中的應用場景。 SPA優缺點：了解SPA的優缺點及實現方法。 首屏載入優化：掌握提高Vue應用首屏載入速度的方法。 SSR：了解SSR的原理、實現方法及與CSR的區別。 Vue3新特性：熟悉Vue3的Composition API及與Vue2的區別。

React部分： React Router：理解其原理及在React應用中的使用。 Rex：掌握Rex的使用方法及中間件的應用。 immutable：了解immutable的概念及在React中的應用。 服務端渲染：理解React服務端渲染的原理及實現方法。

Node.js部分： 中間件：理解Node.js中間件的概念及封裝方法。 事件循環：掌握Node.js事件循環的機制及性能優化方法。 文件上傳：了解文件上傳的實現思路及安全性考慮。 JWT鑒權：掌握JWT鑒權機制的實現思路及應用場景。

其他技術棧： 小程序：了解小程序的登錄流程、路由跳轉、發布及支付流程等。 HTTP：掌握HTTP/HTTPS協議的區別、CDN原理及WebSocket應用場景等。 Typescript：熟悉Typescript與JavaScript的區別及在React/Vue項目中的應用。 Webpack：了解Webpack的Loader和Plugin機制及性能優化方法。 Git：掌握Git的基本操作及沖突解決方法等。 Linux：熟悉Linux常用命令及進程管理、用戶管理等基本概念。 演算法：了解常見排序演算法及分而治之、動態規劃等演算法思想。 設計模式：掌握常見設計模式的概念及應用場景，如工廠模式、單例模式等。

請注意，以上僅為面試常見問題及答案的概覽，具體面試時還需根據崗位需求和個人經驗進行靈活應對。

③ WEB前端目前的主要學習內容是什麼

這里根據行業變化和企業用人需求整理了一份web前端學習路線，主要學習以下內容，希望可以幫到你~

第一階段：專業核心基礎

階段目標：

1. 熟練掌握HTML5、CSS3、Less、Sass、響應書布局、移動端開發。

2. 熟練運用HTML+CSS特性完成頁面布局。

4. 熟練應用CSS3技術，動畫、彈性盒模型設計。

5. 熟練完成移動端頁面的設計。

6. 熟練運用所學知識仿製任意Web網站。

7. 能綜合運用所學知識完成網頁設計實戰。

知識點：

1、Web前端開發環境，HTML常用標簽，表單元素，Table布局，CSS樣式表，DIV+CSS布局。熟練運用HTML和CSS樣式屬性完成頁面的布局和美化，能夠仿製任意網站的前端頁面實現。

2、CSS3選擇器、偽類、過渡、變換、動畫、字體圖標、彈性盒模型、響應式布局、移動端。熟練運用CSS3來開發網頁、熟練開發移動端，整理網頁開發技巧。

3、預編譯css技術：less、sass基礎知識、以及插件的運用、BootStrap源碼分析。能夠熟練使用 less、sass完成項目開發，深入了解BootStrap。

4、使用HTML、CSS、LESS、SASS等技術完成網頁項目實戰。通過項目掌握第一階段html、css的內容、完成PC端頁面設計和移動端頁面設計。

第二階段：Web後台技術

階段目標:

1. 了解JavaScript的發展歷史、掌握Node環境搭建及npm使用。

2. 熟練掌握JavaScript的基本數據類型和變數的概念。

3. 熟練掌握JavaScript中的運算符使用。

4. 深入理解分之結構語句和循環語句。

5. 熟練使用數組來完成各種練習。

6.熟悉es6的語法、熟練掌握JavaScript面向對象編程。

7.DOM和BOM實戰練習和H5新特性和協議的學習。

知識點：

1、軟體開發流程、演算法、變數、數據類型、分之語句、循環語句、數組和函數。熟練運用JavaScript的知識完成各種練習。

2、JavaScript面向對象基礎、異常處理機制、常見對象api，js的兼容性、ES6新特性。熟練掌握JavaScript面向對象的開發以及掌握es6中的重要內容。

3、BOM操作和DOM操作。熟練使用BOM的各種對象、熟練操作DOM的對象。

4、h5相關api、canvas、ajax、數據模擬、touch事件、mockjs。熟練使用所學知識來完成網站項目開發。

第三階段：資料庫和框架實戰

階段目標：

1. 綜合運用Web前端技術進行頁面布局與美化。

2. 綜合運用Web前端開發框架進行Web系統開發。

3. 熟練掌握Mysql、Mongodb資料庫的發開。

4. 熟練掌握vue.js、webpack、elementui等前端框技術。

5. 熟練運用Node.js開發後台應用程序。

6. 對Restful，Ajax，JSON，開發過程有深入的理解,掌握git的基本技能。

知識點：

1、資料庫知識，範式，MySQL配置，命令，建庫建表，數據的增刪改查，mongodb資料庫。深入理解資料庫管理系統通用知識及MySQL資料庫的使用與管理，為Node.js後台開發打下堅實基礎。

2、模塊系統，函數，路由，全局對象，文件系統，請求處理，Web模塊，Express框架，MySQL資料庫處理，RestfulAPI，文件上傳等。熟練運用Node.js運行環境和後台開發框架完成Web系統的後台開發。

3、vue的組件、生命周期、路由、組件、前端工程化、webpack、elementui框架。Vue.js框架的基本使用有清晰的理解，能夠運用Vue.js完成基礎前端開發、熟練運用Vue.js框架的高級功能完成Web前端開發和組件開發，對MVVM模式有深刻理解。

4、需求分析，資料庫設計，後台開發，使用vue、node完成pc和移動端整站開發。於Node.js+Vue.js+Webpack+Mysql+Mongodb+Git，實現整站項目完整功能並上線發布。

第四階段：移動端和微信實戰

階段目標：

1.熟練掌握React.js框架，熟練使用React.js完成開發。

2.掌握移動端開發原理，理解原生開發和混合開發。

3.熟練使用react-native和Flutter框架完成移動端開發。

4.掌握微信小程序以及了解支付寶小程序的開發。

5.完成大型電商項目開發。

知識點：

1、React面向組件編程、表單數據、組件通信、監聽、聲明周期、路由、Rex基本概念。練使用react完成項目開發、掌握Rex中的非同步解決方案Saga。

2、react-native、開發工具、視圖與渲染、api操作、Flutter環境搭建、路由、ListView組件、網路請求、打包。練掌握react-native和Flutter框架，並分別使用react-native和Flutter分別能開發移動端項目。

3、微信小程序基本介紹、開發工具、視圖與渲染、api操作、支付寶小程序的入門和api學習。掌握微信小程序開發了解支付寶小程序。

4、大型購物網站實戰，整個項目前後端分離開發；整個項目分為四部分：PC端網頁、移動端APP、小程序、後台管理。團隊協作開發，使用git進行版本控制。目期間可以擴展Three.js 、TypeScript。

④ 讓你說一說Sass、Less 的區別是什麼，你知道嗎

在CSS預處理器領域，Sass和Less是兩種廣為人知的工具。它們都旨在提升CSS的可重用性和層次結構，通過引入混入、變數、循環、函數等特性。盡管功能相似，但Sass和Less在實現方式上存在細微差別，這主要體現在編譯環境、變數符號、條件語句、代碼風格和繼承方式上。

Sass在伺服器端處理CSS預編譯，通常通過Dart-Sass或Node-Sass工具實現。例如，使用Dart-Sass編譯一個名為「style.scss」的Sass文件，可以生成一個名為「style.css」的CSS文件。

相比之下，Less則在客戶端使用JavaScript編譯器Less.js，實現將Less文件編譯為CSS。在HTML文件中引入Less文件「style.less」時，可以利用相關代碼。

在變數符號方面，Sass使用「$」表示變數，而Less則採用「@」。以定義變數為例，Sass中會以「$」開頭，Less則以「@」開頭。

Sass支持條件語句，如if/else和循環等，實現邏輯控制。而Less雖無直接條件語句，但通過JavaScript表達式實現類似效果。在代碼風格上，盡管Sass和Less相似，但存在細微差別，例如變數聲明方式和嵌套規則的父元素選擇器。

在混入定義方面，Sass使用「@mixin」聲明，而Less使用「.mixin」方法。此外，Sass和Less的繼承方式也有所不同，Sass通過「@extend」實現，Less則使用「:extend()」方法。

盡管Sass和Less在某些方面有相似之處，但它們在編譯環境、變數符號、條件語句、代碼風格和繼承方式上的區別使得選擇適合項目需求的預處理器成為可能。在處理CSS預編譯時，開發者應根據項目需求、團隊習慣和工具支持等因素來決定使用Sass還是Less。

了解Sass和Less的區別對於開發者來說至關重要，這有助於在項目中選擇合適的工具，提高代碼效率和團隊協作。通過對比兩者的關鍵特性，開發者可以更好地掌握CSS預處理器的使用，從而提升項目開發的靈活性和效率。

⑤ 自學前端，前端開發的學習路線是什麼

自學前端其實很辛苦，需要有強大的自製力和堅持下去的學習心，並且做好詳細的學習規劃嚴格執行；如果你想學前端，下面的學習路線或許對你有幫助。

前端完整學習路線

第一階段:

HTML CSS:HTML進階、CSS進階、div css布局、HTML css整站開發。

JavaScript基礎:Js基礎教程、js內置對象常用方法、常見DOM樹操作大全、ECMAscript、DOM、BOM、定時器和焦點圖。

JS基本特效:常見特效、例如:tab、導航、整頁滾動、輪播圖、JS製作幻燈片、彈出層、手風琴菜單、瀑布流布局、滾動事件、滾差視圖。

JS高級特徵:正則表達式、排序演算法、遞歸演算法、閉包、函數節流、作用域鏈、基於距離運動框架、面向對象基礎。

JQuery:基礎使用懸著器、DOM操作、特效和動畫、方法鏈、拖拽、變形、JQueryUI組件基本使用。

第二階段:HTML5和移動Web開發

HTML5:HTML5新語義標簽、HTML5表單、音頻和視頻、離線和本地存儲、SVG、Web Socket、Canvas。

CSS3:CSS3新選擇器、偽元素、臉色表示法、邊框、陰影、background系列屬性改變、Transition、動畫、景深和深透、3D效果製作、Velocity.js框架、元素進場、出場策略、炫酷CSS3網頁製作。

Bootstrap:響應式概念、媒體查詢、響應式網站製作、刪格系統、刪格系統原理、Bootstrap常用模板、LESS和SASS。

移動Web開發:跨終端WEB和主流設備簡介、視口、流式布局、彈性盒子、rem、移動終端JavaScript事件、手機中常見JS效果製作、Zepto.js、手機聚劃算頁面、手機滾屏。

第三階段:HTTP服務和AJAX編程

WEB伺服器基礎:伺服器基礎知識、Apache伺服器和其他WEB伺服器介紹、Apache伺服器搭建、HTTP介紹。

PHP基礎:PHP基礎語法、使用PHP處理簡單的GET或者POST請求。

AJAX上篇:Ajax簡介和非同步的概念、Ajax框架的封裝、XMLHttpRequest對象詳細介紹方法、兼容性處理方法、Ajax框架的封裝、Ajax中緩存問題、XML介紹和使用。

AJAX下篇:JSON和JSON解析、數據綁定和模板技術、JSONP、跨域技術、圖片預讀取和lazy-load技術、JQuery框架中的AjaxAPI、使用Ajax實現爆布流案例額。

第四階段:面向對象進階

面向對象終極篇:從內存角度到理解JS面向對象、基本類型、復雜類型、原型鏈、ES6中的面向對象、屬性讀寫許可權、設置器、訪問器。

面向對象三大特徵:繼承性、多態性、封裝性、介面。

設計模式:面向對象編程思維、單例模式、工廠模式、策略模式、觀察者模式、模板方法模式、代理模式、裝飾者模式、適配器模式、面向切面編程。

第五階段:封裝一個屬於自己的框架

框架封裝基礎:事件流、冒泡、捕獲、事件對象、事件框架、選擇框架。

框架封裝中級:運動原理、單物體運動框架、多物體運動框架、運動框架面向對象封裝。

框架封裝高級和補充:JQuery框架雛形、可擴展性、模塊化、封裝屬於傳智自己的框架。

第六階段:模塊化組件開發

面向組件編程:面向組件編程的方式、面向組件編程的實現原理、面向組件編程實戰、基於組件化思想開發網站應用程序。

面向模塊編程:AMD設計規范、CMD設計規范、RequireJS，LoadJS、淘寶的SeaJS。

第七階段:主流的流行框架

Web開發工作流:GIT/SVN、Yeoman腳手架、NPMer依賴管理工具、Grunt/Gulp/Webpack。

MVC/MVVM/MVW框架:Angular.js、Backbone.js、Knockout/Ember。

常用庫:React.js、Vue.js、Zepto.js。

第八階段:HTML5原生移動應用開發

Cordova:WebApp/NativeApp/HybirdApp簡介、Cordova簡介、與PhoneGap之間的關系、開發環境搭建、Cordova實戰(創建項目，配置，編譯，調試，部署發布)。

Ionic:Ionic簡介和同類對比、模板項目解析、常見組件及使用、結合Angular構建APP、常見效果(下拉刷新，上拉載入，側滑導航，選項卡)。

React Native:React Native簡介、React Native環境配置、創建項目，配置，編譯，調試，部署發布、原生模塊和UI組件、原生常用API。

HTML5 :HTML5 中國產業聯盟、HTML5 Plus Runtime環境、HBuilder開發工具、MUI框架、H5 開發和部署。

第九階段: Node.js全棧開發:

快速入門:Node.js發展、生態圈、Io.js、Linux/Windows/OS X環境配置、REPL環境和控制台程序、非同步編程，非阻塞I/O、模塊概念，模塊管理工具、開發流程，調試，測試。

核心模塊和對象:全局對象global，process，console，util、事件驅動，事件發射器、加密解密，路徑操做。

祝你學有所成！