Twitter 试图减少打开外链的加载时间，但是却适得其反。它错误地将域名规范化成一个不可能完成任务。
我之前也写过有关何时使用 <link rel="preconnect"> 预连接的介绍。如果你不熟悉这个领域，也可以通过本文进一步了解。
Twitter 通过其 t.co 短链接服务重定向链接，它曾经是 Twitter 很有用的一个补充，该短链将所有链接减少到 23 个字符，帮助人们将推文严格保持在规定的字符限制之下。并且 Twitter 可以通过点击分析获得更多用户行为数据，以及对热门链接的洞察力。
然而短链接服务也有代价：链接解析及访问速度会变慢。浏览器需要先连接到 Twitter 的短链服务，然后才能重定向到目标网站，而不是直接通过链接跳转到目标网站。为了加快这个过程，Twitter 在每次滚动卡片进入视图时，都会预连接到其短链服务。卡片是显示链接的图片、标题和描述的方框。这表明 Twitter 发现人们极有可能点击推文中的外部链接。
为了进一步加快速度，Twitter 会在预连接到重定向的目的网站，不过这也是它犯了一些错误的地方。
你可能会奇怪，既然它已经知道了目的地址，为什么还要使用短链服务呢？重读上一段，就能明白 Twitter 的动机。
在我继续讨论这些问题之前，我必须先谈一下隐私问题。Preconnects 不会传输任何 HTTP 头、cookies 或其他识别数据。目标网站此时根本不知道客户端为什么要向它打开连接。它只是打开了一个连接，等待一个请求的到来。它的服务器可以识别用于建立连接的 TLS 库和版本，但这绝不是唯一的数据。能够观察相关网络流量的第三方就会知道，用户要么试图连接到相关域名或服务器，要么看到了链接。
上面提到，Twitter 经常会预连接到错误的网站。举个例子，我们来看看 @CtrlBlog 和 @nytimes 的推文。这些账号分享的链接链接到域名 www.ctrl.blog 和 www.nytimes.com。Twitter 没有在这里预连接，而是预连接到 ctrl.blog 和 nytimes.com。因此，这些连接是在错误的服务器上进行的，所以这些连接永远不会被使用。
奇怪的是，通过 Twitter 广告发布的推文（无论你是否将该推文视为广告）都不会出现这个问题。这些推文不使用 t.co，总是预连接到正确的服务器上。
用于预连接的错误域名似乎源于 Twitter 的 API 的 display URL 属性。它去掉了 www. 的前缀来制作一个 "显示版本 "的 URL。我对此没有意见，因为前缀对用户来说没有意义。不过，在技术角度前缀是必不可少的技术功能。Twitter 也不会在实际的重定向 URL 中删除它。
让我们更详细地看看当用户点击一个链接，和浏览器使用 preconnection 预连接时发生了什么。
首先，浏览器现在需要解析域名，包括 www. 前缀。其次，浏览器需要建立一个 TCP 连接和设置一个 TLS 连接。如果 Twitter 一开始连接到了正确的域名，所有这些步骤都已经完成了。
很难说清楚这个问题是什么时候开始的。我无法查看旧版本的 Twitter，因为它的页面在互联网档案馆的Wayback Machine 中无法正常运行。仔细想想，Twitter 是否应该首先预连接到所有这些网站？
在关于何时使用 <link rel="preconnect"> 文章 (1) 中，我讨论了在哪些情况下使用预连接技术是有益的。我同意 Twitter 的做法，即在某些情况下，预连接到目的地址可能是有用的。例如，当 Twitter 消息或链接卡片是页面上唯一的东西，或者你已经停止滚动，并且在一两秒钟内看见它时。
(1) https://www.ctrl.blog/entry/dns-prefetch-preconnect.html
然而，Twitter 不分青红皂白地预连接到你在 feed 中滚动的每个链接。从技术上讲，它只在你悬停在链接上时才会预连接。然而，你悬停在每一个链接的默认情况下，你保持你的鼠标光标在主 feed 和向下滚动。根据你所关注的链接分享习惯，预连接的数量会迅速增加。这可能会降低你在慢速网络条件下或低端设备上的浏览体验。
正确测试预连接行为需要专业的工具和技能。Web 浏览器中的开发者工具并不能很好地处理预连接。它们甚至没有记录在网络选项卡中。Safari 会为每个预连接显示一条消息，并在其控制台选项卡中警告未使用的预连接。
Twitter，请修复你的问题！
资源：
Resource Hints, 2020-10-05, Working Draft, W3C https://www.w3.org/TR/2020/WD-resource-hints-20201005/
t.co links, 2020-09, Developer Docs, Twitter https://developer.twitter.com/en/docs/tco
About Twitter's link service (t.co), 2018-02, Help Center, Twitter https://help.twitter.com/en/using-twitter/url-shortener
How to post links in a Tweet, 2018-01, Help Center, Twitter https://help.twitter.com/en/using-twitter/how-to-tweet-a-link
英文原文：
https://www.ctrl.blog/entry/twitter-preconnects.html
参考阅读：
本文由高可用架构翻译。技术原创及架构实践文章，欢迎通过公众号菜单「联系我们」进行投稿。
高可用架构
改变互联网的构建方式
长按二维码 关注「高可用架构」公众号
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
