Javascript 网站添加HTML文件在网站加载时，推迟非必要的CSS文件添加。什么'；发生什么事了？

首先是普通的HTML，带有base64编码的webp图像，并在connection>ssl>HTML中使用内部CSS，就像它应该的那样

这就是我的页面加载情况

我有一个使用事件侦听器延迟的外部JS文件

这是我的HTML，我在文件中还有一个base64@font-face，由于长度原因，我省略了它

。标题{
字体系列：“biryaniregular”；
字体大小：16px；
字体风格：普通；
}
.链接{
文字装饰：无；
颜色：#32378C；
字体系列：“蒙特塞拉特常规”；
}
.分隔器{
边框：1px实心#44c1f2；
}
.标题{
显示器：flex；
柔性包装：包装；
弯曲方向：行；
}    
.header__标志{
高度：54px；
宽度：300px；
}
.link:悬停{
文字装饰：无；
颜色：#2573D9；
}
.标题链接{
左边距：自动；
保证金权利：10%；
}
.左{
利润率：2.5%；
}
.操作按钮：悬停{
光标：指针；
}
.产品盒{
利润底部：10%；
左缘：2.5%；
保证金权利：2.5%；
}
.产品{
最小高度：300px；
最小宽度：300px；
宽度：98%；
高度：自动；
}
@仅介质屏幕和（最小宽度：1025px）{
.集装箱{
显示：网格；
网格模板柱：20%80%；
}
.对{
显示：网格；
网格模板列：50%50%；
}
}
- 

测试人员

11.11
11.11
11.11
11.11

函数downloadJSAtOnload（）{
var元素=document.createElement（“脚本”）；
element.src=“javascript/index.js”；
document.body.appendChild（元素）；
}
if（window.addEventListener）
addEventListener（“加载”，downloadJSAtOnload，false）；
else if（窗口附件）
window.attachEvent（“onload”，downloadJSAtOnload）；
else window.onload=下载jsatonload；

• 首先，我认为使用XMLHttpRequest（）是多余的。你 应该利用fetchapi和Promises
• 还有，为什么不在javascript上使用内联延迟呢

---

最后是他们的原因，你想按这个顺序使用它，因为浏览器资源加载不像你想象的那样可靠

我会研究前两个，谢谢。我不使用内联延迟的原因是，在运行js之前，它不允许页面完全加载。这个解决方案确实如此。是的，它基于用户行为。在产品页面上（我使用相同的脚本），有一个特定的顺序，人们将与网站进行交互。当他们查看产品时，他们要做的第一件事就是查看图像。因此，需要首先加载图像的JS。然后他们将向下滚动到折叠内容下方，查看附加产品信息（cont），然后需要加载折叠HTML下方的内容。然后加载外部CSS，以便浏览器可以缓存站点其余部分，然后加载flavicon，因为这是最不重要的。我知道我可以通过承诺做到这一点，但这并不能解释为什么外部CSS文件在事件侦听器加载外部JS文件之前就对html进行了窃听。就像我说的，浏览器加载资源的方式是不可靠的。您应该使用交叉点观察者使用延迟加载图像。这就是你要找的。你不应该依赖代码中资源加载的优先级。我很感激你的回答，但那不是我的问题我问的是上图中的红圈，嗯……逻辑思维101……当你不能得到你想要的结果时，尝试另一种方法……你可能会错误地尝试延迟加载。我的2美分，浏览器资源优先加载不可靠