├── .browserslistrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── generate.js
├── package.json
├── postcss.config.js
├── public
    ├── _redirects
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── Benchmark.vue
    │   ├── HeavyComponent.vue
    │   ├── Home.vue
    │   ├── PlayToggle.vue
    │   ├── benchmarks
    │   │   ├── child
    │   │   │   ├── Child.vue
    │   │   │   ├── ChildOff.vue
    │   │   │   └── ChildOn.vue
    │   │   ├── deferred
    │   │   │   ├── Deferred.vue
    │   │   │   ├── DeferredOff.vue
    │   │   │   ├── DeferredOn.vue
    │   │   │   └── SimplePage.vue
    │   │   ├── fetch-items
    │   │   │   ├── FetchItemViewFunctional.vue
    │   │   │   ├── FetchItemViewNormal.vue
    │   │   │   ├── FetchItems.vue
    │   │   │   └── Particles.vue
    │   │   ├── functional
    │   │   │   ├── Functional.vue
    │   │   │   ├── FunctionalOff.vue
    │   │   │   └── FunctionalOn.vue
    │   │   ├── hide
    │   │   │   ├── Hide.vue
    │   │   │   ├── HideOff.vue
    │   │   │   └── HideOn.vue
    │   │   ├── keep-alive
    │   │   │   └── KeepAlive.vue
    │   │   ├── local-var
    │   │   │   ├── LocalVar.vue
    │   │   │   ├── LocalVarOff.vue
    │   │   │   └── LocalVarOn.vue
    │   │   └── static
    │   │   │   ├── Static.vue
    │   │   │   ├── StaticOff.vue
    │   │   │   ├── StaticOn.vue
    │   │   │   └── colors.js
    │   └── index.js
    ├── generate.js
    ├── main.js
    ├── mixins
    │   └── Defer.js
    ├── particlesjs-config.json
    ├── plugins.js
    ├── router.js
    ├── store.js
    └── utils.js
└── yarn.lock


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not ie <= 8
4 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true,
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     '@vue/standard',
 9 |   ],
10 |   rules: {
11 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
13 |     'comma-dangle': ['error', 'always-multiline'],
14 |     'vue/valid-v-for': 'off',
15 |   },
16 |   parserOptions: {
17 |     parser: 'babel-eslint',
18 |   },
19 | }
20 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vueconfus-perf-secrets
 2 | 
 3 | [Slides](https://slides.com/akryum/vueconfus-2019)
 4 | 
 5 | ## Project setup
 6 | ```
 7 | yarn install
 8 | ```
 9 | 
10 | ### Compiles and hot-reloads for development
11 | ```
12 | yarn run serve
13 | ```
14 | 
15 | ### Compiles and minifies for production
16 | ```
17 | yarn run build
18 | ```
19 | 
20 | ### Run your tests
21 | ```
22 | yarn run test
23 | ```
24 | 
25 | ### Lints and fixes files
26 | ```
27 | yarn run lint
28 | ```
29 | 
30 | ### Customize configuration
31 | See [Configuration Reference](https://cli.vuejs.org/config/).
32 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app',
4 |   ],
5 | }
6 | 


--------------------------------------------------------------------------------
/generate.js:
--------------------------------------------------------------------------------
 1 | const { writeFileSync } = require('fs')
 2 | const faker = require('faker')
 3 | const CliProgress = require('cli-progress')
 4 | 
 5 | const bar = new CliProgress.Bar({}, CliProgress.Presets.shades_classic)
 6 | 
 7 | const count = 4000
 8 | 
 9 | bar.start(count, 0)
10 | 
11 | const items = []
12 | for (let i = 0; i < count; i++) {
13 |   const posts = []
14 |   for (let p = 0; p < 10; p++) {
15 |     posts.push(faker.lorem.paragraphs())
16 |   }
17 |   items.push(Object.assign(
18 |     {},
19 |     faker.helpers.createCard(),
20 |     {
21 |       avatar: faker.image.avatar(),
22 |       posts,
23 |     },
24 |   ))
25 |   bar.update(i + 1)
26 | }
27 | 
28 | writeFileSync('./src/items.json', JSON.stringify(items, null, 2), {
29 |   encoding: 'utf8',
30 | })
31 | 
32 | bar.stop()
33 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vueconfus-perf-secrets",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint",
 9 |     "start": "serve ./dist -s"
10 |   },
11 |   "dependencies": {
12 |     "@vue/ui": "^0.5.6",
13 |     "faker": "^4.1.0",
14 |     "fps-indicator": "^1.3.0",
15 |     "lodash.clone": "^4.5.0",
16 |     "particles.js": "^2.0.0",
17 |     "vue": "^2.6.6",
18 |     "vue-router": "^3.0.1",
19 |     "vue-virtual-scroller": "^1.0.0-rc.2",
20 |     "vuex": "^3.0.1"
21 |   },
22 |   "devDependencies": {
23 |     "@vue/cli-plugin-babel": "^3.5.0",
24 |     "@vue/cli-plugin-eslint": "^3.5.0",
25 |     "@vue/cli-service": "^3.5.0",
26 |     "@vue/eslint-config-standard": "^4.0.0",
27 |     "babel-eslint": "^10.0.1",
28 |     "cli-progress": "^2.1.1",
29 |     "eslint": "^5.8.0",
30 |     "eslint-plugin-vue": "^5.0.0",
31 |     "serve": "^10.1.2",
32 |     "stylus": "^0.54.5",
33 |     "stylus-loader": "^3.0.2",
34 |     "vue-template-compiler": "^2.5.21"
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {},
4 |   },
5 | }
6 | 


