js(script)的引用导入的最佳位置
-
问题
例子：页面中img标签在页面加载完成时需要调用一个方法AutoResizeImage(100,100,this)来自common.js
<html> <body> <img onload="AutoResizeImage(100,100,this)" src="./demo.img"> </body> <!--导入js --> <script src='common.js'></script> </html>页面时不时会出现 AutoResizeImage is no defined
表明该方法没有定义
-
html的执行方式
html文件在加载时是自上而下的执行方式，如果加载执行到引入的css时，程序仍然往下执行，但是如果
执行到<script> js的脚本时则中断线程，待该script脚本执行结束之后程序才继续往下执行。
所以正常情况下大部分的script脚本是放在<body>之后，目的在dom生成之后就不会因为长时间加载脚本
导致延迟阻塞，加快了页面的加载速度。
但是由于部分页面效所以这些脚本应该放在<body>之前。果实现需要先引用脚本中的function，如果脚本在body之后，将导致脚本未加载而先引用报错
所以这些脚本应该放在<body>之前。
其次，不能将需要访问dom元素的js放在body之前，因为此时还没有开始生成dom，
所以在body之前的访问dom元素的js会出错，或者无效
-
解决:
将脚本放在body之前
<html> <!--导入js --> <script src='common.js'></script> <body> <img onload="AutoResizeImage(100,100,this)" src="./demo.img"> </body> </html>
