首页加载缓慢
一、同构解决方案
使用场景：通过虚拟DOM，操作DOM; 有SEO需求；
- 客户端渲染：首页白屏，慢
- 服务端渲染：首页快，但每次跳转需请求服务端，慢
同构：结合客户端和服务端渲染的优点，服务端先渲染一遍html(静态页面)，客户端添加事件绑定。
解决首屏慢问题。
只首次访问请求服务端。
(1) 路由的处理
// 服务端渲染使用 静态路由
<StaticRouter></StaticRouter>(2) 数据的脱水、注水
把从后台获取的数据储存起来，当客户端渲染时注入
二、前端预加载
(1) DNS 预解析 dns-prefetch
-
场景：跨源获取数据
浏览器无法自动预加载
<script>中的链接和动态插入的链接，此时需要在页面的头部 添加dns-prefetch
如：<head> <link ref="dns-prefetch" href="xxx.com"> </head> -
功能：执行dns查询
-
缺点：过多的dns解析造成网络负担
-
相关知识点：浏览器DNS缓存，不同浏览器的缓存时间不同，chrome(1分钟) chrome查看缓存
-
过程：html下载完成后，解析页面包含链接的标签，提前查询对应的域名；访问过的页面，根据浏览器缓存列表，再次打开时html下载的同时去解析DNS。
-
自动解析
https 不会自动解析(安全问题)
开启自动解析功能：<meta http-equiv="x-dns-prefetch-control" content="on">content 值 on
关闭自动解析功能:<meta http-equiv="x-dns-prefetch-control" content="off">content 值 off -
手动解析
-
(2) preconnect
- 场景：预先建立网络链接，加载资源提升用户体验
- 功能：HTTP发起请求前预先执行 DNS解析、TLS协商、TCP握手
- 缺点：(> 6-8 个)过多的网络链接，抢占资源造成网络负担。过多的预连接会损害浏览器其他域的连接。
- 相关知识点：因浏览器对http连接有时间限制，预先建立连接在一定时间内未使用，会提前关闭连接。
(3) prefetch
- 场景：预先获取或缓存资源，以供下一次页面加载时使用
- 功能：提前获取到资源
- 缺点：如果不确定使用，提前获取资源，占用网络资源造成网络负担
(4) preload (优先级更高)
- 场景：预先下载和缓存资源， 如: video、audio、document、font、image、script、style、worker等，但不加载和执行脚本
- 功能：以更高的优先级下载和缓存资源，当前页面可用
- 注意：与prefetch 同时使用，造成二次下载 如：
<Link ref = "prefetch" ...><Link ref = "preload" ...>会加载两次资源
跨域加载资源需添加crossorigin,避免多次加载<Link ref = "preload" crossorigin ...>