本文探讨了在前端开发中动态加载JS文件时遇到的问题，特别是使用jQuery时，即使设置async属性，仍然可能导致阻塞主线程。文章详细分析了jQuery的load、html、append等方法的内部工作原理，揭示了jQuery实际上通过创建同步的ajax请求来加载JS，而非直接使用async属性。最后，提供了一个自定义实现的异步加载JS的方法，以及对于使用getScript方法可能存在的调试问题。
在前端开发过程中，有时候会遇到插件化设计的需要。在运行过程中动态的加载一些资源文件。而在动态加载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跟了一串尾巴：
最低0.47元/天 解锁文章
扫一扫
736
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
