在前端开发过程中,有时候会遇到插件化设计的需要。在运行过程中动态的加载一些资源文件。而在动态加载js文件的时候,遇到一些有趣的现象。以此让我们简单的探讨一下。
假设我们现在有一个页面,会动态加载一段html片段,并将其显示在页面上。而这个片段中会携带<script>。
index.html |
<!DOCTYPE html> <html lang="en"> <head> <!-- jQuery --> <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> </head> <body> <div id="cntr"></div> <script> $(function() { $("#cntr").load("htmlWithJS.html"); }); </script> </body> </html> |
htmlWithJS.html |
<script> alert("include!"); </script> |
顺利载入:
接着,我们改写一下htmlWithJS.html。将script改成引用一个test.js文件。内容不变:
htmlWithJS.html |
<script src="test.js"></script> |
test.js |
alert("include!"); |
顺利载入,但是出现了warning:
这行文字表述的意思是,文档中包含了同步的http请求。而这个请求会阻塞当前的主线程那个,从而降低用户体验(因为载入过程中会导致页面卡顿)。
看起来问题似乎很好解决,我们只要添加html5的属性async即可:
htmlWithJS.html |
<script src="test.js" async="async"></script> |
运行结果:
问题依旧没有被解决,而查看网络请求,则会发现test.js跟了一串尾巴: