本文主要是在我讀《高性能Javascript》之后，想要記錄下一些有用的優(yōu)化方案，并且就我本身的一些經(jīng)驗，來大家一起分享下，

Javascript的加載與執(zhí)行

大家都知道，瀏覽器在解析DOM樹的時候，當(dāng)解析到script標簽的時候，會阻塞其他的所有任務(wù)，直到該js文件下載、解析執(zhí)行完成后，才會繼續(xù)往下執(zhí)行。因此，這個時候瀏覽器就會被阻塞在這里，如果將script標簽放在head里的話，那么在該js文件加載執(zhí)行前，用戶只能看到空白的頁面，這樣的用戶體驗肯定是特別爛。對此，常用的方法有以下：

• 將所有的script標簽都放到body最底部，這樣可以保證js文件是最后加載并執(zhí)行的，可以先將頁面展現(xiàn)給用戶。但是，你首先得清楚，頁面的首屏渲染是否依賴于你的部分js文件，如果是的話，則需要將這一部分js文件放到head上。

• 使用defer,比如下面這種寫法。使用defer這種寫法時，雖然瀏覽器解析到該標簽的時候，也會下載對應(yīng)的js文件，不過它并不會馬上執(zhí)行，而是會等到DOM解析完后（DomContentLoader之前)才會執(zhí)行這些js文件。因此，就不會阻塞到瀏覽器。

<script src="test.js" type="text/javascript" defer></script>

• 動態(tài)加載js文件,通過這種方式，可以在頁面加載完成后，再去加載所需要的代碼，也可以通過這種方式實現(xiàn)js文件懶加載/按需加載，比如現(xiàn)在比較常見的，就是webpack結(jié)合vue-router/react-router實現(xiàn)按需加載，只有訪問到具體路由的時候，才加載相應(yīng)的代碼。具體的方法如下：

1.動態(tài)的插入script標簽來加載腳本,比如通過以下代碼

  function loadScript(url, callback) {
    const script = document.createElement('script')；
    script.type = 'text/javascript';
    // 處理IE
    if (script.readyState) {
      script.onreadystatechange = function () {
        if (script.readyState === 'loaded' || script.readyState === 'complete') {
          script.onreadystatechange = null;
          callback();
        }
      }
    } else {
      // 處理其他瀏覽器的情況
      script.onload = function () {
        callback();
      }
    }
    script.src = url;
    document.body.append(script);
  }

  // 動態(tài)加載js
  loadScript('file.js', function () {
    console.log('加載完成');
  })

2.通過xhr方式加載js文件，不過通過這種方式的話，就可能會面臨著跨域的問題。例子如下：

  const xhr = new XMLHttpRequest();
  xhr.open('get', 'file.js');
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.text = xhr.responseText;
        document.body.append(script);
      }
    }
  }

3.將多個js文件合并為同一個，并且進行壓縮。 原因：目前瀏覽器大多已經(jīng)支持并行下載js文件了，但是并發(fā)下載還是有一定的數(shù)量限制了（基于瀏覽器，一部分瀏覽器只能下載4個），并且，每一個js文件都需要建立一次額外的http連接，加載4個25KB的文件比起加載一個100KB的文件消耗的時間要大。因此，我們最好就是將多個js文件合并為同一個，并且進行代碼壓縮。

javascript作用域

當(dāng)一個函數(shù)執(zhí)行的時候，會生成一個執(zhí)行上下文，這個執(zhí)行上下文定義了函數(shù)執(zhí)行時的環(huán)境。當(dāng)函數(shù)執(zhí)行完畢后，這個執(zhí)行上下文就會被銷毀。因此，多次調(diào)用同一個函數(shù)會導(dǎo)致創(chuàng)建多個執(zhí)行上下文。每隔執(zhí)行上下文都有自己的作用域鏈。相信大家應(yīng)該早就知道了作用域這個東西，對于一個函數(shù)而言，其第一個作用域就是它函數(shù)內(nèi)部的變量。在函數(shù)執(zhí)行過程中，每遇到一個變量，都會搜索函數(shù)的作用域鏈找到第一個匹配的變量，首先查找函數(shù)內(nèi)部的變量，之后再沿著作用域鏈逐層尋找。因此，若我們要訪問最外層的變量（全局變量），則相比直接訪問內(nèi)部的變量而言，會帶來比較大的性能損耗。因此，我們可以將經(jīng)常使用的全局變量引用儲存在一個局部變量里。

const a = 5;
function outter () {
  const a = 2;
  function inner () {
    const b = 2;
    console.log(b); // 2
    console.log(a); // 2
  }
  inner();
}

對象的讀取

