我在Chrome Lighthouse〉最佳实践部分中有一个警告:主线程上的同步XMLHttpRequest
已被弃用,因为它对最终用户的体验有不利影响。
这指向jquery.js的第10079行(当前使用未压缩,计划在修复此问题后移动到.min)
10079的代码是:
xhr.open(
options.type,
options.url,
options.async,
options.username,
options.password
);
这个问题似乎只发生在当代码拉在页眉和页脚包括在网站页面(目前建设在HTML与JS代码下面用于加载页眉和页脚的所有网页)
(Code在“header-footer.js”内)
$(function(){
$("#header").load("/header.html");
});
$(function(){
$("#footer").load("/footer.html");
});
这个文件(header-footer.js)然后被加载到页面中,如下所示:
<script src="/assets/js/header-footer.js"></script>
每个页面包含一个div:
<div id="header"></div>
<div id="footer"></div>
页眉和页脚正确加载,但是当在Lighthouse中使用Google Chrome(最新版本)进行测试时,主线程上的Synchronous XMLHttpRequest
警告已被弃用...指向jquery文件时显示。看起来是async的问题。
搜索多个修复程序后,建议通过服务器加载此修复程序,并使用:
$(function(){
$("#header").load("/header.html");
});
成为:
$(function(){
$("#header").load("https://domain/header.html");
});
更改为该选项后,问题仍然存在。
我还在js函数中添加了true/false,正如另一个帖子示例中的另一个答案所建议的那样:
$(function(){
$("#header").load("/header.html", true);
});
我希望删除代码上的警告,同时允许从一个单独的HTML文件加载页眉和页脚。
添加页眉和页脚的HTML代码到每个页面是不是一个选项,这将工作的网站,由于大小和复杂性。
1条答案
按热度按时间k3bvogb11#
使用您的方法,加载页面需要(至少)四个请求:
/page.html
/assets/js/header-footer.js
/header.html
/footer.html
如果最后两个请求(header和footer)是同步请求(这似乎是jQuery
.load
函数的行为),则用户在完成之前无法开始与页面交互。这就是谷歌所说的“有害影响”。但即使它们是异步的:在加载页眉和页脚之前,用户不会看到最终形状的页面。更糟糕的是,在页眉和页脚被插入并取代用户所瞄准的复选框之前,他们可能已经开始与页面进行交互(例如,瞄准复选框以单击它)。然后用户可能单击错误的复选框。我认为,在页面的某些部分变得可交互或仅可见之后,移动它们比延迟页面加载对用户体验更有害。
我认为你误解了“通过服务器加载”的建议。建议是指有一个Web服务器实现(例如,使用express和template engine),它能够在服务器上组装整个页面,并只响应 * 一个 * 请求(
/page.html
)。但是你没有在问题中提到任何服务器。如果使用jQuery
.html
函数而不是.load
,并像这样将HTML内容直接写入Javascript源代码,则可以避免Google警告并完全省略最后两个请求:但是在服务器上组装页面是更好的解决方案。模板引擎通常有一个include语句,用于包含页眉和页脚等内容,请参阅this example。