譯者 | 涂承燁
由于代碼可見(jiàn)性低,使用Java腳本進(jìn)行編碼可能會(huì)很耗時(shí)。這里有12個(gè)優(yōu)雅的JavaScript技巧,可以幫助你在2023年優(yōu)化代碼生成。
JavaScript已經(jīng)成為下一批開(kāi)發(fā)人員中最主要腳本語(yǔ)言。對(duì)于前端編程、構(gòu)建交互式、功能豐富的網(wǎng)站以及快速流暢的Web應(yīng)用程序來(lái)說(shuō),這是一個(gè)不可思議的工具。每個(gè)前端程序員都知道JavaScript,然而,如果在不知情的情況下使用它,情況會(huì)變得更糟。糟糕的JavaScript代碼會(huì)影響網(wǎng)站的性能、渲染速度和加載時(shí)間。在這篇博文中,我們將分享一些技巧,幫助你優(yōu)化未來(lái)的JavaScript之旅。讓我們一起來(lái)看看。
一、縮小文件的JavaScript代碼
縮小代碼與混淆代碼不同。然而,這兩種方法都是轉(zhuǎn)換JavaScript的方法——讀起來(lái)更復(fù)雜或更小?s小實(shí)現(xiàn)了后者,并可以縮小文件大小以減少頁(yè)面加載時(shí)間。換行符、多余空格、注釋等都會(huì)增加JavaScript文件的大小,并影響頁(yè)面加載的速度?s小代碼可以解決這個(gè)問(wèn)題。
二、排除.js庫(kù)中未使用的組件
開(kāi)發(fā)人員使用JavaScript庫(kù),如jQuery UI或jQuery Mobile等。這意味著代碼包含了每個(gè)庫(kù)的所有組件,而你可能只需要其中的一些組件。
如果你精通于理解將在庫(kù)的哪個(gè)包中包含哪些組件,那么就選擇那些特定的組件。你的網(wǎng)站將加載更快,用戶將得到一個(gè)很好的體驗(yàn)。
三、使用HTTP/2協(xié)議
這一主要互聯(lián)網(wǎng)協(xié)議(HTTP)的更新版本可以為開(kāi)發(fā)人員提供許多很酷的功能。它的眾多優(yōu)點(diǎn)之一是多路復(fù)用。這允許你使用TCP連接并發(fā)地接受類(lèi)似的請(qǐng)求和響應(yīng)。此外,早期的互聯(lián)網(wǎng)協(xié)議需要對(duì)JavaScript理論有透徹的了解和增強(qiáng)的知識(shí),而HTTP/2可以使JavaScript快速加載。因此,HTTP/2在性能上要比HTTP協(xié)議好得多。
四、GZIP模塊適用于Apache、Node.js和Nginx
GZIP是一種令人驚嘆的壓縮技術(shù),它是在幾年前互聯(lián)網(wǎng)還沒(méi)有像現(xiàn)在這樣高速發(fā)展的時(shí)候引入的。它減少了Web服務(wù)器上的文件,將靜態(tài)文件壓縮到真實(shí)大小的80%到90%。由于JavaScript是文本文件,你可以使用GZIP來(lái)壓縮JavaScript文件,也有助于減少頁(yè)面加載時(shí)間。
有一些模塊可用于Web服務(wù)器,包括Nginx和Apache。由于JavaScript同時(shí)用于前端編程和后端編程,因此可以使用Node.js的zlib模塊來(lái)壓縮JS文件。
復(fù)制
// Code to run zlib module
Const zlib = require(‘zlib’);
使用GZIP的代碼:
復(fù)制
Const gzip = zlib.createGzip();
Const fs = require(‘fs’);
Const inp = fs.createReadStream(‘input.txt’);
Const out = fs.createWriteStream(‘input.txt.gz’);
Inp.pipe(gzip).pipe(out);
五、縮短DOM層次和訪問(wèn)深度
DOM (Document Object Model,文檔對(duì)象模型)是組成網(wǎng)頁(yè)結(jié)構(gòu)的對(duì)象的數(shù)據(jù)表示形式。每個(gè)Web頁(yè)面都是文檔,通常是一個(gè)HTML文件,文檔中的每個(gè)對(duì)象稱(chēng)為節(jié)點(diǎn)。作為對(duì)用戶輸入的響應(yīng),JavaScript會(huì)影響DOM及其節(jié)點(diǎn)改變結(jié)構(gòu)、樣式和內(nèi)容。
每次JavaScript代碼訪問(wèn)DOM組件或修改DOM時(shí),這取決于開(kāi)發(fā)人員是怎么處理DOM的。如果系統(tǒng)必須在DOM中重新計(jì)算多個(gè)節(jié)點(diǎn),這將消耗更多內(nèi)存并降低性能。在優(yōu)化代碼時(shí),修剪冗長(zhǎng)的DOM的樹(shù)型結(jié)構(gòu)層次是一個(gè)很好的方法。保持較小的DOM有很多好處:
減少內(nèi)存泄漏的風(fēng)險(xiǎn)
優(yōu)化網(wǎng)絡(luò)效率和負(fù)載性能
良好的執(zhí)行性能
下面是一些最小化DOM的方法:
減少DOM引用
回避復(fù)雜動(dòng)畫(huà)
保持簡(jiǎn)單的CSS規(guī)范
六、將JavaScript代碼和CSS放在head部分
此方法幫助你更快地加載網(wǎng)頁(yè);但是,你需要對(duì)DOM和SCCOM有很好的理解。這樣做的目的是在head部分保留更少的CSS和JavaScript代碼,以便頁(yè)面立即加載,而更一般的代碼通常保存在不同的.CSS和.js文件中。
七、拋棄等待,放到promise.all里一起執(zhí)行
你應(yīng)該將調(diào)用和未解決的promise合并到一個(gè)數(shù)組中,而不是等待執(zhí)行。例如,如果要對(duì)數(shù)據(jù)庫(kù)進(jìn)行多次調(diào)用,通常需要等待的時(shí)間是每次調(diào)用完成的時(shí)間之和。
復(fù)制
//Code to call two databases
const getUsers = async () => {
const consumers = await findAllConsumers();
const managers = await findAllManagers();
Return { consumers, managers}
}
最好的方法之一是同時(shí)運(yùn)行兩個(gè)調(diào)用,并在大約一半的時(shí)間內(nèi)解析輸出。
復(fù)制
// code to call both databases simultaneously
const getUsers = async () => {
const consumers = findAllConsumers();
const managers = findAllManagers();
Return Promise.all([consumers, managers]);
}
你不必等待兩個(gè)數(shù)據(jù)庫(kù)都執(zhí)行完成,兩者是并行運(yùn)行的。
八、代碼分割
這是一種實(shí)踐,將函數(shù)式元素的代碼分解在小文件中,以便在需要時(shí)調(diào)用。將代碼分割為小塊,用應(yīng)用程序中特定功能和特性的部分加載時(shí)間替換單個(gè)大型JavaScript文件的加載時(shí)間。你可以使用不同但可用的打包工具來(lái)分割代碼以進(jìn)行應(yīng)用程序優(yōu)化。
九、測(cè)試代碼
測(cè)試對(duì)于識(shí)別內(nèi)存泄漏等性能問(wèn)題并恢復(fù)它們至關(guān)重要。下面是一些常用的JavaScript測(cè)試工具:
1.Console.time()
這是一個(gè)內(nèi)置的JavaScript函數(shù),可以使用它來(lái)檢查執(zhí)行某個(gè)過(guò)程需要多長(zhǎng)時(shí)間。在這個(gè)過(guò)程的開(kāi)始,只需調(diào)用:Console.time(label);
在這里,label可以是你給定時(shí)器的唯一名稱(chēng)。在這個(gè)過(guò)程的最后,只需要調(diào)用:Console.timeEnd(label);
編寫(xiě)此代碼可為你提供執(zhí)行某個(gè)過(guò)程的處理時(shí)間。
2.YSlow
它是一個(gè)開(kāi)源的性能測(cè)量工具,可以評(píng)估網(wǎng)站并提供性能改進(jìn)建議。YSlow調(diào)用你的網(wǎng)站,并將其性能與雅虎的網(wǎng)站性能標(biāo)準(zhǔn)進(jìn)行比較。它會(huì)給你一個(gè)介于0到100%之間的分?jǐn)?shù)。這是增強(qiáng)代碼以獲得更好性能的好方法。
十、在集群中運(yùn)行應(yīng)用程序
在Node.js中,你可以利用集群模塊來(lái)運(yùn)行與父進(jìn)程并發(fā)運(yùn)行的子進(jìn)程。子集群或進(jìn)程在V8、事件循環(huán)和內(nèi)存中運(yùn)行。這將為每個(gè)進(jìn)程分配負(fù)載和任務(wù)。
十一、內(nèi)存溢出
在這種狀態(tài)下,進(jìn)程完成了對(duì)內(nèi)存的使用,但沒(méi)有將其返回給另一個(gè)應(yīng)用程序或進(jìn)程使用的操作系統(tǒng)。每次在JavaScript中創(chuàng)建對(duì)象或聲明變量時(shí),都會(huì)占用內(nèi)存。當(dāng)你使用完一個(gè)對(duì)象或變量時(shí),內(nèi)存溢出可能會(huì)發(fā)生,但JS運(yùn)行時(shí)仍然會(huì)考慮你還需要它。這將影響系統(tǒng)性能,因?yàn)閼?yīng)該為其他不再可用的進(jìn)程釋放資源。避免JavaScript內(nèi)存泄漏的最佳方法是適當(dāng)?shù)毓芾碜饔糜颉?/p>
十二、異步加載:Defer和Async標(biāo)簽
JavaScript的異步加載意味著網(wǎng)站以多信息流的方式加載。
當(dāng)Web瀏覽器找到的字符串時(shí),它將在JavaScript執(zhí)行期間停止創(chuàng)建DOM和CSSOM模型。這就是大多數(shù)JavaScript代碼放在主HTML代碼之后的原因?聪旅娴拇a來(lái)理解這一點(diǎn):
復(fù)制
This will not appear until hello.js is loaded.
你可以給JavaScript添加一個(gè)async標(biāo)簽,這樣DOM模型就可以并行創(chuàng)建,并且在JavaScript加載和執(zhí)行時(shí)不會(huì)被干擾。
十三、總結(jié)
我們嘗試為你提供12個(gè)技巧來(lái)改進(jìn)你的JavaScript之旅。你可能會(huì)發(fā)現(xiàn)很難一次性記住上面提到的所有技巧。但通過(guò)實(shí)踐,你會(huì)學(xué)會(huì)所有這些方法,并見(jiàn)證JavaScript性能的重大提升。
原文鏈接:https://dzone.com/articles/12-ways-to-optimize-your-javascript-journey
譯者介紹
涂承燁,51CTO社區(qū)編輯,信息系統(tǒng)項(xiàng)目管理師、信息系統(tǒng)監(jiān)理師、PMP,某省綜合性評(píng)標(biāo)專(zhuān)家,擁有15年的開(kāi)發(fā)經(jīng)驗(yàn)。
文章內(nèi)容僅供閱讀,不構(gòu)成投資建議,請(qǐng)謹(jǐn)慎對(duì)待。投資者據(jù)此操作,風(fēng)險(xiǎn)自擔(dān)。
2024年的Adobe MAX 2024發(fā)布會(huì)上,Adobe推出了最新版本的Adobe Creative Cloud。
奧維云網(wǎng)(AVC)推總數(shù)據(jù)顯示,2024年1-9月明火炊具線上零售額94.2億元,同比增加3.1%,其中抖音渠道表現(xiàn)優(yōu)異,同比有14%的漲幅,傳統(tǒng)電商略有下滑,同比降低2.3%。
“以前都要去窗口辦,一套流程下來(lái)都要半個(gè)月了,現(xiàn)在方便多了!”打開(kāi)“重慶公積金”微信小程序,按照提示流程提交相關(guān)材料,僅幾秒鐘,重慶市民曾某的賬戶就打進(jìn)了21600元。
華碩ProArt創(chuàng)藝27 Pro PA279CRV顯示器,憑借其優(yōu)秀的性能配置和精準(zhǔn)的色彩呈現(xiàn)能力,為您的創(chuàng)作工作帶來(lái)實(shí)質(zhì)性的幫助,雙十一期間低至2799元,性價(jià)比很高,簡(jiǎn)直是創(chuàng)作者們的首選。
9月14日,2024全球工業(yè)互聯(lián)網(wǎng)大會(huì)——工業(yè)互聯(lián)網(wǎng)標(biāo)識(shí)解析專(zhuān)題論壇在沈陽(yáng)成功舉辦。