Indeed, fixing your CSS is mainly the last part where you would have a look when having performance issues.
But there a some rules which you should follow from the beginning to exclude those problems/searches from the start.
CSS-Attributes
Border-Radius
The border-radius attribute is one of a performance issues, because the browser needs to repaint the radius each time.
Box-Shadow
With CSS3 you can use box-shadows but like the border-radius this will cause performance issues.
Tip: If you need box-shadows maybe try an border with 1 or 2-pixel and an RGBA-Color:
border: 1px solid rgba(0, 0, 0, .14);
Tip: If you need box-shadows maybe try an border with 1 or 2-pixel and an RGBA-Color:
border: 1px solid rgba(0, 0, 0, .14);
Opacity
If you need to use opacity to show or hide an element, this attribute will take care about.
But if you're using opacity to paint a color with an alpha-channel rather use rgba(0,0,0,0.5)
animation/-webkit-animation
Like written in my other posts, I don't like animation much because they are a heavy performance-bottleneck if used wrong.
So my advice: Use a professional framework, use it very rarely or like me: don't use it.
So my advice: Use a professional framework, use it very rarely or like me: don't use it.
Special IE has much problems with animation.
If you're using animation the will-change attribute would be one attractive feature for you.
will-change
Use the will-change attribute for changing elements on your page/app.
Sadly IE doesn't support this tag: http://caniuse.com/#search=will-change
Sadly IE doesn't support this tag: http://caniuse.com/#search=will-change
For more information about this tag have a look here: https://developer.mozilla.org/de/docs/Web/CSS/will-change
background-linear-gradient
Same as border-radius or box-shadow if not needed, don't use linear-gradient.
Color
Color attributes are not a real performance problem, but try not to write:
color:black;
Instead use:
color: #000;
or
color: rgb(0,0,0);
Because this # or rbg will be interpreted faster then black.
So that isn't so special but you should avoid selectors like:
<element-name/>
element-name{
color:#000;
}
Rather use:
<div class="black-color" />
.black-color
{
color:#000;
}
Because this # or rbg will be interpreted faster then black.
CSS-Selectors
CSS-Selectors come to a common problem while using jQuery, because everything can be easily accessed, but even here, you can tweak your CSS.#ID
This one is the fastest selector.
.class
This one is closing up the #ID.
- element-name
- :first
- :hover
- :active
- :not
And some more of this checks, use them wisely and not globaly on all elements.
HTML-5-Elements
After HTML5 introduced own element names I came across the problem that I used element-names instead of classes, which headed into a performance problem, becaused I used them too much.
Specially on IE I saw a performance increase of 1 second after my changes.
This problem will likely show up if you're using a JS/CSS-Framework with custom elements.
So if you don't need to framework for this, just create an own class and style your div element.
Keep it simple!
Specially on IE I saw a performance increase of 1 second after my changes.
This problem will likely show up if you're using a JS/CSS-Framework with custom elements.
So if you don't need to framework for this, just create an own class and style your div element.
Keep it simple!
Sample:
<element-name/>
element-name{
color:#000;
}
Rather use:
<div class="black-color" />
.black-color
{
color:#000;
}
CSS global tips
Everyone has seen them already, but for the sake of completeness:
The removal of the 80 000 lines of unneeded CSS let my app start 1-2 seconds faster, and the rendering got speed up aswell.
- Avoid big CSS-Rules
- Avoid big CSS-Files
- Avoid unnecessary CSS-Selectors
- Avoid animation
- Avoid big CSS-Selectors
- Avoid multiple CSS-Files (concat them!)
- Avoid unminified CSS-Files (minify them!)
- Avoid unnecessary CSS-Frameworks
This should be common rules. After I sorted out the CSS I didn't even use on my Angular-Project I dismissed more then 80 000 lines of generated CSS.
The removal of the 80 000 lines of unneeded CSS let my app start 1-2 seconds faster, and the rendering got speed up aswell.
0 Kommentare:
Kommentar veröffentlichen
Hinweis: Nur ein Mitglied dieses Blogs kann Kommentare posten.