2. 程式人生 > >JavaScript 效能優化的小知識總結

JavaScript 效能優化的小知識總結

阿新 • • 發佈：2018-12-22

前言

原創地址

一直在學習 javascript，也有看過《犀利開發 Jquery 核心詳解與實踐》，對這本書的評價只有兩個字犀利，可能是對 javascript 理解的還不夠透徹異或是自己太笨，更多的是自己不擅於思考懶得思考以至於裡面說的一些精髓都沒有太深入的理解。

鑑於想讓自己有一個提升，進不了一個更加廣闊的天地，總得找一個屬於自己的居所好好生存，所以平時會有意無意的去積累一些使用 jQuerry 的常用知識，特別是對於效能要求這一塊，總是會想是不是有更好的方式來實現。

下面是我總結的一些小技巧，僅供參考。(我先會說一個總標題，然後用一小段話來說明這個意思 再最後用一個 demo 來簡單言明)

避免全域性查詢

在一個函式中會用到全域性物件儲存為區域性變數來減少全域性查詢，因為訪問區域性變數的速度要比訪問全域性變數的速度更快些

  1. function search(){
  2. //當我要使用當前頁面地址和主機域名
  3.     alert(window.location.href + window.location.host);
  4. }
  5. //最好的方式是如下這樣  先用一個簡單變數儲存起來
  6. function search(){
  7. var location = window.location;
  8.     alert(location.href + location.host);
  9. }

定時器

如果針對的是不斷執行的程式碼，不應該使用 setTimeout，而應該是用 setInterval

，因為 setTimeout 每一次都會初始化一個定時器，而 setInterval 只會在開始的時候初始化一個定時器

  1. var timeoutTimes =0;
  2. function timeout(){
  3.     timeoutTimes++;
  4. if(timeoutTimes <10){
  5.         setTimeout(timeout,10);
  6. }
  7. }
  8. timeout();
  9. //可以替換為：
  10. var intervalTimes =0;
  11. function interval(){
  12.     intervalTimes++;
  13. if(intervalTimes >=10){
  14.         clearInterval(interv
     
    );
  15. }
  16. }
  17. var interv = setInterval(interval,10);

字串連線

如果要連線多個字串，應該少使用 +=，如

s+=a;

s+=b;

s+=c;

應該寫成 s+=a + b + c；

而如果是收集字串，比如多次對同一個字串進行 += 操作的話，最好使用一個快取，使用 JavaScript 陣列來收集，最後使用 join 方法連線起來

  1. var buf =[];
  2. for(var i =0; i <100; i++){
  3.     buf.push(i.toString());
  4. }
  5. var all = buf.join("");

避免 with 語句

和函式類似 ，with 語句會建立自己的作用域，因此會增加其中執行的程式碼的作用域鏈的長度，由於額外的作用域鏈的查詢，在 with 語句中執行的程式碼肯定會比外面執行的程式碼要慢，在能不使用 with 語句的時候儘量不要使用 with 語句。

  1. with(a.b.c.d){
  2.     property1 =1;
  3.     property2 =2;
  4. }
  5. //可以替換為：
  6. var obj = a.b.c.d;
  7. obj.property1 =1;
  8. obj.property2 =2;

數字轉換成字串

般最好用 "" + 1 來將數字轉換成字串，雖然看起來比較醜一點，但事實上這個效率是最高的，效能上來說：

("" +) > String() > .toString() > new String()

浮點數轉換成整型

很多人喜歡使用 parseInt()，其實 parseInt() 是用於將字串轉換成數字，而不是浮點數和整型之間的轉換，我們應該使用 Math.floor() 或者 Math.round()

各種型別轉換

  1. var myVar ="3.14159",
  2. str =""+ myVar,//  to string  
  3. i_int =~~myVar,//  to integer  
  4. f_float =1* myVar,//  to float  
  5. b_bool =!!myVar,/*  to boolean - any string with length 
  6.                         and any number except 0 are true */
  7. array =[myVar];//  to array  

如果定義了 toString() 方法來進行型別轉換的話，推薦顯式呼叫 toString()，因為內部的操作在嘗試所有可能性之後，會嘗試物件的 toString() 方法嘗試能否轉化為 String，所以直接呼叫這個方法效率會更高

多個型別宣告

