<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> -->
    <style type="text/css">
        html,
        body
        {
            margin: 0;
            padding: 0;
        }
        div
        {
            font-size: 30px;
            font-weight: bold;

            position: fixed;

            display: flex;

            width: 200px;
            height: 200px;

            color: white;
            border-radius: 50%;
            background: red;

            justify-content: center;
            align-items: center;
        }

        div
        {
            /* Firefox */
            -webkit-animation: rotate 5s linear infinite;
               -moz-animation: rotate 5s linear infinite;
            /* Safari 和 Chrome */
                 -o-animation: rotate 5s linear infinite;
                    animation: rotate 5s linear infinite;
            /* Opera */
        }

        @keyframes rotate
        {
            0%
            {
                /* Firefox */
                -webkit-transform: rotate(0deg);
                /* IE 9 */
                   -moz-transform: rotate(0deg);
                    -ms-transform: rotate(0deg);
                /* Safari 和 Chrome */
                     -o-transform: rotate(0deg);
                        transform: rotate(0deg);
                /* Opera */
            }
            100%
            {
                /* Firefox */
                -webkit-transform: rotate(360deg);
                /* IE 9 */
                   -moz-transform: rotate(360deg);
                    -ms-transform: rotate(360deg);
                /* Safari 和 Chrome */
                     -o-transform: rotate(360deg);
                        transform: rotate(360deg);
                /* Opera */
            }
        }
    </style>
</head>

<body>
    <div id="ad">Hello, world!</div>
</body>

</html>
<script type="text/javascript">
    var div = document.querySelector('#ad');
    var divTop = 0;
    var divLeft = 0;
    // true: top 和 left 自增,false: top 和 left 自减
    var flagT = true;
    var flagL = true;

    function move() {
        (div.offsetHeight + divTop == window.innerHeight) ? flagT = false: flagT;
        (div.offsetWidth + divLeft == window.innerWidth) ? flagL = false: flagL;
        flagT ? divTop++ : divTop--;
        flagL ? divLeft++ : divLeft--;
        div.style.left = divLeft + 'px';
        div.style.top = divTop + 'px';
        (divTop <= 0) ? flagT = true: flagT;
        (divLeft <= 0) ? flagL = true: flagL;
        setTimeout(move, 5);
    }
    setTimeout(move, 1);
</script>

我们用原生JS进行开发时,经常会用到两种更新DOM节点的方法:innerHTML 和
appendChild() 。其中 innerHTML
会完全替换掉原先的节点内容,如果我们是想向元素追加子节点的话,那么
innerHTML 显然满足不了需求。 转而我们就会想到 appendChild()
方法。appendChild方法接收的参数类型为单个的节点类型对象。因此当我们要添加多个子节点时,只能通过循环来实现。


在开始接触JavaScript的时候,书上有一句话我记忆深刻,JavaScript是一门单线程语言,不管从什么途径去获取这个消息,前端开发者都会记住,哦~~,JavaScript是一门单线程语言,所以alert()会卡住

 

例如:


为什么JavaScript是一门单线程语言?因为什么原因让JavaScript出生就是单线程语言?

for (var i = Things.length - 1; i >= 0; i--) {
    element.appendChild(Things[i]);
}


提出问题,必然解决问题,从JavaScript出生说起,最开始JavaScript是配合html去完成对dom的控制,优化用户交互,于是问题来了

 

  • js可以修改Dom结构
  • 浏览器渲染Dom结构

我们都知道,对DOM的操作次数越多,性能消耗也就越大。像这样的循环添加节点,循环了多少次,就对DOM操作了多少次,性能消耗明显是不划算的。我们就会想,能否把要插入的节点进行打包,然后一次性添加呢?如果可以的话,那就只对DOM做了一次操作了。要实现打包,这就要用到我们的主角
createDocumentFragment。

假如同时执行,会发生什么,假如同时操作同一个Dom怎么办,

DocumentFragments是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段,将元素附加到文档片段,然后将文档片段附加到DOM树。在DOM树中,文档片段被其所有的子元素所代替。因为文档片段存在于内存中,并不在DOM树中,所以将子元素插入到文档片段时不会引起页面回流(对元素位置和几何上的计算)。因此,使用文档片段通常会带来更好的性能。

同理 两段js都修改Dom结构,假如同时操作Dom会发生什么

发表评论

电子邮件地址不会被公开。 必填项已用*标注