考虑前端 ssr + redis 缓存?我看首页和帖子数据和 ui 结构都挺不复杂,完全可以做服务端渲染
网站进一步的升级工作
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 启动起来之后再另外调这个耗时有点长的接口来请求,白屏的时间也短一些
RSS Feed 输出功能已修复
把反代服务器最开始搞的 traefik 下掉了,换回 nginx,用了这个 Docker 镜像
https://github.com/RanadeepPolavarapu/docker-nginx-http3
一把梭哈,不费吹灰之力得到了以下的 BUFF:
- HTTP/3 (QUIC)
- TLSv1.3, 0-RTT 握手
- 比 gzip 更优的 brotli 压缩算法
- 已编辑
把网站程序整体开源了,以后更新记录直接在 Github 公开,详情:
0xFFFF 网站代码全面开源,期待你的参与
发现一些激动人心的事情:
- FlarumChina 开始继续更新 FlarumChina 2020 更新 - TowerLight Community
- Flarum 中文站 https://discuss.flarum.org.cn/ 有了新的维护者
网站功能升级这件事终于不再是单打独斗了~
- 已编辑
新的一波优化
1. 附件全面上云
根据 和 FlarumChina 社区创办人的沟通,那边维护了一个支持自定义兼容 Amazon S3 协议的 附件上传插件,这里也搬运了过来,目前所有的图片和附件都存在云端了,且开通了存储桶的 CDN 功能,下载速度不再是问题。
但因为主站反代服务器本身只有 1Mbps 带宽(带宽成本非常昂贵),上传速度不快,权衡之下,还是继续保持最大 2MiB (2048KiB) 的附件大小限制。
附件测试:
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,这里引了进来。
现在编辑器底部有一个公式的功能,分别支持:
- 块级公式 Block Expression(单独成行)
- 行内公式 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 有了支持再换 = =
- 已编辑
更新
1. 修复 firefox 下弹框的BUG
参见此贴:FireFox发布帖子时选择分类对话框一闪而过 - 0xFFFF
2. 优化:dayjs 替换 moment
如楼上 0x0001
3. 接入 Sentry 错误上报
Sentry 是一个强大的错误监控方案,通过它可以及时发现论坛代码潜在的问题。
刚刚通过 社区的方案 接入了,无论前后端,一旦有报错,会立马邮件推送到我的微信。