javascript 性能優(yōu)化

sean 發(fā)布于2019-08-19 14:37 / 2658人閱讀

摘要：盡量減少和對象和瀏覽器對象的交互。這能提高的操作的速度，從而提高性能。對的操作批量進行對樣式的更改最后通過增加和刪除類來進行。因為每次操作和元素的樣式更改瀏覽器都會重新渲染對性能造成影響。語句在編譯的時候更容易被優(yōu)化。會導致內存泄漏。

1. 盡量減少和DOM對象和瀏覽器對象的交互。 2. 選擇元素的時候盡量通過ID選擇器去選取元素document.getElement("id"); 3. 避免每次使用browser objects 方法時都遍歷原型?？梢杂靡粋€變量存放這些方法。如下：

var slice = [].slice,
    split = "".split;

4.簡化你的html,使你的html更加簡潔,刪除那些不必要的div,span 等標簽。這能提高javascript的dom操作的速度，從而提高性能。如下：yahoo34條中的一條,減少dom元素。

Reduce the Number of DOM Elements. A complex page means more bytes to download and it also means slower DOM access in JavaScript. It makes a difference if you loop through 500 or 5000 DOM elements on the page when you want to add an event handler for example.

document.getElementsByTagName("*").length獲取頁面中dom元素的數(shù)量。 5.對dom的操作批量進行,對樣式的更改最后通過增加和刪除類來進行。因為每次dom操作和元素的樣式更改瀏覽器都會重新渲染,對性能造成影響。

var ul = document.getElementById("id"),
    fragment = document.createDocumentFragment(),
    data = ["text1","text2","text3"],
    li;
for(var i = 0,len = data.length; i < len; i++) {
    li = document.createElment("li");
    li.appendChild(document.createTextNode(data[i]));
    fragment.appendChild(li);
}
ul.appendChild(fragment);

6. 減少對js庫的依賴 7. 合并js壓縮js 8. 僅僅加載你需要的模塊,可以使用依賴管理如Require.js 9. 在IE上使用Array.prototype.join()來代替字符串相加的方法來連接字符串。

  Joining strings using the plus sign (ie var ab = "a" + "b";) creates performance issues in IE when used within an iteration. This is because, like Java and C#, JavaScript uses unmutable strings. Basically, when you concatenate two strings, a third string is constructed for gathering the results with its own object instantiation logic and memory allocation. While other browsers have various compilation tricks around this, IE is particularly bad at it.

10.充分利用引用類型,對于函數(shù)傳參來說,傳引用與傳基本類型的值來說,引用的開銷更小。 11.縮短作用域鏈 12.利用好this變量,通過使用call,apply

var Person = Object.create({
  init: function(name) {
     this.name = name;
  },
  do: function(callback) {
     callback.apply(this);
  }
});
var john = new Person("john");
john.do(function() {
    alert(this.name); // "john" gets alerted because we rewired "this".
});

13. 使用switch代替if/else 語句。switch語句在編譯的時候更容易被優(yōu)化。 14. 變量聲明帶上var 慎用全局變量 15. 慎用閉包,閉包如果形成循環(huán)引用的話。會導致內存泄漏。 16. 使用for 代替 for in 遍歷數(shù)組

GPU云服務器云服務器性能優(yōu)化優(yōu)化系統(tǒng)性能網站性能優(yōu)化頁面性能優(yōu)化

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/78034.html

圖說 WebAssembly（五）：高性能原因

摘要：本文是圖說系列文章的第五篇。這樣的話，使用的開發(fā)者也不需要做任何適配，但是它們卻能獲得更高性能。該圖并不是用來準確的衡量其性能的。運行編寫出高性能的代碼是可能的。這種清理工作由引擎自動進行，稱為垃圾回收。本文是圖說 WebAssembly 系列文章的第五篇。如果您還未閱讀之前的文章，建議您從第一篇入手。在上一篇文章中，我們說到了使用 WebAssembly 和 JavaScript...

seal_de 2019-08-22 16:59 評論0 收藏0
前端性能優(yōu)化之--頁面渲染優(yōu)化全面解析

摘要：下面我們撇開網絡方面的優(yōu)化，只分析靜態(tài)資源方面的優(yōu)化。不過，也會阻止的構建和延緩網頁渲染。未優(yōu)化正常加載優(yōu)化后異步加載根據上面的分析，我們可以清楚的認識到，非必要優(yōu)先加載的，選擇異步加載是最優(yōu)選擇。為什么做優(yōu)化經典問題：白屏時間過長，用戶體驗差產生的原因：網絡問題、關鍵渲染路徑（CRP）問題怎么做優(yōu)化如何做好優(yōu)化呢，網上隨便一搜，就有很多優(yōu)化總結，無非就是網絡優(yōu)化、靜態(tài)資源（h...

MadPecker 2019-08-29 15:29 評論0 收藏0
前端性能優(yōu)化之--頁面渲染優(yōu)化全面解析

摘要：下面我們撇開網絡方面的優(yōu)化，只分析靜態(tài)資源方面的優(yōu)化。不過，也會阻止的構建和延緩網頁渲染。未優(yōu)化正常加載優(yōu)化后異步加載根據上面的分析，我們可以清楚的認識到，非必要優(yōu)先加載的，選擇異步加載是最優(yōu)選擇。為什么做優(yōu)化經典問題：白屏時間過長，用戶體驗差產生的原因：網絡問題、關鍵渲染路徑（CRP）問題怎么做優(yōu)化如何做好優(yōu)化呢，網上隨便一搜，就有很多優(yōu)化總結，無非就是網絡優(yōu)化、靜態(tài)資源（h...

gghyoo 2019-08-22 17:30 評論0 收藏0
前端性能優(yōu)化之--頁面渲染優(yōu)化全面解析

摘要：下面我們撇開網絡方面的優(yōu)化，只分析靜態(tài)資源方面的優(yōu)化。不過，也會阻止的構建和延緩網頁渲染。未優(yōu)化正常加載優(yōu)化后異步加載根據上面的分析，我們可以清楚的認識到，非必要優(yōu)先加載的，選擇異步加載是最優(yōu)選擇。為什么做優(yōu)化經典問題：白屏時間過長，用戶體驗差產生的原因：網絡問題、關鍵渲染路徑（CRP）問題怎么做優(yōu)化如何做好優(yōu)化呢，網上隨便一搜，就有很多優(yōu)化總結，無非就是網絡優(yōu)化、靜態(tài)資源（h...

gaomysion 2019-08-02 10:33 評論0 收藏0
個人常用JavaScript及React常用優(yōu)化總結

摘要：插件性能優(yōu)化及個人常用優(yōu)化方法經常會觸發(fā)視覺變化。作用域鏈指的是當前作用于下可用變量的集合，它在各種主流瀏覽器中至少包含兩個部分局部變量的集合和全局變量的集合。在考慮優(yōu)化時，數(shù)值和變量的性能差不多，并且速度顯著優(yōu)于對象屬性和數(shù)組元素。 JavaScript 插件性能優(yōu)化及個人react常用優(yōu)化方法 JavaScript 經常會觸發(fā)視覺變化。有時是直接通過樣式操作，有時是會產生視覺變化...

yuanxin 2019-08-20 15:07 評論0 收藏0