• 站务

  • 网站进一步的升级工作

考虑前端 ssr + redis 缓存？我看首页和帖子数据和 ui 结构都挺不复杂，完全可以做服务端渲染

    hsxfjames
    PHP 可以说是天然地 ssr 了（逃
    目前 Flarum 官方实现了针对搜索引擎的简单的HTML输出，SEO 方面可以满足。
    考虑更多的是加载速度方面，考虑到复杂的网络环境，目前我更倾向于抽出一个轻量通用的 App Shell，先保证第一屏的到达，所以对体积这块比较敏感一些🤔

        0x0001 但是你上面 17 楼发的 TTFB 有 200+ 毫秒，太不可思议了，经验中加个 redis 都会瞬间返回吧（也可能是线路问题？逃）。 vue 官方有 ssr 插件，在流式渲染的加成下甚至会更快，我不太确定你的框架是否已经集成或者比它快（啊我太懒了并没有看代码）。而且在 ssr 一把梭下 app shell 也同样在服务端运行，提升的应该是服务端渲染的性能鸭，如果服务端只负责吐 app shell 出来，由客户端负责请求接口数据并渲染，那么 ssr 的意义就不大辣（假设外壳 3k ，渲染好 7k ，相对于神奇数字 14kb 来说一个请求快过两个请求）。

            hsxfjames
            TTFB 也是我目前最蛋疼的地方了，这里的 HTML 全是 PHP 生成的，用的是重型框架 laravel 魔改出来的后台，类似一种 PHP 和 JS 混合的产物。PHP 内部处理差不多 150ms 的内耗，然后辣鸡网络一个请求 大陆→HK→广州→HK→大陆 两次穿墙差不多需要 100ms。

            这里原本也有点服务端吐 App Shell 然后前端调接口渲染的机制。作者为了减少一个请求，第一屏的实现是，在 PHP 内部调用帖子数据接口的控制器拿到数据，然后用 json_encode(类似JSON.stringify) 硬编码到 script 标签里面。然后前端再解析这个JSON，渲染出具体的 DOM 节点。也就导致页面整体大小差不多 200KB，gzip 之后也有 30KB...

            拿掉了这部分 JSON 输出之后首屏的 HTML 输出降低到了 30KB，gzip 之后 7KB 左右，代价是网页加载完成后得多请求一次接口才能获取到帖子。

            然后是 SSR 的可行性。刚刚试了下直接保存渲染好的首页，HTML 部分 100KB左右，gzip 以后刚好是你说的神奇数字14KB。但需要渲染的不仅仅是帖子列表，还有标签节点之类的东西，这些在 Flarum 目前是完全靠前端实现的，前端用的 Mithril.js 这方面支持看起来不太完善，改造的话还扯到PHP的模板和各种插件扩展之类的东西，难度估计非常高。

            所以现在觉得还是尽可能减少 HTML 部分首次加载的体积，让它能作为整个 SPA 应用的 App Shell，后台尽可能直接输出，前端用 service worker 缓存起来，整个 SPA 启动起来之后再另外调这个耗时有点长的接口来请求，白屏的时间也短一些🤪

                0x0001 laravel 的性能确实不好。话说之前我有想学来着，被它引入前端包的方式迷惑到了，然后我就成了一名前端

                  1 个月 后
                  1 个月 后

                  把反代服务器最开始搞的 traefik 下掉了，换回 nginx，用了这个 Docker 镜像
                  https://github.com/RanadeepPolavarapu/docker-nginx-http3

                  一把梭哈，不费吹灰之力得到了以下的 BUFF：

                  1. HTTP/3 (QUIC)
                  2. TLSv1.3, 0-RTT 握手
                  3. 比 gzip 更优的 brotli 压缩算法

                  进一步节约了带宽消耗，加载速度等方面应该会有提升～

                  SSL Labs 测评

                  5 天 后
                  2 个月 后

                  优化：附件图片上云

                  在腾讯云开了个存储桶镜像本站，然后给静态图片的域名做了个302跳转，静态图片加载速度应该不再是瓶颈了。

                  相关 Issue

                  有空研究下怎么实现上传其它类型附件到对象存储，增强附件下载体验。

                    11 天 后
                    20 天 后

                    0x0001

                    新的一波优化

                    1. 附件全面上云

                    根据 和 FlarumChina 社区创办人的沟通，那边维护了一个支持自定义兼容 Amazon S3 协议的 附件上传插件，这里也搬运了过来，目前所有的图片和附件都存在云端了，且开通了存储桶的 CDN 功能，下载速度不再是问题。

                    但因为主站反代服务器本身只有 1Mbps 带宽（带宽成本非常昂贵），上传速度不快，权衡之下，还是继续保持最大 2MiB (2048KiB) 的附件大小限制。

                    附件测试：

                    weblfasr-nodejs-demo.zip
                    19kB

                    2. 更新最新版 flarum/core

                    更新插件的时候顺便把 flarum/core 更新到了最新的 v0.1.0-beta.12 版本，本地开发环境则与官方 master 同步，特殊的魔改部分则通过签出 新分支，然后再 merge 之前魔改基于的分支来进行。

                    一波下来没遇到什么障碍，感觉这自动部署的流程已经跑的很顺了 😃

                    3. 静态 CSS/JS 文件重新接入CDN

                    0x0001 这个帖子里面有提到我们有用到网协的域名接入了大陆的 CDN，我们依赖的服务基本都跑在腾讯云，再引入阿里云的 CDN 管理成本太高，所以昨天和大佬重新对接了一下，配上了腾讯云的 CDN 服务。

                        一波更新

                        1. 升级 PHP 7.4

                        升级了网站的基础设施，新版的上传插件增加了一个识别 exif 的 orientation 标记，自动纠正图片的功能，需要 PHP 的 exif 扩展，否则会报错。

                        恰好 PHP 正式发布了最新的 7.4 版本，带来一波性能优化。所以把容器镜像升级到了最新的 php:7.4-fpm-alpine。

                        2. 增加 LaTeX 公式支持

                        如 本帖所述，一个乌克兰小哥开发了基于 KaTeX 库 的插件 MathRen for Flarum，这里引了进来。

                        现在编辑器底部有一个公式的功能，分别支持：

                        1. 块级公式 Block Expression（单独成行）
                        2. 行内公式 Inline Expression（与文字混排）

                        在编辑器底部可以看到：

                        修复了一些交互细节问题，另外做了一点性能优化：
                        这个插件在前端引入了 KaTeX 包里包括字体在内的所有文件，打包后的 js 一下增加了 250+KiB，让人难以接受。

                        为保持站点的打开速度，让它用 JsDelivr 的 CDN 单独异步加载，优化后 257 KiB 的 forum.js 降低到了 10 KiB。

                        3. 尝试换掉 moment.js

                        moment.js 是 JavaScript 里一个处理日期时间的类库，它的功能十分强大，但代码体积巨大，参考：
                        you-dont-need/You-Dont-Need-Momentjs: List of functions which you can use to replace moment.js + ESLint Plugin

                        实际上很多功能我们是用不上的，尝试把 moment 换成 dayjs，换掉后可以带来压缩后 40KB 的收益。但帖子详情页用到了 moment.js 提供的 duration API，dayjs 没有支持。

                        Feature request: Add Duration Plugin · Issue #564 · iamkun/dayjs

                        等 dayjs 有了支持再换 = =

                        btw：这个 Feature 实现之后可以拿 110 多刀（到目前为止），有兴趣的话可以搞起啊！

                          增加简易的草稿功能，编辑时默认在本地持久化编辑框内容，避免帖子因掉电、杀进程（尤其是移动端）、系统崩溃等原因丢失编辑中但未发布的帖子。

                          未来或许可以保存基于服务器端的草稿（现有插件未支持，工作量较大，暂时没空搞）

                          （一大原则：浏览器里的编辑框始终不太可信，较长的帖子建议用本地编辑器编辑好再过来粘贴

                          0x0001 等 dayjs 有了支持再换 = =

                          没想到作者合了PR，修好了这个问题哈哈

                            更新

                            1. 修复 firefox 下弹框的BUG

                            参见此贴：FireFox发布帖子时选择分类对话框一闪而过 - 0xFFFF

                            2. 优化：dayjs 替换 moment

                            如楼上 0x0001

                            3. 接入 Sentry 错误上报

                            Sentry 是一个强大的错误监控方案，通过它可以及时发现论坛代码潜在的问题。

                            刚刚通过 社区的方案 接入了，无论前后端，一旦有报错，会立马邮件推送到我的微信。

                              9 天 后

                              现已支持 GitHub 一键登录，默认社区帐号与登录的 GitHub 的 Primary email address 绑定。

                              修改绑定邮箱入口：

                              5 个月 后

                              hsxfjames service worker 重新加上了，魔改了一个可以完全缓存的首页，第二次打开的首屏加载可以快一些🌛

                                © 2018-2025 0xFFFF