App下載

如何通過 JavaScript 代碼優(yōu)化提高網(wǎng)站和渲染速度

鋼琴上的芭蕾 2021-09-16 16:47:23 瀏覽數(shù) (2897)
反饋

自發(fā)明以來，JavaScript 就真正統(tǒng)治了前端編程開發(fā)人員的世界。它允許前端開發(fā)人員開發(fā)交互式、快速、健壯、以用戶為中心且功能豐富的 Web 應(yīng)用程序。因此，它已成為軟件開發(fā)行業(yè)中最流行的語言。

有報(bào)告指出，全球有超過 15 億個網(wǎng)站正在使用 JavaScript 語言。但是，使用該技術(shù)的網(wǎng)站數(shù)量約為 95%。因此，我們可以得出結(jié)論，每個計(jì)算設(shè)備都使用 JavaScript，包括 iOS/macOS、Android、Windows、Linux、智能電視等。

“軟件吞噬了世界，網(wǎng)絡(luò)吞噬了軟件，而 JavaScript 吞噬了網(wǎng)絡(luò)?！?/blockquote>

每個前端開發(fā)人員都熟悉 JavaScript。但是，如果在沒有專業(yè)知識或知識的情況下使用它，它可能是一把雙刃劍。如果開發(fā)人員不熟悉 JavaScript 語言并且為網(wǎng)站編寫的代碼很差，則可能會減慢你的網(wǎng)站速度，對加載時間和渲染速度產(chǎn)生負(fù)面影響。 

在開發(fā)現(xiàn)代應(yīng)用程序時，分析、監(jiān)控和優(yōu)化其性能至關(guān)重要。但是，你應(yīng)該知道你的網(wǎng)站有多快。性能是任何在線企業(yè)成功的重要因素。

所以，現(xiàn)在你一定想知道，為什么速度對網(wǎng)站的成功很重要？

為什么速度很重要？

網(wǎng)站速度或性能對你在線業(yè)務(wù)的成功起著重要作用。與性能低下的網(wǎng)站相比，用戶通常更喜歡高性能的 JavaScript 網(wǎng)站并被吸引。

“業(yè)績直接影響了公司的底線。” - YouTube

Pinterest 減少了 40% 的感知等待時間，增加了 15% 的搜索引擎流量和注冊。

COOK 將平均頁面加載時間減少了 850 毫秒，從而將轉(zhuǎn)化次數(shù)提高了 7%，將跳出率降低了 7%，并將每個會話的頁面增加了 10%。

根據(jù)該報(bào)告，網(wǎng)站性能不佳將對業(yè)務(wù)目標(biāo)產(chǎn)生負(fù)面影響。因此，根據(jù)BBC的聲明，他們的網(wǎng)站加載時間每增加一秒，他們就會失去大約 10% 的用戶。因此，建議利用全面的 JavaScript 開發(fā)實(shí)力來推動你的業(yè)務(wù)。 

讓我們了解一下現(xiàn)實(shí)世界統(tǒng)計(jì)數(shù)據(jù)中為什么代碼優(yōu)化很重要的原因： 

  • 谷歌的研究表明，如果網(wǎng)頁在三秒內(nèi)沒有加載，大約?53%? 的訪問者會離開你的網(wǎng)站。 
  • ?88% ?的在線客戶在體驗(yàn)不好后不太可能返回網(wǎng)站。 
  • 網(wǎng)站速度下降?100 毫秒?也會使轉(zhuǎn)化率下降近? 7%?。 
  • ?47%? 的用戶預(yù)計(jì)平均網(wǎng)站的加載時間最長為 ?2 秒?。 

在這里，在本文中，我們將介紹一些有用的工具，它們將幫助你提高啟用 JavaScript 的網(wǎng)站的速度并避免黑暗的副作用。

如果你沒有為你的項(xiàng)目正確優(yōu)化你的 JavaScript 代碼，你可能會面臨以下問題： 

  • 相當(dāng)數(shù)量的主機(jī)交互 
  • 缺乏事件處理 
  • 代碼改組 
  • 低效循環(huán) 

如何更快地加載 JavaScript

文件壓縮、異步代碼和延遲標(biāo)簽的使用以及瀏覽器緩存是更快加載 JavaScript 的首選方式。 

如何提高 JavaScript 的性能？

代碼優(yōu)化在提高 JavaScript 網(wǎng)站的性能方面發(fā)揮著重要作用。你可以避免內(nèi)存泄漏，刪除未使用的代碼、文件、功能，并使用壓縮數(shù)據(jù)以獲得更好的性能。 

