簡介

隨著前端框架的日益流行，優(yōu)化這些框架的性能變得至關(guān)重要。優(yōu)化后的前端框架可以提高應(yīng)用程序的響應(yīng)速度、用戶體驗和整體性能。本文介紹了優(yōu)化前端框架性能的提示、技巧和最佳實踐。

性能特點

在優(yōu)化前端框架之前，了解其性能特點至關(guān)重要。主要包括：頁面大小：框架對頁面大小的影響，通常包括 JavaScript、CSS 和其他資產(chǎn)。初始化時間：框架首次加載和初始化所需的時間。交互速度：框架處理用戶輸入并更新 UI 所需的時間。內(nèi)存使用：框架在應(yīng)用程序運行時占用的內(nèi)存量。

優(yōu)化提示

1. 選擇合適的框架

選擇一個符合應(yīng)用程序需求的輕量級框架。避免使用功能過多的框架，這些框架可能會影響性能。

2. 優(yōu)化代碼

減少不必要的代碼：刪除冗余或未使用的代碼。簡化 DOM 結(jié)構(gòu)：扁平化 DOM 結(jié)構(gòu)并減少嵌套級別。使用性能提示器：使用瀏覽器的性能工具來識別和修復(fù)性能瓶頸。

3. 優(yōu)化資產(chǎn)

壓縮資產(chǎn)：使用 Gzip 或 Brotli 等工具壓縮 JavaScript 和 CSS 文件。使用 CDN：從內(nèi)容分發(fā)網(wǎng)絡(luò)提供資產(chǎn)以減少延遲。延遲加載非關(guān)鍵資產(chǎn)：只在需要時加載不必要的資產(chǎn)。

4. 使用緩存

客戶端緩存：使用 Service Workers 或 localStorage 緩存經(jīng)常訪問的數(shù)據(jù)。服務(wù)器端緩存：在服務(wù)器端使用 CDN 或緩存代理來存儲和提供靜態(tài)資產(chǎn)。

5. 優(yōu)化網(wǎng)絡(luò)

---

16個React 性能優(yōu)化方法 | 包括原理、技巧、Demo、工具使用

了解React性能瓶頸后，本文將詳細介紹如何進行性能優(yōu)化。 首先，通用優(yōu)化技巧適用于所有前端框架，關(guān)鍵在于如何在React組件中應(yīng)用它們。

1. 按需加載：分為懶加載、懶渲染和虛擬列表。 懶加載適用于路由跳轉(zhuǎn)或用戶觸發(fā)的復(fù)雜組件，如彈窗。 和webpack動態(tài)導(dǎo)入配合實現(xiàn)，同時考慮加載失敗的容錯處理。

2. 批量更新：React18后可能通過批量更新減少 setState 操作，但目前可通過兩種方式優(yōu)化：批量渲染和按優(yōu)先級更新。

3. 避免重復(fù)回調(diào)：debounce和throttle在搜索場景中發(fā)揮重要作用，如搜索組件的輸入延遲控制。

4. 緩存優(yōu)化：useMemo用于緩存計算結(jié)果，減少不必要的組件渲染。 PureComponent和通過淺比較避免無謂更新。

5. 發(fā)布者/訂閱者模式：在狀態(tài)影響范圍較大的場景，使用模式能跳過中間組件的渲染，減少更新次數(shù)。

6. 狀態(tài)管理：將僅影響特定區(qū)域的狀態(tài)移動到組件內(nèi)部，限制狀態(tài)影響范圍，提高性能。

7. 列表渲染優(yōu)化：使用key屬性避免不必要的虛擬DOM比較，結(jié)合PureComponent/進一步節(jié)省渲染。

8. Hook按需更新：針對自定義Hook，只更新調(diào)用方關(guān)心的狀態(tài)，避免額外渲染。

最后，通過React Profiler工具定位性能瓶頸，關(guān)注調(diào)和階段，同時注意提交階段的優(yōu)化技巧，如避免在特定鉤子中更新組件狀態(tài)。

web前端開發(fā)培訓(xùn)是干什么的呀？

