【性能问题】最新版本异常卡顿

tangly1024 / NotionNext

使用 NextJS + Notion API 实现的，支持多种部署方案的静态博客，无需服务器、零门槛搭建网站，为Notion和所有创作者设计。 (A static blog built with NextJS and Notion API, supporting multiple deployment options. No server required, zero threshold to set up a website. Designed for Notion and all creators.)

https://tangly1024.com

MIT License

7.17k stars 10k forks source link

【性能问题】最新版本异常卡顿 #816

Closed Angel0726 closed 1 year ago

Angel0726 commented 1 year ago

描述bug 简单说明bug的现象、相关的错误提示、日志等更新之后博客首页能打开https://coolnext.vercel.app/ ，但是所有文章都无法打开。显示404页面我可以确定的是87e4b2c版本没有问题，但是d3dcb91355c2cc0ac348e353fd286988b2e40d25版本就无法打开具体文章

是不是优化加载出了问题

复现步骤 出现这个bug的操作步骤

期望的正常结果 希望按这个步骤，正常操作结果是什么

截图相关的页面，应该用结果

环境

操作系统: [例如. iOS, Android, macOS, windows]
浏览器 [例如. chrome, safari, firefox]
版本 [e.g. 22]

补充说明 与问题相关的其它说明

Angel0726 commented 1 year ago

好像多次刷新之后是可以显示；但是感觉不仅加载速度明显变慢了，而且还卡顿。博客中的代码是自动换行的，但是notion中的代码不是自动换行的。可以跟notion统一吗

Angel0726 commented 1 year ago

新问题用手机刷博客，直接卡死，过一会浏览器就报异常。博客标题会雨封面重合 Screenshot_2023-03-02-00-29-36-198_com.android.chrome.jpg

tangly1024 commented 1 year ago

异常卡顿和404的问题，昨晚有提交了补丁修复，更新后应该会好很多。
修改代码换行逻辑，关闭掉行号显示即可实现和Notion一致：https://github.com/tangly1024/NotionNext/blob/440fcff60e64bfe7668c92275dc17e10c8e960c4/blog.config.js#L62

Angel0726 commented 1 year ago

异常卡顿和404的问题，昨晚有提交了补丁修复，更新后应该会好很多。

修改代码换行逻辑，关闭掉行号显示即可实现和Notion一致：https://github.com/tangly1024/NotionNext/blob/440fcff60e64bfe7668c92275dc17e10c8e960c4/blog.config.js#L62

代码换行逻辑修改了。更新了昨晚的补丁以后404问题解决了，但是卡顿异常还是存在，感觉不够丝滑博客网址https://next.zeabur.app/ 可以试一试. 我看了博客使用next主题会很流畅，但是使用hexo主题就会卡顿，不知道是不是hexo主题图片比较多的原因

tangly1024 commented 1 year ago

建议压缩一下图片大小
hexo主题的动画效果，也有可能造成卡顿，我将在新版本中优化此问题

Angel0726 commented 1 year ago

建议压缩一下图片大小

hexo主题的动画效果，也有可能造成卡顿，我将在新版本中优化此问题

更新之后效果有改善，但动画效果需要一些改善。windows、安卓都存在这个问题 https://jeweled-trilby-556.notion.site/59c95f5032194328a2e7c13c9e25fcf9

ikkz commented 1 year ago

@tangly1024 发现了几个影响性能的地方这里percent加入依赖数组会导致滚动时频繁地注册和取消事件监听，其他地方也有类似的代码 https://github.com/tangly1024/NotionNext/blob/b22475dec55702fbdff9dc6e7e05188e11e4aeb3/themes/hexo/components/Progress.js#L25-L28

scrollListener里有 clientHeight 等会触发回流的操作，也许应该做个节流，同样也不止一处 https://github.com/tangly1024/NotionNext/blob/b22475dec55702fbdff9dc6e7e05188e11e4aeb3/themes/hexo/LayoutBase.js#L41-L54

Angel0726 commented 1 year ago

那每次打开一个博客，封面的那个动画卡顿的问题也是因为这个原因吗？

ikkz commented 1 year ago

那每次打开一个博客，封面的那个动画卡顿的问题也是因为这个原因吗？

不确定，我也是刚看到这个项目准备用用

Angel0726 commented 1 year ago

之前我还一直以为是主题问题，看样子不是。这个用户的butter-fly主题就不卡顿https://www.sszsj.cc/ ，动画换成这个样子会不会好一点，还是说因为图片、网速等问题可能会更糟糕。这个主题是我翻看issues 705 找到的

Angel0726 commented 1 year ago

更新3.12之后还会存在卡顿问题。可以参考视频https://jeweled-trilby-556.notion.site/59c95f5032194328a2e7c13c9e25fcf9 版本号中多了一个引号

Angel0726 commented 1 year ago

更新3.12.1之后相比之前有所好转；但还会存在卡顿问题，而且有时候评论区加载不出来，刷新之后才能加载。可以参考视频https://jeweled-trilby-556.notion.site/59c95f5032194328a2e7c13c9e25fcf9 使用设备win、安卓都会卡顿，但是苹果不会卡顿

Angel0726 commented 1 year ago

更新4e9b9a0之后卡顿依然存在，运行日志。

tangly1024 commented 1 year ago

v3.12.2 版本针对性能做了处理

Angel0726 commented 1 year ago

还是会卡顿，博客首页卡顿严重。非首页好很多。详情可以看notion链接

tangly1024 commented 1 year ago

已提交了新的补丁，优化首页动画性能问题

Angel0726 commented 1 year ago

已提交了新的补丁，优化首页动画性能问题

问题依然存在，详情可以参考notion链接

Angel0726 commented 1 year ago

卡顿问题完全解决点赞。但是图片加载有一点慢，不知道是不是网络问题。zeabur服务器有一点慢。next.zeabur.app

Angel0726 commented 1 year ago

更新之后，博客首页每一篇博客高度变小而且高矮不一，是不是没有之前的好看；动画目前是文字飞入，是不是也有没有之前的好看

tangly1024 commented 1 year ago

更新之后，博客首页每一篇博客高度变小而且高矮不一，是不是没有之前的好看；动画目前是文字飞入，是不是也有没有之前的好看

高矮不一确实不美观，目前已经调整回固定高度了；动画显然原先的更好看：而处于性能优化的考虑，做成仅文字飞入的效果；出于美观考虑，动画的问题我再优化一下。