本文翻译youtube上的up主kudvenkat的javascript tutorial播放单
源地址在此:
https://www.youtube.com/watch?v=PMsVM7rjupU&list=PL6n9fhu94yhUA99nOsJkKXBqokT3MBK0b
本次视频我们讨论,我们应该在html文档中何处放我们的script标签.是应该放在body里还是head里呢?一言概之,script标签既可以放在head里,也可以放在body里
我们来看几个例子
例子1:script标签放在head里
[html][head] ???[script type="text/javascript"] ???????alert("Welcome to JavaScript Tutorial"); ???[/script][/head][body] ???[form id="form1" runat="server"] ???[/form][/body][/html]例子2:Script标签放在body里
[html][head][/head][body] ???[form id="form1" runat="server"] ???[/form] ???[script type="text/javascript"] ???????alert("Welcome to JavaScript Tutorial"); ???[/script][/body][/html]在例子1中我们把script标签放在了head里,在例子2中我们把script标签放在了body里,两种情况下script都可以按预期运行
例子3:把TextBox的背景颜色设为red
[html][head][/head][body] ???[form id="form1" runat="server"] ???????[asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox] ???[/form] ???[script type="text/javascript"] ???????document.getElementById("TextBox1").style.backgroundColor = "red"; ???[/script][/body][/html]例子4:与例子3相同,唯一的不同之处是我们把script标签移到head的部分.这种情况下script将不会正常工作.根据我们所使用的浏览器的不同,会出现以下的Javascript错误信息
Firefox - TypeError: document.getElementById(...)is null
Chrome - Uncaught TypeError: Cannot read property ‘style‘ of null
IE - Unable to get property ‘style‘ of undefined or null reference
按下F12调出开发者工具来监视上面的这些Javascript错误信息.对于上面的三种浏览器,F12都是可以用的
[html][head] ???[script type="text/javascript"] ???????document.getElementById("TextBox1").style.backgroundColor = "red"; ???[/script][/head][body] ???[form id="form1" runat="server"] ???????[asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox] ???[/form][/body][/html]那么为何Javascript在这种情况下会出错呢
Javascript代码在textbox控制之前就出现了.当Javascript代码被执行后,textbox仍未被加载进浏览器的DOM(Dociment Object Model)里.这就是为何Javascript无法找到textbox并且throws一个NULL参考项错误的原因
在第六部分的视频中,我们讨论过,总的来说,将Javascript存放在外部的.js文件中是一种好的编程习惯.所以,如果Javascript在外部文件中,而且你想用<script>元素将其作为参考项放进页面中的话,这个<script>元素应该放到哪里呢?
为了回答这个问题,首先我们要了解当浏览器加载一个网页的时候其背后到底发生了什么.
1.浏览器开始parsing HTML
2.当parser碰到<script>标签后,而且该标签指向一个外部的Javascript文件的时候.parser停止parsing HTML,然后浏览器发出一个下载该script文件的请求.直到下载结束为止,parser都不允许继续parsing余下的页面上的HTML
3.当下载结束后,parser继续回复原来的工作,parse剩下的HTML
这就意味着直到所有的script都被加载之前页面的加载是被暂时停止的,很明显这会影响到用户体验
综上所述,最好将<script>标签放在<body>的闭标签之前.因为这样就不会阻止HTML parser的正常工作.但是,当今的浏览器支持async以及defer scripts的属性.这些属性会告诉浏览器,你可以继续parsing页面,就算script正在被下载中.但是就算是有这些属性,从性能表现上来说,依然将<script>标签放到<body>闭标签之前依然是不错的选择
根据HTTP/1.1规则,特定的浏览器不能并行下载两个以上的部件.所以,如果页面上有多个图片等待下载,而你将<script>标签放到了页面顶端,那么<script>文件会优先下载,并且阻止其他页面图片的下载,从而导致页面加载时间大大增加
[译]我们应该在HTML文档中何处放script标签
原文地址：http://www.cnblogs.com/otakuhan/p/7633249.html