Comments (6)
The main reason that we use a single <style>
tag is that IE 9 doesn't support more than 31 <style>
tags in the document: #6 There's a link to a jsperf in that issue
I think you are correct, the browser probably has to re-parse the whole CSS string. We add new TextNode
s to our single <style>
tag, which is maybe faster than setting innerText
or something though. We also do some buffering internally so that we probably only write to the <style>
tag once per render, not once per call to css()
.
As far as comparing to jss
, Aphrodite's interface is pretty different. It lets you mix many styles from different sources, instead of having to declare up-front which ones you want merged. Also, aphrodite only generates CSS for the styles that you actually use, which is nice in general but especially a boon if you're doing server-side rendering (since it won't generate CSS for elements that you don't use).
Hopefully this answers your questions, feel free to re-open if I missed something.
from aphrodite.
A problem I can see with aphrodite's approach is that writes to the style element will become slower with every added rule. If at some point, when all styles are rendered, lets say 10kb of styles, I add one more rule, it will create a CSS string with all previous styles + the new one and insert it into style element. Correct me if I am wrong.
The problem is not just parsing of that CSS string, but also that CSSRule instances are not going to be reused.
from aphrodite.
Thank you for your answer.
Yes I have heard of a limit in IE9, that is bad. JSS needs a legacy rendering mode for IE9.
only generates CSS for the styles that you actually use
This is probably not much of profit when rendering at runtime. The moment user clicks a button and you render an element that uses style rule which is not rendered, you are doing the whole overhead of rerendering the entire style sheet just to add for e.g. one rule to the style sheet. This is post probably performance drawback than optimization.
However I agree that server-side rendering will benefit from this. As it renders just one state for each component. I am very curious how much bandwidth this can safe! Can you generate some stats on the code base you have?
I think you are correct, the browser probably has to re-parse the whole CSS string.
Of course they will if you overwrite the entire sheet.
I saw this jsperf bench: http://jsperf.com/append-to-style-vs-create-new-style
-
I am wondering what happens if you use insertRule/addRule api. I can't add it because jsperf instantly classifies me as a robot. (which I probably am, but how the hell do they know ...)
var style = document.createElement("style"); style.setAttribute("data-test", "true"); document.head.appendChild(style); var sheet = style.sheet || style.styleSheet; var cssRules = sheet.cssRules || sheet.rules; for (var i = 0; i < 500; i++) { var selector = ".test-" + i; var style = "{ color: red; font-size: 20px; }"; var nextIndex = cssRules.length; if (sheet.insertRule) sheet.insertRule(selector + style, nextIndex); else sheet.addRule(selector, style, nextIndex); } elem.outerWidth;
-
This bench is not quite correct for aphrodite because it does not consider the buffering. This means that there is no inserting of text nodes for each rule. When a text node inserts a bunch of rules at once, this might be a good thing.
from aphrodite.
I am very curious how much bandwidth this can safe! Can you generate some stats on the code base you have?
I don't have these offhand, but I'll look into it. Unfortunately, most of the things that we're using aphrodite styles for were written from scratch with them, so we don't have anything to compare that to.
I am wondering what happens if you use insertRule/addRule api.
That API looks really interesting! That could definitely help with performance, I'll check it out.
from aphrodite.
I don't have these offhand, but I'll look into it. Unfortunately, most of the things that we're using aphrodite styles for were written from scratch with them, so we don't have anything to compare that to.
You could log the rules used during rendering and then log entire styles objects used during the same rendering. Like turn on and off the cherry picking of rules and compare the sizes.
from aphrodite.
Also you might be interested in cssinjs/jss#204
from aphrodite.
Related Issues (20)
- Typescript typings don't include flushToStyleTag
- Cant get height of Aphrodite element HOT 1
- Add paddingHorizontal, paddingVertical, etc
- Doing a descendant style with aphrodite
- Make object types explicitly inexact to support projects using flow's exact_by_default option
- Support array for css definition
- Garbage collection/stale styles
- About the type definition issue on StyleDeclarationMap HOT 2
- Option to only use insertRule in certain environments
- Update and expose flow? HOT 2
- Stylesheet.create does not support strict TypeScript type checking or intellisense HOT 3
- Is Aphrodite still actively maintained HOT 6
- How to load ESM from a CDN? (development without build) HOT 1
- how can i do this compatible?
- Replacing componentWillReceiveProps react lifecycle method with componentDidUpdate HOT 1
- how to prevent aphrodite from adding !important? HOT 2
- Handling multiple selectors
- how to target classname in aphrodite HOT 2
- How do I make the static code of css exist in the rendered style?
- Aphrodite support for CSP
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 aphrodite.