blink的SpatialNavigationEnabled会引起刷新区域过大
blink的SpatialNavigationEnabled会引起刷新区域过大
龙泉寺扫地僧
发布于 2019-02-20 14:39:22
发布于 2019-02-20 14:39:22
blink里的setting，有个SpatialNavigation，设置为true的话，在
EventHandler::handleMouseFocus -》 element->isMouseFocusable()里会判断这个settings，
> miniblink.dll!blink::ElementRuleCollector::collectMatchingRules
miniblink.dll!blink::StyleResolver::matchRuleSet
miniblink.dll!blink::StyleResolver::matchUARules
miniblink.dll!blink::StyleResolver::matchAllRules
miniblink.dll!blink::StyleResolver::styleForElement
miniblink.dll!blink::Element::originalStyleForLayoutObject
miniblink.dll!blink::Element::styleForLayoutObject
miniblink.dll!blink::Element::recalcOwnStyle
miniblink.dll!blink::Element::recalcStyle
miniblink.dll!blink::ContainerNode::recalc
miniblink.dll!blink::Element::recalcStyle
miniblink.dll!blink::ContainerNode::recalcChildStyle
miniblink.dll!blink::Element::recalcStyle
miniblink.dll!blink::ContainerNode::recalcChildStyle
miniblink.dll!blink::Element::recalcStyle
miniblink.dll!blink::ContainerNode::recalcChildStyle
miniblink.dll!blink::Element::recalcStyle
miniblink.dll!blink::ContainerNode::recalcChildStyle
miniblink.dll!blink::Element::recalcStyle
miniblink.dll!blink::ContainerNode::recalcChildStyle
miniblink.dll!blink::Element::recalcStyle
miniblink.dll!blink::Document::updateStyle
miniblink.dll!blink::Document::updateLayoutTree
miniblink.dll!blink::Document::updateLayoutTreeIfNeeded()
miniblink.dll!blink::Document::setFocusedElement
miniblink.dll!blink::FocusController::setFocusedElement
miniblink.dll!blink::EventHandler::handleMouseFocus这样，如果SpatialNavigationEnabled为true，大部分元素都拥有了focusable的能力。而blink的默认样式有一句
:focus {
outline: auto 5px -webkit-focus-ring-color
}所以会让元素拥有一个焦点框。
而焦点框会在LayoutObject::paintInvalidationReason里，
走到这句
if (styleRef().outlineStyleIsAuto())
return PaintInvalidationFocusRing;返回一个
PaintInvalidationFocusRing的刷新原因。
这个会导致整个layer被刷新。
如果网页很长，或者div很长的话，这个刷新有可能是全屏的。代价非常大。
搜了下这个settings，是为无障碍化设计的，貌似是用键盘上下左右键来控制焦点转移的。一般是默认关闭状态。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017年01月12日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读