JavaScript文件的同步和异步加载

williamwen1986 发布于2019-08-21 12:01 / 599人阅读

摘要：本文简述一些文件的同步和异步加载方式。当然缺点是，不能保证有依赖关系的文件的加载顺序。总结如果是单一或少数文件，可以在的最后插入标签，以同步方式加载。如果是多个文件，建议异步加载，以避免阻塞界面渲染，也缩短整体加载时间。

对于JS文件的引用，尽管当前有不少框架和工具（比如webpack，commonjs，requiresjs等）都做了很好的处理。但是抛开这些框架，了解原生的加载方式还是不无裨益。本文简述一些js文件的同步和异步加载方式。

同步加载

可在html文件里以

这种方式下，文件加载是同步的。即calc1.js加载完成后，才加载calc2.js，所以保证了calc2.js总能正确地调用calc1里的add函数。在Chrome里的调试结果如下：

但同步加载的缺点也明显，如果有多个文件的时候，全部加载时间会很长，而且阻塞用户界面响应。

通过Script Element异步加载

异步加载的优点是，能够同时加载多个js文件，而且由于是异步，不会阻塞用户界面，用户体验好。当然缺点是，不能保证有依赖关系的文件的加载顺序。

html 代码


    
    Title

在Chrome里的调试结果有时候能正确的输出如下：

但有时候由于clac1.js没有被先加载，calc2.js执行时会报错。

那么我们就得需要解决加载顺序问题，保证calc1.js先加载。


    
    Title

这样就能永远输出正确结果了。

通过 AJAX 加载JS文件

也能正确的输出结果。

总结

如果是单一或少数js文件，可以在html body的最后插入script标签，以同步方式加载。Webpack其实也是把多个js文件合并称一个，然后在body插入script引用。

如果是多个js文件，建议异步加载，以避免阻塞界面渲染，也缩短整体加载时间。本文介绍了script element和Ajax两种方式，并且对于有依赖关系的文件加载顺序，也做了实例。请参考 https://github.com/JackieGe/a...

GPU云服务器云服务器同步和异步同步回调和异步回调同步调用和异步调用同步通信和异步通信

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87354.html

JavaScript模块化编程探索

摘要：模块化编程，已经成为一个迫切的需求。随着网站功能逐渐丰富，网页中的也变得越来越复杂和臃肿，原有通过标签来导入一个个的文件这种方式已经不能满足现在互联网开发模式，我们需要团队协作模块复用单元测试等等一系列复杂的需求。随着网站逐渐变成互联网应用程序，嵌入网页的Javascript代码越来越庞大，越来越复杂。网页越来越像桌面程序，需要一个团队分工协作、进度管理、单元测试等等......开发...

jayzou 2019-08-20 16:22 评论0 收藏0
JavaScript单线程、加载与模块化

摘要：单线程与浏览器多线程是单线程的因为运行在浏览器中，是单线程的，每个一个线程。若以多线程的方式操作这些，则可能出现操作的冲突。零延迟零延迟并不是意味着回调函数立刻执行。异步编程的中方法包括回调函数事件监听采用事件驱动模式。 JavaScript单线程与浏览器多线程 Javascript是单线程的：因为JS运行在浏览器中，是单线程的，每个window一个JS线程。作为浏览器脚本语言，Ja...

shevy 2019-08-19 18:41 评论0 收藏0
日常笔记

摘要：零延迟零延迟并不是意味着回调函数立刻执行。异步编程的中方法包括回调函数事件监听采用事件驱动模式。执行完成后，立即触发事件，从而开始执行。所谓对象，就是代表了未来某个将要发生的事件通常是一个异步操作。 JavaScript单线程与浏览器多线程 Javascript是单线程的：因为JS运行在浏览器中，是单线程的，每个window一个JS线程。作为浏览器脚本语言，JavaScript的主要...

myshell 2019-08-22 10:38 评论0 收藏0
vue异步加载高德地图

摘要：异步加载异步加载指的是为指定加载的回调函数，在的主体资源加载完毕之后，将自动调用该回调函数。几种加载js的方式同步加载异步加载延迟加载同步加载用的最多的一种方式，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才能进行下一步操作。所以默认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。...

zacklee 2019-08-22 18:08 评论0 收藏0