javascript实习笔记5

最新推荐文章于 2022-06-27 18:13:39 发布

原创最新推荐文章于 2022-06-27 18:13:39 发布 · 926 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

js 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了JavaScript实习期间关于DOM树的深度优先加载原理，包括DOM节点的重排和重绘情况。同时，探讨了JavaScript异步加载的三种方式，特别是`defer`属性的使用，它在DOM解析完成后才执行，适用于IE浏览器。

domtree

深度优先（加载一个标签后会在往标签里面找标签，纵向的）

reflow domTree重排
js改变dom节点：dom节点删除，增加
dom节点改变宽高，display：none —> block
dom的offseLeft,offseTop

repaint 重绘改颜色改图片背景会对一部分dom重绘

javascript 异步加载的三种方式

**1.**defer：异步加载，会等dom解析完毕在进行，只有IE可用，在内部可写代码。

//添加异步加载的script
function loadScript(url, callback) {
    var script = document.createElement('script');
    script.type = 'text/javascript';

    if (script.readyState) {
        //IE(查看script加载状态)
        script.onreadystatechange = function () {
            if (script.readyState == 'complete' && script.readyState == 'loaded') {
                callback();
            }
        }
    } else {
        //等script加载完
        script.onload = function () {
            //Safria chorme firefox opera
            callback();
        }
    }
    //异步加载
    script.src = url;
    document.head.appendChild(script);

}