网页中引入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提供商也是会提供网站安全服务的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容