--------------------------------------------------------------------------------
/public/_redirects:
--------------------------------------------------------------------------------
1 | /*    /index.html   200
2 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Akryum/vue-9-perf-secrets/46483233d0edb80c511eb899776268c7f7768220/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>vueconfus-perf-secrets</title>
 9 |   </head>
10 |   <body class="vue-ui-dark-mode">
11 |     <noscript>
12 |       <strong>We're sorry but vueconfus-perf-secrets doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <div id="nav">
 4 |       <router-link to="/" exact>Home</router-link>
 5 |       <!-- Omitted, not enough performance gains in this example -->
 6 |       <!-- Need to find/write a better benchmark for this -->
 7 |       <!-- <router-link :to="{ name: 'bench-static' }">Static</router-link> -->
 8 |       <router-link :to="{ name: 'bench-functional' }">Functional components</router-link>
 9 |       <router-link :to="{ name: 'bench-child' }">Child splitting</router-link>
10 |       <router-link :to="{ name: 'bench-local-var' }">Local var</router-link>
11 |       <router-link :to="{ name: 'bench-hide' }">Reused Dom</router-link>
12 |       <router-link :to="{ name: 'bench-keep-alive' }">Keep alive</router-link>
13 |       <router-link :to="{ name: 'bench-deferred' }">Deferred features</router-link>
14 |       <router-link :to="{ name: 'bench-fetch-items' }">Vuex demo</router-link>
15 |     </div>
16 |     <router-view class="route"/>
17 |   </div>
18 | </template>
19 | 
20 | <style lang="stylus">
21 | html,
22 | body,
23 | #app
24 |   height: 100%
25 | 
26 | #app
27 |   display flex
28 |   flex-direction column
29 | 
30 | #nav
31 |   padding 15px 30px
32 |   flex auto 0 0
33 |   background #2c3e50
34 |   a
35 |     margin-right 24px
36 |     &.router-link-active
37 |       color white
38 | 
39 | .route
40 |   flex 1
41 | </style>
42 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Akryum/vue-9-perf-secrets/46483233d0edb80c511eb899776268c7f7768220/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/Benchmark.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="benchmark">
 3 |     <div class="toolbar">
 4 |       <div class="title">
 5 |         <div class="title-text">{{ title }}</div>
 6 |         <slot name="title"/>
 7 |       </div>
 8 | 
 9 |       <VueGroup v-model="optimizationEnabled">
10 |         <VueGroupButton
11 |           :value="false"
12 |           :icon-left="!optimizationEnabled ? 'done' : null"
13 |           class="warning"
14 |         >
15 |           Unoptimized
16 |         </VueGroupButton>
17 |         <VueGroupButton
18 |           :value="true"
19 |           :icon-left="optimizationEnabled ? 'done' : null"
20 |           class="primary"
21 |         >
22 |           {{ optimizedLabel || 'Optimized' }}
23 |         </VueGroupButton>
24 |       </VueGroup>
25 |       <slot name="toolbar"/>
26 |     </div>
27 | 
28 |     <div class="content">
29 |       <slot v-if="optimizationEnabled" name="on"/>
30 |       <slot v-else name="off"/>
31 |       <slot/>
32 |     </div>
33 |   </div>
34 | </template>
35 | 
36 | <script>
37 | export default {
38 |   props: {
39 |     title: String,
40 |     optimizedLabel: String,
41 |   },
42 | 
43 |   data () {
44 |     return {
45 |       optimizationEnabled: false,
46 |     }
47 |   },
48 | }
49 | </script>
50 | 
51 | <style lang="stylus" scoped>
52 | .benchmark
53 |   display flex
54 |   flex-direction column
55 | 
56 | .toolbar
57 |   flex auto 0 0
58 |   padding 15px 30px
59 |   > *:not(:last-child)
60 |     margin-right 12px
61 | 
62 | .toolbar,
63 | .title
64 |   display flex
65 |   align-items center
66 | 
67 | .title
68 |   flex 1
69 |   > *:not(:last-child)
70 |     margin-right 32px
71 | 
72 | .title-text
73 |   font-size 32px
74 |   font-weight lighter
75 |   white-space nowrap
76 |   overflow hidden
77 |   text-overflow ellipsis
78 | 
79 | .content
80 |   flex 1
81 |   background black
82 |   overflow hidden
83 | </style>
84 | 


--------------------------------------------------------------------------------
/src/components/HeavyComponent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     class="heavy"
 4 |     :style="{
 5 |       width: `${size}px`,
 6 |       height: `${size}px`,
 7 |     }"
 8 |   >
 9 |     <pre>{{ heavy() }}</pre>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | export default {
15 |   props: {
16 |     n: {
17 |       default: 1000000,
18 |     },
19 |   },
20 | 
21 |   computed: {
22 |     size () {
23 |       return 20 + this.n / 9999999 * 40
24 |     },
25 |   },
26 | 
27 |   methods: {
28 |     heavy () {
29 |       const n = this.n
30 |       let result = 0
31 |       for (let i = 0; i < n; i++) {
32 |         result += Math.tan(Math.sqrt(Math.cos(Math.sin(Math.random() * 100))))
33 |       }
34 |       return result
35 |     },
36 |   },
37 | }
38 | </script>
39 | 
40 | <style lang="stylus" scoped>
41 | .heavy
42 |   background lighten(#6806c1, 30%)
43 |   border black 5px solid
44 |   border-radius 50%
45 |   >>>
46 |     pre
47 |       margin 0
48 |       opacity 0
49 | </style>
50 | 


--------------------------------------------------------------------------------
/src/components/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <img class="logo" alt="Vue logo" src="../assets/logo.png">
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style lang="stylus" scoped>
 8 | .home
 9 |   text-align center
10 |   display flex
11 |   align-items center
12 |   justify-content center
13 | 
14 | .logo
15 |   filter drop-shadow(0 0 30px rgba(white, .3)) drop-shadow(0 0 60px rgba(white, .4))
16 | </style>
17 | 


--------------------------------------------------------------------------------
/src/components/PlayToggle.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <VueButton v-if="value" class="danger play-toggle" icon-left="stop" @click="$emit('input', false)">Stop</VueButton>
 3 |   <VueButton v-else class="accent play-toggle" icon-left="play_arrow" @click="$emit('input', true)">Play</VueButton>
 4 | </template>
 5 | 
 6 | <script>
 7 | export default {
 8 |   props: {
 9 |     value: Boolean,
10 |   },
11 | }
12 | </script>
13 | 
14 | <style lang="stylus" scoped>
15 | .play-toggle
16 |   width 100px
17 | </style>
18 | 


--------------------------------------------------------------------------------
/src/components/benchmarks/child/Child.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Benchmark title="Child component splitting">
 3 |     <template #toolbar>
 4 |       <PlayToggle v-model="play"/>
 5 |     </template>
 6 | 
 7 |     <template #on>
 8 |       <div class="grid">
 9 |         <ChildOn
10 |           v-for="(n, index) of list"
11 |           :key="index"
12 |           :number="n"
13 |           class="cell"
14 |         />
15 |       </div>
16 |     </template>
17 | 
18 |     <template #off>
19 |       <div class="grid">
20 |         <ChildOff
21 |           v-for="(n, index) of list"
22 |           :key="index"
23 |           :number="n"
24 |           class="cell"
25 |         />
26 |       </div>
27 |     </template>
28 |   </Benchmark>
29 | </template>
30 | 
31 | <script>
32 | import ChildOn from './ChildOn.vue'
33 | import ChildOff from './ChildOff.vue'
34 | 
35 | export default {
36 |   components: {
37 |     ChildOn,
38 |     ChildOff,
39 |   },
40 | 
41 |   data () {
42 |     return {
43 |       play: false,
44 |       list: [],
45 |     }
46 |   },
47 | 
48 |   watch: {
49 |     play (value) {
50 |       if (value) this.generate()
51 |     },
52 |   },
53 | 
54 |   created () {
55 |     this.count = 300
56 |     this.generate()
57 |   },
58 | 
59 |   methods: {
60 |     generate () {
61 |       const data = []
62 |       for (let i = 0; i < this.count; i++) {
63 |         data.push(Math.random() * 300)
64 |       }
65 |       this.list = data
66 |       this.play && requestAnimationFrame(this.generate)
67 |     },
68 |   },
69 | }
70 | </script>
71 | 
72 | <style lang="stylus" scoped>
73 | .grid
74 |   margin 24px auto
75 |   max-width (20 * 36px)
76 | 
77 | .cell
78 |   float left
79 |   width 32px
80 |   height @width
81 |   margin 2px
82 |   color transparent
83 |   background #42b983
84 |   border-radius 50%
85 | </style>
86 | 


--------------------------------------------------------------------------------
/src/components/benchmarks/child/ChildOff.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div :style="{ opacity: number / 300 }">
 3 |     <div>{{ heavy() }}</div>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   props: ['number'],
10 |   methods: {
11 |     heavy () {
12 |       const n = 100000
13 |       let result = 0
14 |       for (let i = 0; i < n; i++) {
15 |         result += Math.sqrt(Math.cos(Math.sin(42)))
16 |       }
17 |       return result
18 |     },
19 |   },
20 | }
21 | </script>
22 | 


--------------------------------------------------------------------------------
/src/components/benchmarks/child/ChildOn.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div :style="{ opacity: number / 300 }">
 3 |     <ChildComp/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   components: {
10 |     ChildComp: {
11 |       methods: {
12 |         heavy () {
13 |           const n = 100000
14 |           let result = 0
15 |           for (let i = 0; i < n; i++) {
16 |             result += Math.sqrt(Math.cos(Math.sin(42)))
17 |           }
18 |           return result
19 |         },
20 |       },
21 |       render (h) {
22 |         return h('div', this.heavy())
23 |       },
24 |     },
25 |   },
26 |   props: ['number'],
27 | }
28 | </script>
29 | 


--------------------------------------------------------------------------------
/src/components/benchmarks/deferred/Deferred.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Benchmark title="Deferred features">
 3 |     <template #toolbar>
 4 |       <VueGroup v-model="page">
 5 |         <VueGroupButton :value="false">Simple page</VueGroupButton>
 6 |         <VueGroupButton :value="true">Heavy page</VueGroupButton>
 7 |       </VueGroup>
 8 | 
 9 |       <PlayToggle v-model="play"/>
10 |     </template>
11 | 
12 |     <template #on>
13 |       <DeferredOn v-if="page" class="defer-page"/>
14 |       <SimplePage v-else class="defer-page"/>
15 |     </template>
16 | 
17 |     <template #off>
18 |       <DeferredOff v-if="page" class="defer-page"/>
19 |       <SimplePage v-else class="defer-page"/>
20 |     </template>
21 |   </Benchmark>
22 | </template>
23 | 
24 | <script>
25 | import SimplePage from './SimplePage.vue'
26 | import DeferredOn from './DeferredOn.vue'
27 | import DeferredOff from './DeferredOff.vue'
28 | 
29 | export default {
30 |   components: {
31 |     SimplePage,
32 |     DeferredOn,
33 |     DeferredOff,
34 |   },
35 | 
36 |   data () {
37 |     return {
38 |       page: false,
39 |       play: false,
40 |     }
41 |   },
42 | 
43 |   watch: {
44 |     play (value) {
45 |       if (value) {
46 |         this.togglePage()
47 |       } else {
48 |         clearTimeout(this.$_timer)
49 |       }
50 |     },
51 |   },
52 | 
53 |   created () {
54 |     this.count = 300
55 |   },
56 | 
57 |   methods: {
58 |     togglePage () {
59 |       this.page = !this.page
60 |       if (this.play) {
61 |         this.$_timer = setTimeout(this.togglePage, 2000)
62 |       }
63 |     },
64 |   },
65 | }
66 | </script>
67 | 
68 | <style lang="stylus" scoped>
69 | .defer-page
70 |   height 100%
71 |   display flex
72 |   flex-direction column
73 |   align-items center
74 |   padding 40px
75 |   box-sizing border-box
76 | 
77 |   >>> h2:not(:last-child)
78 |     margin-bottom 24px
79 | </style>
80 | 


--------------------------------------------------------------------------------
/src/components/benchmarks/deferred/DeferredOff.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="deferred-off">
 3 |     <VueIcon icon="fitness_center" class="gigantic"/>
 4 | 
 5 |     <h2>I'm an heavy page</h2>
 6 | 
 7 |     <Heavy v-for="n in 8" :key="n"/>
 8 | 
 9 |     <Heavy class="super-heavy" :n="9999999"/>
10 |   </div>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/src/components/benchmarks/deferred/DeferredOn.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="deferred-on">
 3 |     <VueIcon icon="fitness_center" class="gigantic"/>
 4 | 
 5 |     <h2>I'm an heavy page</h2>
 6 | 
 7 |     <template v-if="defer(2)">
 8 |       <Heavy v-for="n in 8" :key="n"/>
 9 |     </template>
10 | 
11 |     <Heavy v-if="defer(3)" class="super-heavy" :n="9999999"/>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | import Defer from '@/mixins/Defer'
17 | 
18 | export default {
19 |   mixins: [
20 |     Defer(),
21 |   ],
22 | }
23 | </script>
24 | 


--------------------------------------------------------------------------------
/src/components/benchmarks/deferred/SimplePage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="simple-page">
 3 |     <VueIcon icon="mood" class="gigantic primary"/>
 4 |     <h2>I'm a simple page</h2>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <style lang="stylus" scoped>
 9 | .simple-page
10 |   background #2c3e50
11 |   justify-content center
12 | </style>
13 | 


--------------------------------------------------------------------------------
/src/components/benchmarks/fetch-items/FetchItemViewFunctional.vue:
--------------------------------------------------------------------------------
 1 | <template functional>
 2 |   <div class="item">
 3 |     <div class="col avatar">
 4 |       <img class="avatar-img" :src="props.item.data.avatar" alt="avatar">
 5 |     </div>
 6 |     <div class="col username">{{ props.item.data.username }}</div>
 7 |     <div class="col email">{{ props.item.data.email }}</div>
 8 |     <div class="col phone">{{ props.item.data.phone }}</div>
 9 |     <div class="col website">{{ props.item.data.website }}</div>
10 |     <div class="col vote">
11 |       <button @click="listeners.vote">+{{ props.item.vote }}</button>
12 |     </div>
13 |   </div>
14 | </template>
15 | 
16 | <style lang="stylus" scoped>
17 | .item
18 |   height 24px
19 |   display flex
20 |   align-items center
21 | 
22 |   .col
23 |     flex 100% 1 1
24 |     width 0
25 |     overflow hidden
26 |     text-overflow ellipsis
27 |     white-space nowrap
28 |     margin-right 6px
29 | 
30 |     &.avatar
31 |       flex auto 0 0
32 |       width @height
33 | 
34 |     &.vote
35 |       flex auto 0 0
36 |       width 42px
37 | 
38 |       >>> button
39 |         width @width
40 | 
41 |   .avatar-img
42 |     max-height @height
43 | </style>
44 | 


--------------------------------------------------------------------------------
/src/components/benchmarks/fetch-items/FetchItemViewNormal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="item">
 3 |     <div class="col avatar">
 4 |       <img class="avatar-img" :src="item.data.avatar" alt="avatar">
 5 |     </div>
 6 |     <div class="col username">{{ item.data.username }}</div>
 7 |     <div class="col email">{{ item.data.email }}</div>
 8 |     <div class="col phone">{{ item.data.phone }}</div>
 9 |     <div class="col website">{{ item.data.website }}</div>
10 |     <div class="col vote">
11 |       <button @click="$emit('vote')">+{{ item.vote }}</button>
12 |     </div>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | export default {
18 |   props: ['item'],
19 | }
20 | </script>
21 | 
22 | <style lang="stylus" scoped>
23 | .item
24 |   height 24px
25 |   display flex
26 |   align-items center
27 | 
28 |   .col
29 |     flex 100% 1 1
30 |     width 0
31 |     overflow hidden
32 |     text-overflow ellipsis
33 |     white-space nowrap
34 |     margin-right 6px
35 | 
36 |     &.avatar
37 |       flex auto 0 0
38 |       width @height
39 | 
40 |     &.vote
41 |       flex auto 0 0
42 |       width 42px
43 | 
44 |       >>> button
45 |         width @width
46 | 
47 |   .avatar-img
48 |     max-height @height
49 | </style>
50 | 


--------------------------------------------------------------------------------
/src/components/benchmarks/fetch-items/FetchItems.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <Benchmark title="Vuex demo" optimized-label="RecycleScroller">
  3 |     <template #title>
  4 |       <div><VueIcon icon="sync" class="medium"/> Generated items: <b>{{ generatedCount }}</b></div>
  5 |       <div><VueIcon icon="play_for_work" class="medium"/> Commited items: <b>{{ itemCount }}</b></div>
  6 |     </template>
  7 | 
  8 |     <template #toolbar>
  9 |       <VueDropdown placement="bottom-end">
 10 |         <VueButton
 11 |           slot="trigger"
 12 |           icon-left="settings"
 13 |           class="icon-button"
 14 |         />
 15 | 
 16 |         <div>
 17 |           <div class="dropdown-content vue-ui-grid col-2 default-gap">
 18 |             <div class="vue-ui-grid col-1 default-gap">
 19 |               <VueSwitch v-model="scrollVisible" class="extend-left">
 20 |                 View list
 21 |               </VueSwitch>
 22 |               <VueSwitch v-model="displayLoading" class="extend-left">
 23 |                 Loading animation
 24 |               </VueSwitch>
 25 |               <VueFormField
 26 |                 title="Item count"
 27 |               >
 28 |                 <VueInput
 29 |                   type="number"
 30 |                   v-model.number="count"
 31 |                   placeholder="Item count"
 32 |                   title="Item count"
 33 |                   class="split-count"
 34 |                 />
 35 |               </VueFormField>
 36 |               <VueButton
 37 |                 icon-left="sync"
 38 |                 @click="onClickGenerate()"
 39 |               >
 40 |                 Generate items
 41 |               </VueButton>
 42 |             </div>
 43 |             <div class="vue-ui-grid col-1 default-gap">
 44 |               <VueSwitch v-model="split" class="extend-left">
 45 |                 Time-slicing
 46 |               </VueSwitch>
 47 |               <VueFormField
 48 |                 title="Split count"
 49 |               >
 50 |                 <VueInput
 51 |                   type="number"
 52 |                   v-model.number="splitCount"
 53 |                   placeholder="Split count"
 54 |                   title="Split count"
 55 |                   class="split-count"
 56 |                 />
 57 |               </VueFormField>
 58 |               <VueSwitch v-model="optimize" class="extend-left">
 59 |                 Partial reactivity
 60 |               </VueSwitch>
 61 |             </div>
 62 |           </div>
 63 |         </div>
 64 |       </VueDropdown>
 65 |       <VueButton
 66 |         :loading-secondary="loading"
 67 |         class="accent"
 68 |         icon-left="play_for_work"
 69 |         @click="onClickCommit()"
 70 |       >
 71 |         Commit items
 72 |       </VueButton>
 73 |     </template>
 74 | 
 75 |     <VueLoadingIndicator
 76 |       v-if="loading && displayLoading"
 77 |       class="overlay fixed primary big"
 78 |     >
 79 |       Loading...
 80 |     </VueLoadingIndicator>
 81 | 
 82 |     <Particles v-if="!scrollVisible" class="particles"/>
 83 | 
 84 |     <template #on>
 85 |       <recycle-scroller
 86 |         v-if="!loading && scrollVisible"
 87 |         class="items"
 88 |         :items="items"
 89 |         :item-size="24"
 90 |       >
 91 |         <template v-slot="{ item }">
 92 |           <FetchItemViewNormal
 93 |             :item="item"
 94 |             @vote="voteItem(item)"
 95 |           />
 96 |         </template>
 97 |       </recycle-scroller>
 98 |     </template>
 99 | 
100 |     <template #off>
101 |       <div
102 |         v-if="!loading && scrollVisible"
103 |         class="items no-v"
104 |       >
105 |         <template v-if="itemCount <= 1000">
106 |           <FetchItemViewFunctional
107 |             v-for="item of items"
108 |             :key="item.id"
109 |             :item="item"
110 |             @vote="voteItem(item)"
111 |           />
112 |         </template>
113 |         <div v-else class="disabled-list">
114 |           Disabled to prevent crash
115 |         </div>
116 |       </div>
117 |     </template>
118 |   </Benchmark>
119 | </template>
120 | 
121 | <script>
122 | import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
123 | import FetchItemViewFunctional from './FetchItemViewFunctional.vue'
124 | import FetchItemViewNormal from './FetchItemViewNormal.vue'
125 | import Particles from './Particles.vue'
126 | 
127 | export default {
128 |   components: {
129 |     FetchItemViewFunctional,
130 |     FetchItemViewNormal,
131 |     Particles,
132 |   },
133 | 
134 |   data () {
135 |     return {
136 |       count: 1000,
137 |       splitCount: 1000,
138 |       split: false,
139 |       optimize: false,
140 |       scrollVisible: false,
141 |       vscroll: false,
142 |       displayLoading: false,
143 |     }
144 |   },
145 | 
146 |   computed: {
147 |     ...mapState([
148 |       'loading',
149 |       'items',
150 |       'generatedCount',
151 |     ]),
152 |     ...mapGetters([
153 |       'itemCount',
154 |     ]),
155 |   },
156 | 
157 |   methods: {
158 |     ...mapMutations([
159 |       'voteItem',
160 |     ]),
161 |     ...mapActions([
162 |       'generateItems',
163 |       'commitItems',
164 |     ]),
165 | 
166 |     async onClickGenerate () {
167 |       this.generateItems(this.count)
168 |     },
169 | 
170 |     onClickCommit () {
171 |       this.commitItems({
172 |         split: this.split,
173 |         splitCount: this.splitCount,
174 |         optimize: this.optimize,
175 |       })
176 |     },
177 |   },
178 | }
179 | </script>
180 | 
181 | <style lang="stylus" scoped>
182 | .items
183 |   height calc(100vh - 119px)
184 | 
185 |   &.no-v
186 |     overflow-x hidden
187 |     overflow-y auto
188 | 
189 | .particles
190 |   height 100%
191 | 
192 | .vue-ui-loading-indicator.overlay.fixed
193 |   background rgba(black, .3)
194 | 
195 | .dropdown-content
196 |   padding 12px
197 |   .vue-ui-grid
198 |     align-content start
199 | 
200 | .disabled-list
201 |   height 100%
202 |   display flex
203 |   align-items center
204 |   justify-content center
205 |   color #e83030
206 |   font-size 24px
207 | </style>
208 | 


--------------------------------------------------------------------------------
/src/components/benchmarks/fetch-items/Particles.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="particles"></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | import 'particles.js'
 7 | import config from '@/particlesjs-config.json'
 8 | 
 9 | const particles = window.particlesJS
10 | 
11 | export default {
12 |   mounted () {
13 |     this.$nextTick(() => {
14 |       particles('particles', config)
15 |     })
16 |   },
17 | 
18 |   destroyed () {
19 |     window.pJSDom[0].pJS.fn.vendors.destroypJS()
20 |     window.pJSDom = []
21 |   },
22 | }
23 | </script>
24 | 


--------------------------------------------------------------------------------
/src/components/benchmarks/functional/Functional.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Benchmark title="Functional components">
 3 |     <template #toolbar>
 4 |       <PlayToggle v-model="play"/>
 5 |     </template>
 6 | 
 7 |     <template #on>
 8 |       <div class="grid">
 9 |         <!-- We force re-creating the component using `key` -->
10 |         <FunctionalOn
11 |           v-for="n of list"
12 |           :key="uid++"
13 |           :value="n"
14 |         />
15 |       </div>
16 |     </template>
17 | 
18 |     <template #off>
19 |       <div class="grid">
20 |         <!-- We force re-creating the component using `key` -->
21 |         <FunctionalOff
22 |           v-for="n of list"
23 |           :key="uid++"
24 |           :value="n"
25 |         />
26 |       </div>
27 |     </template>
28 |   </Benchmark>
29 | </template>
30 | 
31 | <script>
32 | import FunctionalOn from './FunctionalOn.vue'
33 | import FunctionalOff from './FunctionalOff.vue'
34 | 
35 | export default {
36 |   components: {
37 |     FunctionalOn,
38 |     FunctionalOff,
39 |   },
40 | 
41 |   data () {
42 |     return {
43 |       play: false,
44 |       list: [],
45 |     }
46 |   },
47 | 
48 |   watch: {
49 |     play (value) {
50 |       if (value) this.generate()
51 |     },
52 |   },
53 | 
54 |   created () {
55 |     this.count = 800
56 | 
57 |     // Force re-creating the components with a unique id
58 |     this.uid = 0
59 | 
60 |     this.generate()
61 |   },
62 | 
63 |   methods: {
64 |     generate () {
65 |       const data = []
66 |       for (let i = 0; i < this.count; i++) {
67 |         data.push(Math.random() < 0.5)
68 |       }
69 |       this.list = data
70 |       this.play && requestAnimationFrame(this.generate)
71 |     },
72 |   },
73 | }
74 | </script>
75 | 
76 | <style lang="stylus" scoped>
77 | .grid
78 |   margin 24px auto
79 |   max-width (32 * 28px)
80 |   >>> .cell
81 |     float left
82 |     width 24px
83 |     height @width
84 |     margin 2px
85 |     .on, .off
86 |       width 100%
87 |       height @width
88 |       color transparent
89 |       border-radius 50%
90 |     .on
91 |       background #2c3e50
92 |     .off
93 |       background #4f6f7f
94 | </style>
95 | 


--------------------------------------------------------------------------------
/src/components/benchmarks/functional/FunctionalOff.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="cell">
 3 |     <div v-if="value" class="on"></div>
 4 |     <section v-else class="off"></section>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   props: ['value'],
11 | }
12 | </script>
13 | 


--------------------------------------------------------------------------------
/src/components/benchmarks/functional/FunctionalOn.vue:
--------------------------------------------------------------------------------
1 | <template functional>
2 |   <div class="cell">
3 |     <div v-if="props.value" class="on"></div>
4 |     <section v-else class="off"></section>
5 |   </div>
6 | </template>
7 | 


--------------------------------------------------------------------------------
/src/components/benchmarks/hide/Hide.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Benchmark title="Reuse DOM with v-show">
 3 |     <template #toolbar>
 4 |       <PlayToggle v-model="play"/>
 5 |     </template>
 6 | 
 7 |     <template #on>
 8 |       <div class="grid">
 9 |         <HideOn
10 |           v-for="(n, index) of list"
11 |           :key="index"
12 |           :value="n"
13 |         />
14 |       </div>
15 |     </template>
16 | 
17 |     <template #off>
18 |       <div class="grid">
19 |         <HideOff
20 |           v-for="(n, index) of list"
21 |           :key="index"
22 |           :value="n"
23 |         />
24 |       </div>
25 |     </template>
26 |   </Benchmark>
27 | </template>
28 | 
29 | <script>
30 | import HideOn from './HideOn.vue'
31 | import HideOff from './HideOff.vue'
32 | 
33 | export default {
34 |   components: {
35 |     HideOn,
36 |     HideOff,
37 |   },
38 | 
39 |   data () {
40 |     return {
41 |       play: false,
42 |       list: [],
43 |     }
44 |   },
45 | 
46 |   watch: {
47 |     play (value) {
48 |       if (value) this.generate()
49 |     },
50 |   },
51 | 
52 |   created () {
53 |     this.count = 200
54 |     this.generate()
55 |   },
56 | 
57 |   methods: {
58 |     generate () {
59 |       const data = []
60 |       for (let i = 0; i < this.count; i++) {
61 |         data.push(Math.random() < 0.5)
62 |       }
63 |       this.list = data
64 |       this.play && requestAnimationFrame(this.generate)
65 |     },
66 |   },
67 | }
68 | </script>
69 | 
70 | <style lang="stylus" scoped>
71 | .grid
72 |   margin 24px auto
73 |   max-width (20 * 36px)
74 |   >>> .cell
75 |     float left
76 |     width 32px
77 |     height @width
78 |     margin 2px
79 |     .on, .off
80 |       width 100%
81 |       height @width
82 |       box-sizing border-box
83 |       border-radius 50%
84 |       .heavy
85 |         border none
86 |         box-shadow 0 0 5px black
87 |         opacity .5
88 |         margin 0
89 |         width 100% !important
90 |         height 100% !important
91 |     .on
92 |       background grey
93 |     .off
94 |       background black
95 | </style>
96 | 


--------------------------------------------------------------------------------
/src/components/benchmarks/hide/HideOff.vue:
--------------------------------------------------------------------------------
 1 | <template functional>
 2 |   <div class="cell">
 3 |     <div v-if="props.value" class="on">
 4 |       <Heavy :n="10000"/>
 5 |     </div>
 6 |     <section v-else class="off">
 7 |       <Heavy :n="10000"/>
 8 |     </section>
 9 |   </div>
10 | </template>
11 | 


--------------------------------------------------------------------------------
/src/components/benchmarks/hide/HideOn.vue:
--------------------------------------------------------------------------------
 1 | <template functional>
 2 |   <div class="cell">
 3 |     <div v-show="props.value" class="on">
 4 |       <Heavy :n="10000"/>
 5 |     </div>
 6 |     <section v-show="!props.value" class="off">
 7 |       <Heavy :n="10000"/>
 8 |     </section>
 9 |   </div>
10 | </template>
11 | 


--------------------------------------------------------------------------------
/src/components/benchmarks/keep-alive/KeepAlive.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Benchmark title="DOM-Reusing Router View" class="keep-alive">
 3 |     <template #toolbar>
 4 |       <VueGroup v-model="page">
 5 |         <VueGroupButton :value="false">Simple page</VueGroupButton>
 6 |         <VueGroupButton :value="true">Heavy page</VueGroupButton>
 7 |       </VueGroup>
 8 | 
 9 |       <PlayToggle v-model="play"/>
10 |     </template>
11 | 
12 |     <template #on>
13 |       <keep-alive>
14 |         <router-view/>
15 |       </keep-alive>
16 |     </template>
17 | 
18 |     <template #off>
19 |       <router-view/>
20 |     </template>
21 |   </Benchmark>
22 | </template>
23 | 
24 | <script>
25 | 
26 | export default {
27 |   data () {
28 |     return {
29 |       play: false,
30 |     }
31 |   },
32 | 
33 |   computed: {
34 |     page: {
35 |       get () {
36 |         return this.$route.name === 'bench-keep-alive-heavy'
37 |       },
38 |       set (value) {
39 |         if (value) {
40 |           this.$router.push({ name: 'bench-keep-alive-heavy' })
41 |         } else {
42 |           this.$router.push({ name: 'bench-keep-alive' })
43 |         }
44 |       },
45 |     },
46 |   },
47 | 
48 |   watch: {
49 |     play (value) {
50 |       if (value) {
51 |         this.togglePage()
52 |       } else {
53 |         clearTimeout(this.$_timer)
54 |       }
55 |     },
56 |   },
57 | 
58 |   created () {
59 |     this.count = 300
60 |   },
61 | 
62 |   methods: {
63 |     togglePage () {
64 |       this.page = !this.page
65 |       if (this.play) {
66 |         this.$_timer = setTimeout(this.togglePage, 2000)
67 |       }
68 |     },
69 |   },
70 | }
71 | </script>
72 | 
73 | <style lang="stylus" scoped>
74 | .keep-alive
75 |   .router-multi-view
76 |     height 100%
77 | 
78 |   >>>
79 |     .simple-page,
80 |     .deferred-off
81 |       height 100%
82 |       display flex
83 |       flex-direction column
84 |       align-items center
85 |       padding 40px
86 |       box-sizing border-box
87 | 
88 |       h2:not(:last-child)
89 |         margin-bottom 24px
90 | </style>
91 | 


--------------------------------------------------------------------------------
/src/components/benchmarks/local-var/LocalVar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Benchmark title="Local variables">
 3 |     <template #toolbar>
 4 |       <PlayToggle v-model="play"/>
 5 |     </template>
 6 | 
 7 |     <template #on>
 8 |       <div class="grid">
 9 |         <LocalVarOn
10 |           v-for="(n, index) of list"
11 |           :key="index"
12 |           :start="n"
13 |           class="cell"
14 |         />
15 |       </div>
16 |     </template>
17 | 
18 |     <template #off>
19 |       <div class="grid">
20 |         <LocalVarOff
21 |           v-for="(n, index) of list"
22 |           :key="index"
23 |           :start="n"
24 |           class="cell"
25 |         />
26 |       </div>
27 |     </template>
28 |   </Benchmark>
29 | </template>
30 | 
31 | <script>
32 | import LocalVarOn from './LocalVarOn.vue'
33 | import LocalVarOff from './LocalVarOff.vue'
34 | 
35 | export default {
36 |   components: {
37 |     LocalVarOn,
38 |     LocalVarOff,
39 |   },
40 | 
41 |   data () {
42 |     return {
43 |       play: false,
44 |       list: [],
45 |     }
46 |   },
47 | 
48 |   watch: {
49 |     play (value) {
50 |       if (value) this.generate()
51 |     },
52 |   },
53 | 
54 |   created () {
55 |     this.count = 300
56 |     this.generate()
57 |   },
58 | 
59 |   methods: {
60 |     generate () {
61 |       const data = []
62 |       for (let i = 0; i < this.count; i++) {
63 |         data.push(Math.random() * 300)
64 |       }
65 |       this.list = data
66 |       this.play && requestAnimationFrame(this.generate)
67 |     },
68 |   },
69 | }
70 | </script>
71 | 
72 | <style lang="stylus" scoped>
73 | .grid
74 |   margin 24px auto
75 |   max-width (20 * 36px)
76 | 
77 | .cell
78 |   float left
79 |   width 32px
80 |   height @width
81 |   margin 2px
82 |   color transparent
83 |   background #42b983
84 |   border-radius 50%
85 | </style>
86 | 


--------------------------------------------------------------------------------
/src/components/benchmarks/local-var/LocalVarOff.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div :style="{ opacity: start / 300 }">{{ result }}</div>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   props: ['start'],
 8 |   computed: {
 9 |     base () {
10 |       return 42
11 |     },
12 |     result () {
13 |       let result = this.start
14 |       for (let i = 0; i < 1000; i++) {
15 |         result += Math.sqrt(Math.cos(Math.sin(this.base))) + this.base * this.base + this.base + this.base * 2 + this.base * 3
16 |       }
17 |       return result
18 |     },
19 |   },
20 | }
21 | </script>
22 | 


--------------------------------------------------------------------------------
/src/components/benchmarks/local-var/LocalVarOn.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div :style="{ opacity: start / 300 }">{{ result }}</div>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   props: ['start'],
 8 |   computed: {
 9 |     base () {
10 |       return 42
11 |     },
12 |     result ({ base, start }) {
13 |       let result = start
14 |       for (let i = 0; i < 1000; i++) {
15 |         result += Math.sqrt(Math.cos(Math.sin(base))) + base * base + base + base * 2 + base * 3
16 |       }
17 |       return result
18 |     },
19 |   },
20 | }
21 | </script>
22 | 


--------------------------------------------------------------------------------
/src/components/benchmarks/static/Static.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Benchmark title="Static optimizations">
 3 |     <template #toolbar>
 4 |       <PlayToggle v-model="play"/>
 5 |     </template>
 6 | 
 7 |     <template #on>
 8 |       <StaticOn
 9 |         v-for="(n, index) of list"
10 |         :key="index"
11 |         :n="n"
12 |       />
13 |     </template>
14 | 
15 |     <template #off>
16 |       <StaticOff
17 |         v-for="(n, index) of list"
18 |         :key="index"
19 |         :n="n"
20 |       />
21 |     </template>
22 |   </Benchmark>
23 | </template>
24 | 
25 | <script>
26 | import StaticOn from './StaticOn.vue'
27 | import StaticOff from './StaticOff.vue'
28 | 
29 | export default {
30 |   components: {
31 |     StaticOn,
32 |     StaticOff,
33 |   },
34 | 
35 |   data () {
36 |     return {
37 |       play: false,
38 |       list: [],
39 |     }
40 |   },
41 | 
42 |   watch: {
43 |     play (value) {
44 |       if (value) this.generate()
45 |     },
46 |   },
47 | 
48 |   created () {
49 |     this.count = 400
50 |   },
51 | 
52 |   methods: {
53 |     generate () {
54 |       const data = []
55 |       for (let i = 0; i < this.count; i++) {
56 |         data.push(Math.random() * 300)
57 |       }
58 |       this.list = data
59 |       this.play && requestAnimationFrame(this.generate)
60 |     },
61 |   },
62 | }
63 | </script>
64 | 


--------------------------------------------------------------------------------
/src/components/benchmarks/static/StaticOff.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     :class="['a', 'b', 'c', 'd', 'e', { even: n % 2 === 0}]"
 4 |     :style="{
 5 |       marginTop: '4px',
 6 |       opacity: n/100,
 7 |     }"
 8 |   >
 9 |     <div
10 |       :class="['x', 'y', 'z', { uneven: n % 2 !== 0}]"
11 |       :style="{
12 |         color: 'green',
13 |         fontSize: 'bold',
14 |         fontFamily: 'monospace',
15 |       }"
16 |     >{{ n }}
17 |     </div>
18 |     <div :class="['e', 'f', 'g', 'h']">{{ 'Hello' }}</div>
19 |   </div>
20 | </template>
21 | 
22 | <script>
23 | export default {
24 |   props: ['n'],
25 | }
26 | </script>
27 | 


--------------------------------------------------------------------------------
/src/components/benchmarks/static/StaticOn.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     class="a b c d e"
 4 |     :class="{ even: n % 2 === 0}"
 5 |     style="margin-top: 4px;"
 6 |     :style="{
 7 |       opacity: n/100,
 8 |     }"
 9 |   >
10 |     <div
11 |       class="x y z"
12 |       :class="{ uneven: n % 2 !== 0}"
13 |       style="color: green; font-weight: bold; font-family: monospace;"
14 |     >{{ n }}
15 |     </div>
16 |     <div class="e f g h">Hello</div>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | export default {
22 |   props: ['n'],
23 | }
24 | </script>
25 | 


--------------------------------------------------------------------------------
/src/components/benchmarks/static/colors.js:
--------------------------------------------------------------------------------
 1 | export default [
 2 |   '2c3e50',
 3 |   '4f6f7f',
 4 |   '1d2935',
 5 |   '42b983',
 6 |   '6806c1',
 7 |   'e83030',
 8 |   'ea6e00',
 9 | ]
10 | 


--------------------------------------------------------------------------------
/src/components/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Benchmark from './Benchmark.vue'
3 | import PlayToggle from './PlayToggle.vue'
4 | import Heavy from './HeavyComponent.vue'
5 | 
6 | Vue.component('Benchmark', Benchmark)
7 | Vue.component('PlayToggle', PlayToggle)
8 | Vue.component('Heavy', Heavy)
9 | 


--------------------------------------------------------------------------------
/src/generate.js:
--------------------------------------------------------------------------------
 1 | export async function generate (count) {
 2 |   const faker = (await import(/* webpackChunkName: 'faker' */ 'faker')).default
 3 |   const items = []
 4 |   for (let i = 0; i < count; i++) {
 5 |     // const posts = []
 6 |     // for (let p = 0; p < 10; p++) {
 7 |     //   posts.push(faker.lorem.paragraphs())
 8 |     // }
 9 |     items.push(Object.assign(
10 |       {},
11 |       faker.helpers.createCard(),
12 |       {
13 |         avatar: faker.image.avatar(),
14 |         // posts,
15 |       },
16 |     ))
17 |   }
18 |   return items
19 | }
20 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import './plugins'
 2 | import './components'
 3 | import Vue from 'vue'
 4 | import fps from 'fps-indicator'
 5 | import App from './App.vue'
 6 | import router from './router'
 7 | import store from './store'
 8 | 
 9 | Vue.config.productionTip = false
