性能优化系列都将以这张图出发进行全链路分析,让我们慢慢展开~
认识重定向#
页面重定向是指,当我们访问一个 A 链接的页面时,浏览器自动将链接 A 重定向到链接 B 的页面访问,转而向 B 链接发起新的请求。这个过程用户一般是无感知的
正确配置重定向可传递旧网站的SEO价值到新地址网站,也能在网站维护 / 升级期间平滑过渡不损害用户体验
什么情况需要重定向#
- 页面发生移动,即 URL 变化了,域名、path 等
- 页面维护升级 / 删除时保证旧链接可用性,重定向到新的页面或友好的 404 页,不损害用户体验
- 规范 URL,即将多种 URL 写法统一为单一 URL 利于 SEO
重定向的类型#
- HTTP 重定向,302 临时重定向、301 永久重定向等等;
- HTML meta 标签重定向,
<meta http-equiv="refresh" content="3;url=https://alifeiliu.xlog.app/" />
,3s 后重定向到指定 url; - JS 重定向,
window.location = "https://alifeiliu.xlog.app/"
、location.href = "https://alifeiliu.xlog.app/"
;
重定向耗时计算#
啊,找一个 301 的 URL 真难,打开控制台,然后地址栏输入https://w3c.github.io/navigation-timing:
控制台输入以下代码:
const pnt = window.performance.getEntries()[0] // 获取PerformanceNavigationTiming Entry
console.log(pnt.redirectEnd - pnt.redirectStart) // 重定向时间计算
打印了337.5ms
的重定向时间:
这个时间是与网速有关的。因为要等待 Server Response 中的 301、302 等重定向相关 Status Code,再根据响应头中的 Location 参数拿到新 URL 接着进行重定向,至少需要一个 RTT。因此距离服务器远或网络状况差的用户,重定向时间也会相应变差