Bug 193616
| Summary: | Web Inspector: Make completion popover faster by removing setInterval | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Nikita Vasilyev <nvasilyev> |
| Component: | Web Inspector | Assignee: | Nikita Vasilyev <nvasilyev> |
| Status: | ASSIGNED | ||
| Severity: | Normal | CC: | inspector-bugzilla-changes, webkit-bug-importer |
| Priority: | P4 | Keywords: | InRadar |
| Version: | WebKit Nightly Build | ||
| Hardware: | All | ||
| OS: | All | ||
Nikita Vasilyev
CompletionSuggestionsView.prototype.hideWhenElementMoves calls getBoundingClientRect() every 0.2 seconds.
getBoundingClientRect isn't terribly expensive:
console.time("getBoundingClientRect");
let clientRect = element.getBoundingClientRect();
console.timeEnd("getBoundingClientRect");
It was between 0.02ms and 0.07ms when adding a new property to <body> on webkit.org.
If it's possible, we should use IntersectionObserver instead.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Nikita Vasilyev
Unfortunately, I don't see how IntersectionObserver can be helpful here.
"The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element" - because one element has to be an ancestor of another, I don't see how it to make it work here.
---
There're libraries in the wild to detect resize events without timeouts. Perhaps it's worth investigating what they do.
http://marcj.github.io/css-element-queries/
Radar WebKit Bug Importer
<rdar://problem/49664005>
Nikita Vasilyev
The following cases need to be handled:
1. One of the parent elements scrolled.
Solution: listen "scroll" on every parent.
2. One of the parent elements resized.
Solution: use ResizeObserver on every parent.
3. One of the parent elements resized becomes invisible or gets detached from DOM. This happens when tab or sidebar panel changed.
Solution: Mutation Observers?
This is quite a lot of events and observers. I'm not sure it's worth it.