GTA6倒计时展示页，是本文章的结果。
在开发过程中，遇到了不少问题，特别是性能方面。
👉 前往GTA6倒计时网站（非官方，由米塔山制作）

为什么要制作这个页面

6月中旬，气温已逐渐升高。
本来这个时候，R星不跳票的话，5月末就能玩到游戏，迈阿密、夏天，搭配在一起，特别舒服。

但是，现实是跳票到11月中旬，因此我想制作一个页面，帮我度过漫长的半年时间。

灵感来源

是一张图片，我放在文章的末尾了。
是一张很酷炫的图片，我想着能否通过网页制作出来，随后倒计时流逝着，最后解锁？

我用CodeX从背景开始，首先是背景，采用的是深色渐变
铺满在网页的5行文字距离发售，但我认为语义不够准确，所以改成距离解锁

五行文字，上下紧密排列，首尾对齐。同时第一行文字，按照图片中的蠕动渐变效果实现
但第二行文字开始，变为灰色，一行接着一行，颜色越来越浅，变得越来越透明

中间的GTA6 LOGO，放置在中间，大小保持不变，同时叠加阴影在正下方。
下方的倒计时字样，遵循同样的渐变蠕动样式。

接着，实现了图片拼贴区和距离解锁区

图片拼贴区是通过手动计算拼贴的长宽高，确保不会有图片没有显示，没有缝隙，排版不会乱。

这样的优点是，图片拼贴展示效果符合预期，缺点则是后续拓展不方便，需要重新手动计算。
但是，这是一个生命周期约半年的页面，因此维护性不重要。重要的是，快速实现功能并上线，同时确保没有重大逻辑问题。

最后就是“愿望单”板块，这部分做起来较为简单。
COMING NOVEMBER 19 2026 字样，为了方便，在Rockstar Games的GTA6页面截图，并使用Photoshop让背景变得透明，黏贴到放置的区域中。

愿望单的PS5和XBOX按钮，分别取自互联网的svg素材库，使用Codex进行调整即可完成。

在倒计时板块，将板块背景从色彩渐变，改成GTA6预告片。
由于服务器带宽较低，若使用1080P-4K分辨率、高码率的预告片作为视频源，很难快速加载。

同时发现，图片拼贴若使用原素材直接展示，不仅会消耗大量服务器带宽、增加平均加载时长，有一些用户可能使用嵌入式设备或者低性能进行本页面浏览，过多的高清图片拼贴会造成浏览卡顿。

因此必须进行性能优化。

可以发现，图片拼贴，每张图片的大小不变，且位置不变的特性。
因此，根据图片拼贴部分，小、中、大三个不同规格的图片拼贴，生成不同大小的低质量缩略图，是非常重要的。

做法是，在构建或者开发时，就将图片拼贴的缩略图生成，并让图片拼贴索引这些低质量派生图。
用户点击某一个拼贴时，调用图片查看器，加载完整的清晰原图片，查看图片的更多细节。

这样，大量服务器带宽都被节省，同时增加了低性能设备访问页面的流畅度。

作为倒计时背景的预告片视频，可以说很重要。
由于服务器带宽较低，若使用1080P-4K分辨率、高码率的预告片作为视频源，很难快速加载。

解决方案，使用低质量预告片视频、模糊效果、多点缓冲机制
注意模糊效果，需要作用于网页。不要在视频本身增加模糊效果。

多点缓冲机制，第一次缓冲只加载前三秒，随后加载图片拼贴的低质量缩略图，随后加载其余的预告片视频缓冲点。

低质量预告片，在下载原始预告片后，将预告片使用ffmpeg重新导出为720p分辨率、30帧、去掉声音、码率降到最低。
去掉声音可一定程度的降低视频大小，减少加载压力。

IDEA-Photo