polish: optimize by requestAnimationFrame

Author: tolking

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 [README](README.md) | [CHANGELOG](CHANGELOG.md)
 
+## 1.0.10
+
+- optimize performance by requestAnimationFrame
+
 ## 1.0.9
 
 - fix bug about readingHeight
@@ -29,7 +33,6 @@ readingShow: // one of `top`, `bottom`, `left`, `right`, `true`, `false`
 ---
 ```
 
-
 ## 1.0.4
 
 - fix error on the 404 page

README.md

@@ -61,6 +61,7 @@ example
 ### fixed
 - Type: `string`
 - Default: `top`
+- Required: `false`
 
 support `top`, `bottom`, `left`, `right`
 
@@ -106,7 +107,3 @@ $readingProgressImage = linear-gradient(-120deg, #E50743 0%, #F9870F 15%, #E8ED3
 ## License
 
 [MIT](http://opensource.org/licenses/MIT)
-
-## Keywords
-
-vue vuepress plugin reading-progress reading progress

ReadingProgress.vue

@@ -1,7 +1,9 @@
 <template>
-  <div v-if="$readingShow" :class="$readingShow" class="reading-progress">
-    <div :style="progressStyle" class="progress"></div>
-  </div>
+  <ClientOnly>
+    <div v-if="$readingShow" :class="$readingShow" class="reading-progress">
+      <div :style="progressStyle" class="progress"></div>
+    </div>
+  </ClientOnly>
 </template>
 
 <script>
@@ -12,78 +14,74 @@ export default {
       readingTop: 0,
       readingHeight: 1,
       progressStyle: null,
-      transform: ['transform']
+      transform: undefined,
+      running: false
     }
   },
   watch: {
     $readingShow () {
-      this.base()
+      this.progressStyle = this.getProgressStyle()
+      this.$readingShow && window.addEventListener('scroll', this.base)
     }
   },
   mounted () {
-    this.base()
+    this.transform = this.getTransform()
+    this.progressStyle = this.getProgressStyle()
+    this.$readingShow && window.addEventListener('scroll', this.base)
   },
   beforeDestroy () {
-    this.$readingShow && window.removeEventListener('scroll', this.getReadingBase)
+    this.$readingShow && window.removeEventListener('scroll', this.base)
   },
   methods: {
-    base () {
-      if (this.$readingShow) {
-        this.transform = this.getTransform()
-        this.progressStyle = this.getProgressStyle()
-        window.addEventListener('scroll', this.getReadingBase, 200)
+    base() {
+      if (!this.running) {
+        this.running = true
+        requestAnimationFrame(this.getReadingBase)
       }
     },
     getReadingBase () {
       this.readingHeight = this.getReadingHeight() - this.getScreenHeight()
       this.readingTop = this.getReadingTop()
       this.progressStyle = this.getProgressStyle()
+      this.running = false
     },
     getReadingHeight () {
-      return document.body.scrollHeight
-        || document.body.offsetHeight
-        || 0
+      return Math.max(document.body.scrollHeight, document.body.offsetHeight, 0)
     },
     getScreenHeight () {
-      return window.innerHeight
-        || document.documentElement.clientHeight
-        || 0
+      return Math.max(window.innerHeight, document.documentElement.clientHeight, 0)
     },
     getReadingTop () {
-      return window.pageYOffset
-        || document.documentElement.scrollTop
-        || 0
+      return Math.max(window.pageYOffset, document.documentElement.scrollTop, 0)
     },
     getTransform () {
+      const div = document.createElement('div')
       const transformList = ['transform', '-webkit-transform', '-moz-transform', '-o-transform', '-ms-transform']
-      return transformList.filter(item => this.supportCss(item))
+      return transformList.find(item => item in div.style) || undefined
     },
     getProgressStyle () {
       const progress = this.readingTop / this.readingHeight
       switch (this.$readingShow) {
         case 'top':
         case 'bottom':
-          if (this.transform[0]) {
-            return `${this.transform[0]}: scaleX(${progress})`
+          if (this.transform) {
+            return `${this.transform}: scaleX(${progress})`
           } else {
             return `width: ${progress * 100}%`
           }
           break
         case 'left':
         case 'right':
-          if (this.transform[0]) {
-            return `${this.transform[0]}: scaleY(${progress})`
+          if (this.transform) {
+            return `${this.transform}: scaleY(${progress})`
           } else {
             return `height: ${progress * 100}%`
           }
           break
         default:
+          return null
           break
       }
-    },
-    supportCss (value) {
-      const div = document.createElement('div')
-      return value in div.style
     }
   }
 }

index.js

@@ -1,4 +1,4 @@
-const { path } = require('@vuepress/shared-utils')
+const path = require('path')
 
 function checkRegularPath(regularPath, readingDir, fixed) {
   if (readingDir === null) {

package.json

@@ -1,7 +1,8 @@
 {
   "name": "vuepress-plugin-reading-progress",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "main": "index.js",
+  "type": "commonjs",
   "description": "A reading progress bar plugin for VuePress",
   "author": "tolking <qw13131wang@gmail.com>",
   "license": "MIT",
@@ -10,17 +11,12 @@
     "url": "https://github.com/tolking/vuepress-plugin-reading-progress/issues"
   },
   "homepage": "https://github.com/tolking/vuepress-plugin-reading-progress",
-  "doc": "https://github.com/tolking/vuepress-plugin-reading-progress",
+  "doc": "https://github.com/tolking/vuepress-plugin-reading-progress#readme",
   "keywords": [
-    "vue",
     "vuepress",
     "plugin",
     "reading-progress",
     "reading",
     "progress"
-  ],
-  "devDependencies": {
-    "@vuepress/shared-utils": "^1.0.0",
-    "vuepress": "^1.0.0"
-  }
+  ]
 }