Web前端開發(fā)培訓(xùn)是一種旨在幫助學(xué)員掌握Web前端開發(fā)技能和知識的教育和培訓(xùn)課程。 這些培訓(xùn)課程通常涵蓋了HTML、CSS、JavaScript等基礎(chǔ)語言，以及一些前端框架、工具和最佳實踐。 通過Web前端開發(fā)培訓(xùn)，學(xué)員可以獲得Web前端開發(fā)所需的基本技能和知識，并能夠開始從事Web前端開發(fā)的工作。 Web前端開發(fā)培訓(xùn)的方式有多種，包括線上培訓(xùn)、線下培訓(xùn)、視頻教程等。 線上培訓(xùn)通常采用直播或錄播的形式，由專業(yè)的講師在線授課，學(xué)員可以通過電腦或移動設(shè)備進行學(xué)習(xí)。 線下培訓(xùn)則是在實體教室中進行授課，學(xué)員可以與講師和其他學(xué)員進行面對面的交流和互動。 視頻教程則是將講師的授課內(nèi)容錄制下來，供學(xué)員在線或下載后進行學(xué)習(xí)。 Web前端開發(fā)培訓(xùn)的內(nèi)容通常包括以下幾個方面：HTML/CSS基礎(chǔ)：學(xué)習(xí)如何編寫語義化、結(jié)構(gòu)良好的HTML和CSS代碼，以及如何使用CSS進行樣式設(shè)計。 JavaScript編程：深入學(xué)習(xí)JavaScript基礎(chǔ)語法、DOM操作、事件處理、AJAX等技術(shù)。 前端框架與工具：學(xué)習(xí)使用現(xiàn)代前端框架和工具，如React、Vue、Angular等。 同時學(xué)習(xí)使用構(gòu)建工具（如Webpack）進行項目構(gòu)建和打包。 響應(yīng)式設(shè)計：學(xué)習(xí)使用媒體查詢、彈性布局等技巧，使網(wǎng)頁能夠自適應(yīng)不同屏幕尺寸的設(shè)備。 性能優(yōu)化：學(xué)習(xí)如何優(yōu)化網(wǎng)頁加載速度、減少頁面重繪和回流等操作。 前端安全：了解常見的Web前端安全漏洞和攻擊手段，如跨站腳本攻擊（XSS）、跨站請求偽造（CSRF）等，并學(xué)習(xí)如何防范這些安全漏洞。 團隊協(xié)作與溝通：學(xué)習(xí)如何與團隊成員進行有效的溝通和協(xié)作，了解敏捷開發(fā)方法等團隊協(xié)作的最佳實踐。 實際項目開發(fā)：通過實際項目的開發(fā)，綜合運用所學(xué)知識和技能，完成完整的Web前端開發(fā)流程。 通過Web前端開發(fā)培訓(xùn)，學(xué)員可以快速掌握Web前端開發(fā)的技能和知識，提高自己的職業(yè)競爭力。 同時，這些培訓(xùn)課程通常也會提供一些實戰(zhàn)項目和案例，幫助學(xué)員將所學(xué)知識應(yīng)用到實際開發(fā)中，加深理解和提高技能。 此外，一些培訓(xùn)機構(gòu)還會提供就業(yè)服務(wù)，幫助學(xué)員順利找到Web前端開發(fā)的工作。 這些服務(wù)可能包括簡歷編寫、面試技巧指導(dǎo)、內(nèi)推機會等，讓學(xué)員在求職過程中更加順利。 總的來說，Web前端開發(fā)培訓(xùn)是一種很好的學(xué)習(xí)和提升自己技能的方式。 如果你對Web前端開發(fā)感興趣并希望在這個領(lǐng)域有所發(fā)展，可以考慮參加一些相關(guān)的培訓(xùn)課程。 當(dāng)然，在選擇培訓(xùn)機構(gòu)時也要注意機構(gòu)的信譽和教育質(zhì)量，確保能夠獲得有效的學(xué)習(xí)和提升。

web前端三大主流框架(web前端框架有哪些)

