https://github.com/algesthesiah/vueperformanceexploration

vue性能探究
https://github.com/algesthesiah/vueperformanceexploration

Last synced: about 1 month ago
JSON representation

vue性能探究

• Host: GitHub
• URL: https://github.com/algesthesiah/vueperformanceexploration
• Owner: algesthesiah
• Created: 2019-09-23T08:23:41.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T03:24:03.000Z (about 2 years ago)
• Last Synced: 2023-03-08T07:04:51.044Z (almost 2 years ago)
• Language: JavaScript
• Homepage:
• Size: 1.57 MB
• Stars: 9
• Watchers: 1
• Forks: 0
• Open Issues: 24
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vuePerformanceExploration

> A Vue.js project

## Build Setup

``` bash

# install dependencies

npm install

# serve with hot reload at localhost:8080

npm run dev

# build for production with minification

npm run build

```

## 起因

偶然看了这个文章 https://juejin.im/post/5bf7ca2f6fb9a049a9795a88#heading-3

因为个人也对性能喜欢探究，从头品了下这个文章，一头雾水，于是自己按照自己想法写了它，想着测试下自己代码性能

## 测试

1234是迅雷前端的代码，56是我修改的递归组件和冻结递归组件的数据

数据量：this.getRandomData(3, 20)  3层 每层20条

first rendering: 初次渲染时间

expanded change: 点击节点展开渲染时间（这里统一统计最外层数据）

| | demo-5 | demo-6 | 文章最强优化 |

| :----: | :----: |:----: |:----: |

|first rendering| 3.60107421875ms | 3.666748046875ms | 111.51904296875ms |

|expanded change|  5.94482421875ms | 5.020263671875ms | 48.31103515625ms |

  

    demo-5

    demo-6

    文章最强优化

  

  

    

      

          

      

      

          

      

      

          

      

  

## 总结

用一个组件渲染，会导致任何一个改动都会rerender。按照优化的第二点，任何的展开与关闭，其实还是要对比前后的VDOM。节点数量更多的情况下，计算量还是相当可观的。应该拆成递归组件的形式，这样局部的更新不会重新计算整一个树组件，性能会有很大提升的

冻结数据对于提升不大