Blink渲染调试记录Ⅱ

ContainerNode

上一章说到调试入口是Element::AttachLayoutTree，实际上在这个函数的调用过程中还会触及到另一个同名函数：ContainerNode::AttachLayoutTree，这两个函数随着DFS的深入，将会反复互相调用，这在调用堆栈中就可见一斑了。

或许你有几个疑问：

1. Element::AttachLayoutTree的2769行和2775行有啥区别？2720行又是啥？
2. ContainNode::AttachLayoutTree的1048行又做了什么？

emmm…2720行是Element::AttachLayoutTree的第一行，是本人打断点的位置。。。

从Element到ContainerNode

一般程序都会走到2772行调用ContainerNode::AttachLayoutTree，毕竟shawdow DOM是少数嘛。
至于为什么是2775行，那是结束调用后下一条代码的位置，2769行同理。

从ContainerNode到Element

我们来看一般情况的调用，1047行很明显的遍历DOM节点并调用Element::AttachLayoutTree，注意孩子DOM节点先调用，遍历结束后，1049行才调用父DOM节点的函数。

ChildStyleRecalcBlockedByDisplayLock

这里还有一个十分奇怪的概念：display lock，它是什么？


我们可以从激活锁的原因看出什么是display lock——用户看不到的部分就会被上display lock
比如find in page，那就是页面查找，查找某个关键字就会跳转到带有该关键字的位置，此时可能它不在视口，那么我们就需要解锁。FragmentNavigation就是a标签根据href的内容跳转到某个fragment，ScriptFocus是JS调用focus函数帮助用户focus某个a标签或者别的东西，下面的UserFocus也同理。