为什么用了后页面加载反而变慢了？
我在单页应用里给下一个路由的CSS文件加了<link rel='prefetch'>，但实际测试发现首屏渲染反而比之前慢了0.5秒，这是为什么呢？
我尝试在路由切换时动态插入预加载标签：
const nextCss = document.createElement('link');
nextCss.rel = 'prefetch';
nextCss.href = '/next-page.css';
document.head.appendChild(nextCss);
但监控显示预加载的CSS文件竟然在首屏渲染阶段就被下载了，导致主线程阻塞。明明prefetch应该是低优先级请求啊？而且这个CSS文件有200KB，会不会太大了？
其他尝试都失败了：
1. 换成preload后性能反而好了
2. 把文件拆分到50KB还是有延迟
3. 检查网络面板发现prefetch优先级比静态资源高
- 1
回答
41浏览
预获取（prefetch）在单页应用中如何正确使用？为什么我的页面加载反而变慢了？
我在开发一个Vue单页应用时，尝试给下一页的图片列表页面添加预获取。按文档写了类似下面的代码，但发现首页加载反而变慢了，控制台显示预加载了大量图片资源。这是不是预获取用错了？ <template...
- 2
回答
27浏览
预加载的资源为什么会阻塞页面加载？
我在用link rel="preload"预加载图片时发现页面反而更卡了，明明只是预加载下一屏的图片啊。我按照文档写了这样的代码： document.querySelectorAll('.next-p...
- 1
回答
8浏览
为什么我的CSS旋转加载动画在页面加载时会突然卡顿一下？
我在做一个简单的旋转加载组件，用CSS3动画实现图标旋转。但每次页面加载时，图标会先显示0.5秒的静态状态，然后才开始旋转。我尝试过把animation-delay设为0和调整will-change属...
- 2
回答
41浏览
为什么给图片链接加了prefetch后反而加载更慢了？
我在开发单页应用时，想用预加载下一个页面的图片资源。按照文档在标签里加了rel="prefetch"，但发现图片反而比直接访问时加载更慢了，这是什么情况？ 具体场景是这样的：当前页面有个导航链接指向商...
- 2
回答
14浏览
域名分片后静态资源加载反而变慢了？怎么回事？
最近给项目做了域名分片优化，把静态资源分到三个子域名加载，结果发现图片和JS文件加载时间比之前更久了，这是为什么啊？ 之前都是用主域名加载资源，现在改成、script src="cdn2.exampl...
- 1
回答
15浏览
prerender预加载页面时为什么会触发两次DOMContentLoaded事件？
我在导航页给某个链接加了prerender预加载，结果发现目标页面的DOMContentLoaded事件触发了两次。明明代码看起来没问题，这是什么情况？ 示例代码是这样的： <link rel=...
- 1
回答
53浏览
CDN加速后静态资源加载反而变慢，该怎么排查？
最近给项目配置了某云CDN，按官方文档改了CNAME和缓存策略，但测试发现图片和JS文件加载时间反而比直接访问源站慢了1-2秒。我尝试过清除浏览器缓存、检查CDN状态码（都是200），还对比了DNS解...
- 1
回答
22浏览
为什么用了HTTP/2多路复用后图片加载反而更慢了？
我在优化网站时启用了HTTP/2，按理说多路复用应该更快，但发现首页轮播图的加载时间反而比HTTP/1.1多了200ms左右。检查网络面板发现，虽然所有图片都走同一个连接，但请求顺序好像被打乱了。 尝...
- 2
回答
29浏览
用了Server Push反而加载更慢怎么办？
我给网站配置了HTTP/2 Server Push推送关键CSS和JS，但发现页面加载时间反而比之前多了200ms，这是为什么呢？ 尝试过在nginx里这样配置： http2_push_preload...
- 2
回答
41浏览
为什么我的HTTPS页面加载图片时出现Mixed Content错误？
最近在开发一个电商页面，把网站部署成HTTPS后，发现图片加载失败了。控制台提示：Mixed Content 错误，但图片路径明明写对了啊！ 代码是这样写的：<img src="http://e...
link/rel=modulepreload或者干脆把CSS内嵌到JS里打包。如果非要prefetch，试试加个as=style属性：不过你这情况，换成