所谓的将JavaScript和CSS置于外部，就是我们说的外置JavaScript和CSS。关于JavaScript和CSS在前端页面中的使用通常有两种方式：一种是内联方式；另外一种是外置方式。

内联方式是指将JavaScript和CSS直接嵌入到前端页面，如以下代码：

[head]

[script type="text/javascript"]

function IsEven()

{

var number = document.getElementById("TextBox1").value;

if (number % 2 == 0)

{

alert(number + " is even number");

}

else

{

alert(number + " is odd number");

}

}

[/script]

[/head]

外置方式是指将JavaScript或CSS写在一个单独的文件中，后缀名为“.js”或“.css”格式，然后在HTML页面中调用这个单独的文件，如以下代码：

[head]

[script type="text/javascript" src="ExternalJavaScript.js"][/script]

[/head]

内联JavaScript和CSS的优点如下：

1) 有效减少 HTTP 请求次数，提升前端页面性能，缓解服务器压力。

2) 浏览器加载完CSS才能渲染页面，因此可以防止CSS文件无法读取而造成页面裸奔的现象。

内联JavaScript和CSS的缺点如下：

1) 可维护性差，每天如果有需要修改内容，必须对很多页面进行修改。

2) 内联JavaScript和CSS在每次页面加载的都必须重新加载。

3) 协同开发的能力差，不方便多名开者同步工作。

外联JavaScript和CSS的优点如下：

1) 如果JavaScript和CSS被多个页面调用时，这样修改更方便，只要修改一个文件就可以。

2) 分离HTML、CSS和Javascript可以更容易操纵它们，方便协同工作。

3) 外置Javascript文件可以被浏览器缓存。

外联JavaScript和CSS的缺点如下：

1) 外置的方式增加了HTTP的请求数。

2) 浏览器要加载完CSS才能渲染页面，因此影响页面的性能。

在现实世界中使用外部文件通常会产生更快的页面，因为浏览器会缓存JavaScript和CSS文件。每次请求HTML文档时，都会下载HTML文档中内联的JavaScript和CSS。这减少了所需的HTTP请求数量，但增加了HTML文档的大小。另一方面，如果JavaScript和CSS位于浏览器缓存的外部文件中，则HTML文档的大小会减少，而不会增加HTTP请求的数量。

关键因素是外部JavaScript和CSS组件相对于所请求的HTML文档数量的缓存频率。这个因素尽管难以量化，但可以使用各种指标进行衡量。如果您的网站上的用户每个会话有多个页面浏览量，并且许多网页重复使用相同的脚本和样式表，则缓存的外部文件可能带来更大的潜在收益。

在比较内联和外置文件时，知道用户缓存外部组件的可能性的可能性很重要，通常用户在第一次访问页面时是空缓存，之后的多次后续页面查看都是具有完整缓存的。如果在访问系统时，具有完整缓存的页面占所有查看数量的比例越多，那说明外置文件的收益越高也就越有利，当然如果具有完整缓存的页面占所有查看数量的比例很低，那么内联文件的方式更有利。

如果网站中有很多页面使用相同的JavaScript和CSS，那么使用外部文件可以更好的提高这些组件的重用率，在这种情况下使用外部文件更有优势，因为当用户在页面导航时JavaScript和CSS组件已经位于浏览器的缓存中。当然反过来也很容易理解了，如果没有任何两个页面共享相同的JavaScript和CSS，重用率就会很低，当然很少有网站会出现这两种极端的情况了。

如果主页服务器知道一个组件是否在浏览器的缓存中，那么就可以在内联或使用外部文件之间做出最佳选择，当然服务器不能查看浏览器缓存中有那些内容，但可以使用Cookies做指示器，如果Cookies不存在，就使用内联JavaScript和CSS，如果Cookies出现了，则可以使用外部组件位于浏览器的缓存中，这就是我们通常说的“动态内联”。

基于以上原因通常我们建议将JavaScript和CSS置于外部。