Aug 13
作者说的最好的加载JS方法，即是如何无阻塞的加载JS，作者提到了三个技巧
- 创建两个JS文件， 第一个只包含动态加载JS的必要代码，第二个包含除必要的一些初始化的所有内容；
- 创建加载第一个JS文件的<script>标签，并把它放在页面的最底端，</body>标签里面；
- 创建第二个<script>标签，加载第二个JS文件和运行附加的初始化代码。
作者还提供了一个例子，这是第一个JS文件的内容
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | function loadScript(url, callback){ var script = document.createElement("script") script.type = "text/javascript"; if (script.readyState){ //IE script.onreadystatechange = function(){ if (script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; callback(); } }; } else { //Others script.onload = function(){ callback(); }; } script.src = url; document.getElementsByTagName("head")[0].appendChild(script); } |
页面上的调用
1 2 3 4 5 6 7 8 9 10 11 | <body> .. something <script type="text/javascript" src="http://your.cdn.com/first.js"></script> <script type="text/javascript"> loadScript("http://your.cdn.com/second.js", function(){ //initialization code }); </script> </body> |
如果要加载多个文件的，可以考虑把文件合在一起，作者提到了几个这种合并工具，编译时的 Sprockets和两个运行时的 mod_concat 、 combo handler
Links: The best way to load external JavaScript
Related posts:
- Callbacks vs Events 这是个比较有意思的对比 首先作者使用了基于Events的DOMContentLoaded来执行两个单独的初始化工作 document.addEventListener("DOMContentLoaded", function() { console.log("Init: 1"); DOES_NOT_EXIST++; // this...
Related posts brought to you by Yet Another Related Posts Plugin.
Recent Comments