Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

improve transition performance #670

Merged
merged 4 commits into from
Jun 25, 2017
Merged

improve transition performance #670

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
71f1ac9
improve transition performance
Rich-Harris Jun 24, 2017
7a877b5
use bitshifting for magic perf boost
Rich-Harris Jun 24, 2017
d622bc3
use 31 instead of 33
Rich-Harris Jun 25, 2017
21a8b1d
fix tests
Rich-Harris Jun 25, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/parse/utils/hash.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,6 @@ export default function hash(str: string): number {
let hash = 5381;
let i = str.length;

while (i--) hash = (hash * 33) ^ str.charCodeAt(i);
while (i--) hash = ((hash << 5) - hash) ^ str.charCodeAt(i);
return hash >>> 0;
}
84 changes: 56 additions & 28 deletions src/shared/transitions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,37 +4,31 @@ export function linear(t) {
return t;
}

export function generateKeyframes(
export function generateRule(
a,
b,
delta,
duration,
ease,
fn,
node,
style
fn
) {
var id = '__svelte' + ~~(Math.random() * 1e9); // TODO make this more robust
var keyframes = '@keyframes ' + id + '{\n';
var keyframes = '{\n';

for (var p = 0; p <= 1; p += 16.666 / duration) {
var t = a + delta * ease(p);
keyframes += p * 100 + '%{' + fn(t) + '}\n';
}

keyframes += '100% {' + fn(b) + '}\n}';
style.textContent += keyframes;
return keyframes + '100% {' + fn(b) + '}\n}';
}

document.head.appendChild(style);
// https://github.com/darkskyapp/string-hash/blob/master/index.js
export function hash(str) {
var hash = 5381;
var i = str.length;

node.style.animation = (node.style.animation || '')
.split(',')
.filter(function(anim) {
// when introing, discard old animations if there are any
return anim && (delta < 0 || !/__svelte/.test(anim));
})
.concat(id + ' ' + duration + 'ms linear 1 forwards')
.join(', ');
while (i--) hash = ((hash << 5) - hash) ^ str.charCodeAt(i);
return hash >>> 0;
}

export function wrapTransition(node, fn, params, intro, outgroup) {
Expand All @@ -43,9 +37,10 @@ export function wrapTransition(node, fn, params, intro, outgroup) {
var ease = obj.easing || linear;
var cssText;

// TODO share <style> tag between all transitions?
if (obj.css) {
if (obj.css && !transitionManager.stylesheet) {
var style = document.createElement('style');
document.head.appendChild(style);
transitionManager.stylesheet = style.sheet;
}

if (intro) {
Expand Down Expand Up @@ -89,16 +84,26 @@ export function wrapTransition(node, fn, params, intro, outgroup) {

if (obj.css) {
if (obj.delay) node.style.cssText = cssText;
generateKeyframes(

program.rule = generateRule(
program.a,
program.b,
program.delta,
program.duration,
ease,
obj.css,
node,
style
obj.css
);

transitionManager.addRule(program.rule, program.name = '__svelte_' + hash(program.rule));

node.style.animation = (node.style.animation || '')
.split(', ')
.filter(function(anim) {
// when introing, discard old animations if there are any
return anim && (program.delta < 0 || !/__svelte/.test(anim));
})
.concat(program.name + ' ' + duration + 'ms linear 1 forwards')
.join(', ');
}

this.program = program;
Expand All @@ -113,16 +118,17 @@ export function wrapTransition(node, fn, params, intro, outgroup) {
if (obj.tick) obj.tick(this.t);
},
done: function() {
this.t = this.program.b;
var program = this.program;
this.t = program.b;
if (obj.tick) obj.tick(this.t);
if (obj.css) document.head.removeChild(style);
this.program.callback();
this.program = null;
if (obj.css) transitionManager.deleteRule(node, program.name);
program.callback();
program = null;
this.running = !!this.pending;
},
abort: function() {
if (obj.tick) obj.tick(1);
if (obj.css) document.head.removeChild(style);
if (obj.css) transitionManager.deleteRule(node, this.program.name);
this.program = this.pending = null;
this.running = false;
}
Expand All @@ -133,6 +139,8 @@ export var transitionManager = {
running: false,
transitions: [],
bound: null,
stylesheet: null,
activeRules: {},

add: function(transition) {
this.transitions.push(transition);
Expand All @@ -143,6 +151,13 @@ export var transitionManager = {
}
},

addRule: function(rule, name) {
if (!this.activeRules[name]) {
this.activeRules[name] = true;
this.stylesheet.insertRule('@keyframes ' + name + ' ' + rule, this.stylesheet.cssRules.length);
}
},

next: function() {
this.running = false;

Expand Down Expand Up @@ -170,6 +185,19 @@ export var transitionManager = {

if (this.running) {
requestAnimationFrame(this.bound || (this.bound = this.next.bind(this)));
} else if (this.stylesheet) {
var i = this.stylesheet.cssRules.length;
while (i--) this.stylesheet.deleteRule(i);
this.activeRules = {};
}
},

deleteRule: function(node, name) {
node.style.animation = node.style.animation
.split(', ')
.filter(function(anim) {
return anim.slice(0, name.length) !== name;
})
.join(', ');
}
};
2 changes: 1 addition & 1 deletion test/css/samples/basic/expected.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@

div[svelte-281576708], [svelte-281576708] div {
div[svelte-2278551596], [svelte-2278551596] div {
color: red;
}
3 changes: 3 additions & 0 deletions test/css/samples/cascade-false-global-keyframes/_config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default {
cascade: false
};
4 changes: 2 additions & 2 deletions test/css/samples/cascade-false-global-keyframes/expected.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@
100% { color: blue; }
}

[svelte-2486527405].animated, [svelte-2486527405] .animated {
.animated[svelte-90785995] {
animation: why 2s;
}

[svelte-2486527405].also-animated, [svelte-2486527405] .also-animated {
.also-animated[svelte-90785995] {
animation: not-defined-here 2s;
}
3 changes: 3 additions & 0 deletions test/css/samples/cascade-false-keyframes/_config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default {
cascade: false
};
8 changes: 4 additions & 4 deletions test/css/samples/cascade-false-keyframes/expected.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@

@keyframes svelte-776829126-why {
@keyframes svelte-1647166666-why {
0% { color: red; }
100% { color: blue; }
}

[svelte-776829126].animated, [svelte-776829126] .animated {
animation: svelte-776829126-why 2s;
.animated[svelte-1647166666] {
animation: svelte-1647166666-why 2s;
}

[svelte-776829126].also-animated, [svelte-776829126] .also-animated {
.also-animated[svelte-1647166666] {
animation: not-defined-here 2s;
}
6 changes: 3 additions & 3 deletions test/css/samples/cascade-false-pseudo-element/expected.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@

span[svelte-583610229]::after {
span[svelte-2146001331]::after {
content: 'i am a pseudo-element';
}

span[svelte-583610229]:first-child {
span[svelte-2146001331]:first-child {
color: red;
}

span[svelte-583610229]:last-child::after {
span[svelte-2146001331]:last-child::after {
color: blue;
}
6 changes: 3 additions & 3 deletions test/css/samples/cascade-false/expected.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@

div[svelte-4161687011] {
div[svelte-781920915] {
color: red;
}

div.foo[svelte-4161687011] {
div.foo[svelte-781920915] {
color: blue;
}

.foo[svelte-4161687011] {
.foo[svelte-781920915] {
font-weight: bold;
}
6 changes: 3 additions & 3 deletions test/css/samples/keyframes/expected.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@

@keyframes svelte-4112859982-why {
@keyframes svelte-2931302006-why {
0% { color: red; }
100% { color: blue; }
}

[svelte-4112859982].animated, [svelte-4112859982] .animated {
animation: svelte-4112859982-why 2s;
[svelte-2931302006].animated, [svelte-2931302006] .animated {
animation: svelte-2931302006-why 2s;
}
2 changes: 1 addition & 1 deletion test/css/samples/media-query/expected.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@

@media (min-width: 400px) {
[svelte-2352010302].large-screen, [svelte-2352010302] .large-screen {
[svelte-411199634].large-screen, [svelte-411199634] .large-screen {
display: block;
}
}
8 changes: 4 additions & 4 deletions test/js/samples/collapses-text-around-comments/expected-bundle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,8 +145,8 @@ var template = (function () {

function add_css () {
var style = createElement( 'style' );
style.id = "svelte-3842350206-style";
style.textContent = "\n\tp[svelte-3842350206], [svelte-3842350206] p {\n\t\tcolor: red;\n\t}\n";
style.id = "svelte-3590263702-style";
style.textContent = "\n\tp[svelte-3590263702], [svelte-3590263702] p {\n\t\tcolor: red;\n\t}\n";
appendNode( style, document.head );
}

Expand All @@ -161,7 +161,7 @@ function create_main_fragment ( state, component ) {
},

hydrate: function ( nodes ) {
setAttribute( p, 'svelte-3842350206', '' );
setAttribute( p, 'svelte-3590263702', '' );
},

mount: function ( target, anchor ) {
Expand Down Expand Up @@ -198,7 +198,7 @@ function SvelteComponent ( options ) {
this._yield = options._yield;

this._torndown = false;
if ( !document.getElementById( "svelte-3842350206-style" ) ) add_css();
if ( !document.getElementById( "svelte-3590263702-style" ) ) add_css();

this._fragment = create_main_fragment( this._state, this );

Expand Down
8 changes: 4 additions & 4 deletions test/js/samples/collapses-text-around-comments/expected.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ var template = (function () {

function add_css () {
var style = createElement( 'style' );
style.id = "svelte-3842350206-style";
style.textContent = "\n\tp[svelte-3842350206], [svelte-3842350206] p {\n\t\tcolor: red;\n\t}\n";
style.id = "svelte-3590263702-style";
style.textContent = "\n\tp[svelte-3590263702], [svelte-3590263702] p {\n\t\tcolor: red;\n\t}\n";
appendNode( style, document.head );
}

Expand All @@ -26,7 +26,7 @@ function create_main_fragment ( state, component ) {
},

hydrate: function ( nodes ) {
setAttribute( p, 'svelte-3842350206', '' );
setAttribute( p, 'svelte-3590263702', '' );
},

mount: function ( target, anchor ) {
Expand Down Expand Up @@ -63,7 +63,7 @@ function SvelteComponent ( options ) {
this._yield = options._yield;

this._torndown = false;
if ( !document.getElementById( "svelte-3842350206-style" ) ) add_css();
if ( !document.getElementById( "svelte-3590263702-style" ) ) add_css();

this._fragment = create_main_fragment( this._state, this );

Expand Down
6 changes: 3 additions & 3 deletions test/server-side-rendering/samples/styles-nested/_actual.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@

div[svelte-4188175681], [svelte-4188175681] div {
div[svelte-1408461649], [svelte-1408461649] div {
color: red;
}


div[svelte-146600313], [svelte-146600313] div {
div[svelte-54999591], [svelte-54999591] div {
color: green;
}


div[svelte-1506185237], [svelte-1506185237] div {
div[svelte-2385185803], [svelte-2385185803] div {
color: blue;
}
10 changes: 5 additions & 5 deletions test/server-side-rendering/samples/styles-nested/_actual.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div svelte-4188175681>red</div>
<div svelte-146600313>green: foo</div>
<div svelte-1506185237>blue: foo</div>
<div svelte-146600313>green: bar</div>
<div svelte-1506185237>blue: bar</div>
<div svelte-1408461649>red</div>
<div svelte-54999591>green: foo</div>
<div svelte-2385185803>blue: foo</div>
<div svelte-54999591>green: bar</div>
<div svelte-2385185803>blue: bar</div>
21 changes: 12 additions & 9 deletions test/server-side-rendering/samples/styles-nested/_expected.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
div[svelte-4188175681], [svelte-4188175681] div {
color: red;
}

div[svelte-146600313], [svelte-146600313] div {
color: green;
}
div[svelte-1408461649], [svelte-1408461649] div {
color: red;
}

div[svelte-1506185237], [svelte-1506185237] div {
color: blue;
}

div[svelte-54999591], [svelte-54999591] div {
color: green;
}


div[svelte-2385185803], [svelte-2385185803] div {
color: blue;
}
10 changes: 5 additions & 5 deletions test/server-side-rendering/samples/styles-nested/_expected.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div svelte-4188175681>red</div>
<div svelte-146600313>green: foo</div>
<div svelte-1506185237>blue: foo</div>
<div svelte-146600313>green: bar</div>
<div svelte-1506185237>blue: bar</div>
<div svelte-1408461649>red</div>
<div svelte-54999591>green: foo</div>
<div svelte-2385185803>blue: foo</div>
<div svelte-54999591>green: bar</div>
<div svelte-2385185803>blue: bar</div>
2 changes: 1 addition & 1 deletion test/server-side-rendering/samples/styles/_actual.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@

div[svelte-281576708], [svelte-281576708] div {
div[svelte-2278551596], [svelte-2278551596] div {
color: red;
}
Loading