此外，你可以實(shí)施 CDN，最大限度地減少外部請求，并專注于創(chuàng)建干凈的代碼以提高整體性能。

縮小有助于提高性能嗎？

縮小方法將幫助你刪除未使用的函數(shù)、注釋、逗號等。最終，它將提高 Web 性能。 

所以，現(xiàn)在不用多說，讓我們專注于為前端開發(fā)人員優(yōu)化 JavaScript 代碼的技巧。 

1) 刪除未使用的功能和代碼

你為網(wǎng)站編寫的內(nèi)容越多，加載所需的時間就越長。因此，在開發(fā)網(wǎng)站時，必須使用 JavaScript Code Optimizer 優(yōu)化 JavaScript 代碼。它將幫助你刪除開發(fā)環(huán)境中未使用的功能、特性和代碼。 

Google Clouser Compiler 和 Uglify JS 是最好的 JavaScript 代碼優(yōu)化工具。這些工具刪除逗號、注釋和死代碼。

優(yōu)化前的代碼

function test(mode) 
{ 
var parent = node.parentNode; 
if(0) 
{ 
alert(“Hello. This is the code before optimization.”); 
} 
else 
{ 
alert (“Hello. Greetings for developers.”); 
} 
return; 
alert(1); 
}

優(yōu)化后的代碼

function test() 

{
alert (“Hello. Greetings for developers.”); 
}

那么，在這里，我們做了什么？ 

  • 我們刪除了變量 parent，因?yàn)樗肋h(yuǎn)不會再被使用。 
  • 此外，我們刪除了 False if() {...} 因?yàn)樗且粋€“死代碼”。 
  • 退貨被刪除；它也是死代碼。 

2) 壓縮 JavaScript 代碼

縮小和混淆 JavaScript 代碼方法用于轉(zhuǎn)換 JavaScript。但是，這兩種方法是不同的?？s小可以減少文件的大小以減少頁面加載時間。

換行符、額外空格、注釋等一些因素會增加 JavaScript 文件的大小并影響頁面加載速度。通過代碼壓縮，您可以解決此問題。即使您的所有 JavaScript 代碼都只包含在一個字符串中，您的機(jī)器也能夠讀取和啟動縮小的代碼。

3) 解決內(nèi)存泄漏問題

我們知道，毫無疑問，垃圾收集在 JavaScript 中是自動執(zhí)行的，您不能忽略內(nèi)存部分。所以，作為前端開發(fā)者，不得不使用WeakSet、WeakMap這樣的功能來解決內(nèi)存泄漏的問題。

因此，你可以使用 Chrome Dev Tools 來避免內(nèi)存泄漏問題。

4) 避免不相關(guān)的迭代

循環(huán)總是消耗大量時間來加載項(xiàng)目，無論其大小如何。因此，你應(yīng)該很快打破循環(huán)的大循環(huán)。但是，你可以使用兩個關(guān)鍵字來執(zhí)行此過程：break和continue。 

例如，如果你不使用 break 關(guān)鍵字；這個循環(huán)將執(zhí)行 100 次。 

let arr = new array(100); 
arr[36] = ‘found’; 
for (let i = 0; i < arr.length; i++) 
{ 
if(arr[i] === ‘found’); 
break; 
}

5) 異步 JavaScript 加載：Defer 和 Async 標(biāo)簽

JavaScript 異步加載是同步加載的一部分。它表示你的網(wǎng)站現(xiàn)在已準(zhǔn)備好以多流方式加載。

圖片

當(dāng)瀏覽器遇到<script src="some.js"></script> 時，會在 JavaScript 執(zhí)行時停止創(chuàng)建 DOM 和 CSSOM 模型。因此，很多時候，JavaScript 代碼是在主要的 HTML 代碼之后編寫的。

好吧，為了消除你的疑慮，讓我們在這里查看示例：

<html>  
<head>  
<script src="big.js"> 
</script> 
</head>  
<body> This text will not be visible until big.js is loaded. </body>  
</html>

現(xiàn)在，在 JavaScript 代碼中，你可以使用 async 標(biāo)記來確保 DOM 模型是并行創(chuàng)建的，并且不會在 JavaScript 加載或執(zhí)行時停止。

如果你的 JavaScript 需要操作 HTML 或 CSS 或以特定順序加載腳本（依賴于 jQuery 的庫），請謹(jǐn)慎使用。

讓我們看另一個例子；如果你在你的網(wǎng)站上使用流行的 bxSlider 和 CDN for jQuery，你可以將給定的代碼添加到你的 HTML 中。 