web前端三大主流框架,web前端框架有哪些。 小編來告訴你更多相關(guān)信息。 IT行業(yè)近十年來發(fā)展迅猛，衍生出許多新的職業(yè)，如 UI設(shè)計師、開發(fā)工程師、軟件測試工程師等，在眾多新興職業(yè)中， Web前端工程師就是其中之一。 那什么是 Web前端的三大主流框架呢？一、Web前端三大主流框架是什么web前端三大主流框架有三個,,,下面讓我們看看這三大主流框架各有哪些特點以及優(yōu)缺點呢。 特點：1.聲明式設(shè)計，2.高效，3.靈活優(yōu)點：1.速度快，2。 跨瀏覽器兼容性，3。 模塊化，4。 單向數(shù)據(jù)流，5。 同構(gòu)與純javascript，6。 兼容性好。 缺點：React本身只是一個V而已，并不是一個完整的框架，所以如果是大型項目想要一套完整的框架的話，基本都需要加上ReactRouter和Flux才能寫大型應(yīng)用。 ：特性：1.輕量級的框架，2.雙向數(shù)據(jù)綁定，3.指令，4.插件化 優(yōu)點：1.簡單：官方文檔很清晰，比Angular簡單易學(xué)。 2.快速：異步批處理方式更新DOM。 3.組合：用解耦的、可復(fù)用的組件組合你的應(yīng)用程序。 4.緊湊：18kbmin+gzip，且無依賴。 5.強大：表達式無需聲明依賴的可推導(dǎo)屬性(computedproperties)。 6.對模塊友好：不用強制你所有的代碼都要遵循 Angular的各種規(guī)則，也可以通過 NPM、 Bower或者 Duo來安裝，使用場景更加靈活。 缺點：1.新生的是一個新的項目，沒有angular那么成熟。 2.影響度不是很大：有關(guān)于多樣性或者說豐富性少于其他一些有名的庫。 3.不支持IE8。 ：特性：1.應(yīng)用結(jié)構(gòu)好，2。 雙向數(shù)據(jù)綁定，3。 說明，模板，5。 包埋、注射和測試。 優(yōu)點：1.模板功能強大豐富，自帶了極其豐富的angular指令。 2.具有較為完善的前端框架，包括服務(wù)、模板、數(shù)據(jù)雙向綁定、模塊化、路由、過濾器、依賴項注入等全部功能；3.自定義指令，自定義指令之后可以在項目中多次使用。 模塊化在 Java (依賴注入)中的引入更為大膽，能夠輕松地編寫可復(fù)用的代碼，對敏捷開發(fā)團隊非常有幫助。 是互聯(lián)網(wǎng)巨人谷歌開發(fā)，這也意味著他有一個堅實的基礎(chǔ)和社區(qū)支持。 缺點入門很容易但深入后概念很多,學(xué)習(xí)中較難理解。 2.文檔的例子非常少，官方文檔基本上只寫api，一個例子也沒有。 具體如何使用是google，或者直接詢問misko、angular的作者。 3.與IE6/7的兼容性不是特別好，但是可以用jQuery自己手寫的代碼解決。 4.很少關(guān)于如何應(yīng)用指令的最佳實踐教程， angular實際上是非常靈活的，如果不看看一些作者的使用原則，就很容易寫出四不像的代碼，比如 js中的 jQuery或者 dom操作。

web培訓(xùn)內(nèi)容有哪些？

