在html中加载javascript的理想位置在哪里? [英] Where is the ideal place to load javascripts in html?
问题描述
我了解散布在html代码中的内联javascript就像下面的示例一样糟糕
I understand inline javascripts scattered through html code like the following example is bad
<html>
<head>
</head>
<body>
<p> Foo <script></script></p>
</body>
</html>
但是，经过一段时间的编码后，了解到在文档末尾加载Javascript是最好的方法.我确实在其文档末尾看到了许多符合加载脚本的网站，请按照以下方式进行操作:
However, after coding for a while, understanding that loading Javascripts at the end of the document is the best way to go. I do see a lot of the sites that conform to loading scripts at the end of their document, do so in the following manner :
<html>
<head>
</head>
<body>
<p> Foo </p>
<script></script>
</body>
</html>
没有弄清楚的是为什么:
What is not made clear, is why not :
<html>
<head>
</head>
<body>
<p> Foo </p>
</body>
<script></script>
</html>
..因为它在body标签之外，这意味着body(理论上)可以更快地处理，并且仍然可以在最终在</html>上加载脚本之前.
.. as this is outside the body tag which means that the body (in theory) can process faster and still load your scripts before finalizing on </html>.
甚至是这样:
<html>
<head>
</head>
<body>
<p> Foo </p>
</body>
</html>
<script></script>
每个变体在理论上都会有不同的性能结果，并且/或者可能会破坏页面中的功能，具体取决于脚本的内容.
Each variation will have (in theory) different performance results, and/or may break functionality in the page depending on the script contents of course.
在以上格式中，哪一种是加载具有最高性能而又不会破坏html的javascript的理想位置?
Of the above formats, which one is the ideal place to load javascripts that would have the highest performance gain without breaking html ?
推荐答案
body标记末尾的最佳位置，例如
The best place at the end of the body tag, like
<html>
<head>
</head>
<body>
some html body tags
.
.
.
<script> external or inline </script>
</body>
</html>
如果您这样做，那么html将更快地加载，并且主要优点是，所有id和class都将被分配，否则，如果您将脚本放在html之上，则可能会尝试获取一个元素通过尚未在DOM中分配的ID
If you do like so, then the html will load quicker and main pros is that all your ids and classes will get assigned otherwise sometime if you put script above html, then there might be a chance that you try to get an element by id that is not yet assigned in DOM
[UPDATE]
以下是Bootstrap在其自己的网站中使用的示例代码: http://getbootstrap.com/getting -started/
Here is an example code that Bootstrap is using in their own website: http://getbootstrap.com/getting-started/
您可以在基本模板标题下找到此代码:
you can find this code under Basic template Heading:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
这篇关于在html中加载javascript的理想位置在哪里?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
