xChar
·2 months ago

性能优化系列都将以这张图出发进行全链路分析,让我们慢慢展开~
image

认识重定向

页面重定向是指,当我们访问一个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/"

image

重定向耗时计算

啊,找一个301的URL真难,打开控制台,然后地址栏输入https://w3c.github.io/navigation-timing

image

控制台输入以下代码:

const pnt = window.performance.getEntries()[0] // 获取PerformanceNavigationTiming Entry
console.log(pnt.redirectEnd - pnt.redirectStart) // 重定向时间计算

打印了337.5ms的重定向时间:

image

这个时间是与网速有关的。因为要等待Server Response中的301、302等重定向相关Status Code,再根据响应头中的Location参数拿到新URL接着进行重定向,至少需要一个RTT。因此距离服务器远或网络状况差的用户,重定向时间也会相应变差

更多阅读

重定向是什么?
重定向最佳实践
重定向对 SEO 有负面影响吗?

Loading comments...