在 JavaScript 中所有變數都可以使用單個 var 語句來宣告，這樣就是組合在一起的語句，以減少整個指令碼的執行時間，就如上面程式碼一樣，上面程式碼格式也挺規範，讓人一看就明瞭。

插入迭代器

如 var name=values[i]; i++; 前面兩條語句可以寫成 var name=values[i++]

使用直接量

  1. var aTest =newArray();//替換為
  2. var aTest =[];
  3. var aTest =newObject;//替換為
  4. var aTest ={};
  5. var reg =newRegExp();//替換為
  6. var reg =/../;
  7. //如果要建立具有一些特性的一般物件，也可以使用字面量，如下：
  8. var oFruit =new O;
  9. oFruit.color ="red";
  10. oFruit.name ="apple";
  11. //前面的程式碼可用物件字面量來改寫成這樣：
  12. var oFruit ={ color:"red", name:"apple"};

使用 DocumentFragment 優化多次 append

一旦需要更新 DOM, 請考慮使用文件碎片來構建 DOM 結構，然後再將其新增到現存的文件中。

  1. for(var i =0; i <1000; i++){
  2. var el = document.createElement('p');
  3.     el.innerHTML = i;
  4.     document.body.appendChild(el
            
      
    
           
    
              
              
    
            
    
            
    相關推薦
    
			   
            
            
            
 

    

    
    
    
    JavaScript性能優化小知識總結
    
     
     asc   之間   innerhtml   賦值   我們   event   alert   標題   標準   　　一直在學習javascript，也有看過《犀利開發Jquery內核詳解與實踐》，對這本書的評價只有兩個字犀利，可能是對javascript理解的還不夠透徹異或是自己太笨，更多的是自己不擅於 
    

    
  
 

    

    
    
    
    JavaScript效能優化小竅門彙總（含例項）
    
     
     
							
							
							
  在眾多語言中，JavaScript已經佔有重要的一席之地，利用JavaScript我們可以做很多事情 ， 應用廣泛。在web應用專案中，需要大量JavaScript的程式碼，將來也會越來越多。但是由於JavaScript是一個作為解釋執行的語言，而且它的單 
    

    
  
 

    

    
    
    
    JavaScript 效能優化的小知識總結
    
     
     
                
前言
原創地址

一直在學習 javascript，也有看過《犀利開發 Jquery 核心詳解與實踐》，對這本書的評價只有兩個字犀利，可能是對 javascript 理解的還不夠透徹異或是自己太笨，更多的是自己不擅於思考懶得思考以至於裡面說的一些精髓都沒有太深入的理 
    

    
  
 

    

    
    
    
    JavaScript 前端效能優化小竅門例項彙總
    
     
     
                                        
                                                在眾多語言中，JavaScript已經佔有重要的一席之地，利用JavaScript我們可以做很多事情 ， 應用廣泛。
在web應用 
    

    
  
 

    

    
    
    
    MFC 小知識總結四
    
     
     list   音樂   star   tor   open   details   cli   wav   mage   



1 PlaySound  播放WAV格式的音樂


This function plays a sound specified by a file na 
    

    
  
 

    

    
    
    
    Html小知識總結
    
     
     定位   無序列表   sta   驗證碼   設置背景圖片   改變   relative   onclick   知識   1、跳出新頁面：<basetarget=”_blank”>target="_self"不跳轉<form action="xxx.htm 
    

    
  
 

    

    
    
    
    springboot的小知識總結
    
     
     知識總結   csdn   行處理   png   nbsp   三種   BE   bean   log   1、RestTemplate提交表單數據的三種方法
https://blog.csdn.net/yiifaa/article/details/77939282

 
2、spring data的分頁 
    

    
  
 

    

    
    
    
    JavaScript正則常用知識總結
    
     
     ignorecas   nbsp   enc   屬性。   docs   插入   pro   兩種   .org   一、JavaScript正則相關方法
str.match(regexp)與regexp.exec(str)功能類似。
str.search(regexp)與regexp.test(str) 
    

    
  
 

    

    
    
    
    javascript的一些小知識
    
     
     每一個   www.   lean   http   適應   and   左移   和數   邏輯   把外部javascript文件放在瀏覽器的後面，可以提高瀏覽器的加載速度defer="defer"，等到瀏覽器加載完畢後才執行腳本，只對外部腳本鏈接有效使用var定義的變量是局部變量， 
    

    
  
 

    

    
    
    
    SQL效能優化（不斷總結）
    
     
      
 
 1.查詢的模糊匹配      儘量避免在一個複雜查詢裡面使用 LIKE '%parm1%'—— 紅色標識位置的百分號會導致相關列的索引無法使用，最好不要用. 解決辦法: 其實只需要對該指令碼略做改進，查詢速度便會提高近百倍。改進方法如下：  &nbs 
    

    
  
 

    

    
    
    
    JavaScript效能優化方案(事件委託詳解）
    
     
      
  
  
 事件處理程式過多導致效能下降 
 在 JavaScript 中，新增到頁面上的事件處理程式數量會直接關係到頁面的整體執行效能。導致這一問題的原因是多方面的。首先，每個函式都是物件，都會佔用記憶體；記憶體中物件越多，效能就越差。其次，必須事先指定所有事件處理程式所造成的 DOM 訪問次數，也會 
    

    
  
 

    

    
    
    
    vue 小知識總結 ------ 自定義公共彈窗
    
     
     
                1 新建彈窗元件檔案 selfToast.vue

主體內容：
<!-- template -->
<template>
    <transition name="main-bg-fade">
        <div class= 
    

    
  
 

    

    
    
    
    JavaScript 效能優化技巧分享
    
     
     
JavaScript 作為當前最為常見的直譯式指令碼語言，已經廣泛應用於 Web 應用開發中。為了提高Web應用的效能，從 JavaScript 的效能優化方向入手，會是一個很好的選擇。
本文從載入、上下文、解析、編譯、執行和捆綁等多個方面來講解 JavaScript 的效能優化技巧，以便讓更多的前端開發人 
    

    
  
 

    

    
    
    
    前端效能優化方法--個人總結
    
     
     
								
								            
							
							
							1.樣式表放在頂部，指令碼放在底部。 
2.用變數儲存DOM，避免重複獲取同一個DOM。 
3.合併css和js檔案，並壓縮。減少http請求。 
4.圖片做出雪碧圖。 
5.使用cdn內容釋出網路。( 
    

    
  
 

    

    
    
    
    dubbo小知識總結
    
     
     
                


一、Duboo基本概念解釋

Dubbo是一種分散式服務框架。 Webservice也是一種服務框架，但是webservice並不是分散式的服務框架，他需要結合F5實現負載均衡。因此，dubbo除了可以提供服務之外，還可以實現軟負載均衡。它還提供了兩個功能Monitor 
    

    
  
 

    

    
    
    
    JavaScript效能優化之搖樹
    
     
     作者｜Jeremy Wagner譯者｜薛命燈 
現代 Web 應用程式可能會變得非常巨大，特別是它們的 JavaScript 部分。HTTP Archive 網站的資料顯示，截至 2018 年中，傳輸到移動裝置上的 JavaScript 檔案中值大約為 350 KB。而這只是傳輸大小，JavaScript 在 
    

    
  
 

    

    
    
    
    postgres 效能優化小技巧
    
     
     
							
							
							




Performance Tips



1) Using EXPLAIN

PostgreSQL devises a query plan for each query it receives. Choosing the right plan to m 
    

    
  
 

    

    
    
    
    服務端效能優化小計
    
     
     
                
資料交換方式並非類似 TCP 的資料流，所以，沒有必要把服務間的通訊形式強行統一為單個數據塊。最合適做程序內通訊的方式就是 C 結構。訊息傳送方和接收方都處於同一個程序內時，它們一定可以識別同一個 C 結構對映的記憶體塊，不必考慮記憶體佈局，位元組序等問題。在這個層面上使用 
    

    
  
 

    

    
    
    
    一些小知識總結（雖然可能沒用）
    
     
     1、typeof可以用於未定義的變數 
 
 1 var a;
2 alert(typeof a);
3 alert(typeof b); 
 
上面的程式碼輸出結果相同，typeof不區分未定義變數和未初始化變數，它們的返回值都為undefined。 
2、undefined實際上是從null派生出來的，在 
    

    
  
 

    

    
    
    
    Javascript效能優化閱讀筆記
    
     
     
							
							
							第一章 載入和執行

大多數瀏覽器都是用單一程序處理UI介面的重新整理和JavaScript的指令碼執行，所以同一時間只能做一件事，Javascript執行過程耗時越久，瀏覽器等待響應的時間就越長。

所以，HTML頁面在遇到

無阻塞的指令碼

儘管減少Jav