主要观点：

• 9 月 1 日对网站进行更新，优化浏览器加载文件的方式，使自定义字体和头部随机引用加载更快。
• 通过使用rel="preload"在link元素中建议浏览器提前下载所需文件，可改善文件下载链。
• 对于字体文件，需以特殊方式设置as="font"和crossorigin属性以让浏览器实际使用预加载的文件。
• 预加载脚本请求的文件时，需添加明确选项，如设置 HTTP 请求方法、发送凭证等，否则在 Safari/WebKit 中会出现 CORS 错误。
• 测量预加载效果因机器负载时间差异难以做到一致，但从视觉上可观察到预加载对字体加载和引用显示的影响，在快速连接和慢速 3G 连接下都有改善。

关键信息：

• 网站原head元素包含多个link和script标签，导致文件下载链较长。
• rel="preload"可改变下载链，先下载字体和引用文件等。
• 字体文件预加载需设置as="font"和crossorigin属性，否则浏览器会下载两次。
• 脚本请求文件预加载需添加特定选项，否则 Safari/WebKit 会报错。
• 从视觉上看，预加载可减少字体加载延迟和引用显示时间，在不同连接下效果不同。

重要细节：

• 原下载链：下载css/main.css→下载css/font.css（包含font.woff2）→下载js/quotes.js（包含quotes.txt）。
• 预加载后的下载链：下载font.woff2→下载quotes.txt→下载css/main.css→下载css/font.css→下载js/quotes.js。
• 在 Chromium 中未设置crossorigin属性预加载字体文件会导致下载两次和控制台警告。
• 在 Safari/WebKit 中未设置预加载脚本请求文件的选项会导致 CORS 错误和文件重新下载。
• 测量预加载效果因机器负载时间差异难以准确衡量，但视觉上可观察到在不同连接下的改善。