将javascript放入文件和脚本标签有啥区别？
Posted
技术标签:
【中文标题】将javascript放入文件和脚本标签有啥区别？【英文标题】：What is the difference in putting a javascript in a file and in a script tag?将javascript放入文件和脚本标签有什么区别？ 【发布时间】：2011-10-10 07:22:51 【问题描述】：html 文件中以下两个代码有什么区别？如果我在包含abc.js 之后再添加一个javascript 文件xyz.js，那么在使用这些脚本时是否有关联的优先级？
第一个代码：
<script src="js/abc.js" type="text/javascript" language="javascript"> </script>
第二个代码：
<script language="javascript">
/*same code of abc.js*/
</script
【问题讨论】：
【参考方案1】：主要区别在于 javascript 文件可以被浏览器和网络设备缓存，因此用户不必在每次页面加载时都下载它。
因此，如果您有 100k 的 javascript 文件，您的访问者只需下载一次。否则，他们必须在每次页面加载和访问时下载完全相同的 100k。
此允许也适用于内联和外部 CSS 和图像！！
当然，这只是缓存和浏览器性能的冰山一角（Steve 的书是网络“圣经”之一）：
http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
http://www.yuiblog.com/blog/2007/01/04/performance-research-part-2/
http://www.stevesouders.com/
【讨论】：
【参考方案2】：HTML文件中以下两个代码有什么区别？
一个需要额外的 HTTP 请求，但会被缓存。另一个没有。
如果我在包含 abc.js 之后再添加一个 javascript 文件 xyz.js，在使用脚本时是否有任何关联的优先级？
外部脚本的加载被阻塞。第一个将首先加载。然后将加载第二个。
【讨论】：
加载内联脚本不是也阻塞了吗？不是加载 http 连接，而是实际读取和执行 javascript。 @Amir Raminfar — 是的，很明显。 @Quentin - 所以将脚本保存在文件中是个好主意，因为用户不会在每次页面加载时都下载它......对吗？？ 这不是只有脚本来自同一个主机时才成立吗？前任。如果我从谷歌的 cdn 加载 jquery 并从我自己的服务器加载另一个文件，这些请求不会阻塞并且并发正确吗？ @jondavidjohn — 他们阻止解析，而不是下载。【参考方案3】：它们都使浏览器读取 javascript 并执行它。第一个代码可以利用缓存，而后一个 DOES NOT 缓存。
第一个用例还需要另一个 HTTP 请求，这可能会很昂贵。
否则没有优先级。
【讨论】：
【参考方案4】：从文件加载脚本和从脚本标签运行脚本的第一个区别是加载需要额外的 HTTP 请求。这通常是微不足道的，但是通过将脚本嵌入到页面中可以提高速度。但是，从外部文件加载确实允许缓存脚本。 It seems like you cannot rely on caching, though.
现在，我应该告诉您，将所有脚本硬编码在页面上并不是很容易管理。如果您想更新其中一个脚本，但它与特定的 html 文件相关联，则更新变得更加困难。
关于你的第二个问题，脚本是按顺序加载的。在加载脚本时，所有外部加载都被阻止。因此，建议将所有脚本包含在 <body> 标记的底部。
【讨论】：
【参考方案5】：除了缓存的主要原因之外，第二个重要的区别是Separation of Concerns的维护，其中说，在Web开发中，标记（html）应该与样式（css）分开和行为（js）。这些元素应该保存在不同的位置，并且只链接到标记中。这对于项目组织、持续维护和优化非常重要。用内联 everything 编写一堆乱七八糟的意大利面条代码会让你成为sad panda。
【讨论】：
以上是关于将javascript放入文件和脚本标签有啥区别？的主要内容，如果未能解决你的问题，请参考以下文章
将 JavaScript 代码放入 <a> 的不同方法有啥区别？