Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

react render and commit 阶段的疑惑 #26

Open
Louis14lan opened this issue Nov 17, 2022 · 5 comments
Open

react render and commit 阶段的疑惑 #26

Louis14lan opened this issue Nov 17, 2022 · 5 comments

Comments

@Louis14lan
Copy link

No description provided.

@Louis14lan Louis14lan changed the title react render react render and commit 阶段的疑惑 Nov 17, 2022
@Louis14lan
Copy link
Author

image

红框中的理由没太理解，放在commit阶段也是会触发回流重绘的，我看原文也没有说这个原因，所以有点疑惑

@lizuncong
Copy link
Owner

image

红框中的理由没太理解，放在commit阶段也是会触发回流重绘的，我看原文也没有说这个原因，所以有点疑惑

因为commit阶段是同步的，可以一次性更新浏览器的dom。render阶段是可以打断的，如果每次performunitofwork都操作dom，就每次都会触发回流重绘。其实第二个才是将dom操作放到commit阶段的最重要原因

@Louis14lan
Copy link
Author

image 红框中的理由没太理解，放在commit阶段也是会触发回流重绘的，我看原文也没有说这个原因，所以有点疑惑

因为commit阶段是同步的，可以一次性更新浏览器的dom。render阶段是可以打断的，如果每次performunitofwork都操作dom，就每次都会触发回流重绘。其实第二个才是将dom操作放到commit阶段的最重要原因

第二点认可，由于requestIdleCallback，所以workLoop 会被打断。第一点还是持怀疑，commit 阶段是同步的，也确实是一次性更新浏览器，但他也是一次次地递归appendChild，感觉该重绘回流的次数一样的。

@lizuncong
Copy link
Owner

image 红框中的理由没太理解，放在commit阶段也是会触发回流重绘的，我看原文也没有说这个原因，所以有点疑惑

因为commit阶段是同步的，可以一次性更新浏览器的dom。render阶段是可以打断的，如果每次performunitofwork都操作dom，就每次都会触发回流重绘。其实第二个才是将dom操作放到commit阶段的最重要原因

第二点认可，由于requestIdleCallback，所以workLoop 会被打断。第一点还是持怀疑，commit 阶段是同步的，也确实是一次性更新浏览器，但他也是一次次地递归appendChild，感觉该重绘回流的次数一样的。
同步阶段，即使递归多次，此时的js还占用着控制权，只有等js执行完成(即dom操作完成)，浏览器才会绘制的

@lizuncong
Copy link
Owner

image 红框中的理由没太理解，放在commit阶段也是会触发回流重绘的，我看原文也没有说这个原因，所以有点疑惑

因为commit阶段是同步的，可以一次性更新浏览器的dom。render阶段是可以打断的，如果每次performunitofwork都操作dom，就每次都会触发回流重绘。其实第二个才是将dom操作放到commit阶段的最重要原因

第二点认可，由于requestIdleCallback，所以workLoop 会被打断。第一点还是持怀疑，commit 阶段是同步的，也确实是一次性更新浏览器，但他也是一次次地递归appendChild，感觉该重绘回流的次数一样的。
同步阶段，即使递归多次，此时的js还占用着控制权，只有等js执行完成(即dom操作完成)，浏览器才会绘制的

同步阶段，即使递归多次，此时的js还占用着控制权，只有等js执行完成(即dom操作完成)，浏览器才会绘制的

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@lizuncong @Louis14lan