建站
咨詢
售后
建站咨詢
新聞中心
本文轉載自公眾號“讀芯術”(ID：AI_Discovery)。
目前創(chuàng)新互聯(lián)已為近千家的企業(yè)提供了網站建設、域名、網站空間、網站托管運營、企業(yè)網站設計、江達網站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
用戶訪問網站設備的硬件規(guī)格我們沒法控制，終端用戶訪問網站的設備或高端或低端，互聯(lián)網連接或好或差，這意味著我們必須盡可能優(yōu)化網站，以滿足所有用戶的需求。而與此同時，據W3Tech統(tǒng)計，全世界將近96%的網站都在使用JavaScript，JavaScript已成為有史以來最熱門的編程語言之一。
以下是一些小貼士，以供你更好地優(yōu)化JavaScript代碼，展現更好的性能。
順便一提，請確保共享和重用JS組件，以達成高質量代碼(需要時間來生成)和合理交付時間之間的恰當平衡。可以使用Bit (Github)之類的流行工具將項目中的組件(vanilla JS，TS，React，Vue等)共享到Bit的組件中心，這樣不會浪費太多時間。
1. 刪除不用的代碼和功能
應用程序包含的代碼越多，需要傳輸到客戶端的數據就越多。瀏覽器解析代碼所需時間也越長，有時有些功能可能根本沒有用到。最好只在開發(fā)環(huán)境中保留這些額外的代碼，而不要將其用于生產環(huán)境，這樣就不會給客戶端的瀏覽器帶來無用代碼的負擔。
不斷詢問自己某個功能、特性或代碼是否必要?？梢允謩踊蚴褂肬glify或google’s closurecompiler等工具移除不用的代碼，甚至可以用一種名為搖樹優(yōu)化(tree shaking)的技術，從應用程序中移除不用的代碼。
Webpack之類的打包器便提供這種技術，如果想刪除不用的npm包，可以使用npm prune命令。
圖源：unsplash
2. 隨時緩存
緩存通過減少延遲和網絡流量來提高網站的速度和性能，從而縮短顯示資源所需的時間。這可以通過緩存應用程序接口(Cache API)或超文本傳輸協(xié)議緩存(HTTPcaching)來實現。在滿足特定條件(如發(fā)布新內容)時，上述緩存機制能夠處理和重新生成緩存。
3. 避免內存泄漏
高級語言JS負責幾個底層管理，比如內存管理。垃圾回收機制在大多數編程語言中十分常見。通俗來說，垃圾回收機制就是簡單地收集和釋放已經分配給目標對象的內存，而這些內存并沒有在程序的任何部分使用。C語言之類的編程語言中，開發(fā)人員必須使用malloc()和dealloc()函數來分配和釋放內存。
盡管JavaScript自動執(zhí)行垃圾回收，但有時它并不完美。JavaScript ES6中，映射(Map)和集合(Set)和它們的“較弱”的同胞一起引入。這種“較弱”的同類被稱為WeakMap和WeakSet，它們對對象的引用“較弱”，允許對未引用的值進行垃圾回收，從而防止內存泄漏。
4. 盡早跳出循環(huán)
大周期循環(huán)必然會消耗大量寶貴時間，因此要盡早跳出循環(huán)。關鍵字break和continue可以做到這一點。編寫最高效的代碼是你的責任。在下面的例子中，如果沒有跳出(break)循環(huán)，代碼將運行循環(huán)1000000000次，這顯然導致了重載。
- let arr = new Array(1000000000).fill('----');
- arr[970] = 'found';
- for (let i = 0; i < arr.length; i++) {
- if (arr[i] === 'found') {
- console.log("Found");
- break;
- }
- }
在下面的例子中，若循環(huán)與條件不匹配時沒有使用繼續(xù)(continue)關鍵字，該函數將持續(xù)運行1000000000次。我們僅處理處于偶數位置的數組元素，這將循環(huán)執(zhí)行減少了近一半。
- let arr = new Array(1000000000).fill('----');
- arr[970] = 'found';
- for (let i = 0; i < arr.length; i++) {
- if(i%2!=0){
- continue;
- };
- process(arr[i]);
- }
5. 最小化變量計算次數
可使用閉包減少變量的計算次數。通俗來說，JavaScript中的閉包可以從內部函數訪問外部函數。每次創(chuàng)建函數時都會創(chuàng)建閉包，而不是調用。即使外部函數已經返回，內部函數也可以訪問外部作用域的變量。
通過以下兩個實例來解釋這一點：
- function findCustomerCity(name) {
- const texasCustomers = ['John','Ludwig', 'Kate'];
- const californiaCustomers = ['Wade','Lucie','Kylie'];
- return texasCustomers.includes(name) ?'Texas' :
- californiaCustomers.includes(name) ?'California' : 'Unknown';
- };
多次調用上述函數，每次都會創(chuàng)建一個新對象。每次調用中，內存都被畫蛇添足地重新分配給變量texasCustometrs 和californiaCustomers。
使用帶有閉包的解決方案可僅實例化變量一次?？纯聪旅娴睦樱?/p>
- function findCustomerCity() {
- const texasCustomers = ['John','Ludwig', 'Kate'];
- const californiaCustomers = ['Wade','Lucie','Kylie'];
- return name =>texasCustomers.includes(name) ? 'Texas' :
- californiaCustomers.includes(name) ?'California' : 'Unknown';
- };let cityOfCustomer = findCustomerCity();cityOfCustomer('John');//Texas
- cityOfCustomer('Wade');//California
- cityOfCustomer('Max');//Unknown
上例中，在閉包的輔助下，返回到變量cityOfCustomer的內部函數可以訪問外部函數findCustomerCity()的常量。每當內部函數被調用，其名稱作為參數傳遞，不需要再次實例化常數。
6. 避免使用delete關鍵字
delete關鍵字用于從對象中移除屬性。對于delete關鍵字的性能，用戶已頗有微詞，不足之處預計在未來的更新中得到修復。你可以選擇簡單地將不需要的屬性設置為undefined。
- const object = {name:"Jane Doe", age:43};
- object.age = undefined;
也可以使用地圖(Map)對象，據布雷特所說，此種方式更為快捷。
7. 最小化DOM訪問
與其他JavaScript語句相比，訪問DOM的速度很慢。對DOM進行更改會觸發(fā)布局的重新繪制，網站運行愈加緩慢。一次性訪問單個DOM元素并將其用作局部變量以減少訪問次數。任務完成后，務必將變量設置為null以移除該變量的值。這將觸發(fā)垃圾回收機制以防止內存泄漏。
8. 壓縮文件
圖源：takscan
使用諸如Gzip之類的壓縮方法可縮小JavaScript文件的大小。鑒于瀏覽器所需下載資料縮小，網站性能也隨之提高。壓縮可將文件大小減少80%。
9. 縮減最終代碼
有人認為縮減和壓縮是一樣的，事實并不是這樣。壓縮使用特殊算法來改變文件的輸出大小，縮減則需刪除JavaScript文件中的注釋和多余空格。這一過程可以在許多工具和包的幫助下完成，這些工具和包都可以在網上找到?？s減已成為頁面優(yōu)化的標準做法，也是前端優(yōu)化的主要組成部分。
縮減可將文件大小減少60%。
10. 使用節(jié)流(throtte)和去抖動(debounce)
節(jié)流和去抖動可嚴格控制代碼處理事件的次數。
節(jié)流指定函數可以超時的最大次數。例如，“每1000毫秒最多執(zhí)行一次onkeyup事件函數?！边@意味著如果每秒輸入20個鍵，事件每秒只會觸發(fā)一次，這將減少代碼的負載。
去抖動指定函數最小的持續(xù)時間，該時間是該函數自上一次執(zhí)行后再次運行的時間。換句話說，“只有在經過600毫秒而沒有調用該函數的情況下，才會執(zhí)行這個函數?！边@就意味著自最后一次執(zhí)行該函數起600毫秒內，該函數不會被調用。
11. 使用異步和延遲
圖源：unsplash
現代網站中，腳本比超文本標記語言(HTML)更密集，大小更大，處理時間更長。默認情況下，瀏覽器必須等待腳本下載并執(zhí)行后，再處理頁面的其余部分。這可能會導致龐大的腳本阻止網頁加載。為避免這種情況，JavaScript提供了兩種名為異步和延遲的技術，您只需將這些屬性添加到