当前位置: 首页 > 知识库问答 >
问题:

在body标记之前对脚本使用“defer”属性

南宫松
2023-03-14

我在Google网页测试工具上运行了我的网页,它建议我使用'defer'或'async'属性来摆脱呈现阻塞JS。我的HTML是这样的:

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Page</title>
    <link href="https://mycdn.com/style.css" rel="stylesheet">
</head>

<body>
    <div id="app-container"></div>
    <script type="text/javascript" src="https://mycdn.com/shared.js"></script>
    <script type="text/javascript" src="https://mycdn.com/main.js"></script>
</body>

</html>

因为,我的脚本在“body”标记关闭之前就被包含,而不是在“head”中,它们真的被阻塞了吗?在解析结束的“html”之前,绘制不会发生吗?

共有1个答案

冯宏浚
2023-03-14

使用async或defer或将脚本移动到文件底部并不总是在不同的浏览器中工作,一种建议的加载外部脚本的方法是按以下方式加载它,即将这段代码放在body标记的末尾。

<script type="text/javascript">
  function downloadJSAtOnload(){
    var element = document.createElement("script");
    element.src = "defer.js"; // Replace "defer.js" with your url or filename
    document.body.appendChild(element);
  }
  if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false);
  else if(window.attachEvent) window.attachEvent("onload", downloadJSAtOnload);
  else window.onload = downloadJSAtOnload;
</script>

更多信息请参见此处。

 类似资料:
  • 我正在注入这样一个脚本: 这会生成如下标记: 我更喜欢以下语法: 将选项传递给jQuery DOM元素创建者时是否支持此功能?或者,我应该只使用普通JavaScript来实现这一点吗?

  • 现代的网站中,脚本往往比 HTML 更“重”:它们的大小通常更大,处理时间也更长。 当浏览器加载 HTML 时遇到 <script>...</script> 标签,浏览器就不能继续构建 DOM。它必须立刻执行此脚本。对于外部脚本 <script src="..."></script> 也是一样的:浏览器必须等脚本下载完,并执行结束,之后才能继续处理剩余的页面。 这会导致两个重要的问题: 脚本不能访

  • jQuery使用主要介绍jQuery如何控制页面,包含元素的属性、css样式风格、DOM模型、表单元素和事件处理等。 标记元素的属性 html中每一个标记都具有一些属性,他们这个标记在页面中呈现各种状态,例如下面的<a>标记 <a herf="http://www.baidu.com" title="isaac" target="_blank" id="linkisaac"> 该标记<a>表示标记

  • 我有一个名称空间如下所示的XML响应: 方法:groovy.util.xmlslurper.parse()的签名不适用于参数类型:(groovy.util.node)值:[{http://schemas.xmlsoap.org/soap/envelope/}信封[attributes={};value=[{http://schemas.xmlsoap.org/soap/envelope/}head

  • 我有一个php脚本,它显示文件夹dir中的所有照片,我需要包含一个应用给定数据参数的html标记。php代码是: 我需要把它作为img src放入html标记中: 我试着用$img和use来代替echo“创建新的var,但这只给了我一个图像

  • 问题内容: 根据Docker文档:Dockerfile中只能有一条CMD指令。如果您列出多个CMD,则只有最后一个CMD才会生效。 我希望在CMD命令(本例中为init)之前执行一个简单的bash脚本(处理docker环境变量)。 有什么办法吗? 问题答案: 使用自定义入口点 创建一个可以执行所需操作的自定义入口点,然后最后执行您的CMD。 注意 :如果您的映像已经定义了一个自定义入口点,则可能需