封装异步(按需)加载js函数(考虑兼容)

这篇笔记标题是最终的一个目的，那么在此之前还有几个其他的点需要做介绍。

一、html文档渲染模式

通俗来讲就是说网页展现的一个流程，HTML文档解析过程是单线程的，起初以一个DOMTree解析html结构（深度优先原则），当碰到标签需下载文件时会异步的进行下载，所以标签解析完成时间肯定是先于页面加载的，DOMTree完成后加载CSSTree，两者结合形成最终的渲染树randerTree，DOM树的改变会导致整个渲染树的重排（我们可以理解为结构上改变了所以要全部重建），但是一些非结构的修改则只会导致渲染树的重绘。后者影响较小。

js文件的加载会截止DOM树的加载，那么当js文件出现问题时无法加载完时页面会瘫痪，所以对于一些除改变样式的js文件、和一些工具包来说异步加载是最好的选择。

二、封装按需加载js函数

 前两种方法都是js属性。

 最后一种最实用我们先直接撸上代码小编之后再去分析一些其中的原理，一般的调用外部文件内的函数我们命名为callback

//两个参数分比为js文件名 ，所需函数名
function onloading(url,callback) {
            var script = document.createElement('script');
            //IE专用
            if(script.readyState) {
                //这边是IE的一个监听下载状态的事件
                script.onreadystatechange = function () {
                   if(script.readyState == "complete" || script.readyState == "loaded"){
                       callback();
                   }
                }
            }
            //一般浏览器都可行
            else{
                script.onload = function () {
                    callback();
                }
            }
            script.src=url;
            document.head.appendChild(script);
        }
        onloading("test.js",function(){
            add();
        })

该代码实现按需加载我们所需要的js文件中的方法,因为js方法参数灵活当我们需执行整个js文件时可以直接只写前一个参数。

· 异步执行js文件我们是通过js动态的去加入了一个js标签然后插入页面中，那么我们在调用这个方法时才会去下载js文件然后执行之中的函数，onloading("test.js",function(){add();})，这一段小编 取出来说一下，根据我们之前所了解到的js解析过程不会去直接看函数中代码是什么样的，就是说我们第二个参数直接写js文件中方法时执行时会报错未定义，所以用一个匿名函数包裹就会在函数执行再去执行这个方法代码。

· 然后还有一个点就是js文件方法的执行是建立在js文件已完成下载，所以函数中执行都是在判定了文件下载完成后在执行。

· 事件绑定一定要在下载之前，举个很简单的例子，如果script.src=url;放在前面页面以很快的速度加载完了，那么之后IE兼容      的监听下载事件就失效了（因为下载已经完成）。