index.html:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="a.js"></script> </head> <body> <span>body</span> </body> </html>a.js:
function fun1(){ alert("it works"); } fun1();alert执行的时候，html内容是一片空白的，即body并未被显示，当点击确定后，才出现，这就是JS阻塞浏览器渲染导致的结果。
index.html:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="require.js"></script> <script type="text/javascript"> require(["a"]); </script> </head> <body> <span>body</span> </body> </html>a.js:
define(function(){ function fun1(){ alert("it works"); } fun1(); })浏览器提示了"it works"，说明运行正确，但是有一点不一样，这次浏览器并不是一片空白，body已经出现在页面中。
requirejs具有如下优点：
防止js加载阻塞页面渲染 使用程序调用的方式加载js，防出现如下丑陋的场景
<script type="text/javascript" src="a.js"></script> <script type="text/javascript" src="b.js"></script> <script type="text/javascript" src="c.js"></script> <script type="text/javascript" src="d.js"></script> <script type="text/javascript" src="e.js"></script> <script type="text/javascript" src="f.js"></script> <script type="text/javascript" src="g.js"></script> <script type="text/javascript" src="h.js"></script> <script type="text/javascript" src="i.js"></script> <script type="text/javascript" src="j.js"></script>