2024年前端最全学习vue源码（8）手写优化器(1)，2024年最新Web前端面试题2024中高级

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

在学习vue源码（7）手写解析器里我们已经学会了解析器怎么实现，现在 就来看看 优化器怎么实现吧。

优化器的目标是找出那些静态节点并打上标记

优化器的实现原理主要分两步：

第一步：用递归的方式将所有节点添加 static 属性，标识是不是静态节点

第二步：标记所有静态根节点

而静态节点指的是 DOM 不需要发生变化的节点，例如：

我是静态节点，我不需要发生变化

落实到AST中，静态节点指的是static属性为true的节点，例如

{

type:1,

tag:‘p’,

staticRoot:false,

static:true,

…

}

标记静态节点有两个好处：

1. 每次重新渲染的时候不需要为静态节点创建新节点

2. 在 Virtual DOM 中 patching 的过程可以被跳过

什么是静态根节点？

答：子节点全是静态节点的节点就是静态根节点，例如：

• 我是静态节点，我不需要发生变化
• 我是静态节点2，我不需要发生变化
• 我是静态节点3，我不需要发生变化

• ul 就是静态根节点。

  落实到AST中，静态根节点指的是staticRoot属性为true的节点，例如

  {

  type:1,

  tag:‘ul’,

  staticRoot:false,

  static:true,

  …

  }

  上面说到：

  优化器的实现原理主要分两步：

  ​ 第一步：用递归的方式将所有节点添加 static 属性，标识是不是静态节点

  ​ 第二步：标记所有静态根节点

  源码中是这样实现的：

  function optimize(root, options) {

  if (!root) return

  // first pass: mark all non-static nodes.

  markStatic(root);

  // second pass: mark static roots.

  markStaticRoots(root);

  }

  现在先看看第一步：

  如何将所有节点标记 static 属性？

  vue 判断一个节点是不是静态节点的做法其实并不难：

  1. 先根据自身是不是静态节点做一个标记 node.static = isStatic(node)

  2. 然后在循环 children，如果 children 中出现了哪怕一个节点不是静态节点，在将当前节点的标记修改成 false： node.static = false。

  如代码所示：

  function markStatic (node) {

  node.static = isStatic(node);

  if (node.type === 1) {

  for (var i = 0, l = node.children.length; i < l; i++) {

  var child = node.children[i];

  markStatic(child);

  }

  }

  }

  如何判断一个节点是不是静态节点？

  也就是说 isStatic 这个函数是如何判断静态节点的？

  function isStatic (node: ASTNode): boolean {

  if (node.type === 2) { // expression

  return false

  }

  if (node.type === 3) { // text

  return true

  }

  return !!(node.pre || (

  !node.hasBindings && // no dynamic bindings

  !node.if && !node.for && // not v-if or v-for or v-else

  !isBuiltInTag(node.tag) && // not a built-in

  isPlatformReservedTag(node.tag) && // not a component

  !isDirectChildOfTemplateFor(node) &&

  Object.keys(node).every(isStaticKey)

  ))

  }

  先解释一下，在上文讲的解析器中将 模板字符串 解析成 AST 的时候，会根据不同的文本类型设置一个 type：

  

  所以上面 isStatic 中的逻辑很明显，如果 type === 2 那肯定不是 静态节点 返回 false，如果 type === 3 那就是静态节点，返回 true。

  那如果 type === 1，就有点复杂了，元素节点判断是不是静态节点的条件很多，咱们先一个个看。

  首先如果 node.pre 为 true 直接认为当前节点是静态节点，（v-pre是vue的一个指令）

  其次 node.hasBindings 不能为 true。

  node.hasBindings 属性是在解析器转换 AST 时设置的，如果当前节点的 attrs 中，有 v-、@、:开头的 attr，就会把 node.hasBindings 设置为 true。

  const dirRE = /^v-|@|^:/

  if (dirRE.test(attr)) {

  // mark element as dynamic

  el.hasBindings = true

  }

  JavaScript 和 ES6

  在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

  

  如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】