JavaScript应该放在哪里？
[英]Where should JavaScript be put?
问题描述
I've been doing a little JavaScript (well, more like jQuery) for a while now and one thing I've always been confused about is where I should put my scripts, in the <head> tag or in the <body> tag. 
我已经做了一段时间的JavaScript（嗯，更像jQuery），我一直感到困惑的一件事是我应该将脚本放在<head>标记还是<body>标记中。 。
If anyone could clarify this issue, that'd be great. 如果有人可以澄清这个问题，那就太好了。 An example of what should go where would be perfect. 一个完美的例子。
2 个解决方案
解决方案1
11 已采纳 2010-04-18 01:39:17
Best practices from google and yahoo say that, for performance, javascript should always be put in an external file, and linked to your page with a <script> tag located at the bottom of the html, just before the closing of the <body> element. 谷歌和雅虎的最佳实践表明，为了提高性能，应始终将javascript放在外部文件中，并在<body>关闭之前，使用位于html底部的<script>标签将其链接到您的页面。元件。
This allows the browser to render the entire page right away, instead of stopping to evaluate javascript. 这使浏览器可以立即呈现整个页面，而不必停止评估javascript。
解决方案2
9 2010-04-18 01:48:08
You mentioned three places: 您提到了三个地方：
In tags;
在标签中； In the HTML;
在HTML中； and 和 In an external file.
在外部文件中。
Let me address each of those. 让我来解决每个问题。
Best practice is to have common Javascript in one or more external files and the less files the better since each JS file loaded will block loading of the page until that JS file is loaded. 最佳做法是在一个或多个外部文件中使用通用 Javascript，并且文件越少越好，因为加载的每个JS文件都会阻止页面加载，直到加载该JS文件为止。
The word "common" is extremely important. “普通”一词非常重要。 What that means is you don't want to put page-specific Javascript code in that external file for caching reasons. 这意味着您不想出于缓存原因将特定于页面的Javascript代码放入该外部文件中。 Let's say you have a site with 1000 pages. 假设您有一个包含1000页的网站。 Each page has JS code specific to it. 每个页面都有特定的JS代码。 That could either be 1000 different files or one really big file that executes a lot of unnecessary code (eg looking for IDs that aren't on that particular page but are on one of the 999 others). 这可能是1000个不同的文件，也可能是一个执行很多不必要代码的非常大的文件（例如，查找不在该特定页面上但在999个其他页面中的一个上的ID）。 Neither of these outcomes is good. 这些结果都不好。
The first gives you little caching boost. 第一个对您的缓存没有帮助。 The second can have horrific page load times. 第二个可能会导致可怕的页面加载时间。
So what you do is put all common functions in one JS file where that JS file only contains functions. 因此，您要做的就是将所有常用功能放在一个JS文件中，其中该JS文件仅包含函数。 In each HTML page you call the JS functions needed for that page. 在每个HTML页面中，调用该页面所需的JS函数。
Ideally your JS files are cached effectively too. 理想情况下，您的JS文件也可以有效地缓存。 Best practice is to use a far futures HTTP Expires header and a version number so the JS file is only loaded once by each browser no matter how many pages they visit. 最佳实践是使用远期期货HTTP Expires标头和版本号，因此无论浏览器访问多少页面，JS文件仅由每个浏览器加载一次。 When you change the file you change the version number and it forces a reload. 更改文件时，将更改版本号，并强制重新加载。 Using mtime (last modified time of the JS file) is a common scheme, giving URLs like: 使用mtime（JS文件的最后修改时间）是一种常见的方案，它提供如下URL：
<script type="text/javascript" src="/js/script.js?1233454455"></script>
where that mtime is automatically generated. 该mtime是自动生成的。 Your Web server is configured to serve JS files with an appropriate Expires header. 您的Web服务器配置为使用适当的Expires标头提供JS文件。
So that mixes external files and in-page scripts in (imho) the best way possible. 这样可以以最佳方式将外部文件和页内脚本混合在一起（imho）。
The last place you mentioned was in the tag. 您提到的最后一个地方是标签中。 Here it depends somewhat on what JS libraries and frameworks you use. 在这里，这取决于您使用什么JS库和框架。 I'm a huge fan of jQuery, which encourages unobtrusive Javascript . 我是jQuery的忠实拥护者，它鼓励使用简洁的Javascript 。 That means you (hopefully) don't put any Javascript in your markup at all . 这意味着（希望）您根本不会在标记中放入任何Javascript。 So instead of: 所以代替：
<a href="#" onclick="doStuff(); return false;">do stuff</a>
you do: 你做：
<a href="#" id="dostuff">do stuff</a>
with Javascript: 使用Javascript：
$(function() {
$("#dostuff").click(doStuff);
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.