JavaScript 基础天花板：为何最佳实践是使用外联文件而不是行内代码？

思考一下以下 2 种 JavaScript 代码方式，哪种更好？

1. 第一种，使用外联 JavaScript 脚本文件：

<script src="out.js"></script>

// out.js 文件
console.log('这是一个外联 JavaScript 脚本文件代码！');

2. 第二种，直接使用行内 JavaScript 代码：

<script>
    console.log('这是一个行内 JavaScript 脚本代码！');
</script>

咋一看，第二种方式写起来更加方便、高效，而且代码更少，嗯嗯，它是最佳实践了！！！

事实真的如此吗？真相只有一个，那就是......

最佳实践是第一种：使用外联 JavaScript 脚本文件。

1. 缓存优势，多次或者重复（例如：多个页面重复使用了同一个 JS 文件）下载同一个文件时，浏览器直接读取文件缓存会非常高效；

2. 可维护性更强，将 JS 代码分类抽离独立文件集中管理，相比将所有 JS 代码像一坨屎一样写在 HTML 里面，更能造福后续维护的程序猿；

3. 可复用性更强，特别是通用组件工具类独立 JS 代码文件，让让别人享用你的成果变成了唾手可得，只要人人都能献出一点代码，这个世界将会变得更美好；

4. 可享受 CDN 带来的加速，外联 JS 脚本文件可托管到业界 CDN 平台，让加载更快；

真相竟如此，没错，就是如此！