script元素

标签位置

传统的做法,所有<script>元素都应该放在页面的<head>元素,,意味着必须等 到全部JavaScript 代码都被下载、解析和执行完成以后,才能开始呈现页面的
内容(浏览器在遇到<body>标签时才开始呈现内容)。对于那些需要很多
JavaScript 代码的页面来说,这无疑会导致浏览器在呈现页面时出现明显的延
迟,而延迟期间的浏览器窗口中将是一片空白。
为了避免这个问题,现代Web 应用程序一般都把全部JavaScript 引用放在
<body>元素中页面内容的后面。这样,在解析包含的JavaScript 代码之前,页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。

延迟脚本

<script type="text/javascript" defer="defer" src="example1.js"></script>
其中包含的脚本将延迟到浏览器遇到</html>标签后再执行。
虽然HTML5规范要求脚本按照顺序执行,就是按照第一个延迟脚本会先于第二个延迟脚本执行,而这两个脚本也会先于DOMContentLoaded 事件执行。
But ! ! !
在现实当中,对于延迟脚本你的执行,并不一定会按顺序执行,也不一定会按照DOMContentLoaded 事件触发前执行,因此最好只包含一个延迟脚本。
因为兼容性的原因,延迟脚本放置在页面底部仍然是最佳的选择。
defer 属性只适用于外部脚本文件,在XHTML 文档中,要把defer 属性设置为defer="defer"。

异步脚本

<script type="text/javascript" async src="example1.js"></script>
其特点跟defer脚本基本一致,建议异步脚本不要在加载期间修改DOM。异步脚本一定会在页面的load 事件前执行,但可能会在DOMContentLoaded 事件触发之前或之后执行。支持异步脚本的浏览器有Firefox 3.6、Safari 5 和Chrome。
在XHTML 文档中,要把async 属性设置为async="async"。

XHTML中的用法

略~~~

<noscript>元素

早期浏览器都面临一个特殊的问题,即当浏览器不支持JavaScript 时如何让页面平稳地退化。对这个问题的最终解决方案就是创造一个<noscript>元素,用以在不支持JavaScript 的浏览器中显示替代的内容,现在基本废弃。

小结

把JavaScript 插入到HTML 页面中要使用<script>元素。使用这个元素可以把JavaScript 嵌入到HTML 页面中,让脚本与标记混合在一起;也可以包含外部的JavaScript 文件。而我们需要注意的地方有:

 所有<script>元素都会按照它们在页面中出现的先后顺序依次被解析。在不使用defer 和async 属性的情况下,只有在解析完前面<script>元素中的代码之后,才会开始解析后面<script>元素中的代码。
 由于浏览器会先解析完不使用defer 属性的<script>元素中的代码,然后再解析后面的内容,所以一般应该把<script>元素放在页面最后,即主要内容后面,</body>标签前面。
 使用defer 属性可以让脚本在文档完全呈现之后再执行。延迟脚本总是按照指定它们的顺序执行。
 使用async 属性可以表示当前脚本不必等待其他脚本,也不必阻塞文档呈现。不能保证异步脚本按照它们在页面中出现的顺序执行。另外,使用<noscript>元素可以指定在不支持脚本的浏览器中显示的替代内容。但在启用了脚本的情况下,浏览器不会显示<noscript>元素中的任何内容。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,136评论 0 1
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    程序员poetry阅读 114,224评论 24 450
  • 今天是一个很特别的人的生日,何为特别?既是同学,也是舍友,既是舍友,也是朋友。既是朋友,也是家人。2012年到现在...
    胡歌的老胡椒阅读 185评论 0 0
  • 札记 | 心智成长 0x00 写在前面 我一直在参加的《跃迁》共读活动是什么? 共读活动是由中信出版集团授权、易仁...
    Arnow117阅读 474评论 0 1
  • is : 可以用于任何类型的判断,包括非对象类型(整型, 浮点型等),判断的对象是参数给定的类或子类都会返回tru...
    saiGo阅读 2,480评论 0 0