docs(*): 更新长文章优化

theme-shoka-x · Feb 28, 2023 · c74f611 · c74f611 · vercel · Feb 28, 2023
1 parent 716ebd2
commit c74f611
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 16 deletions.
diff --git a/_config.yml b/_config.yml
@@ -29,6 +29,7 @@ experiments:
   disableThemeComment: false # 禁用主题评论系统(一般用于关闭评论或让插件接管评论系统)
   usingRelative: false # _image.yml 使用相对路径
   optimizeLongPosts: false # 优化长文章，这能让长文章的FPS提升70%-150%并解决假死问题，但存在一些副作用
+  # 具体见https://docs.kaitaku.xyz/guide/theme.html#%E9%95%BF%E6%96%87%E7%AB%A0%E4%BC%98%E5%8C%96
 
 # 优化性能区
 performance:

diff --git a/docs/.vuepress/nav/sidebar.js b/docs/.vuepress/nav/sidebar.js
@@ -5,23 +5,23 @@ export default {
             collapsible: true,
             children: [
                 {text: "快速上手",link: "/guide/"},
-                {text: "更多配置",link: "/guide/config"},
-                {text: "主题配置",link: "/guide/theme"},
-                {text: "评论系统",link: "/guide/comment"}
+                {text: "更多配置",link: "/guide/config.html"},
+                {text: "主题配置",link: "/guide/theme.html"},
+                {text: "评论系统",link: "/guide/comment.html"}
             ]
         },
         {
             text: "迁移指南",
             collapsible: true,
             children: [
-                {text: "从shoka迁移",link: "/guide/shoka"}
+                {text: "从shoka迁移",link: "/guide/shoka.html"}
             ]
         },
         {
             text: "最佳实践",
             collapsible: true,
             children: [
-                {text: "性能优化",link: "/guide/performance"}
+                {text: "性能优化",link: "/guide/performance.html"}
             ]
         }
     ]

diff --git a/docs/guide/theme.md b/docs/guide/theme.md
@@ -11,18 +11,24 @@ js: "js" # js存放目录(不建议改动)
 ```
 
 ### 实验性特性
-#### PWA
 :::tip
-PWA功能较为复杂且需要一些时间，早期站点搭建时可以先忽略
+实验性特性均不稳定，随时可能引入破坏性更改，且部分有明显副作用
 :::
-PWA是Progressive Web Apps的缩写，可以为web应用提供类似于原生应用的体验
-配置如下:
+#### 长文章优化
 ```yaml
-pwa:
-  enable: false # 开启PWA功能
-  serviceworker: sw.js #serviceworker脚本位置,使用以/为基准的绝对路径
-  manifest: manifest.json #manifest位置,使用以/为基准的绝对路径
+experiments:
+  optimizeLongPosts: true # 开启长文章优化
 ```
-serviceworker可查看[MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API/Using_Service_Workers)以获取帮助 \
-manifest可查看[MDN](https://developer.mozilla.org/zh-CN/docs/Web/Manifest)获取帮助 \
-建议将上述文件放置于assets或source(hexo根目录)下以方便定位
+当文章过长时(≥5万字)，文章页面的FPS会下降到10FPS左右，部分渲染性能较差的设备还会出现假死现象。 \
+此问题在 shoka 时期就已存在，因此 shokaX 引入了长文章优化，底层原理是使用`content-visibility`暴力缩短渲染范围以大幅提高性能。
+:::tip
+实验室数据显示在2万字时FPS便会出现波动，3万字时就可以感觉到波动了，5万字时页面已经十分卡顿。
+如果页面有大量Katex公式则此问题会更严重
+:::
+
+实验室数据显示此选项可将FPS由10提升到25左右(4x CPU slowdown)并解决卡死问题，但此功能存在`导航栏抖动`和`进度条抖动`问题，可能影响到浏览体验。
+- 导航栏抖动：在滑动时导航栏会反复弹出收回，时间较短(一般不超过1s)
+- 进度条抖动：返回顶部的文字和滑动条的长度与文章实际长度不符，存在±1-5%的误差
+
+上述问题均是由于此方法导致的`window.scrollY`抖动引起的，如果你有好的解决方法欢迎发起PR。
+因此，长文章优化功能仅建议在有文章字数超过3万字或站点主要面向渲染性能较差的设备时启用。