10 | 
11 | fps({
12 |   position: 'top-right',
13 |   style: `
14 |     font-size: 24px;
15 |   `,
16 | })
17 | 
18 | new Vue({
19 |   router,
20 |   store,
21 |   ...App,
22 | }).$mount('#app')
23 | 


--------------------------------------------------------------------------------
/src/mixins/Defer.js:
--------------------------------------------------------------------------------
 1 | export default function (count = 10) {
 2 |   // @vue/component
 3 |   return {
 4 |     data () {
 5 |       return {
 6 |         displayPriority: 0,
 7 |       }
 8 |     },
 9 | 
10 |     mounted () {
11 |       this.runDisplayPriority()
12 |     },
13 | 
14 |     methods: {
15 |       runDisplayPriority () {
16 |         const step = () => {
17 |           requestAnimationFrame(() => {
18 |             this.displayPriority++
19 |             if (this.displayPriority < count) {
20 |               step()
21 |             }
22 |           })
23 |         }
24 |         step()
25 |       },
26 | 
27 |       defer (priority) {
28 |         return this.displayPriority >= priority
29 |       },
30 |     },
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/src/particlesjs-config.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "particles": {
  3 |     "number": {
  4 |       "value": 50,
  5 |       "density": {
  6 |         "enable": true,
  7 |         "value_area": 800
  8 |       }
  9 |     },
 10 |     "color": {
 11 |       "value": "#ffffff"
 12 |     },
 13 |     "shape": {
 14 |       "type": "circle",
 15 |       "stroke": {
 16 |         "width": 0,
 17 |         "color": "#000000"
 18 |       },
 19 |       "polygon": {
 20 |         "nb_sides": 5
 21 |       },
 22 |       "image": {
 23 |         "src": "img/github.svg",
 24 |         "width": 100,
 25 |         "height": 100
 26 |       }
 27 |     },
 28 |     "opacity": {
 29 |       "value": 1,
 30 |       "random": false,
 31 |       "anim": {
 32 |         "enable": false,
 33 |         "speed": 1,
 34 |         "opacity_min": 0.1,
 35 |         "sync": false
 36 |       }
 37 |     },
 38 |     "size": {
 39 |       "value": 5,
 40 |       "random": true,
 41 |       "anim": {
 42 |         "enable": false,
 43 |         "speed": 40,
 44 |         "size_min": 0.1,
 45 |         "sync": false
 46 |       }
 47 |     },
 48 |     "line_linked": {
 49 |       "enable": true,
 50 |       "distance": 150,
 51 |       "color": "#ffffff",
 52 |       "opacity": 0.6,
 53 |       "width": 2
 54 |     },
 55 |     "move": {
 56 |       "enable": true,
 57 |       "speed": 6,
 58 |       "direction": "none",
 59 |       "random": false,
 60 |       "straight": false,
 61 |       "out_mode": "out",
 62 |       "bounce": false,
 63 |       "attract": {
 64 |         "enable": false,
 65 |         "rotateX": 600,
 66 |         "rotateY": 1200
 67 |       }
 68 |     }
 69 |   },
 70 |   "interactivity": {
 71 |     "detect_on": "canvas",
 72 |     "events": {
 73 |       "onhover": {
 74 |         "enable": true,
 75 |         "mode": "repulse"
 76 |       },
 77 |       "onclick": {
 78 |         "enable": true,
 79 |         "mode": "push"
 80 |       },
 81 |       "resize": true
 82 |     },
 83 |     "modes": {
 84 |       "grab": {
 85 |         "distance": 400,
 86 |         "line_linked": {
 87 |           "opacity": 1
 88 |         }
 89 |       },
 90 |       "bubble": {
 91 |         "distance": 400,
 92 |         "size": 40,
 93 |         "duration": 2,
 94 |         "opacity": 8,
 95 |         "speed": 3
 96 |       },
 97 |       "repulse": {
 98 |         "distance": 200,
 99 |         "duration": 0.4
100 |       },
101 |       "push": {
102 |         "particles_nb": 4
103 |       },
104 |       "remove": {
105 |         "particles_nb": 2
106 |       }
107 |     }
108 |   },
109 |   "retina_detect": true
110 | }


--------------------------------------------------------------------------------
/src/plugins.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import VueUi from '@vue/ui'
3 | import '@vue/ui/dist/vue-ui.css'
4 | import VueVirtualScroller from 'vue-virtual-scroller'
5 | import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
6 | 
7 | Vue.use(VueUi)
8 | Vue.use(VueVirtualScroller)
9 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Home from './components/Home.vue'
 4 | 
 5 | Vue.use(Router)
 6 | 
 7 | export default new Router({
 8 |   mode: 'history',
 9 |   base: process.env.BASE_URL,
10 |   routes: [
11 |     {
12 |       path: '/',
13 |       name: 'home',
14 |       component: Home,
15 |     },
16 |     {
17 |       path: '/bench/static',
18 |       name: 'bench-static',
19 |       component: () => import(/* webpackChunkName: "bench-static" */ './components/benchmarks/static/Static.vue'),
20 |     },
21 |     {
22 |       path: '/bench/child',
23 |       name: 'bench-child',
24 |       component: () => import(/* webpackChunkName: "bench-child" */ './components/benchmarks/child/Child.vue'),
25 |     },
26 |     {
27 |       path: '/bench/local-var',
28 |       name: 'bench-local-var',
29 |       component: () => import(/* webpackChunkName: "bench-local-var" */ './components/benchmarks/local-var/LocalVar.vue'),
30 |     },
31 |     {
32 |       path: '/bench/fetch-items',
33 |       name: 'bench-fetch-items',
34 |       component: () => import(/* webpackChunkName: "bench-fetch-items" */ './components/benchmarks/fetch-items/FetchItems.vue'),
35 |     },
36 |     {
37 |       path: '/bench/deferred',
38 |       name: 'bench-deferred',
39 |       component: () => import(/* webpackChunkName: "bench-deferred" */ './components/benchmarks/deferred/Deferred.vue'),
40 |     },
41 |     {
42 |       path: '/bench/hide',
43 |       name: 'bench-hide',
44 |       component: () => import(/* webpackChunkName: "bench-hide" */ './components/benchmarks/hide/Hide.vue'),
45 |     },
46 |     {
47 |       path: '/bench/keep-alive',
48 |       component: () => import(/* webpackChunkName: "bench-keep-alive" */ './components/benchmarks/keep-alive/KeepAlive.vue'),
49 |       children: [
50 |         {
51 |           path: '',
52 |           name: 'bench-keep-alive',
53 |           component: () => import(/* webpackChunkName: "bench-keep-alive-simple" */ './components/benchmarks/deferred/SimplePage.vue'),
54 |         },
55 |         {
56 |           path: 'heavy',
57 |           name: 'bench-keep-alive-heavy',
58 |           component: () => import(/* webpackChunkName: "bench-keep-alive-heavy" */ './components/benchmarks/deferred/DeferredOff.vue'),
59 |         },
60 |       ],
61 |     },
62 |     {
63 |       path: '/bench/functional',
64 |       name: 'bench-functional',
65 |       component: () => import(/* webpackChunkName: "bench-functional" */ './components/benchmarks/functional/Functional.vue'),
66 |     },
67 |   ],
68 | })
69 | 


--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | import { generate } from './generate'
 4 | import { JobQueue, splitArray } from './utils'
 5 | 
 6 | let items = []
 7 | 
 8 | function optimizeItem (item) {
 9 |   const data = {
10 |     id: uid++,
11 |     vote: 0,
12 |   }
13 |   Object.defineProperty(data, 'data', {
14 |     configurable: false,
15 |     value: item,
16 |   })
17 |   return data
18 | }
19 | 
20 | Vue.use(Vuex)
21 | 
22 | let uid = 0
23 | 
24 | const store = new Vuex.Store({
25 |   state () {
26 |     return {
27 |       items: [],
28 |       loading: false,
29 |       progress: 0,
30 |       generatedCount: 0,
31 |     }
32 |   },
33 |   getters: {
34 |     itemCount: state => state.items.length,
35 |   },
36 |   mutations: {
37 |     clearItems (state) {
38 |       state.items = []
39 |     },
40 |     addItems (state, items) {
41 |       state.items.push(...items)
42 |     },
43 |     loading (state, value) {
44 |       state.loading = value
45 |     },
46 |     progress (state, value) {
47 |       state.progress = value
48 |     },
49 |     voteItem (state, item) {
50 |       item.vote++
51 |     },
52 |     generatedCount (state, value) {
53 |       state.generatedCount = value
54 |     },
55 |   },
56 |   actions: {
57 |     async generateItems ({ commit }, count) {
58 |       items = await generate(count)
59 |       commit('generatedCount', count)
60 |     },
61 | 
62 |     commitItems ({ commit }, { splitCount, split, optimize }) {
63 |       commit('clearItems')
64 |       commit('loading', true)
65 |       requestAnimationFrame(async resolve => {
66 |         const data = JSON.parse(JSON.stringify(items)).map(
67 |           item => optimize ? optimizeItem(item) : {
68 |             id: uid++,
69 |             data: item,
70 |             vote: 0,
71 |           }
72 |         )
73 |         const timeStart = performance.now()
74 |         if (split) {
75 |           const queue = new JobQueue()
76 |           splitArray(data, splitCount).forEach(
77 |             chunk => queue.addJob(done => requestAnimationFrame(() => {
78 |               commit('addItems', chunk)
79 |               done()
80 |             }))
81 |           )
82 |           await queue.start()
83 |         } else {
84 |           commit('addItems', data)
85 |         }
86 |         const timeEnd = performance.now()
87 |         console.log('time', Math.round(timeEnd - timeStart), 'ms', 'split', split, 'splitCount', splitCount, 'optimize', optimize)
88 |         commit('loading', false)
89 |       })
90 |     },
91 |   },
92 | })
93 | 
94 | export default store
95 | 


--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
  1 | export function splitArray (list, chunkLength) {
  2 |   const chunks = []
  3 |   let chunk = []
  4 |   let i = 0
  5 |   let l = 0
  6 |   let n = list.length
  7 |   while (i < n) {
  8 |     chunk.push(list[i])
  9 |     l++
 10 |     if (l === chunkLength) {
 11 |       chunks.push(chunk)
 12 |       chunk = []
 13 |       l = 0
 14 |     }
 15 |     i++
 16 |   }
 17 |   chunk.length && chunks.push(chunk)
 18 |   return chunks
 19 | }
 20 | 
 21 | export class JobQueue {
 22 |   constructor ({ autoStart = false } = {}) {
 23 |     this.autoStart = autoStart
 24 | 
 25 |     this._queue = []
 26 |     this._running = false
 27 |     this._results = []
 28 |     this._resolves = []
 29 |     this._rejects = []
 30 |     this._runId = 0
 31 |   }
 32 | 
 33 |   get length () {
 34 |     return this._queue.length
 35 |   }
 36 | 
 37 |   addJob (func) {
 38 |     this._queue.push(async () => {
 39 |       try {
 40 |         const runId = this._runId
 41 |         const result = func(() => {
 42 |           // Run not cancelled
 43 |           if (runId === this._runId) {
 44 |             this._results.push(result)
 45 |             this._next()
 46 |           }
 47 |         })
 48 |       } catch (error) {
 49 |         this._reject(error)
 50 |       }
 51 |     })
 52 | 
 53 |     if (this.autoStart && this.length === 1) {
 54 |       this.start()
 55 |     }
 56 |   }
 57 | 
 58 |   clear () {
 59 |     this._running = false
 60 |     this._queue.length = 0
 61 |     this._resolves.length = 0
 62 |     this._rejects.length = 0
 63 |     this._results.length = 0
 64 |     this._runId++
 65 |   }
 66 | 
 67 |   cancel () {
 68 |     this._resolve()
 69 |     this.clear()
 70 |   }
 71 | 
 72 |   start () {
 73 |     return new Promise((resolve, reject) => {
 74 |       if (!this._running && this.length > 0) {
 75 |         this._running = true
 76 |         this._queue[0]()
 77 |         this._resolves.push(resolve)
 78 |         this._rejects.push(reject)
 79 |       } else {
 80 |         resolve()
 81 |       }
 82 |     })
 83 |   }
 84 | 
 85 |   _next () {
 86 |     if (this._running && this.length > 0) {
 87 |       this._queue.shift()
 88 | 
 89 |       if (this.length === 0) {
 90 |         this._resolve()
 91 |       } else {
 92 |         this._queue[0]()
 93 |       }
 94 |     }
 95 |   }
 96 | 
 97 |   _resolve () {
 98 |     this._resolves.forEach(f => f(this._results))
 99 |     this.clear()
100 |   }
101 | 
102 |   _reject (error) {
103 |     this._rejects.forEach(f => f(error))
104 |     this.clear()
105 |   }
106 | }
107 | 


--------------------------------------------------------------------------------