Skip to content

Commit

Permalink
Implement #588
Browse files Browse the repository at this point in the history 
* Performance Improvement with Keyed EachBlock
  * All DOM nodes for existing data are reused between changes to state
  * Speed up Keyed Swap Rows Benchmark
    * https://github.com/krausest/js-framework-benchmark
* Fixed Build
* Introduced jsdom.VirtualConsole
  • Loading branch information
@btakita
btakita committed Mar 18, 2018
1 parent baff9bc commit 66e4df1
Show file tree
Hide file tree
Showing 4 changed files with 73 additions and 102 deletions.
168 changes: 68 additions & 100 deletions src/generators/nodes/EachBlock.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import deindent from '../../utils/deindent';
import Node from './shared/Node';
import ElseBlock from './ElseBlock';
import { DomGenerator } from '../dom/index';
import Block from '../dom/Block';
import createDebuggingComment from '../../utils/createDebuggingComment';

Expand Down Expand Up @@ -254,6 +253,9 @@ export default class EachBlock extends Node {
const head = block.getUniqueName(`${each}_head`);
const last = block.getUniqueName(`${each}_last`);
const expected = block.getUniqueName(`${each}_expected`);
const keep = block.getUniqueName(`${each}_keep`);
const mounts = block.getUniqueName(`${each}_mounts`);
const next_iteration = block.getUniqueName(`${each}_next_iteration`);

block.addVariable(lookup, `@blankObject()`);
block.addVariable(head);
Expand Down Expand Up @@ -317,142 +319,108 @@ export default class EachBlock extends Node {
`);

const dynamic = this.block.hasUpdateMethod;

let destroy;
let fn_destroy;
if (this.block.hasOutroMethod) {
const fn = block.getUniqueName(`${each}_outro`);
fn_destroy = block.getUniqueName(`${each}_outro`);
block.builders.init.addBlock(deindent`
function ${fn}(iteration) {
function ${fn_destroy}(iteration) {
iteration.o(function() {
iteration.u();
iteration.d();
${lookup}[iteration.key] = null;
});
}
`);

destroy = deindent`
while (${expected}) {
${fn}(${expected});
${expected} = ${expected}.next;
}
for (#i = 0; #i < discard_pile.length; #i += 1) {
if (discard_pile[#i].discard) {
${fn}(discard_pile[#i]);
}
}
`;
} else {
const fn = block.getUniqueName(`${each}_destroy`);
fn_destroy = block.getUniqueName(`${each}_destroy`);
block.builders.init.addBlock(deindent`
function ${fn}(iteration) {
iteration.u();
function ${fn_destroy}(iteration) {
var first = iteration.first
if (first && first.parentNode) {
iteration.u();
}
iteration.d();
${lookup}[iteration.key] = null;
}
`);

destroy = deindent`
while (${expected}) {
${fn}(${expected});
${expected} = ${expected}.next;
}
for (#i = 0; #i < discard_pile.length; #i += 1) {
var ${iteration} = discard_pile[#i];
if (${iteration}.discard) {
${fn}(${iteration});
}
}
`;
}
const destroy = deindent`
${iteration} = ${head};
while(${iteration}) {
if (!${keep}[${iteration}.key]) {
${fn_destroy}(${iteration});
}
${iteration} = ${iteration}.next;
}
`;

block.builders.update.addBlock(deindent`
var ${each_block_value} = ${snippet};
var ${expected} = ${head};
var ${last} = null;
var rendered = {};
var all = {};
var each_all = ${head};
while(each_all) {
all[each_all.key] = each_all;
each_all = each_all.next;
}
var ${keep} = {};
var ${mounts} = {};
var ${next_iteration} = null;
for (#i = 0; #i < ${each_block_value}.${length}; #i += 1) {
var ${key} = ${each_block_value}[#i].${this.key};
var ${iteration} = ${lookup}[${key}];
var next_data = ${each_block_value}[#i+1];
var next = next_data && ${lookup}[next_data.${this.key}];
var ${this.each_context} = @assign({}, state, {
${this.contextProps.join(',\n')}
});
${dynamic &&
`if (${iteration}) ${iteration}.p(changed, ${this.each_context});`}
if (${expected}) {
if (${key} === ${expected}.key) {
${expected} = ${expected}.next;
} else {
if (${iteration}) {
var next_data = ${each_block_value}[#i+1];
var next = next_data && ${lookup}[next_data.id];
var first = ${iteration}.first;
var first_next = next && next.first;
///insertNode(first, tbody, first_next);
${updateMountNode}.insertBefore(first, first_next);
${expected} = next;
${iteration}.next = ${expected};
var prev_data = ${each_block_value}[#i-1];
var prev = prev_data && ${lookup}[prev_data.id];
if (prev) {
prev.next = ${iteration};
}
} else {
// key is being inserted
${iteration} = ${lookup}[${key}] = ${create_each_block}(#component, ${key}, ${this.each_context});
${iteration}.c();
${iteration}.${mountOrIntro}(${updateMountNode}, ${expected}.first);
${expected}.last = ${iteration};
${iteration}.next = ${expected};
}
}
if (${expected} && (${key} === ${expected}.key)) {
var first = ${iteration} && ${iteration}.first;
var parentNode = first && first.parentNode
if (!parentNode || (${iteration} && ${iteration}.next) != next) ${mounts}[${key}] = ${iteration};
${expected} = ${iteration}.next;
} else if (${iteration}) {
${mounts}[${key}] = ${iteration};
${expected} = ${iteration}.next;
} else {
// we're appending from this point forward
if (${iteration}) {
${iteration}.next = null;
${iteration}.m(${updateMountNode}, ${anchor});
} else {
${iteration} = ${lookup}[${key}] = ${create_each_block}(#component, ${key}, ${this.each_context});
${iteration}.c();
${iteration}.${mountOrIntro}(${updateMountNode}, ${anchor});
}
// key is being inserted
${iteration} = ${lookup}[${key}] = ${create_each_block}(#component, ${key}, ${this.each_context});
${iteration}.c();
${mounts}[${key}] = ${iteration};
}
if (${iteration}) {
rendered[${iteration}.key] = ${iteration};
}
if (${last}) ${last}.next = ${iteration};
${iteration}.last = ${last};
${this.block.hasIntroMethod && `${iteration}.i(${updateMountNode}, ${anchor});`}
${lookup}[${key}] = ${iteration};
${keep}[${iteration}.key] = ${iteration};
${last} = ${iteration};
}
if (${last}) ${last}.next = null;
for (var key_all in all) {
if (!rendered[key_all]) all[key_all].d();
}
${destroy}
// Work backwards due to DOM api having insertBefore
for (#i = ${each_block_value}.${length} - 1; #i >= 0; #i -= 1) {
var data = ${each_block_value}[#i];
var ${key} = data.${this.key};
${iteration} = ${lookup}[${key}];
if (${mounts}[${key}]) {
var anchor;
${this.block.hasOutroMethod
? deindent`
var key_next_iteration = ${next_iteration} && ${next_iteration}.key;
var iteration_anchor = ${iteration}.next;
var key_anchor;
do {
anchor = iteration_anchor && iteration_anchor.first;
iteration_anchor = iteration_anchor && iteration_anchor.next;
key_anchor = iteration_anchor && iteration_anchor.key;
} while(iteration_anchor && key_anchor != key_next_iteration && !${keep}[key_anchor])`
: deindent`
anchor = ${next_iteration} && ${next_iteration}.first;
` }
${mounts}[${key}].${mountOrIntro}(${updateMountNode}, anchor);
}
${iteration}.next = ${next_iteration};
if (${next_iteration}) ${next_iteration}.last = ${iteration};
${next_iteration} = ${iteration};
}
${head} = ${lookup}[${each_block_value}[0] && ${each_block_value}[0].${this.key}];
`);

Expand Down
1 change: 0 additions & 1 deletion src/shared/transitions.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { assign, noop } from './utils.js';
import { createElement } from './dom.js';

export function linear(t) {
Expand Down
4 changes: 3 additions & 1 deletion test/helpers.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import jsdom from 'jsdom';
import { JSDOM } from 'jsdom';
import assert from 'assert';
import glob from 'glob';
Expand Down Expand Up @@ -45,7 +46,8 @@ export function tryToReadFile(file) {
}
}

const { window } = new JSDOM('<main></main>');
export const virtualConsole = new jsdom.VirtualConsole();
const { window } = new JSDOM('<main></main>', {virtualConsole});
global.document = window.document;

export function env() {
Expand Down
2 changes: 2 additions & 0 deletions test/runtime/samples/each-block-keyed-random-permute/_config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@ export default {
test( 'g' );
test( '' );
test( 'abc' );
test( 'duqbmineapjhtlofrskcg' );
test( 'hdnkjougmrvftewsqpailcb' );

// then, we party
for ( let i = 0; i < 100; i += 1 ) test( permute() );
Expand Down

0 comments on commit 66e4df1

Please sign in to comment.