网页中引入js的几种方法及比较

首先，来看一下 Html5 页面引用 JavaScript 代码的几种方式：

1、Html5 页面中使用 <script> 标签容纳 JavaScript 代码；

<script>
init();
</script>

这里不仅可以调用任意位置的函数，而且可以声明变量，构建函数和对象等等。
2、Html5 页面中使用 <script src="xxx.js"></script> 引入同路径下的 xxx.js 文件中的 JavaScript 代码；

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

注意这里的 main.js 是与当前 Html 页面文件同目录下的 js 子目录中的文件，使用时，确保相对路径正确，当然了，也可以使用绝对路径。

3、Html5 界面元素事件直接赋与一段 JavaScript 代码；

<input type=
"button"
name=
"Button"
value=
"Button"
onclick=
"javascript：alert('测试')"

4.通过其他网站CDN直接进行添加

<script src="http://cdn.uedsc.com/jquery/2.1.3/jquery.js"></script>

此处可参考 javascript设置onclick

以下资源可供参考，进一步理解 JavaScritp：JavaScript的5种调用函数的方法
解读ECMAScript[1]——执行环境、作用域及闭包
解读ECMAScript[2]——函数、构造器及原型

百度百科 javascript
要想真正掌握 JavaScript 语言，那么闭包是必须要深刻理解和领悟的核心。

顺便，记录一下引用 [CSS] 的几种方式：
1、外部样式表
css 样式存于一个 .css 扩展名的文件中，引用方式：

<link href=
"../Styles/Site.css"
rel=
"stylesheet"
type=
"text/css"

2、内部样式表

<title>page标题</title>
<style type=
"text/css"
input{background-color:Green }
</style>

3、内联样式

<input type=
"text"
style=
"background-color:Blue;"
value=
"input1"

更详细的 CSS 运用，可参考 CSS 选择器及各样式引用方式介绍 。
最后，切入主题，页面加载初始调用 JavaScript 代码的三种方式：
1、body 的 onload 事件触发回调 JavaScript 函数；

该事件在 document 文档中的所有内容都加载完成后才会被调用，这种方式显得有点笨拙，但比较把握，确保一切安好，才去调用。
如想避勉过多加载，那么页面设计上可以相对讲究些方法，人为达到滞后加载的效果，就可以给这个事件进行减压，达到尽快执行的目标。
2、document 的 onready 事件触发回调 JavaScript 函数；

document.onready = init();

该事件在 document 文档中的 dom 模型加载完成就会产生回调，而不考虑引用的图片、脚本等资源。
3、在引入 Html5 页面的 JavaScript 代码中，直接调用 JavaScript 函数或执行 JavaScript 命令；

<script>
init();
</script>

或在外部 js 脚本中，直接调用 init();
init() 可以是 Html5 页面中声明的函数，也可以是外部引用的脚本中的函数。
不过发现一个有趣的问题，当在 init() 函数定义中，通过

document.getElementById(
'container'
);

获取 container 元素的引用时，如果该 Html5 元素在该段页面内 JavaScript 代码之后时，会获取不到该元素。
这说明一个问题，第三种启动执行方式，是边加载边执行，所以对顺序有要求；

4.网站使用CDN的好处和弊端
1、多域名加载资源
一般情况下，浏览器都会对单个域名下的并发请求数（文件加载）进行限制，通常最多有4个，那么第5个加载项将会被阻塞，直到前面的某一个文件加载完毕。
因为CDN文件是存放在不同区域（不同IP）的，所以对浏览器来说是可以同时加载页面所需的所有文件（远不止4个），从而提高页面加载速度。

2、文件可能已经被加载过并保存有缓存
一些通用的js库或者是css样式库，如jQuery，在网络中的使用是非常普遍的。当一个用户在浏览你的某一个网页的时候，很有可能他已经通过你网站使用的CDN访问过了其他的某一个网站，恰巧这个网站同样也使用了jQuery，那么此时用户浏览器已经缓存有该jQuery文件（同IP的同名文件如果有缓存，浏览器会直接使用缓存文件，不会再进行加载），所以就不会再加载一次了，从而间接的提高了网站的访问速度。

3、高效率
你的网站做的再NB也不会NB过百度NB过Google吧？一个好的CDNs会提供更高的效率，更低的网络延时和更小的丢包率。

4、分布式的数据中心
假如你的站点布置在北京，当一个香港或者更远的用户访问你的站点的时候，他的数据请求势必会很慢很慢。而CDNs则会让用户从离他最近的节点去加载所需的文件，所以加载速度提升就是理所当然的了。

5、内置版本控制
通常，对于CSS文件和JavaScript库来说都是有版本号的，你可以通过特定版本号从CDNs加载所需的文件，也可以使用latest加载最新版本（不推荐）。

6、使用情况分析
一般情况下CDNs提供商（如百度云加速）都会提供数据统计功能，可以了解更多关于用户访问自己网站的情况，可以根据统计数据对自己的站点适时适当的做出些许调整。

7、有效防止网站被攻击
一般情况下CDNs提供商也是会提供网站安全服务的。