1.HTML优化篇

---

1.减少重绘和回流

不了解重绘和回流请点击我要了解

回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流

• 添加或删除可见的DOM元素
• 元素的位置发生变化
• 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
• 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。
• 页面一开始渲染的时候（这肯定避免不了）
• 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

注意：回流一定会触发重绘，而重绘不一定会回流

不好的写法

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

• 使用cssText优化

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

• 修改CSS的class优化

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

2.对于复杂动画效果,使用绝对定位让其脱离文档流

对于复杂动画效果，由于会经常的引起回流重绘，因此，我们可以使用绝对定位，让它脱离文档流。否则会引起父元素以及后续元素频繁的回流。这个我们就直接上个例子。

2.CSS优化篇

---

3.JS优化篇

---

1 .减少全部变量访问

在有大量访问全局变量的时候，可以将全局变量赋值给局部变量访问，因为查询全局变量比局部变量的性能消耗要大
优化前

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

优化后

//好的使用方式
let num =0;
let sub =window.a; //减少了全局变量的访问
for(let i = 0; i<100; i++ ){
  num+=sub;
}

4.Vue优化

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

当我们需要渲染一次的时候

2.v-if VS v-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

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

永远不要把 v-if 和 v-for 同时用在同一个元素上。

一般我们在两种常见的情况下会倾向于这样做：
为了过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。

为了避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。这种情形下，请将 v-if 移动至容器元素上 (比如 ul, ol)。

真正原因： 首先v-for 比 v-if 具有更高的优先级,因此当 条件判断和列表渲染绑定在一块时，会导致列表渲染依赖条件渲染，因此哪怕我们只渲染出一小部分用户的元素，也得在每次重渲染的时候遍历整个列表，不论活跃用户是否发生了变化。

反例：

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

vue内部会转化成如下代码

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

正确示范(优化后)

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

或者使用computed过滤数据(优化后)

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

4.指令缩写

指令缩写 (用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot:) 应该要么都用要么都不用。

5. nextTick的使用

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

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

6.减少data下的属性创建

vue官方语言说明：

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

所以，当你创建过多，或者无用的属性时，会增加vue内部的observe数量

---

未完待续...