将javascript放在文件和脚本标签中有什么区别?


What is the difference in putting a javascript in a file and in a script tag?

HTML文件中以下两个代码的区别是什么?如果我添加一个javascript文件xyz.js后,包括abc.js,是否有任何优先级相关联的脚本被使用?

第一个代码:

<script src="js/abc.js" type="text/javascript" language="javascript"> </script>

第二个代码:

<script language="javascript">
        /*same code of abc.js*/ 
</script

最主要的区别是javascript文件可以被浏览器和网络设备缓存,所以用户不必在每次加载页面时都下载它。

所以如果你有100k的javascript文件,你的访问者只需要下载一次。否则,他们就必须下载同样的100k,每个页面加载和访问。

这个允许适用于内联和外部CSS和图像!!

假设这只是缓存和浏览器性能的冰山一角(Steve的书是web"圣经"之一):

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/

HTML文件中以下两个代码的区别是什么?

一个需要额外的HTTP请求,但被缓存。另一个没有。

如果我添加一个javascript文件xyz.js后,包括abc.js,是否有任何优先级相关联的脚本被使用?

外部脚本加载被阻塞。第一个将首先被加载。

它们都使浏览器读取并执行javascript。第一个代码可以利用缓存,而第二个代码DOES NOT缓存。

第一个用例还需要另一个HTTP请求,这可能是昂贵的。

没有优先级。

从文件加载脚本和从脚本标记运行脚本的第一个区别是加载需要额外的HTTP请求。这通常是微不足道的,但是将脚本嵌入到页面中可以提高速度。但是,从外部文件加载确实允许缓存脚本。但是,似乎不能依赖缓存。

现在,我应该告诉您,将所有脚本硬编码在页面上并不是很好管理。如果你想更新其中一个脚本,但它绑定到一个特定的html文件,它会变得更加难以更新。

关于你的第二个问题,脚本是按顺序加载的。当脚本加载时,所有外部加载都被阻塞。因此,建议将所有脚本内容放在<body>标签的底部。

除了缓存的主要原因之外,次要和重要的区别是关注点分离的维护,这在其他事情中,可以说,在web开发中,标记(html)应该与样式(css)和行为(js)分开。这些元素应该保存在不同的位置,并且只能在标记中链接。这对于项目组织、持续维护和优化非常重要。用内联的everything写一堆乱七八糟的面条式代码会让你看起来像只悲伤的熊猫。