• 招生咨詢熱線:4008-569-579 
  • 手機版
    用手機掃描二維碼直達商品手機版
招生咨詢熱線
4008-569-579
機構(gòu)主頁 > 培訓資料 > Web前端培訓:前 3 大網(wǎng)站性能問題以及如何解決它們
機構(gòu)主頁 > 培訓資料>Web前端培訓:前 3 大網(wǎng)站性能問題以及如何解決它們

Web前端培訓:前 3 大網(wǎng)站性能問題以及如何解決它們

來源:廣州達內(nèi)教育        時間:2023-05-30        熱度:31℃        返回列表

  令人驚訝的是,即使現(xiàn)在,你也可以訪問已建立組織的主頁,但如果開發(fā)人員和設(shè)計人員知道將故障排除工作的重點放在哪里,則可以輕松解決這些嚴重的網(wǎng)站性能問題。如果你對網(wǎng)站性能問題感興趣,可以報名參加Web前端培訓,通過系統(tǒng)全面的學習和專業(yè)老師的面授指導教學,你可以獲得快速進步。


  在大多數(shù)情況下,當今互聯(lián)網(wǎng)上遇到的最大網(wǎng)站性能問題通常歸結(jié)為以下三個問題的某種組合。


  1. 頁面權(quán)重過大


  你的網(wǎng)站發(fā)送給客戶端的數(shù)據(jù)越少,頁面加載速度就越快。隨著高速互聯(lián)網(wǎng)連接成為常態(tài),這個網(wǎng)站性能問題不再是一個問題,但仍有很多地方無法依賴快速數(shù)據(jù)連接。


  有時,頁面重量問題可以很容易地解決。設(shè)計師喜歡高分辨率的 PNG 圖像,但切換到輕度壓縮的 JPEG

圖像可以將圖像文件的大小減少 30%。你還可以將視頻文件的大小從 1080p 縮小到 720 并看到類似的影響,但會損害用戶體驗。


  此網(wǎng)站性能問題的另一個簡單解決方法是停止調(diào)整大圖像的大小。這個問題在響應式網(wǎng)站上尤其常見。例如,移動端渲染使用 800

像素寬的主圖,并從桌面渲染調(diào)整 2048

像素寬的圖像,這將極大地影響頁面重量和頁面加載速度。不要調(diào)整圖像大小,而是從一開始就使用適當大小的圖像。


  2. 急切地加載 Javascript


  Javascript 代表了可以輕松修復的網(wǎng)站性能問題的另一個常見來源。許多頁面將外部 Javascript

文件的引用放在頁面頂部,通常在 HTML <HEAD>

元素中,這是一個不好的做法。想學習Javascript的同學,可以參加Web前端培訓,可以在短時間內(nèi)學有所成,讓你更高效地學會使用這門語言。




  瀏覽器可以維持的傳出連接數(shù)量是有限的。如果頭部引用了五個或六個 Javascript

文件,則會阻止五六個其他資源的下載。此外,他們阻止的資源很可能是 CSS 文件和圖像,它們會在首屏呈現(xiàn),這嚴重損害了網(wǎng)站的速度指數(shù)。


  你可以通過將 HTML 頁面頂部的腳本標簽移動到底部來簡單地解決此網(wǎng)站性能問題?;蛘?,可以使用 defer 屬性修飾

<script> 標簽以延遲加載,直到所有其他資源都被渲染。但是,如果現(xiàn)有網(wǎng)站是由假定 Javascript

會急切加載的開發(fā)人員編寫的,那么這一舉措也會對現(xiàn)有網(wǎng)站產(chǎn)生負面影響。


  如果開發(fā)人員將 jQuery 或 Handlebars 引用放在 HTML 頁面的正文中,并且這些 Javascript

片段不在下載所有外部 Javascript 文件后觸發(fā)的 onReady

事件中,則會發(fā)生運行時錯誤,并且網(wǎng)站將無法正常運行。這只是為什么網(wǎng)站性能優(yōu)化應該是整個開發(fā)過程中的重中之重而不是事后考慮的另一個原因。


  3. 在大型 DOM 上過度使用 CSS 選擇器


  所有現(xiàn)代網(wǎng)站都使用 CSS 進行樣式設(shè)置。然而,設(shè)計師通常會將整個網(wǎng)站的所有樣式放在一個 CSS 文件中。因此,CSS

文件會增長。一個網(wǎng)站列出超過 1,000 種樣式的情況并不少見,即使任何給定的頁面實際上可能只需要 40 或 50

個。在Web前端培訓中,不僅有理論知識和學習,還有企業(yè)級實戰(zhàn)項目的訓練,讓你獲得實踐經(jīng)驗,在面試中脫穎而出,獲得高薪工作。


  此外,一個頁面擁有 1,000 個 DOM 元素并不少見,盡管這是大多數(shù)性能專家建議的上限。如果有 1,000 個樣式和

1,000 個 DOM 元素,則瀏覽器必須進行潛在的 100 萬次樣式表評估。如此高的數(shù)量可能會使移動設(shè)備完全爬行,即使是 RAM

或可用時鐘周期較低的臺式計算機,開始向用戶呈現(xiàn)頁面的速度也會很慢。


  將整個站點普遍使用的樣式放在一個常用引用的 CSS

文件中是有意義的。但該文件不應與單個頁面上使用的樣式混淆。對于使用非常特定樣式的網(wǎng)頁組件,使用內(nèi)聯(lián) CSS

比將樣式放在需要針對從未使用過的頁面評估給定選擇器的公共文件中更有意義。




  盡早優(yōu)先考慮網(wǎng)站性能


  有無數(shù)的問題會對網(wǎng)站性能產(chǎn)生負面影響。但是,如果應用程序分析表明上述三個項目中的任何一個對你的站點來說都是一個問題,請首先處理它們,因為它們可能會獲得最大的好處。通過參加Web前端培訓,可以幫助你快速掌握網(wǎng)站性能改進技巧,更好地進行開發(fā)工作。

電話咨詢

電話咨詢

咨詢電話:
4008-569-579
回到頂部

回到頂部