Question

为什么在这个jQuery示例中，SendEvent(E_RESET) alert函数在jquery修改.parent的背景之前执行，即使if(p.css('background-color', 'yellow'))已被评估第一

CSS

.parent {
  width: 400px;
  padding: 10px;
  margin: 10px;
  border: 1px solid;
  background-color: green;
}

HTML

<div class="parent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti qui esse illum, unde labore. Repellendus sunt, quidem eligendi aliquid architecto animi officia itaque ducimus impedit, enim laudantium quis, cupiditate optio.</div>

的jQuery

var p = $('.parent');
p.css('border', '3px solid blue');

if(p.css('background-color', 'yellow')){
    alert('cool')
  } else {
  alert( 'Not COOL')
  }

jsFiddle

由于

Answer 1

修改DOM时，浏览器不会更新图形。只有在没有更多的javascript执行时才会这样做。此过程称为reflow。

基本上这就是浏览器的工作方式：

Event loop
    ┌──────────┐
    │          │
    │          │
    │          ▼
    │        check if there's any new ───────▶ parse data
    │        data on the network                    │
    │          │                                    │
    │          ▼                                    │
    │        check if we need to execute  ◀─────────┘
    │        any javascript ──────────────────▶ execute
    │          │                               javascript
    │          ▼                                  │
    │        check if we need to ◀────────────────┘
    │        redraw the page  ──────────────▶ redraw page
    │          │                                   │
    │          │                                   │
    └────◀─────┴─────────────────◀─────────────────┘

但是，根据定义，alert()函数不会等待重排并中断javascript的执行。

因此，当您将背景颜色更改为黄色时，会发生以下情况：

DOM已修改，背景更改为黄色
调用警报并显示警告对话框
执行其他一些javascript，直到没有其他任何内容可以执行
触发回流并且浏览器最终将黄色背景绘制到屏幕

Reflow以这种方式表现为优化。不断重新绘制所有内容可能会降低浏览器的速度，因此即使规范没有描述回流，微软，Mozilla，Google和Apple一直竞争成为最佳浏览器这一事实意味着随着时间的推移，回流变得越来越多的批处理过程。

如果条件修改DOM，即使警报在内部，如果执行JS警报功能。为什么？

1 个答案: