nvue性能怎么样？

一、nvue性能怎么样？

nvue性能优异，可以实现多端编译，对APP的开发大有帮助。

在App端，如果使用vue页面，则使用webview渲染；如果使用nvue页面(native vue的缩写)，则使用原生渲染。一个App中可以同时使用两种页面，比如首页使用nvue，二级页使用vue页面，hello uni-app示例就是如此。

虽然nvue也可以多端编译，输出H5和小程序，但nvue的css写法受限，所以如果你不开发App，那么不需要使用nvue。

以往的 weex ，有个很大的问题是它只是一个高性能的渲染器，没有足够的API能力（比如各种push sdk集成、蓝牙等能力调用），使得开发时非常依赖原生工程师协作，开发者本来想节约成本，结果需要前端、iOS、Android 3拨人开发，适得其反。 nvue 解决了这个问题，让前端工程师可以直接开发完整 App，并提供丰富的插件生态和云打包。这些组合方案，帮助开发者切实的提高效率、降低成本。

同时uni-app扩展了weex原生渲染引擎的很多排版能力，修复了很多bug。比如

Android端良好支持边框阴影

iOS端支持高斯模糊，详情

可实现区域滚动长列表+左右拖动列表+吸顶的复杂排版效果

优化圆角边框绘制性能。

二、Vue2.6.10(Vue-cli4)项目打包性能优化实践

在 src 下新建 Skeleton 文件夹，其中新建 index.js 以及 index.vue ，在其中写入以下内容，其中，骨架屏的 index.vue 页面样式请自行编辑

在 vue.config.js 中写入以下内容

所以，最终的配置文件如下

在 src 下新建 Skeleton 文手弯件夹，其中新建 index.js 以及 index.vue ，在友灶其中写入以下内容，其中，骨架屏的 index.vue 页面样式请自行毕告闷编辑

在 vue.config.js 中写入以下内容

所以，最终的配置文件如下

三、vue性能优化之build后包体积太大

基于vue-cli3.0构建项目，npm引入多个第三方包。build之后，包体积太大导致首屏过长。----毫无体档枯验感！！！

实践的项目喜欢捣鼓可以clone下来

项目地址: vue-fiction

只总行扰洞结了亲测效果明显的几种方案，解决方案大多来自于日常总结及各路大佬，如有不足，请大佬补充~

当我们运行项目并且打包的时候，会发现chunk-vendors.js这个文件非常大，那是因为webpack将所有的依赖全都压缩到了这个文件里面，这时我们可以将其拆分，李老将所有的依赖都打包成单独的js。

四、简述Vue的虚拟Dom的patching过程

很多同学在面试的时候都会被问到vue的虚拟DOM的diff 以及 patch 的过程，如果这vue的源码了解不是很深刻，很难通过面试官的法眼，下面就来用通俗易懂的方式聊一聊Vue的patch过程。

我们都知道Dom操作是一个特别低性能悄陆的事儿，因为每一个dom节点中都包含了各种各样的属性及方法，每一次操作dom都是这些属性及方法一遍一遍的初始化，数量一多就特别的慢。

But，

状态的改变必须要对应视图的改变，就必须要操作到Dom

So,

越少的Dom操作就能越多的提升性能

这就是虚拟Dom能够带来的最大的好处。

但是，虚拟瞎悔Dom是如何做到最少的去做Dom操作呢？

其实很简单，当状态变化时，只要更新对应变化的节点，而其他没有变化的节点，则不进行操作，这样就能最大限度的减少Dom操作。

而在Vue1.0的时候，是通过细粒度绑定来进行这项优化的，因为Vue在一定程度上是知道具体哪些状态发生了变化，也知道哪些节点使用了这个节点，这样就可以通过细粒度绑定直接更新视图。

但是这样也有副作用，粒度太细的话，会有更多的内存及依赖追踪的开销，这也是特别消耗性能的事儿。

那么，改为中粒度，当状态发生变化，通知到组件界别，而用一个对象（Vnode）去描述即将渲染的节点，一一对应，这样每次更新组件节点前，先对比新旧的两个（newVnode, oldVnode），找出需要改变的节点位置，然后单独更新这些节点，就能实现上述的功能。

这个对象就是Vnode。

Vnode其实就是一个普通的js对象，里面包含了描述节点内容的属性

在Vnode中有多种不同的节点类型：

不同的节点类型只是包含的属性值不一样而已，如一个 注释类型 的节点，对应的Vnode可能就是以下：

一个 文本节点 ，可能是以下：

我们明白了Vnode是真实Dom的描述对象，那么就能通过一个算法来计算出新旧Vnode之间的差异。

这个算法，我们就称之为patching算法。

我们冷静分析，对Dom进行操作，主要是需要做以下3件事儿：

4.1 新增节点

通常在组件初次渲染时，会发生新增节点，当oldVnode不存在，而newVnode存在时，这时只需要按照Vnode的描述去渲染视图即可。

具体的渲染过程可参考下图：

4.2 删除节点

当一个节点只在oldVnode中存在，而在newVnode中不存在时，这时我们要将改节点删除。这样就完成了变更视图的工作。

在删除节点中用到了一个nodeOps的对象，里面有一个removeVnodes的函数，主要用于对节点进行删除操作。

4.3 更新节点

前面两种情况都是比较简单，也很好理解

但是最常见是是 更新节点的启神顷 情况

具体流程如下图：

其中更新子节点也是 一个递归的过程。

我们下次再讲更新子节点。

Tags：简述   patching   过程

转载：感谢您对半点优化网(www.bdxc.net)网站的认可以及对作品的青睐，欢迎各位朋友分享到个人网站或朋友圈。转载请说明文章出处“半点优化网”。/wzjs/66329.html

很赞哦！ ()