例子需要先了解的内容 挂载 1ReactDOM.render(<App />, document.getElementById('container')) 这段代码的含义是想在容器中渲染出一个组件。 fiber 对象 在 createFiberRoot 函数内部，分别创建了两个 root，一个 root 叫做 FiberRoot，另一个 root 叫做 RootFiber，并且它们两者还是相互引用的。 对于 FiberRoot 对象来说，我们现在只需要了解两个属性，分别是 conta ...

vue-server-renderer 简单了解该软件包的作用是：vue2.0 提供在 node.js 服务器端呈现的。 API createRenderer 该方法是创建一个 renderer 实列。如下代码： 1const renderer = require('vue-server-renderer').createRenderer() renderer.renderToString(vm, cb); 该方法的作用是：将 Vue 实列呈现为字符串。该方法的回调函数是一个标准的 No ...

Babel Babel 是什么 AST 是什么 访问者模式 charCodeAt 其他内容简单介绍 cli plugin presets polyfill babel-runtime & babel-plugin-transform-runtime .babelrc、babel.config.js、package.json 等配置 插件 @babel/parser 7.x（babylon 6.x） @babel/traverse 7.x（babel-traverse 6.x） ...

API@babel/parser：Babel 的解析器。最初是 从Acorn项目fork出来的。Acorn非常快，易于使用，并且针对非标准特性(以及那些未来的标准特性) 设计了一个基于插件的架构。 12345678const { parse} = require('@babel/parser');const code = `function square(n) { return n * n; }`;const ast = parse(code ...

前置知识开始之前补充一些知识 String.prototype.codePointAt 方法，返回 一个 Unicode 编码点值的非负整数，如果在指定的位置没有元素则返回 undefined 示例： 12345str.codePointAt(pos)// pos 这个字符串中需要转码的元素的位置。'ABC'.codePointAt(1); // 66'XYZ'.codePointAt(3); // undefined ast（抽象语法树） 可以在这个网站尝试代码转成ast ：http ...

Babel是什么Babel 是一个 JavaScript 编译器，是一个工具链。主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。它能做的事情： 语法转换 通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块) 源码转换 (codemods) 插件Babel 是一个编译器（输入源码 => 输出编译后的代码）。就像其他编译器一样，编译过程分为 ...

定义 角色介绍: Visitor：表示访问者的抽象类，用于声明对数据结构中xxx元素访问的visit(xxx)方法。ConcreteVisitor：表示具体的访问者，继承Visitor并对其声明的抽象方法提供具体实现。Element：表示元素的抽象类，即访问者实际要访问的对象，Element角色需要对访问者提供一个开放的接口，即accept方法，该方法的参数就是Visitor角色。ConcreteElement：表示具体的元素，提供accept方法的实现。ObjectStructure：负责处理 ...

PerformancePerformance 工具的侧重点则在于前端渲染过程，它拥有帧率条形图、CPU 使用率面积图、资源瀑布图、主线程火焰图、事件总揽等模块，它们和渲染息息相关，善用它们可以清晰地观察整个渲染阶段。 首先我们打开 Chrome 匿名窗口，在匿名环境下，浏览器不会有额外的插件、用户特性、缓存等影响实验可重复性的因素。 打开网页，打开Performance，有两个选项，立即记录和重载页面并记录 点击掘金页面的reload收集渲染数据 关于图中内容介绍： juejin.im ...

什么是服务器端渲染 (SSR)Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记”激活”为客户端上完全可交互的应用程序。 服务器渲染的 Vue.js 应用程序也可以被认为是”同构”或”通用”，因为应用程序的大部分代码都可以在服务器和客户端上运行。 为什么使用服务器端渲染 (SSR)优势： 更好的 SEO，由于搜索引擎爬虫抓 ...

浅析babel-plugin-componentvue + element-ui 使用 babel-plugin-component 来实现按需加载组件及样式。 一、官网按需引入示例借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。 首先，安装 babel-plugin-component： 1npm install babel-plugin-component -D 然后，将 .babelrc 修改为： 12345678910111213& ...