js(script)的引用导入的最佳位置

2020-07-25 本文已影响0人五岁小孩

js(script)的引用导入的最佳位置

问题

例子：页面中img标签在页面加载完成时需要调用一个方法AutoResizeImage(100,100,this)来自common.js
```
<html>
    <body>
         <img onload="AutoResizeImage(100,100,this)" src="./demo.img">
    </body>
    
    <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>

js(script)的引用导入的最佳位置

js(script)的引用导入的最佳位置

猜你喜欢

热点阅读