前端的缓存策略

前端资源也需要配置缓存策略,以提高网站的访问速度。由于网站的流量增大,我们需要合适的缓存策略才能让 CDN 发挥最大效果保证网站的访问速度。

# Cache-Control

Cache-Control 用来设置资源的缓存策略,常见的的值有:no-store 、no-cache、public、private、max-age、immutable。

# no-store

不缓存资源,每次都需要重新请求。

# no-cache

需要先验证资源是否过期,如果没有过期,可以使用缓存。

# public

资源可以被所有的用户缓存,包括 CDN。

# private

资源只能被用户缓存,不能被 CDN 缓存。

# max-age

设置资源的最大缓存时间,单位是秒。

# immutable

资源不会改变,可以永久缓存。

# 前端网站的缓存策略

现在的前端网站一般都是 SPA 或者 PWA,index.html 是一个入口文件,其他的资源都是通过 index.html 加载的。所以我们可以设置 index.html 的缓存策略为 no-store,保证每次都是最新的资源。

其他的都是静态资源,并且文件名包含 hash,所以我们可以设置这些资源的缓存策略为 immutable,保证这些资源不会改变,可以永久缓存。

Cache-Control: no-store

Cache-Control: public, max-age=604800, immutable
1
2
3

# 总结

index.html 文件是网站入口,这个文件不能缓存,每次都需要重新请求,否则不能及时更新网站。不过这个文件一般也不大,所以不会影响网站的访问速度。其他的静态资源文件名包含 hash,所以这些资源不会改变,可以永久缓存,这样可以提高网站的访问速度。

# 参考

MDN Cache-Control (opens new window)

Prevent unnecessary network requests with the HTTP Cache (opens new window)

macOS下运行红警2游戏

Linux 用户有钱就换 Mac,我也日常使用 Mac 电脑了。但是对于童年回忆的红警 2 游戏,我还是想在 Mac 上玩一玩。这里记录一下在 Mac 上运行红警 2 游戏的过程。

# 下载原版红警 2 游戏

网上应该有很多下载地址,我这里就不提供了。下载完之后,先使用 windows 电脑安装一下,然后把安装好的游戏文件夹拷贝到 Mac 电脑上。

# 安装 CrossOver

CrossOver 是一款可以在 Mac 上运行 Windows 程序的软件,我们可以使用 CrossOver 来运行红警 2 游戏。CrossOver 有 14 天的试用期,我们可以先下载试用一下。

在 CrossOver 中,我们先创建一个 Bottle,然后在 Bottle 中复制安装好的游戏文件夹。之后再配置环境变量,让内部 OS 使用中文运行避免乱码问题,找到 Bottole 的 cxbottle.conf

在最后的环境变量配置中添加下面的内容:

[EnvironmentVariables]
"LC_ALL" = "zh_CN.UTF-8"
1
2

# 下载游戏补丁

由于红警 2 是 2000 年的游戏了,所以在现在的电脑上运行会有一些问题,我们需要下载一些补丁来修复这些问题。

下载 cnc-ddraw 补丁,并复制到游戏目录下,然后在 CrossOver 中打开 Wine Configuration,选择 Libraries,添加一个 override,然后输入 ddraw,点击添加并应用。

# 设置分辨率

红警 2 的默认分辨率是 800x600,这个分辨率在现在的电脑上看起来太小了,我们需要修改一下分辨率。并且开启相关的渲染优化,打开 ra2.ini 文件,修改成下面的内容:

[Video]
VideoBackBuffer=no
AllowVRAMSidebar=no
AllowHiResModes=yes
ScreenWidth=1728
ScreenHeight=1117
StretchMovies=no
1
2
3
4
5
6
7

上面是我的 MBP 16 寸的分辨率,如果你的电脑分辨率不一样,可以自己修改一下。修改好之后,就可以通过运行 ra2.exe 来启动游戏了。

# 总结

M1 电脑也是可以运行老游戏的,就是需要折腾一下。希望能帮助大家回忆童年。

# 参考

Set Windows application to use a different language than the OS default (opens new window)

cnc-ddraw (opens new window)

How to run Red Alert 2 (opens new window)

嵌套表格如何实现边框合并

最近做的项目中有大量表格展示数据的需求,而且还涉及到嵌套表格的情况,这时候就需要考虑如何实现边框合并的问题了。

# 表格的边框合并

table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid black;
  padding: 10px 20px;
}
1
2
3
4
5
6
7
8

我们可以使用上面的 CSS 来描绘表格的边框,而且相邻两个单元格共享同一个边框。但是如果我们在表格中嵌套了另外一个表格,这时候就会出现边框重叠的问题。

# 嵌套表格的边框合并

针对嵌套表格会显示双重边框的问题,我们有两种解决方案,一种是父表格手动删除嵌套表格单元格的边框,另一种是让子表格的边框和父表格的边框重合。 第一个实现方式非常简单,只需要在父表格中删除嵌套表格单元格的边框即可,但是这样做会导致父表格的边框和子表格的边框不重合,而且视觉上不美观。 第二个实现方式需要在子表格中添加一些 CSS,让子表格的边框和父表格的边框重合。我们可以使用下面的 CSS 来实现:

table table {
  width: calc(100% + 2px);
  margin: -1px;
}
1
2
3
4

通过上面的 CSS,我们可以让子表格的边框和父表格的边框重合,这样就可以解决嵌套表格显示双重边框的问题了。

# 总结

视觉上让表格边框重合的方法本质上发挥想象力利用 margin 可以设置成负值,然后使用 calc 函数来计算宽度,这样就可以让子表格的边框和父表格的边框重合了。

# 参考

nested table with collapse border (opens new window)