<!-- jQuery library (served from Google) -->  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>  
<!-- bxSlider Javascript file -->  
<script src="/js/jquery.bxslider.min.js"></script>  
<!-- bxSlider CSS file -->  
<link href="/lib/jquery.bxslider.css" rel="stylesheet">

在上面的代碼中，我們可以看到 bxSlider 是本地的，而 Google CDN 加載的是 jQuery。因此，如果我們嘗試向字符串（包括 jQuery）添加 async 標(biāo)記，如果jQuery.bxslider.min.js在jQuery.min.js之前加載，則bxSlider可能會發(fā)生錯誤。 

因此，需要另一個標(biāo)簽—— defer。

如果瀏覽器遇到帶有 JavaScript 代碼的 defer 標(biāo)記，則不會加載 DOM 和 CSSOM 模型。一旦 DOM 和 CSSOM 模型完成，每個defer標(biāo)簽?zāi)_本都會立即運(yùn)行。任何腳本都將按照您編碼的順序執(zhí)行。 

<script src="1.js" defer></script> 
<script src="2.js" defer></script>

在上面的例子中，2.js 不會被執(zhí)行，直到 1.js 被加載。 

這里， defer 和 async 標(biāo)簽準(zhǔn)備好只對外部腳本執(zhí)行（帶有 src=”” 標(biāo)簽）。如果你將它們用于像<Script>...</Script>標(biāo)簽這樣的內(nèi)部腳本，這些標(biāo)簽將被避免。 

6) 使用 HTTP/2 協(xié)議

HTTP 協(xié)議的最先進(jìn)和最新版本之一是 HTTP/2。它通過提高 JavaScript 代碼性能為您提供許多功能。這將導(dǎo)致網(wǎng)站速度的提高。

HTTP/2 一起處理多個請求和響應(yīng)。因此，它有助于提高 JavaScript 的加載時間。

