Javascript 渲染块延迟与底部移动脚本
我假设在底部移动脚本与使用defer或async属性相同。由于defer和async不完全兼容传统浏览器，因此我选择在页面底部加载脚本Javascript 渲染块延迟与底部移动脚本,javascript,html,performance,asynchronous,render,Javascript,Html,Performance,Asynchronous,Render,我假设在底部移动脚本与使用defer或async属性相同。由于defer和async不完全兼容传统浏览器，因此我选择在页面底部加载脚本 在此之前，我运行了性能基准测试工具，如GTmetrix和Google PageSpeed insight。两者都显示“渲染阻塞”参数是主要问题。我现在有点困惑，因为即使我移动了底部的这些脚本以允许首先加载内容/html；这些工具仍然报告渲染阻塞是一个主要问题 我看了其他StackOverflow文章，强调尽管在底部加载的脚本必须具有“延迟”属性。 我有几个问
请建议最好的方法。提前谢谢。而不是
async
函数addScript（url）{
document.open（）；
document.write（“”；//奇怪的引号以避免混淆HTML解析器
document.close（）；
}
//最后添加app.js以确保加载所有库
addScript（“jquery.js”）；
addScript（“lodash.js”）；
addScript（“app.js”）；
这是你想要的吗？您可以在
文档中添加async
或defer
属性。如果需要，可以编写调用。根据HTML规范1.1，HTML页面中的脚本块将阻止页面呈现，直到下载并处理url中的javascript文件
在页面末尾添加脚本：允许浏览器继续页面呈现，因此用户将能够尽快看到页面呈现
[首选]向脚本标记添加延迟：向浏览器承诺脚本中不包含任何document.write或document-changing代码，因此允许它继续呈现
因为前面的线程可能对您有用
是的，如果在您的站点设计和需求中可能的话，即使在底部加载的脚本也必须具有defere属性
不，这些工具寻找解析的完成
根据您想要支持的IE版本，他们会有不同的建议
现在解释一下简单的脚本
、延迟
和异步
，以帮助您理解原因：
脚本
简单的
标记将在该点停止解析，直到脚本下载并执行
异步
如果您将使用async
，那么脚本将不会停止下载解析，因为它将继续与其余html内容并行下载。但是，脚本将停止执行的解析，然后html解析才会继续或完成
推迟
如果使用延迟
，脚本将不会停止html数据的解析以下载或执行脚本。因此，这是避免网页加载时间增加的最佳方法
请注意，defer有助于减少html的解析时间，但在每个Web设计流程中并不总是最好或合适的，所以使用它时要小心。为什么最后提到的脚本必须具有defer属性
答案是，通过添加“延迟到最后一个脚本”，实际上减少了在绘制页面之前需要加载的关键资源的数量，从而减少了关键呈现路径
是的，当您到达解析最后一个DOM时，您是正确的，但浏览器尚未开始绘制DOM，因此在完成绘制和渲染活动之前，domContentLoadedEvent将被阻止
通过添加async/defer，我们告诉浏览器，资源对于渲染并不重要，可以在加载dom内容后加载并执行。
这将更早地触发domContentLoaded事件，触发domContentLoaded事件越早，其他应用程序逻辑就可以越早开始执行
请参考下面的谷歌链接，它清楚地展示了这个概念。
不确定问题是什么？你想达到什么目的？如果我不能更好地描述它，请道歉。我正在尝试优化一个HTML页面，其中包含许多Java脚本，主要是外部和应用程序库。**由于许多性能工具表明Javascript导致了渲染阻塞，因此需要在HTML内容之后加载延迟加载。在我的例子中，将javascripts移到底部仍然显示渲染阻塞是一个主要问题。我的问题是我的理解有误，或者我需要做什么来解决渲染阻塞问题。您是否尝试过在窗口的加载事件中加载脚本？两者都有。最初它在头部，但根据建议，我把它移到了底部（就在身体标签的末端之前）。在窗口
的load
事件中加载脚本仍然显示相同的结果，这意味着在html
中不包括
标记；而是在窗口
加载
事件处理程序中动态加载脚本，方法是在html
呈现后动态创建
元素并将其添加到文档
。为什么最后提到的脚本必须具有defer属性？整个html已经被解析，不管有没有延迟，脚本的执行都将按照提到的顺序进行。解析时解析“结束”mate:）我不确定，但大多数页面底部都有脚本，没有延迟解析
和
，因此加载
<html>
<body>
<!-- whole block of html -->
<script type='text/javascript' src='app.js'></script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<!-- whole block of html -->
<!-- inline scripts can't have async -->
<script type='text/javascript'>
function addScript(url){
document.open();
document.write("<scrip" + "t src = \"" + url + "\"></scr" + "ipt>");//weird quotes to avoid confusing the HTML parser
document.close();
}
//add your app.js last to ensure all libraries are loaded
addScript("jquery.js");
addScript("lodash.js");
addScript("app.js");
</script>
</body>
</html>