今天学习了js渲染流程和异步加载的方法

学习了js的渲染流程大致分为：

1. 解析HTML形成DOMTree
2. 解析css形成CSS Rule Tree
3. 将DOMTree 和 cssTree 合并形成 RenderTree
4. 根据渲染树计算出每一个节点在页面中的位置
5. 根据布局进行绘制
6. repaint 重绘 当页面中某个元素的样式(颜色)发生改变会引起重绘
7. reflow 回流 当页面中的布局(位置、宽高)引起回流（display:none引起回流 脱离文档流 整个页面元素的位置会重新布局）
   （visibility:hidden 引起重绘 占用文档流 ）

js的动态异步加载方法：

function loadScript(url,callback){
            var script = document.createElement('script');
            if(document.readyState){
                document.onreadystatechange = function(){
                    if(document.readyState == 'complete' || document.readyState == "loaded"){
                        myFunction[callback]();
                    }
                }
            }else{
                window.onload = function(){
                    myFunction[callback]();
                }
            }
            script.src = url;
        }

记录一下