在JavaScript文档中嵌入JavaScript时,放置<script>标记和包含JavaScript 的适当位置在哪里?我似乎记得你不应该把它们放在这个<head>部分中,但放在该部分的开头<body>也是不好的,因为在完全呈现页面之前必须解析JavaScript(或类似的东西).这似乎将该部分的末尾<body>作为<script>标记的逻辑位置.
所以,在这里是把正确的地方<script>标记?
(这个问题引用了这个问题,其中建议JavaScript函数调用应该从<a>标签移动到<script>标签.我专门使用jQuery,但更一般的答案也是合适的.)
假设我有一个相当庞大的JavaScript文件,打包到大约100kb左右.通过文件我的意思是它是一个外部文件,将在via中链接<script src="...">,而不是粘贴到HTML本身.
哪个是放在HTML中的最佳位置?
<html>
<head>
<!-- here? -->
<link rel="stylesheet" href="stylez.css" type="text/css" />
<!-- here? -->
</head>
<body>
<!-- here? -->
<p>All the page content ...</p>
<!-- or here? -->
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
每个选项之间是否存在功能差异?
我遇到了问题.
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
alert(document.getElementsByTagName("li").length);
</script>
<title>purchase list</title>
</head>
<body>
<h1>What to buy</h1>
<ul id="purchases">
<li> beans</li>
<li>Cheese</li>
</ul>
</body>
Run Code Online (Sandbox Code Playgroud)
当我把脚本放在头部时,结果显示为0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Shopping list</title>
</head>
<body>
<h1>What to buy</h1>
<ul id="purchases">
<li>Cheese</li>
<li>Milk</li>
<script type="text/javascript">
alert(document.getElementsByTagName("li").length);
</script>
</ul>
</body>
Run Code Online (Sandbox Code Playgroud)
当我试图将脚本放入正文时,结果显示2.为什么存在这样的差异?主要区别是什么?
HEAD标签和BODY标签有什么区别?
大多数HTML书籍只是"简要"提及<head>和<body>标签......但它们只是快速消失.
它们会影响浏览器呈现网页的方式吗?
此外,它们是否会影响javascripts的运行顺序?
(我的意思是,如果我在<head>标签内部有一个javascript ,它会在<body>标签内的另一个javascript中运行吗?即使<body>是在BEFORE之前来的<head>?)
这太令人困惑 - 我从来没有使用过头部/身体标签,但我从来没有遇到任何麻烦.但在阅读Jquery教程时,我看到人们建议将一些代码放在里面<head>,其他<body>代码放在标签内.
谢谢!!!
我一直在想,主要是因为在创建页面时我总是遇到麻烦,基于以下内容:
你什么时候写你的javascript
<head><body>$(document).ready()我可能是愚蠢的,但是由于错误的地方或是或否doc.ready()命令,我有几次没有执行我的JavaScript(/ jQuery).所以我真的很想知道.
jQuery和'var'命令也是如此
我无法正确地将moment.js的CDN添加到HTML页面中。我宁愿只在我的html中添加一个链接,而不要安装。有人知道该怎么做吗?我已经尝试了一些CDN,但没有任何效果。是否有理由将链接放在头部而不是与其他JS链接关闭body标签之前?我已经看到它完成了两种方式。
如果我有一个网站项目:
考虑最佳的加载速度和可能的替代。链接它们的最佳顺序是什么<head>
我知道以后添加的内容将优先使用相同的优先级,应用先前的样式表并从上至下呈现浏览器渲染,<head>然后<body>
我还从Google那里了解到,现代浏览器中存在一种称为“预取”的东西。
就个人而言,我会做reset.css,超棒字体,google字体,bootstrap lib,master.css,Jquery lib,main.js。通用规则优先,库优先。但是我也不知道该如何处理字体,因为它们也是样式表。
考虑我正在运行的简化版本:
<html>
<head>
<script src="data.js"></script>
<script src="content.js"></script>
</head>
<body>
<div id="contentGoesHere"></div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
显然还有更多内容,但这是基本要点。在 content.js 中,我有几个函数可以根据 data.js 中包含的 json 数据将标记加载到我的 div 中。除了这些功能之外,还有以下几行:
$(document).ready(function()
{
loadContent();
});
Run Code Online (Sandbox Code Playgroud)
出于所有意图和目的,加载内容加载得很好,但在该代码中调用执行 jquery .show() 在几个 div 中的第一个 div,这些 div 在它们都附加到容器元素后加载。该代码没有执行,几乎就好像 div 还不存在一样。所以我尝试延迟加载:
<html>
<head>
<script src="data.js"></script>
</head>
<body>
<div id="contentGoesHere"></div>
</body>
<script src="content.js"></script>
</html>
Run Code Online (Sandbox Code Playgroud)
果然,两者都会导致显示第一个面板。如果 .ready() 应该等到 DOM 加载完毕,为什么延迟加载包含 $(document).ready() 函数的文件会有所不同?
javascript ×6
html ×5
jquery ×4
css ×1
head ×1
html5 ×1
location ×1
momentjs ×1
optimization ×1