如果你處于進(jìn)退兩難的境地，你可以檢查這些協(xié)議之間的區(qū)別：HTTP/2 與 HTTPS。另一個測試是Aka`mai HTTP/2 演示。

圖片

7) 加載元素的正確順序

加載過程中的元素組織是 JavaScript 代碼優(yōu)化的一個重要技巧。在這里， <head> 部分中的每個元素都是預(yù)先加載的，因此它會在用戶在 Web 瀏覽器上看到任何內(nèi)容之前出現(xiàn)在用戶的屏幕上。因此，管理訂單以在屏幕上顯示結(jié)果至關(guān)重要。

在這里，頁面的無組織元素總是向用戶顯示一個白頁。因此，以適當(dāng)且合乎邏輯的方式組織所有元素非常重要。它肯定有助于提高用戶參與度。

圖片

通過深入研究，我們得出結(jié)論，如何加載訂單會影響用戶關(guān)注度。

0 至 16 毫秒

一個屏幕每秒更新 60 次。此數(shù)據(jù)顯示單幀顯示在屏幕上需要多長時間 (1000/60=16)。人們擅長監(jiān)控運(yùn)動，如果運(yùn)動的期望沒有得到滿足，無論是通過可變幀速率還是周期性暫停，他們都會感到沮喪。 

0 到 100 毫秒

如果它在此時間范圍內(nèi)響應(yīng)用戶操作，他們會認(rèn)為結(jié)果是立竿見影的。 

行動和反應(yīng)之間的任何聯(lián)系都已被打破。 

100 到 300 毫秒

用戶會遇到輕微但可預(yù)測的延遲。 

300 至 1000 毫秒

對于大多數(shù)用戶來說，加載頁面或切換視圖是一項(xiàng)任務(wù)。 

1000+ 毫秒

用戶在 1000 毫秒（1 秒）后失去對他們正在處理的任務(wù)的關(guān)注。 

10,000+ 毫秒

用戶很可能會感到沮喪并放棄任務(wù)；他們以后可能會也可能不會回來。 

好吧，Google 稱其為RAIL 模型。 

8) 使用 JavaScript CDN

在 CDN 的幫助下，你可以顯著提高網(wǎng)站的速度和性能。當(dāng)您使用 CDN 時，你將網(wǎng)站的靜態(tài)內(nèi)容鏈接到全球范圍內(nèi)的擴(kuò)展服務(wù)網(wǎng)絡(luò)。好吧，如果您的網(wǎng)站迎合海外受眾，這一點(diǎn)非常重要。

CDN 從最近的服務(wù)器加載您的數(shù)據(jù)并呈現(xiàn)給訪問者。在 CDN 的幫助下，你的文件將自動壓縮或優(yōu)化，以便為訪問者快速交付。這使事情運(yùn)行得更快。

圖片

好吧，你可以比較各種 CDN，看看哪一種最適合你。 

9) 使用 CSS3 效果代替 JavaScript

當(dāng)我們將 CSS3 與其之前的版本 1.0 和 2.0 進(jìn)行比較時，舊版本的功能不那么強(qiáng)大，并且需要額外的 JavaScript 來實(shí)現(xiàn)更高級的樣式效果。但是，CSS3 提供了許多需要較少 JavaScript 的功能。此外，CSS 可以預(yù)編譯，因此它在 CPS 上消耗的內(nèi)存比 JavaScript 少。

讓我們在這里考慮一個例子。

無需任何 JavaScript，你就可以在 CSS3 和 HTML5 中添加CSSSlider。 

這是一個嘗試： 

HTML：

<!DOCTYPE html>
<html lang="en"></html>
<head></head>
<meta charset="UTF-8">
<title>CSS Slider</title>
<body></body>
<base >
<div id="slider"></div>
<figure></figure>
<img src="apple.jpg" alt="">
<img src="strawberry.jpg" alt="">
<img src="cherry.jpg" alt="">
<img src="pineapple.jpg" alt="">
<img src="kiwi.jpg" alt="">

CSS：

@keyframes slidy  
{  
0% { left: 0%; }  
20% { left: 0%; }  
25% { left: -100%; }  
45% { left: -100%; }  
50% { left: -200%; }  
70% { left: -200%; }  
75% { left: -300%; }  
95% { left: -300%; }  
100% { left: -400%; }  
} 
body { margin: 0; }  
div#slider { overflow: hidden; }  
div#slider figure img { width: 20%; float: left; }  
div#slider figure  
{  
position: relative;  
width: 500%;  
margin: 0; left: 0 text-align: left;  
font-size: 0; animation: 30s slidy infinite; 
}

10) 代碼測試

代碼測試是分析內(nèi)存泄漏等性能問題并對其進(jìn)行修補(bǔ)的重要因素。 

那么，你可以實(shí)現(xiàn)給定的 JavaScript 測試工具來增強(qiáng) JavaScript 性能。

控制臺時間（）

Console.time()用于跟蹤操作執(zhí)行的時間。

最初，你必須簡單地調(diào)用：

控制臺時間（標(biāo)簽）；

在這里，“ label ”可以是你的計(jì)時器的唯一名稱。在該過程結(jié)束時，你可以調(diào)用：

控制臺時間結(jié)束（標(biāo)簽）；

在這里，將從開始到結(jié)束監(jiān)視操作時間。

YSlow

YSlow是一個開源性能工具。它分析你的網(wǎng)站性能并提供優(yōu)化提示。您的網(wǎng)站將被此工具調(diào)用，并將其性能與雅虎高性能網(wǎng)站的標(biāo)準(zhǔn)進(jìn)行比較。

該工具將執(zhí)行您的網(wǎng)站并將其性能與雅虎高性能網(wǎng)站的標(biāo)準(zhǔn)進(jìn)行比較。但是，它會給你一個介于 0% 和 100% 之間的分?jǐn)?shù)。

JSFiddle.net

JSFiddle.net是一個在您的 Web 瀏覽器中執(zhí)行的 Web 開發(fā)編碼環(huán)境。

它支持：

  • JavaScript、HTML、CSS 和 CoffeeScript
  • React、Vue 和 jQuery 的樣板
  • 能夠演示代碼片段并共享它們以進(jìn)行代碼協(xié)作
  • GitHub 問題的簡單錯誤報(bào)告

總結(jié)

在開發(fā) JavaScript 應(yīng)用程序時，必須在代碼可讀性和優(yōu)化之間取得平衡。眾所周知，我們的代碼可能會被機(jī)器中斷，但我們有責(zé)任維護(hù)它以獲得更好的性能。

因此，作為前端開發(fā)者，本文將幫助你優(yōu)化 JavaScript 代碼并提高網(wǎng)站速度。但是，要實(shí)現(xiàn)或記住 JavaScript 應(yīng)用程序的所有給定要點(diǎn)并不容易。因此，你應(yīng)該保留優(yōu)化 JavaScript 代碼的技巧列表或保存本文以供將來參考。

我希望本文的提示和信息可以幫助你開發(fā)一個高性能的 JavaScript 網(wǎng)站。


JavaScript

1 人點(diǎn)贊