在 HTML 文档中插入 JavaScript 的最佳位置
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/9069966/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Best place to insert JavaScript within a HTML document
提问by obkso
Possible Duplicate:
Where is the best place to put <script> tags in HTML markup?
Where should I put javascript code?
我应该把javascript代码放在哪里?
<-- Here?
</body>
<-- Here?
</html>
<-- Here?
I've always used above </body>
just wanted to know if this was "the best"
我一直在上面使用</body>
只是想知道这是否是“最好的”
回答by NightHawk
If the JavaScript needs to be ready to go before the entire page loads, you put it between <head></head>
. If the JavaScript needs to be available right before the user encounters something on the page, you can put it prior to the element in the <body></body>
(although people hardly do that for code readability). If the JavaScript just does some enhancements or provides tracking information (it's not a necessity), you can put it right before </body>
.
如果 JavaScript 需要在整个页面加载之前准备就绪,您可以将它放在<head></head>
. 如果 JavaScript 需要在用户遇到页面上的内容之前立即可用,您可以将它放在 中的元素之前<body></body>
(尽管人们很少这样做以提高代码可读性)。如果 JavaScript 只是做了一些增强或提供跟踪信息(它不是必需的),你可以把它放在</body>
.
回答by Hamish
Concensus seems to be that there are two sensible places to put scripts:
共识似乎是有两个明智的地方可以放置脚本:
In the
<head>
section:- Pro: Scripts are loaded before content, so dynamic behaviors can be applied before the user can interact with the page.
- Con: users have to wait while scripts are downloaded and applied, which can lead to higher bounce rates and generally poorer performance.
Just beforethe
</body>
tag:- Pro: content is loaded and visible to the user as soon as possible.
- Con: dynamic behaviours, effects, etc, are not immediately applied.
在该
<head>
部分:- 优点:脚本在内容之前加载,因此可以在用户与页面交互之前应用动态行为。
- 缺点:用户在下载和应用脚本时必须等待,这会导致更高的跳出率和更差的性能。
就在之前的
</body>
标签:- 优点:尽快加载内容并对用户可见。
- 缺点:动态行为、效果等不会立即应用。
You need to decide what your priorities are and what your specific needs are. Personally, I'll put anything absolutely critical to the proper functioning of the page in <head>
and anything that is progressive enhancement at the end.
您需要决定您的优先事项是什么以及您的具体需求是什么。就我个人而言,我会将所有对页面正常运行绝对重要的内容<head>
以及任何渐进增强的内容放在最后。
回答by blo0p3r
Really depends on what you are trying to do.
真的取决于你想要做什么。
General rule of thumb would have you put your javaScript code in a seperate file and link that script with something like this
一般的经验法则会让你把你的 javaScript 代码放在一个单独的文件中,然后用这样的东西链接那个脚本
<script type="text/javascript" src="your/source/here.js"></script>
Then again, having your script inline within the page, you can have it where you want. Within the head
section of the page, it loads beforehand, and therefore can pre-process if needed. If you have it let's say during the body
portion of the page, it will load with the normal flow of the page.
再说一次,将您的脚本内嵌在页面中,您可以将它放在您想要的位置。在head
页面的部分中,它预先加载,因此可以根据需要进行预处理。如果你有它,让我们说在body
页面的一部分,它会随着页面的正常流加载。
Having everything on the same file, I would have the script in the head
and, if needed, call functions afterwards in the body
.
接在同一文件的一切,我会在脚本中head
,如果需要,调用函数之后的body
。
Hope this helps.
希望这可以帮助。
edit
编辑
Keep in mind that the main goal should be readability and re-usability of your code. Therefore, whatever makes this happen in the most efficient way, I would have to say is the best way.
请记住,主要目标应该是代码的可读性和可重用性。因此,无论以最有效的方式实现这一点,我不得不说这是最好的方式。
回答by JMM
Putting <script>
after </body>
or </html>
would be invalid, and I'm not sure what it would accomplish. Some scripts, for analytics services for example, are recommended to be loaded at the end of body (just before </body>
) because they load synchronously and may hang the page.
放在<script>
后面</body>
或</html>
将是无效的,我不确定它会完成什么。一些脚本,例如分析服务,建议在 body 的末尾(就在 之前</body>
)加载,因为它们是同步加载的,可能会挂起页面。
回答by Shankar Damodaran
JavaScript can be added anywhere. Just a basic example below as you are learning things.
JavaScript 可以添加到任何地方。当您正在学习时,下面只是一个基本示例。
<html>
<head>
----- Your Javascript here -----
</head>
<body>
</body>
</html>
回答by irrg
Don't think it's nearly as much about where in the code, it's how you handle checking if you can run code when it triggers. i.e. onload or onready.
不要认为它几乎与代码中的位置有关,而是您如何处理检查是否可以在触发时运行代码。即加载或准备就绪。
HTML5 boilerplate promotes having most if not all scripts as the last elements in the body, but I have yet to ever find time to benchmark this vs having it in the head.
HTML5 样板文件提倡将大多数(如果不是全部)脚本作为正文中的最后一个元素,但我还没有找到时间对此进行基准测试,而不是将其放在头脑中。
回答by bpeterson76
Inside </html>
Inside <body>
里面</html>
里面<body>
That said, from there it's sometimes just preference. Many say at the end of the doc because there's a supposed speed increase. If it's there, it's minuscule.
也就是说,从那里开始有时只是偏好。许多人在文档末尾说,因为假设速度增加了。如果它在那里,它是微不足道的。
回答by Ramesh Kotha
Its better if you put javascript code inside <head> // javascript code here </head>
because head section loads before your page appears.
如果您将 javascript 代码放入其中会更好,<head> // javascript code here </head>
因为 head 部分会在您的页面出现之前加载。