javascript中，主要分為字面量、局部變量、數(shù)組元素和對象這四種。訪問字面量和局部變量的速度最快，而訪問數(shù)組元素和對象成員相對較慢。而訪問對象成員的時候，就和作用域鏈一樣，是在原型鏈(prototype)上進行查找。因此，若查找的成員在原型鏈位置太深，則訪問速度越慢。因此，我們應(yīng)該盡可能的減少對象成員的查找次數(shù)和嵌套深度。比如以下代碼

  // 進行兩次對象成員查找
  function hasEitherClass(element, className1, className2) {
    return element.className === className1 || element.className === className2;
  }
  // 優(yōu)化，如果該變量不會改變，則可以使用局部變量保存查找的內(nèi)容
  function hasEitherClass(element, className1, className2) {
    const currentClassName = element.className;
    return currentClassName === className1 || currentClassName === className2;
  }

DOM操作優(yōu)化

• 最小化DOM的操作次數(shù)，盡可能的用javascript來處理，并且盡可能的使用局部變量儲存DOM節(jié)點。比如以下的代碼：

  // 優(yōu)化前，在每次循環(huán)的時候，都要獲取id為t的節(jié)點，并且設(shè)置它的innerHTML
  function innerHTMLLoop () {
    for (let count = 0; count < 15000; count++) {
      document.getElementById('t').innerHTML += 'a';
    }
  }
  // 優(yōu)化后，
  function innerHTMLLoop () {
    const tNode = document.getElemenById('t');
    const insertHtml = '';
    for (let count = 0; count < 15000; count++) {
      insertHtml += 'a';
    }
    tNode.innerHtml += insertHtml;
  }

• 盡可能的減少重排和重繪,重排和重匯可能會代價非常昂貴，因此，為了減少重排重匯的發(fā)生次數(shù)，我們可以做以下的優(yōu)化

1.當(dāng)我們要對Dom的樣式進行修改的時候，我們應(yīng)該盡可能的合并所有的修改并且一次處理，減少重排和重匯的次數(shù)。

  // 優(yōu)化前
  const el = document.getElementById('test');
  el.style.borderLeft = '1px';
  el.style.borderRight = '2px';
  el.style.padding = '5px';

  // 優(yōu)化后,一次性修改樣式，這樣可以將三次重排減少到一次重排
  const el = document.getElementById('test');
  el.style.cssText += '; border-left: 1px ;border-right: 2px; padding: 5px;'

2.當(dāng)我們要批量修改DOM節(jié)點的時候，我們可以將DOM節(jié)點隱藏掉，然后進行一系列的修改操作，之后再將其設(shè)置為可見，這樣就可以最多只進行兩次重排。具體的方法如下：

  // 未優(yōu)化前
  const ele = document.getElementById('test');
  // 一系列dom修改操作

  // 優(yōu)化方案一，將要修改的節(jié)點設(shè)置為不顯示，之后對它進行修改，修改完成后再顯示該節(jié)點，從而只需要兩次重排
  const ele = document.getElementById('test');
  ele.style.display = 'none';
  // 一系列dom修改操作
  ele.style.display = 'block';

  // 優(yōu)化方案二，首先創(chuàng)建一個文檔片段(documentFragment),然后對該片段進行修改，之后將文檔片段插入到文檔中,只有最后將文檔片段插入文檔的時候會引起重排，因此只會觸發(fā)一次重排。。
  const fragment = document.createDocumentFragment();
  const ele = document.getElementById('test');
  // 一系列dom修改操作
  ele.appendChild(fragment);

3.使用事件委托：事件委托就是將目標節(jié)點的事件移到父節(jié)點來處理，由于瀏覽器冒泡的特點，當(dāng)目標節(jié)點觸發(fā)了該事件的時候，父節(jié)點也會觸發(fā)該事件。因此，由父節(jié)點來負責(zé)監(jiān)聽和處理該事件。

那么，它的優(yōu)點在哪里呢？假設(shè)你有一個列表，里面每一個列表項都需要綁定相同的事件，而這個列表可能會頻繁的插入和刪除。如果按照平常的方法，你只能給每一個列表項都綁定一個事件處理器，并且，每當(dāng)插入新的列表項的時候，你也需要為新的列表項注冊新的事件處理器。這樣的話，如果列表項很大的話，就會導(dǎo)致有特別多的事件處理器，造成極大的性能問題。而通過事件委托，我們只需要在列表項的父節(jié)點監(jiān)聽這個事件，由它來統(tǒng)一處理就可以了。這樣，對于新增的列表項也不需要做額外的處理。而且事件委托的用法其實也很簡單：

function handleClick(target) {
  // 點擊列表項的處理事件
}
function delegate (e) {
  // 判斷目標對象是否為列表項
  if (e.target.nodeName === 'LI') {
    handleClick(e.target);
  }
}
const parent = document.getElementById('parent');
parent.addEventListener('click', delegate);

以上就是javascript性能優(yōu)化的方法介紹（附示例）的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！