如何理解Vue实现原理与前端性能优化

create if

在编译阶段生成：

(create)   ? _c('div',[_v("create if")])   : _c('div',[_v("create else")])

在代码执行时，会根据create的值来选择创建哪个节点。

2.2.2 v-for指令原理

在应用程序中使用v-for指令：

{{item}}

在编译阶段生成：

_l((list), function(item, index){   return _c('li',[    _v(_s(item))   ]) })

_l是renderList的别名，执行代码时，_l函数会循环list变量，调用第二个参数中传递的函数，传递两个参数：item和index，当_c函数被调用时，会执行_v函数，创建一个节点。

2.2.3 自定义指令原理

在应用程序中，指令的处理逻辑分别监听了create函数、update函数以及destory函数，具体实现如下：

export default {   create: updateDirectives,   update: updateDirectives,   destory: function unbindDirectives (vnode){    updateDirectives(vnode, emptyNode)   }  }

钩子函数被触发后，会执行updateDirectives函数，代码如下：

function updateDirectives(oldVnode, vnode){   if (oldVnode.data.directives || vnode.data.directives) {    _update(oldVnode, vnode)   }  }

在该函数中，不论是否存在旧虚拟节点，只要其中存在directives，就会执行_update函数，_update函数代码如下：

function _update(oldVnode, vnode) {   const isCreate = oldVnode === emptyNode   const isDestory = vnode === emptyNode   const oldDirs = normalizeDirectives(oldVnode.data.directives, oldVnode.context)   const newDirs = normalizeDirectives(vnode.data.directives, vnode.context)   const dirsWithInsert = []   const dirsWithPostpatch = []   let key, oldDir, dir   for (key in newDirs) {    oldDir = oldDirs[key]    dir = newDirs[key]    if (!oldDir) { //新指令触发bind     callHook(dir, 'bind', vnode, oldVnode)     if (dir.def && dir.def.inserted) {      dirsWithInsert.push(dir)     }    } else { //指令已存在触发update     dir.oldValue = oldDir.value     callHook(dir, 'update', vnode, oldVnode)     if (dir.def && dir.def.componentUpdated) {      dirsWithPostpatch.push(dir)     }    }   }   if (dirsWithInsert.length) {    const callInsert = () => {     for (let i = 0; i < dirsWithInsert.length; i++) {      callHook(dirsWithInsert[i], 'inserted', vnode, oldVnode)     }    }    if (isCreate) {     mergeVNodeHook(vnode, 'insert', callInsert)    } else {     callInsert()    }   }   if (dirsWithPostpatch.length) {    mergeVNodeHook(vnode, 'postpatch', () => {     for(let i = 0; i < dirsWithPostpatch.length; i++) {      callHook(dirsWithPostpatch[i], 'componentUpdated', vnode, oldVnode)     }    })   }   if (!isCreate) {    for(key in oldDirs) {     if (!newDirs[key]) {      callHook(oldDirs[key], 'unbind', oldVnode, oldVnode, isDestory)     }    }   }  }

isCreate：判断该虚拟节点是否是一个新建的节点。

isDistory：判断是否删除一个旧虚拟节点。

oldDirs：旧的指令集合，oldVnode中保存的指令。

newDirs：新的指令集合，vnode中保存的指令。

dirsWithInsert：触发inserted指令钩子函数的指令列表。

dirsWithPostpatch：触发componentUpdated钩子函数的指令列表。

通过normalizeDirectives函数将模板中使用的指令从用户注册的自定义指令集合中取出来的结果如下：

{   v-customize: {    def: {inserted: f},    modifiers: {},    name: "customize",    rawName: "v-customize"   }  }

自定义指令的代码为：

Vue.directives('customize', {   inserted: function (el) {    el.customize()   }  })

虚拟DOM在对比和渲染时，会根据不同情景触发不同的钩子函数，当使用虚拟节点创建一个新的实际节点时，会触发create钩子函数，当一个DOM节点插入到父节点时，会触发insert钩子函数。

callHook函数执行钩子函数的方式如下：

function callHook(dir, hook, vnode, oldVnode, isDestory) {   const fn = dir.def && dir.def[hook]   if (fn) {    try {     fn(vnode.elm, dir, vnode, oldVnode, isDestory)    } catch (e) {     handleError(e, vnode.context, `directive ${dir.name} ${hook} hook`)   }   }  }

callHook函数的参数意义分别为：

dir：指令对象。

hook：将要触发的钩子函数名。

vnode：新的虚拟节点。

oldVnode：旧的虚拟节点。

isDestory：判断是否删除一个旧虚拟节点。

虚拟DOM在渲染时会触发的所有钩子函数及其触发机制如下：

需要注意的是，remove函数是只有一个元素从其父元素中移除时才会触发，如果该元素是被移除元素的子元素，则不会触发remove函数。

二、前端性能优化

前端在一个应用中，主要承担在用户打开一个页面时，发送请求到服务器，接收服务器返回的页面进行渲染并将渲染结果呈现给用户的功能。

要提高前端性能需要从与用户操作无关的客户端和服务端交互和浏览器解析页面着手，也就是从传输和渲染两方面着手。

1、请求传输

1.1请求维度

基于目前前后端传输广泛使用的HTTP 1.1协议，可以从压缩请求的大小和减少请求的数量两方面着手进行优化，主要的优化手段如下：

1.2协议维度

从1.0的短连接到1.1的长连接到HTTP2.0、3.0，做出了很多改变，每次协议的升级对前端性能优化来讲都是一次飞跃。HTTP2.0的新特性如下：

二进制分帧：HTTP2.0在应用层与传输层之间增加一个二进制分帧层，将所有传输的信息分割为更小的消息和帧,并对它们采用二进制格式的编码，使通信都在一个可以承载任意数量的双向数据流的TCP连接上完成。

压缩头部：使用HPACK算法，规定了在客户端和服务器端会使用并且维护“首部表”来跟踪和存储之前发送的键值对，对于相同的头部，不必再通过请求发送，减少了头部开销。

多路复用：客户端和服务器可以把HTTP消息分解为互不依赖的帧，然后乱序发送，最后再在另一端把它们重新组合起来。

请求优先级：每个流都可以带有一个31bit的优先值：0表示最高优先级；2的31次方-1表示最低优先级。

服务器推送：通过提供push-promise帧来实现真正意义上的浏览器推送，摆脱利用ajax轮询进行伪实时的场景。

2、浏览器渲染

2.1 浏览器单线程解析渲染阻塞

浏览器的主要构成如下：

它的几个常驻线程如下：

由于GUI线程和JS引擎线程互斥，故衍生了一系列避免渲染过程中发生阻塞的优化方法，如样式文件放头部，脚本文件放在DOM节点最末尾；针对不需要操作DOM的脚本，可以采用动态创建script标签的方式载入；脚本文件加上async或者defer等。

2.2 巨大的DOM开销

在浏览器渲染的过程中，巨大的DOM开销无疑成为了渲染效率是最大瓶颈。通过如下代码可以输出一个空DOM节点，查看它所包含的300余个属性和事件。

let ele = document.createElement("div")  let obj = {}  for (const prop in ele) {    obj[prop]=ele[prop]  }  console.log(obj)

2.2.1重绘与回流

重绘是指当页面展示元素中的一些元素需要更新属性，这些属性只是影响元素的外观、风格，而不会影响布局的，比如background-color。回流是指当页面展示元素中的一部分(或全部)因为元素的规模尺寸、布局、隐藏等改变而需要重新构建。显然，重绘不一定导致回流，回流必然导致重绘。

它们都会带来一定的DOM开销，需要尽力去避免，常见的避免手段有避免触发同步布局事件;对于复杂动画效果,使用绝对定位让其脱离文档流；css3硬件加速（transform、opacity、filters、Will-change）等。

2.2.2虚拟DOM

针对巨大的DOM开销，除了尽力避免重绘和回流，近几年还有一种比较流行的，各大框架比如VUE、react都使用的虚拟DOM的方式。

虚拟DOM是一颗以js对象为基础的树，用对象属性来描述节点，是对DOM的抽象，通过一系列操作将其映射到真实环境。

用一段代码来模拟展示一下这个过程，首先用户编写模板如下：

   {{item}}  

编译后的内容如下所示，采用了creatElement语法糖的形式创建节点。

createElement {   "ul",   {    attr:{     id: "myId"    }   },   [    createElement("li", 1),   createElement("li", 2),   createElement("li", 3)   ]  }

经过渲染函数的执行生成虚拟DOM树，其大致结构如下：

最终将虚拟DOM树转化为真实DOM。

虚拟DOM对性能的DOM开销的优化主要体现在当节点有变化时，它可以通过differ算法比较变化前后的虚拟DOM结构的变化，通过对节点属性的修改做必要的调整，而不是无脑的销毁旧节点创建新节点。

这个过程的主要步骤是：用js对象结构表示DOM树的结构，然后用这个树构造一个真正的DOM树，插入文档中；当状态变更时，重新构造一棵新树，与旧树进行对比，记录差异；将记录的差异应用到所构建的真正的DOM树上。需要特别注意的是，differ算法遵循同级比较的原则，在使用的过程中要尽量减少跨层级的DOM调整。

到此，关于“如何理解Vue实现原理与前端性能优化”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！