Comments (4)
Done in #59
from extendedcss.
It turned out that the overhead caused by processing the whole document at document start is quite substantial, e.g. on facebook.com. Since this is unavoidable, we should provide some mechanism for dividing styles processing into several chunks.
from extendedcss.
It appears that the performance problems are not due to the stylesheets scanning. Please investigate and fix it.
This data was recorded with https://gist.github.com/ameshkov/2d06530839ceefbe2027d95486ece1a3
ExtendedCss.query('div[id^="hyperfeed_story_id_"]:-abp-has(a[href="#"]:-abp-properties(content: "Sponsored"))')
VM10733:3243 StyleObserver initial processing: 1.155029296875ms
VM10733:4097 [ExtendedCss] Elapsed: 290830 μs.
4VM10733:99 {
"AsyncWrapper.prototype.runImmediately": {
"name": "AsyncWrapper.prototype.runImmediately",
"count": 16190,
"totalElapsed": 13.065000000011423,
"averageElapsed": 0.0008069796170482658,
"minElapsed": 0,
"maxElapsed": 0.13999999999941792,
"errors": 0
},
"AsyncWrapper.prototype.runAsap": {
"name": "AsyncWrapper.prototype.runAsap",
"count": 8095,
"totalElapsed": 142.24500000002354,
"averageElapsed": 0.017571957998767578,
"minElapsed": 0.009999999999308784,
"maxElapsed": 0.2900000000008731,
"errors": 0
},
"StyleObserver.getSelector": {
"name": "StyleObserver.getSelector",
"count": 8095,
"totalElapsed": 242.5949999999757,
"averageElapsed": 0.02996849907349916,
"minElapsed": 0.019999999998617568,
"maxElapsed": 1.3800000000001091,
"errors": 0
},
"Sizzle.selectors.pseudos.properties": {
"name": "Sizzle.selectors.pseudos.properties",
"count": 8095,
"totalElapsed": 259.0500000000038,
"averageElapsed": 0.03200123533045137,
"minElapsed": 0.020000000000436557,
"maxElapsed": 4.139999999999418,
"errors": 0
}
}
from extendedcss.
For documentations sake, reposting a comment #55 (comment).
All the performance concerns were caused by compilerCache being missed. Simply calling Sizzle.compile on certain selectors restores the performance of the previous version. This is looks like a bug of Sizzle, and it seems to be fixed in Sizzle's master branch.
from extendedcss.
Related Issues (20)
- [Feature request] Support for -abp-properties HOT 1
- Extended CSS rules with ':has(:contains())' do not work in Chrome 105 HOT 1
- Implement ':matches-css-first-line()' pseudo-class HOT 5
- Remove ':if()' and ':if-not()' pseudo-classes HOT 3
- Content loading looped while force using of ':has()' HOT 1
- Add 'remove-attr' and 'remove-class' style properties
- Fix ':has()' pseudo-class due to <forgiving-relative-selector-list> HOT 2
- Avoid limitation of ':not()' pseudo-class related to different DOM levels of comparing elements
- Avoid limitation of ':is()' pseudo-class related to different DOM levels of comparing elements
- 'element:has(child:contains(Text)) + peer' is returned as 'element + peer'
- Some rules with ':not(:has())' don't work correctly HOT 7
- Deprecate ':remove()' pseudo-class HOT 2
- Extended CSS rules do not work in mobile view set to 'iPad Air/Mini'
- Change 'IAffectedElement' — make 'content' optional
- Implement new pseudo-class ':others()' HOT 14
- Add ability to remove 'text' node HOT 2
- Pseudo-class combined with ':not()' does not work correctly HOT 2
- :has(+ selector) regression. HOT 7
- Rules with ':where()' do not work
- Selectors separated with , in ext-CSS part not working HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from extendedcss.