# 为什么读取某些属性，也会导致回流？

## TL;DR

1. 浏览器会尽可能高效的去执行重绘和回流
2. 代码中修改 DOM 的操作，会缓存到一个队列中，一定时间间隔或者指定修改次数后，统一执行
3. 如果此时查询了某些 DOM 属性，比如：

   ```
   clientHeight clientLeft clientTop clientWidth 
   offsetHeight offsetLeft offsetParent offsetTop offsetWidth 
   scrollHeight scrollLeft scrollTop scrollWidth
   ```

   **为了获取到最新的数据**，浏览器会将上述队列中的任务依次执行，保证队列被清空，从而导致了回流。

> All of these above are essentially requesting style information about a node, and any time you do it, the browser has to give you the most up-to-date value. In order to do so, it needs to apply all scheduled changes, flush the queue, bite the bullet and do the reflow.

## Reference

* [Rendering: repaint, reflow/relayout, restyle](http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/)
* [What forces layout / reflow](https://gist.github.com/paulirish/5d52fb081b3570c81e3a)
* [ON LAYOUT & WEB PERFORMANCE](https://kellegous.com/j/2013/01/26/layout-performance/)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://coolconan.gitbook.io/roadmap/front-end/platforms/browser/basics/190708-what-cause-reflow.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.