Javascript Chrome:JS在HTML之前加载_Javascript_Html_Google Chrome

Javascript Chrome:JS在HTML之前加载

javascript html google-chrome

Javascript Chrome:JS在HTML之前加载,javascript,html,google-chrome,Javascript,Html,Google Chrome,我正在学习Javascript，我很困惑为什么我在使用Chrome时在html之前加载Javascript会有问题。当我使用Firefox和Edge时，页面首先加载html，然后我会收到警报。不过，当我使用Chrome浏览器时，我会首先收到警报，背景是空白的。到目前为止，我所学到的一切似乎都表明js脚本应该在html之后运行，因为它位于body标记的底部谢谢 home.html页面 <!DOCTYPE html> <html lang="en"> <head>

我正在学习Javascript，我很困惑为什么我在使用Chrome时在html之前加载Javascript会有问题。当我使用Firefox和Edge时，页面首先加载html，然后我会收到警报。不过，当我使用Chrome浏览器时，我会首先收到警报，背景是空白的。到目前为止，我所学到的一切似乎都表明js脚本应该在html之后运行，因为它位于body标记的底部

谢谢

home.html页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>
</head>
<body>
<h1>Hi, testing chrome.</h1>
<h2>Is this working?</h2>
<ul>
<li>list1</li>
<li>list 2</li>
<li>list 3</li>
</ul>
<script type="text/javascript" src="myjs.js"></script>
</body>
</html>

在JS文件中，您应该始终将每个直接代码和DOM相关函数放在一个函数中，等待页面加载

在纯JavaScript中：

window.onload = function() {
    //Your JS here
};

注意，根据，您可以使用

document.onload（function（）{…}）
使用JQuery：
$(function() {
    //Your JS here
});

因为JavaScript是单线程的，所以当您调用alert（）函数时，它会阻止其他执行，因为它是一个UI阻止函数。
如果您想在js之前先加载html，请确保用
document.addEventListener("DOMContentLoaded", function(event) { 
  // your code here
});

将代码放在普通JavaScript的Jquery document ready方法中，在myjs.js中尝试此方法
$(window).on("load", function(){
    var ss = document.createElement("script");
    ss.src = "myjs.js";
    ss.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(ss);
});

否则
如果jQuery已加载，请尝试此操作
$(function() {
    alert("Am I wrong?");
});

您需要添加
<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js">

函数DOMContentLoaded允许浏览器在加载HTML内容后执行javascript代码
  document.addEventListener("DOMContentLoaded", function(event) { 
    /*it is verry easy now, you can write code here which will be executed when the 
     html content will end loading*/
  });

web使用事件驱动模型对操作进行排序。如果脚本出现在文档的末尾，那么它将比出现在文档开头的时候被解析，这一假设是正确的。但是HTML规范没有明确规定在执行脚本之前必须呈现HTML。因此，解析和呈现是不同的操作，chrome可能会选择在解析完成后立即执行脚本
那么，你如何正确地安排你的行动顺序呢？一般来说，web和javascript都是事件驱动的。您的代码可以监听各种事件，并根据您的意愿对其作出响应。在这种情况下，您希望在加载文档后执行脚本。看看这件事
下面是修改后的代码，可以在触发DOMContentLoaded
事件时运行
document.addEventListener("DOMContentLoaded", function() {
  alert("Am I working right?");
});

我只是将您的警报函数调用包含在我的事件处理函数中。
事件处理函数（或回调）必须注册在发出事件的元素上，在我们的例子中是文档
对象。这是通过使用两个参数调用该对象来实现的。第一个是我们希望作为字符串侦听的事件名称，第二个是在触发事件时必须执行的函数
有许多事件是为许多不同的元素定义的，您甚至可以定义自己的自定义事件并对其作出响应。
尝试在document ready Method中添加代码。注意html加载可能重复，您只是阻止了渲染线程而已。从外观上看，Firefox和Edge决定在显示警报框之前对目前加载的DOM进行一次渲染循环，而Chrome则没有。这正是每个供应商决定实现其特定代码的方式。您仍然能够获得对加载的DOM元素的引用，比如
为什么？您可以看到jQuery没有加载到页面。您能解释一下这将如何解决OP的问题吗？IIFE不会改变这里的任何重要内容。这不会确保首先加载页面，您使用的是IIFE，顾名思义，它会立即执行，您不会更改执行时间。您可能混淆了IIFE的外观和jQuery的$（function（）{}）
，这是jQuery对$（document.ready（function（）{}）
@Teemu的缩写-我已经编辑了代码片段。第二个代码段：加载文档后，匿名函数将执行，然后创建一个脚本元素并将其作为子元素附加到head元素。如果你需要更多，一定要告诉我explanation@PatrickEvans-我编辑了代码，错过了自调用函数中的jQuery参数。是的，关键是要确保文档已加载。顺便说一下，有不同的方法。您仍然只是在使用IIFE，您的代码所做的只是将jQuery作为参数传入，也从来没有实际使用过它。如果希望使用jQuery的dom就绪事件，则它需要是jQuery（function（）{}）
或$（function（）{}）
。从中获得（function（）{}）（jQuery）
的页面上的代码用于可能加载了多个jQuery实例时，它与实际的dom可读性无关请注意，因为它们的代码位于页面底部，上面的所有dom元素都已加载。在这种情况下，如果您的全部目标是等待元素存在，则无需将其放入加载事件中。但是当使用外部JS文件时，检查页面是否已加载总是好的。一般来说，应该始终检查输入；我有一个错误，说window.onload不是一个函数window.onload=function（）{…}而不是窗口.onload（函数（）{…}）修复。非常感谢！我仍然不确定它为什么会起作用，但我会查一查。这是我应该经常做的“良好实践”吗？嗨，我试过了，但还是一样。addEventListener（“DOMContentLoaded”，函数（事件）{alert（“我工作正常吗？”）；}）；谢谢你的回复，我尝试了这个，对于Chrome，它仍然会先加载警报，然后在我刚刚尝试之后加载html，并且它工作正常。Chrome可能在本地缓存了该文件。尝试Ctrl+Shift+r在不命中本地缓存的情况下重新加载页面。
  document.addEventListener("DOMContentLoaded", function(event) { 
    /*it is verry easy now, you can write code here which will be executed when the 
     html content will end loading*/
  });

document.addEventListener("DOMContentLoaded", function() {
  alert("Am I working right?");
});