首先,来看一下 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提供商也是会提供网站安全服务的。