Web培訓(xùn)的內(nèi)容非常廣泛，涵蓋了從基礎(chǔ)知識到高級技能的所有方面。 以下是一些常見的Web培訓(xùn)課程內(nèi)容：HTML & CSS：這是Web開發(fā)的基礎(chǔ)，培訓(xùn)會教你如何使用HTML構(gòu)建網(wǎng)頁結(jié)構(gòu)，使用CSS來美化網(wǎng)頁。 你會學(xué)習(xí)到如何編寫語義化的HTML，以及如何使用CSS的布局和樣式屬性來設(shè)計現(xiàn)代、響應(yīng)式的網(wǎng)頁。 JavaScript基礎(chǔ)：JavaScript是Web開發(fā)的核心語言，用于實現(xiàn)網(wǎng)頁的交互效果和動態(tài)功能。 在培訓(xùn)中，你會深入了解JavaScript的基礎(chǔ)知識，包括變量、函數(shù)、條件語句、循環(huán)語句等。 JavaScript進階：這部分課程會進一步探索JavaScript的高級特性，例如DOM操作、事件處理、AJAX技術(shù)等。 此外，你還會學(xué)習(xí)如何使用流行的JavaScript框架，例如React、Vue或Angular，來構(gòu)建復(fù)雜的用戶界面和單頁應(yīng)用。 前端框架和庫：現(xiàn)代Web開發(fā)中，前端框架和庫的使用非常普遍。 培訓(xùn)課程會涵蓋一些主流的前端框架和庫，例如Bootstrap、jQuery等。 通過這些課程，你將學(xué)習(xí)如何使用這些工具庫來簡化開發(fā)過程，提高開發(fā)效率。 響應(yīng)式設(shè)計：隨著移動設(shè)備的普及，響應(yīng)式設(shè)計成為了Web設(shè)計的必備技能。 在Web培訓(xùn)中，你將學(xué)習(xí)如何使用媒體查詢、彈性布局等技巧來創(chuàng)建適應(yīng)不同設(shè)備的響應(yīng)式網(wǎng)頁。 性能優(yōu)化：一個優(yōu)秀的Web應(yīng)用不僅需要功能強大，還需要運行流暢。 在培訓(xùn)中，你將學(xué)習(xí)如何通過各種手段來優(yōu)化網(wǎng)頁和應(yīng)用性能，例如減少HTTP請求、利用CDN進行內(nèi)容分發(fā)、圖片優(yōu)化等。 安全與最佳實踐：Web開發(fā)中涉及的安全問題多種多樣。 在培訓(xùn)中，你將學(xué)習(xí)如何防范常見的安全威脅，例如跨站腳本攻擊（XSS）和跨站請求偽造（CSRF）。 此外，你還會了解一些最佳實踐和規(guī)范，例如Web標(biāo)準(zhǔn)、可訪問性設(shè)計等。 數(shù)據(jù)庫與后端開發(fā)：雖然Web培訓(xùn)主要關(guān)注前端技術(shù)，但了解后端和數(shù)據(jù)庫知識也是非常有幫助的。 你可能有機會學(xué)習(xí)一些關(guān)于數(shù)據(jù)庫設(shè)計和SQL語言的知識，以及一些后端開發(fā)技術(shù)，例如或Python等。 項目實戰(zhàn)：理論知識和實踐經(jīng)驗是相輔相成的。 Web培訓(xùn)通常會包含一些項目實戰(zhàn)課程，讓你有機會將所學(xué)知識應(yīng)用到實際項目中。 通過項目實踐，你可以積累寶貴的經(jīng)驗，提升自己的技能水平。 團隊合作與溝通：作為一個Web開發(fā)者，與他人合作和溝通是非常重要的。 培訓(xùn)中可能會安排一些團隊合作的練習(xí)和活動，讓你學(xué)習(xí)如何更好地與他人合作，提高團隊協(xié)作能力。 以上只是一些常見的Web培訓(xùn)課程內(nèi)容，具體的培訓(xùn)內(nèi)容會根據(jù)不同的培訓(xùn)機構(gòu)和課程設(shè)置有所差異。 在選擇Web培訓(xùn)課程時，我會仔細比較不同機構(gòu)的課程大綱和師資力量，以確保能夠?qū)W到全面而深入的知識和技能。

9個前端性能優(yōu)化的最佳實踐

現(xiàn)代互聯(lián)網(wǎng)時代，打開一個Web平臺，是留下還是離開，只需要1分鐘，因此前端的性能優(yōu)化至關(guān)重要。

由于前端優(yōu)化不佳，大多數(shù)網(wǎng)站無法提供令人滿意的用戶體驗，最常見的情況是數(shù)據(jù)加載和圖像優(yōu)化不佳，本文分享幾個優(yōu)化策略。

資源最小化

資源（靜態(tài)資源）壓縮是指從HTML、CSS和JavaScript中刪除不需要加載的不必要的冗余數(shù)據(jù)的過程。 這包括刪除代碼注釋和格式、空白字符、未使用的代碼、換行符等。

縮小HTML、CSS和JavaScript將加快前端加載時間，因為它減少了需要從服務(wù)器請求的代碼量。

