Contenu connexe Similaire à JS Fest 2018. Harry Roberts. FaCSSt: CSS & Performance Similaire à JS Fest 2018. Harry Roberts. FaCSSt: CSS & Performance (20) 16. Any idea how long to parse a
1MB stylesheet on a Moto G4?
30. Time(ms)
0
1,000
2,000
3,000
4,000
5,000
6,000
7,000
8,000
9,000
Regular Base64
48.16ms
88.33ms
7,950ms
774ms 2.02ms0.063ms
Parse First Paint Decode
Mobile
31. Key Findings
🖥 parsing was over 10× slower
📱 parsing was over 32× slower
🖥 first paint Base64 was 2.25× slower
📱 first paint was 10.27× slower
32. Key Findings
🖥 parsing was over 10× slower
📱 parsing was over 32× slower
🖥 first paint Base64 was 2.25× slower
📱 first paint was 10.27× slower
33. Key Findings
🖥 parsing was over 10× slower
📱 parsing was over 32× slower
🖥 first paint Base64 was 2.25× slower
📱 first paint was 10.27× slower
34. Key Findings
🖥 parsing was over 10× slower
📱 parsing was over 32× slower
🖥 first paint Base64 was 2.25× slower
📱 first paint was 10.27× slower
35. Key Findings
🖥 parsing was over 10× slower
📱 parsing was over 32× slower
🖥 first paint Base64 was 2.25× slower
📱 first paint was 10.27× slower
47. <link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="typography.css" />
<link rel="stylesheet" href="grid.css" />
<link rel="stylesheet" href="components.css" />
69. .nav > ul > li > a {}
.nav ul li a {}
Which is Faster?
70. .nav > ul > li > a {}
.nav ul li a {}
Which is Faster?
74. “
“Roughly 50% of the time used to
calculate the computed style for an
element is used to match selectors…”
— csswz.it/2GIs8l4
90. .btn {
display: inline-block;
padding: 1em 2em;
font: inherit;
cursor: pointer;
text-align: center;
vertical-align: middle;
}
.btn-primary {
@extend .btn;
background-color: green;
color: white;
}
.btn-secondary {
@extend .btn;
background-color: red;
color: white;
}
@mixin btn() {
display: inline-block;
padding: 1em 2em;
font: inherit;
cursor: pointer;
text-align: center;
vertical-align: middle;
}
.btn {
@include btn();
}
.btn-primary {
@include btn();
background-color: green;
color: white;
}
.btn-secondary {
@include btn();
background-color: red;
color: white;
}
@extend
20 LoC
Mixin
24 LoC
91. .btn, .btn-primary, .btn-secondary {
display: inline-block;
padding: 1em 2em;
font: inherit;
cursor: pointer;
text-align: center;
vertical-align: middle;
}
.btn-primary {
background-color: green;
color: white;
}
.btn-secondary {
background-color: red;
color: white;
}
.btn {
display: inline-block;
padding: 1em 2em;
font: inherit;
cursor: pointer;
text-align: center;
vertical-align: middle;
}
.btn-primary {
display: inline-block;
padding: 1em 2em;
font: inherit;
cursor: pointer;
text-align: center;
vertical-align: middle;
background-color: green;
color: white;
}
.btn-secondary {
display: inline-block;
padding: 1em 2em;
font: inherit;
cursor: pointer;
text-align: center;
vertical-align: middle;
background-color: red;
color: white;
}
@extend18 LoC
Mixin
30 LoC
92. .btn, .btn-primary, .btn-secondary {
display: inline-block;
padding: 1em 2em;
font: inherit;
cursor: pointer;
text-align: center;
vertical-align: middle;
}
.btn-primary {
background-color: green;
color: white;
}
.btn-secondary {
background-color: red;
color: white;
}
.btn {
display: inline-block;
padding: 1em 2em;
font: inherit;
cursor: pointer;
text-align: center;
vertical-align: middle;
}
.btn-primary {
display: inline-block;
padding: 1em 2em;
font: inherit;
cursor: pointer;
text-align: center;
vertical-align: middle;
background-color: green;
color: white;
}
.btn-secondary {
display: inline-block;
padding: 1em 2em;
font: inherit;
cursor: pointer;
text-align: center;
vertical-align: middle;
background-color: red;
color: white;
}
97. “
“My tests showed pretty conclusively that
mixins end up being better for network
performance than using @extend.
“The way gzip works means that we get better
savings even when our uncompresssed files are
substantially larger.”
— csswz.it/2jNxNMh
106. “
“Make CSS small, minify, compress,
load from the same hostname even (no DNS)
and inline, if small enough.”
— Stoyan Stefanov, csswz.it/2fYM2ei
112. <head>
<script>
var script = document.createElement('script');
script.src = "script.js";
document.getElementsByTagName('head')[0].appendChild(script);
</script>
<link rel="stylesheet" href="style.css" />
</head>
117. 1.Optimise your critical path
2.Keep blocking CSS to a minimum
3.Avoid Base64
4.@import is evil
5.So is @extend
6.Alphabetic CSS is better
7.Get your head straight
Basically…
118. 1.Optimise your critical path
2.Keep blocking CSS to a minimum
3.Avoid Base64
4.@import is evil
5.So is @extend
6.Alphabetic CSS is better
7.Get your head straight
Basically… Except for a
handful of exceptions
119. 1.Optimise your critical path
2.Keep blocking CSS to a minimum
3.Avoid Base64
4.@import is evil
5.So is @extend
6.Alphabetic CSS is better
7.Get your head straight
Basically…
For many
reasons other
than Performance
Except for a
handful of exceptions
120. 1.Optimise your critical path
2.Keep blocking CSS to a minimum
3.Avoid Base64
4.@import is evil
5.So is @extend
6.Alphabetic CSS is better
7.Get your head straight
Basically…
Only for
performance
For many
reasons other
than Performance
Except for a
handful of exceptions
