为什么React官网那么快
服务端渲染 SSR
无论是服务端渲染还是客户端渲染，一开始都是要请求一个 HTML 文本，但是区别就在于这个文本是否已经被服务端组装好了
- 客户端渲染还需要去下载和执行
Javascript脚本之后才能得到我们想要的页面效果，所以速度会比服务端渲染慢很多 - 服务端渲染得到的
HTML文档就已经组合好了对应的文本，浏览器请求到之后直接解析渲染出来即可，不需要再去下载和执行额外的Javasript脚本，所以速度会比客户端渲染快很多
下图是客户端渲染和服务端渲染的流程图：
预加载/预处理资源
preload
关键字 preload 作为元素 <link> 的属性 rel的值，表示用户十分有可能需要在当前浏览中加载目标资源，所以浏览器必须预先获取和缓存对应资源。
1 | |
好处就是让在当前页面中可能被访问到的资源提前加载但并不阻塞页面的初步渲染，进而提升性能。
注意：使用
preload作为link标签rel属性的属性值的话一定要记得在标签上添加as属性，其属性值就是要预加载的内容类型
preconnect
preconnect 是提示浏览器用户可能需要来自目标域名的资源，因此浏览器可以通过抢先启动与该域名的连接来改善用户体验。
1 | |
dns-prefetch
DNS-prefetch (DNS 预获取) 是尝试在请求资源之前解析域名。这可能是后面要加载的文件，也可能是用户尝试打开的链接目标。
1 | |
prefetch
prefetch 作为元素 的属性 rel 的值，是为了提示浏览器，用户未来的浏览有可能需要加载目标资源，所以浏览器会事先获取和缓存对应资源，优化用户体验。
1 | |
什么时候使用：
当你的页面中具有可能跳转到其他页面的路由链接时，就可以使用prefetch 预请求对应页面的资源了。如果一个页面中路由链接太多，全部发一遍显然浪费流量，也不利于性能优化。
可以通过监听 Link元素，当其出现到可见区域时动态插入带有prefetch属性值的link标签到HTML文档中，从而去预加载对应路由页面的一些资源，这样当用户点击路由链接跳转过去时由于资源已经请求好所以页面加载会特别快。（懒加载思想）
preload 和 prefetch 的区别
两者都用于提前获取和缓存对应资源
preload让浏览器提前加载指定资源，需要执行时再执行，可以加速本页面的加载速度
prefetch告诉浏览器加载下一页面可能会用到的资源，可以加速下一个页面的加载速度
参考
https://juejin.cn/post/7128369638794231839 本文绝大部分内容来源于这篇文章