生成HTML、CSS和JavaScript代碼的優(yōu)化版本可以借助工具，如下：

HTML:PageSpeedInsights、HTMLMinifier。

CSS、ChromeDevTools中的Coverage工具、YUICompressor。

JavaScript：JSMin、ChromeDevTools中的Coverage工具。

壓縮文件

對于WEB項目，文件越大，加載所需的時間就越長，現(xiàn)代WEB平臺通常有大量的HTML、CSS和JavaScript包。

通過使用合適的方法壓縮文件，可以輕松地對前端的加載時間產(chǎn)生重大影響。以下是可以遵循的兩個不錯的文件壓縮選項：

Gzip：最流行的數(shù)據(jù)壓縮和解壓縮方法，所有現(xiàn)代瀏覽器都支持，Gzip在將站點的HTML、CSS和JavaScript包發(fā)送到瀏覽器之前先在服務(wù)器端對其進行壓縮，然后在客戶端解壓縮文件并傳送內(nèi)容。 Brotli：與當(dāng)前可用的壓縮方法相比，它提供了最佳的壓縮率，根據(jù)certSimple的研究，Brotli壓縮JavaScript文件比Gzip小14%，而HTML和CSS壓縮率比Gzip好21%和17%。

圖片優(yōu)化

說到網(wǎng)站，圖像是重要的組成部分，互聯(lián)網(wǎng)上93.7%的網(wǎng)站至少使用一種圖像文件格式，因為它們有助于提高用戶參與度，更加吸引用戶眼球。

但是，使用圖像的負面影響是會對前端加載時間產(chǎn)生不利影響。但是，現(xiàn)在有多種方式可以優(yōu)化圖像：

使用webp或avif

使用webp和avif等新圖像格式比jpg和png等舊格式具有更好的性能。

webp比png小26%，比jpg小25-35%。 avif比jpg小50%，比webp小20%。

但是，缺點是瀏覽器支持還不夠普遍。 webp最近獲得了瀏覽器支持的普遍支持，可能存在舊版本不支持它。 另一方面，avif僅在Chrome和Opera中得到了支持。

提供正確尺寸的圖像

減少圖像加載時間和提高網(wǎng)站性能的另一種方法是使用響應(yīng)式圖像。 超過50%的流量來自智能手機和平板電腦，將圖像縮放到主流設(shè)備尺寸并使用。

除了選擇合適的格式和尺寸外，還有其他幾種方法，通過圖像優(yōu)化來減少前端加載時間，以下是可以使用的一些其他方法：

圖像壓縮

使用漸進式JPEG

為連接速度較慢的用戶提供較小的圖像

使用HTTP/2、HTTP/3而不是HTTP/1.1

使用圖像集

減少服務(wù)器調(diào)用次數(shù)

通常，前端向服務(wù)器發(fā)出的請求越多，加載的時間就越長。 因為在呈現(xiàn)頁面之前，向服務(wù)器發(fā)送任何請求都需要完全通信。 可以通過多種方式來減少加載頁面所需的服務(wù)器請求數(shù)量。

CSSSprites：這是減少服務(wù)器調(diào)用次數(shù)的最簡單方法之一，主要是減少UI相關(guān)的圖片資源。 實現(xiàn)原理不是加載10個獨立的圖像到網(wǎng)站，而是使用圖像集合拼接成一個圖像文件，然后通過使用CSS中的background-image和background-position屬性來顯示所需的圖像區(qū)域。 這樣做可以減少了所需的服務(wù)器請求數(shù)量。

減少第三方插件的大量外部請求。

防止鏈接到不存在的文件。

此外，還可以查看服務(wù)器端渲染以加快應(yīng)用程序的初始加載速度。

刪除不必要的字體

自定義字體已經(jīng)變得非常流行，因為它有助于為網(wǎng)站添加個性化展示，但這些是以犧牲性能為代價。

自定義字體的大小可能非常大，特別是中文字體，而網(wǎng)絡(luò)字體（例如Google字體）會將HTTP請求添加到外部資源，這會影響頁面渲染的速度。

以下是在網(wǎng)站中使用字體時可以采取的優(yōu)化措施：

