使用中间页跳转还是 301 跳转？

先上结论：没有绝对的好与坏，只有当前场景是否适合。 301 更适用于 SEO 和低 FCP 网站，而中间页跳转在高 FCP 场景下用户体验更佳。 另外中间页跳转在 A/B 测试时能得到更准确的统计数据。

首先详细理解下二者的各自优势和缺点：

• 301 跳转
  • HTTP 服务器返回 301 status + Location Header，浏览器根据 Location 字段直接跳转。
• 中间页跳转
  • HTTP 服务器返回 200 status + HTML 页面，根据页面中的 JavaScript 代码进行跳转。
    • 直接 window.location.href = xxx 跳转，优点：可设置 Cookie
    • 直接 <meta http-equiv="refresh" content="0; url=xxx"> 跳转，优点：可设置 Cookie，最大限度自由度，缺点：部分浏览器不支持

你可以点击下面链接来感受一下跳转过程：

• 301 跳转
• 中间页跳转

301 跳转

优点：

1. 支持 SEO，搜索引擎会将原页面的权重传递到新页面。
2. 浏览器直接跳转，性能更佳。
3. 原生体验，用户基本感觉不到自己被重定向到新页面了。

缺点：

1. A/B测试无法保证体验一致性，因为不支持 Cookie，用户多次访问，且浏览器缓存失效的情况下，可能跳转到 A 或者 B 页面。
2. 数据统计不精确，因为 301 是永久重定向，浏览器会缓存目标地址，同一短链多次访问时只会记录第一次，导致短链点击次数小于实际点击次数。

中间页跳转

优点：

1. 对于加载速度较慢的网站（首屏大于 2 秒），用户体验更佳。
   • 因为浏览器会加载中间页面，展示提示信息，例如 加载中...，同时并行再加载目标页面，直到资源完全加载后再渲染 HTML。
   • 最终的效果就是中间页面跳转时间比 301 跳转慢一丢丢，但是用户体验上，感觉好像加载的更快。
2. 对于 A/B 测试页面，可通过 Cookie 严格控制用户的跳转结果，保障用户体验一致性。
3. 中间页可定制，例如知乎提示“外部网址，是否继续”，或者设置密码等。
4. 精确的数据统计，解决了 301 永久重定向时缓存目标地址的问题。

缺点：

1. 不支持 SEO，搜索引擎不会将原页面的权重传递到新页面。
2. 加载性能差，因为要加载两次 HTML 页面。
   • 但是实测时，通过设置目标网址的 preload 属性，浏览器会预先加载目标网站资源，加载速度相差低于 1%。
   • 在目标网站未加载完成前，会展示中间页面，例如一个 loading 动画，或者类似 bilibili 的机械姬出来跳舞💃，对用户体验上更佳。

总结

301 跳转和中间页跳转各有千秋，主要在于你当前的使用场景是什么样的：

简单说，如果你需要 SEO，那 301 跳转肯定是首选。 如果你客户跨境，覆盖全球，想保证访问体验，那中间页跳转肯定更合适。