用类似RequireJS和SeaJS异步加载有什么好处

JavaScript023

用类似RequireJS和SeaJS异步加载有什么好处,第1张

定位有差异。RequireJS 想成为浏览器端的模块加载器,同时也想成为 Rhino / Node 等环境的模块加载器。SeaJS 则专注于 Web 浏览器端,同时通过 Node 扩展的方式可以很方便跑在 Node 服务器端。

遵循的规范不同。RequireJS 遵循的是 AMD(异步模块定义)规范,SeaJS 遵循的是 CMD

(通用模块定义)规范。规范的不同,导致了两者 API 的不同。SeaJS 更简洁优雅,更贴近 CommonJS Modules/1.1 和

Node Modules 规范。

社区理念有差异。RequireJS 在尝试让第三方类库修改自身来支持 RequireJS,目前只有少数社区采纳。SeaJS 不强推,采用自主封装的方式来“海纳百川”,目前已有较成熟的封装策略。

代码质量有差异。RequireJS 是没有明显的 bug,SeaJS 是明显没有 bug。

对调试等的支持有差异。SeaJS 通过插件,可以实现 Fiddler 中自动映射的功能,还可以实现自动 combo 等功能,非常方便。RequireJS 无这方面的支持。

js的同步和异步问题通常是指ajax的回调,如果是同步调用,程序在发出ajax调用后就会暂停,直到远程服务器产生回应后才会继续运行。而如果是异步调用,程序发出ajax调用后不会暂停,而是立即执行后面的代码,服务器返回信息后会自动触发回调函数进行处理。相比较而言,异步调用的性能最佳,程序不会出现卡顿的现象,而同步调用则通常用于需要立即获得结果并实时处理的情况。

打个比方:假如你想让四个手下分别去执行四个不同的任务,如果用“同步”的方法,就要先让第一个人去执行任务,这期间你和另外三个手下就呆呆地等,什么也不干,直到第一个人完成任务回来报告后再让第二个人去执行任务,依此类推;而如果用“异步”的方法,就可以把四个手下同时派出去执行任务,然后自己就可以去喝酒唱歌泡妞了,手下完成任务后只需要用手机向你汇报结果即可。

关于JavaScript脚本加载的问题,相信大家碰到很多。主要在几个点——

1>同步脚本和异步脚本带来的文件加载、文件依赖及执行顺序问题

2>同步脚本和异步脚本带来的性能优化问题

深入理解脚本加载相关的方方面面问题,不仅利于解决实际问题,更加利于对性能优化的把握并执行。

先看随便一个script标签代码——

复制代码代码如下:

<script src="js/myApp.js"></script>

如果放在<head>上面,会阻塞所有页面渲染工作,使得用户在脚本加载完毕并执行完毕之前一直处于“白屏死机”状态。而<body>末尾的打脚本只会让用户看到毫无生命力的静态页面,原本应该进行客户端渲染的地方却散布着不起作用的控件和空空如也的方框。拿一个测试用例——

代码如下:

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title>异步加载script</title>

<script src="js/test.js"></script>

</head>

<body>

<div>我是内容</div>

<img src="img/test.jpg">

</body>

</html>

其中,test.js中的内容——

代码如下:

alert('我是head里面的脚本代码,执行这里的js之后,才开始进行body的内容渲染!')

我们会看到,alert是一个暂停点,此时,页面是空白的。但是要注意,此时整个页面已经加载完毕,如果body中包含某些src属性的标签(如上面的img标签),此时浏览器已经开始加载相关内容了。总之要注意——js引擎和渲染引擎的工作时机是互斥的(一些书上叫它为UI线程)。

因此,我们需要——那些负责让页面更好看、更好用的脚本应该立即加载,而那些可以待会儿再加载的脚本稍后再加载。