將字體轉(zhuǎn)換為最有效的格式：加載像WOFF2這樣的現(xiàn)代格式可以使字體文件大小比其他格式減少約30%。

子集字體以刪除未使用的字符：綜合字體文件包含許多可能永遠不會使用的語言的字符。 通過子集字體，可以從字體中刪除不需要的字符，只保留需要在網(wǎng)站上編寫內(nèi)容的內(nèi)容。

預(yù)加載頁面明確用到的字體。

延遲加載

延遲加載有助于進一步縮短前端加載時間。 使用延遲加載，網(wǎng)頁首先只加載需要的內(nèi)容，并在用戶需要時加載剩余的內(nèi)容。

除了延遲占位符加載之外，還有其他幾個選項，例如，原生延遲加載和模糊圖像效果。

緩存

如果不加緩存，用戶每次訪問都需要重新下載所有的資源，避免類似現(xiàn)象的最佳方法是使用緩存技術(shù)。 如果配置適當(dāng)，瀏覽器會將文件存儲在其本地緩存中，并避免為來自服務(wù)器的后續(xù)頁面訪問加載相同的資源。

緩存服務(wù)器：用戶請求從緩存服務(wù)器集合發(fā)送到最近的緩存服務(wù)器，即CDN。

內(nèi)存緩存：通過將數(shù)據(jù)的某些部分（例如：JavaScript變量）存儲在內(nèi)存中，無需為路由更改重新加載它們。

磁盤緩存：類似于內(nèi)存緩存，不同之處在于它使用通常由瀏覽器處理的傳統(tǒng)文件存儲。

使用預(yù)取

資源預(yù)取是另一種可用于優(yōu)化前端數(shù)據(jù)加載性能的增強技術(shù)。 作為開發(fā)人員，比瀏覽器更了解應(yīng)用程序。 因此，預(yù)取使用此信息來提示瀏覽器即將可能需要的資源。

預(yù)取加載資源以預(yù)期它們需要減少資源的等待時間。 主要有三種類型的預(yù)取。 雖然鏈接預(yù)取是最流行和最廣泛使用的方法，但DNS預(yù)取和預(yù)渲染也是有用的選項。

鏈接預(yù)取

鏈接預(yù)取使瀏覽器能夠收集用戶可能在最近的將來請求的資源。 因此，開發(fā)人員可以假設(shè)用戶可能訪問特定網(wǎng)頁的位置。

但是，鏈接預(yù)取僅適用于圖像和JavaScript等可緩存資源。

DNS預(yù)取

每當(dāng)用戶請求托管在特定IP地址中的資產(chǎn)時，就會執(zhí)行DNS查找以查找IP地址所屬的域名。

DNS預(yù)取允許瀏覽器在后臺對網(wǎng)頁中的鏈接執(zhí)行DNS查找，同時用戶瀏覽當(dāng)前頁面，以最大限度地減少用戶在啟用DNS預(yù)取的情況下單擊鏈接時的延遲。

CDN

前端內(nèi)容（包括HTML頁面、樣式表、JavaScript文件和圖像）的加載速度可以使用CDN進行優(yōu)化，效果也是最明顯的。 CDN是一組分布在多個地理位置的服務(wù)器，用于存儲內(nèi)容的緩存版本以快速響應(yīng)給最終用戶。

還有一種特定類型的CDN，稱為圖像CDN，它非常擅長優(yōu)化圖像。 有了這些，可以節(jié)省40-80%的圖像文件大小。 鑒于圖像通常占據(jù)頁面重量的一半以上，為圖像集成CDN可以顯著提高加載速度。

總結(jié)

性能黃金法則：80-90%的最終用戶響應(yīng)時間用于下載前端組件，例如圖像、樣式表、腳本等。

因此，優(yōu)化前端數(shù)據(jù)加載對于降低跳出率和增加用戶在網(wǎng)站上的停留時間至關(guān)重要。

作者：天行無忌

---

---

相關(guān)標(biāo)簽： 技巧和最佳實踐、 提示、 前端框架的性能優(yōu)化、 前端框架的性能特點、

上一篇：前端框架的最佳實踐代碼可維護性可擴展性和

下一篇：移動應(yīng)用程序開發(fā)中的前端框架優(yōu)勢和注意事