1.HTML優(yōu)化篇

1.減少重繪和回流

不了解重繪和回流請(qǐng)點(diǎn)擊我要了解

回流這一階段主要是計(jì)算節(jié)點(diǎn)的位置和幾何信息，那么當(dāng)頁面布局和幾何信息發(fā)生變化的時(shí)候，就需要回流

• 添加或刪除可見的DOM元素
• 元素的位置發(fā)生變化
• 元素的尺寸發(fā)生變化（包括外邊距、內(nèi)邊框、邊框大小、高度和寬度等）
• 內(nèi)容發(fā)生變化，比如文本變化或圖片被另一個(gè)不同尺寸的圖片所替代。
• 頁面一開始渲染的時(shí)候（這肯定避免不了）
• 瀏覽器的窗口尺寸變化（因?yàn)榛亓魇歉鶕?jù)視口的大小來計(jì)算元素的位置和大小的）

注意：回流一定會(huì)觸發(fā)重繪，而重繪不一定會(huì)回流

不好的寫法

const el = document.getElementById('test');
el.style.padding = '5px';
el.style.borderLeft = '1px';
el.style.borderRight = '2px';

• 使用cssText優(yōu)化

const el = document.getElementById('test');
el.style.cssText += 'border-left: 1px; border-right: 2px; padding: 5px;';

• 修改CSS的class優(yōu)化

const el = document.getElementById('test');
el.className += ' active';

2.對(duì)于復(fù)雜動(dòng)畫效果,使用絕對(duì)定位讓其脫離文檔流

對(duì)于復(fù)雜動(dòng)畫效果，由于會(huì)經(jīng)常的引起回流重繪，因此，我們可以使用絕對(duì)定位，讓它脫離文檔流。否則會(huì)引起父元素以及后續(xù)元素頻繁的回流。這個(gè)我們就直接上個(gè)例子。

2.CSS優(yōu)化篇

3.JS優(yōu)化篇

1 .減少全部變量訪問

在有大量訪問全局變量的時(shí)候，可以將全局變量賦值給局部變量訪問，因?yàn)椴樵內(nèi)肿兞勘染植孔兞康男阅芟囊?br> 優(yōu)化前

// other.js
window.a = 10;
// use.js
let num =0;
for(let i = 0; i<100; i++ ){
  num+=window.a;
}

優(yōu)化后

//好的使用方式
let num =0;
let sub =window.a; //減少了全局變量的訪問
for(let i = 0; i<100; i++ ){
  num+=sub;
}

4.Vue優(yōu)化

1.使用v-once指令。渲染一次，提高dom的渲染效率

當(dāng)我們需要渲染一次的時(shí)候

2.v-if VS v-show

v-if 是“真正”的條件渲染，因?yàn)樗鼤?huì)確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建。

v-if 也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r(shí)，才會(huì)開始渲染條件塊。

相比之下，v-show 就簡單得多——不管初始條件是什么，元素總是會(huì)被渲染，并且只是簡單地基于 CSS 進(jìn)行切換。

一般來說，v-if 有更高的切換開銷，而v-show有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運(yùn)行時(shí)條件很少改變，則使用 v-if 較好。

3. 避免 v-if 和 v-for 用在一起^必要

永遠(yuǎn)不要把 v-if 和 v-for 同時(shí)用在同一個(gè)元素上。

一般我們在兩種常見的情況下會(huì)傾向于這樣做：
為了過濾一個(gè)列表中的項(xiàng)目 (比如 v-for="user in users" v-if="user.isActive")。在這種情形下，請(qǐng)將 users 替換為一個(gè)計(jì)算屬性 (比如 activeUsers)，讓其返回過濾后的列表。

為了避免渲染本應(yīng)該被隱藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。這種情形下，請(qǐng)將 v-if 移動(dòng)至容器元素上 (比如 ul, ol)。

真正原因： 首先v-for 比 v-if 具有更高的優(yōu)先級(jí),因此當(dāng) 條件判斷和列表渲染綁定在一塊時(shí)，會(huì)導(dǎo)致列表渲染依賴條件渲染，因此哪怕我們只渲染出一小部分用戶的元素，也得在每次重渲染的時(shí)候遍歷整個(gè)列表，不論活躍用戶是否發(fā)生了變化。

反例：

<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

vue內(nèi)部會(huì)轉(zhuǎn)化成如下代碼

this.users.map(function (user) {
  if (user.isActive) {
    return user.name
  }
})

正確示范(優(yōu)化后)

<ul v-if="shouldShowUsers">
  <li
    v-for="user in users"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

或者使用computed過濾數(shù)據(jù)(優(yōu)化后)

computed: {
  activeUsers: function () {
    return this.users.filter(function (user) {
      return user.isActive
    })
  }
}

4.指令縮寫

指令縮寫 (用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot:) 應(yīng)該要么都用要么都不用。

5. nextTick的使用

Vue.nextTick(function () {
  // DOM 更新了
// this =null
})

this.$nextTick(function () {
//       this指向this
      })

6.減少data下的屬性創(chuàng)建

vue官方語言說明：

當(dāng)你把一個(gè)普通的 JavaScript 對(duì)象傳入 Vue 實(shí)例作為 data 選項(xiàng)，Vue 將遍歷此對(duì)象所有的屬性，并使用 Object.defineProperty 把這些屬性全部轉(zhuǎn)為 getter/setter。Object.defineProperty 是 ES5 中一個(gè)無法 shim 的特性，這也就是 Vue 不支持 IE8 以及更低版本瀏覽器的原因。

所以，當(dāng)你創(chuàng)建過多，或者無用的屬性時(shí)，會(huì)增加vue內(nèi)部的observe數(shù)量

未完待續(xù)...