Question

我是网络开发的新手，我正在使用express来尝试node.js.

我有以下目录结构：

第一个应用
----的 node_modules
---- 公开
--------的脚本
------------ additems.js
----的视图
-------- home.ejs
---- app.js

粗体是文件夹，斜体是文件。

这是additem.js文件：

console.log("js connected");
alert("test");

这是home.ejs文件：

<!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>Test Node</title>
</head> 
<body>       
   <h1>Dynamic Page</h1>
   <p></p>   
   <ol id='olist'>Names List</ol>

   <script type="text/javascript" src="../public/scripts/additems.js"></script>

</body>
</html>

这是app.js文件：

var express = require('express');
var app = express();

console.log("Server has been started!");

//app.use(express.static(__dirname + "/public"));

app.get("/", function(req,res){
    //res.send("Home Page");
     res.render("home.ejs");

 })

在加载页面之前运行javascript的问题

我知道这一点，因为警告信息出现在其他任何事情之前。此外，我尝试使用一些DOM元素，但它们已作为未定义返回。

在网上搜索我可以看到我的脚本位置在标记之前是正确的，并且据说应该最后运行。

我在这里缺少什么？

我知道使用onload事件的可能性，但我想避免它，除非它是必须的，除了我想知道为什么脚本最终没有像它应该那样运行。< /强>

更新 - 已解决

感谢Scott Marcus的贡献，这有助于我解决问题。

事实上，有一个双重错误。

1-我使用了alert（），这不能像你提到的那样提示 2-我没有在alert（）之后提及代码，因为我从一个受信任的网站上复制了它，我希望问题尽可能短。但是，代码有一个错误，导致它无法以正确的方式运行。

谢谢大家。

Answer 1

在加载页面之前运行javascript的问题

我知道这是因为警告信息出现在任何事情之前   其他

你不能因为得出这个结论而受到指责，但事实并非如此。

alert()由操作系统从生成它们的JavaScript中异步处理，并且通常可以比JavaScript执行的速度更快地呈现。此外，alert()是一个“阻止”API调用，它冻结了UI，因此渲染不会与处理同步。

而不是console.log()使用alert()。您会发现这样做表明您的代码正在运行。

以下是console.clear(); console.log("test before alert()"); alert("Look at the console. Notice how you don't see the log message that came before me?\nEven though the JavaScript received the instruction to write to the console, the OS can render an alert() faster than that.");如何误导您对序列流的解释的示例。

console.clear();
console.log("test before console.log()");
console.log("Look at the console. Notice how you now do see the log message that came before me?");

这又是一个相同的概念，但这次没有将任何工作卸载到操作系统：

{{1}}

Answer 2

将脚本放在正文的末尾是一种过时的模式。您应该更喜欢使用defer属性加载window.addEventListener('load', () => {console.log('tada!')});中的脚本（阅读更多source code）。如果你不能这样做，你可以在脚本中使用加载监听器来延迟执行，直到所有加载完成。

a{padding-top: 90px;}
a:link{padding-top: unset;}

Answer 3

浏览器需要一段时间来解析HTML并构建DOM，并且您的脚本会在遇到它时立即开始运行，因此基本上您正在设置竞赛并希望js解释器丢失。不是运行异步代码的可靠方法。

脚本在/ body之前，但它在页面加载之前运行

3 个答案: