Javascript i wydajność - czy to się spina?

JAVASCRIPT I WYDAJNOŚĆ
TO SIĘ SPINA?

AGENDA
01 Wprowadzenie
02 Restrykcje są cool
03 Po co się powtarzać?
04 Jeśli, a co jeśli nie?
05 Za dużo gadam
06 Przesuń to, przesuń tamto
07 TL;DR

GLOBALDIGITALAGENCY
1,900+EMPLOYEES
ATLANTA
BEIJING
BOGOTÁ
BOSTON
CAPE TOWN
CHICAGO
GUANGZHOU
JAKARTA
JOHANNESBURG
KALAMAZOO
KANSAS CITY
KRAKOW
LONDON
MILAN
MUMBAI
NEW YORK
SÃO PAULO
SEATTLE
SHANGHAI
SINGAPORE
SYDNEY
TOKYO
WARSAW
WHITE SALMON

PRZYKŁADOWY KOD - ODWROTNA NOTACJA POLSKA
for (let i = 0; i < 10000; i++) {
let stack = [];
let str = '12 2 3 4 * 10 5 / + * +';
str = str.split(" ");
let output = [];
let currentOp = [];
let num = 0;
let string;
for (let i in str) {
num = parseInt(str[i]);
if (isNaN(num)) {
string = num.toString();
stack.push(str[i]);
if (str.length > 0) {
if (isNaN(str[i])) {
output.push(stack.pop());
currentOp = [];
for (let i = 0; i < 3; i++) {
currentOp.push(output.pop());
this.popped = currentOp.reverse();
let x = currentOp[0];
let y = currentOp[2];
this.result = 0;
if (currentOp[1] === "*") { result = x * y }
else if (currentOp[1] === "/") { result = x / y }
else if (currentOp[1] === "-") { result = x - y }
else if (currentOp[1] === "+") { result = x + y }
else if (currentOp[1] === "^") { result = Math.pow(x, y) }
}
output.push(result);
}
}
} else {
output.push(num);
}
}
}

for (let i = 0; i < 10000; i++) {
let stack = [];
let str = '12 2 3 4 * 10 5 / + * +';
let output = [];
let currentOp = [];
let num = 0;
let string;
if (isNaN(num)) {
stack.push(str[i]);
currentOp = [];
for (let i = 0; i < 3; i++) {
this.result = 0;
}
}
}
} else {
output.push(num);
}
}
}
(2+3)*5
2 3 + 5 *
w odwrotnej
notacji polskiej

for (let i = 0; i < 10000; i++) {
let stack = [];
let str = '12 2 3 4 * 10 5 / + * +';
let output = [];
let currentOp = [];
let num = 0;
let string;
if (isNaN(num)) {
stack.push(str[i]);
currentOp = [];
for (let i = 0; i < 3; i++) {
this.result = 0;
}
}
}
} else {
output.push(num);
}
}
}
(2+3)*5
2 3 + 5 *
w odwrotnej
notacji polskiej
75 ms
~13fps

ODWROTNA NOTACJA POLSKA
for (let i = 0; i < 10000; i++) {
let stack = [];
let str = '12 2 3 4 * 10 5 / + * +';
let output = [];
let currentOp = [];
let num = 0;
let string;
if (isNaN(num)) {
stack.push(str[i]);
currentOp = [];
for (let i = 0; i < 3; i++) {
this.result = 0;
}
}
}
} else {
output.push(num);
}
}
}

for (let i = 0; i < 10000; i++) {
let stack = [];
let str = '12 2 3 4 * 10 5 / + * +';
let output = [];
let currentOp = [];
let num = 0;
let string;
if (isNaN(num)) {
stack.push(str[i]);
currentOp = [];
for (let i = 0; i < 3; i++) {
this.result = 0;
}
}
}
} else {
output.push(num);
}
}
}
STRICT MODE
’use strict’;

’use strict’;
for (let i = 0; i < 10000; i++) {
let stack = [];
let str = '12 2 3 4 * 10 5 / + * +';
let output = [];
let currentOp = [];
let num = 0;
let string;
if (isNaN(num)) {
stack.push(str[i]);
currentOp = [];
for (let i = 0; i < 3; i++) {
this.result = 0;
}
}
}
} else {
output.push(num);
}
}
}

’use strict’;
for (let i = 0; i < 10000; i++) {
let stack = [];
let str = '12 2 3 4 * 10 5 / + * +';
let output = [];
let currentOp = [];
let num = 0;
let string;
if (isNaN(num)) {
stack.push(str[i]);
currentOp = [];
for (let i = 0; i < 3; i++) {
this.result = 0;
}
}
}
} else {
output.push(num);
}
}
}
REFACTORING ❤

’use strict’;
for (let i = 0; i < 10000; i++) {
let numArray = [];
let input = '2 7 + 3 / 14 3 - 4 * + 2 /';
let toBeInterpeted = input.split(' ');
let isOperator = (val) => {
if (val == '*' || val == '/' || val == '^' || val == '+' || val == '-') { return true; }
return false;
}
let performOperation = (symbol, val2, val1) => {
switch(symbol) {
case '*':
return val1 * val2;
case '/':
return val1 / val2;
case '+':
return +val1 + +val2;
case '-':
return +val1 - +val2;
case '^':
return Math.pow(val1, val2);
}
}
for(let i = 0; i < toBeInterpeted.length; i++) {
let num = toBeInterpeted[i];
let isOperatorSymbol = isOperator(num);
if (isOperatorSymbol) {
let value2 = numArray.pop();
numArray.push(performOperation(num, value1, value2));
} else {
numArray.push(num);
}
}
}
DELEGACJA ZADAŃ DO DEDYKOWANYCH FUNKCJI

DELEGACJA ZADAŃ DO DEDYKOWANYCH FUNKCJI - PORÓWNANIE
13.72 ops/s 41.59 ops/s

WYŻSZOŚĆ IF/ELSE
switch(symbol) {
case '*':
return val1 * val2;
case '/':
return val1 / val2;
case '+':
case '-':
case '^':
}
}
return false;
}
let numArray = [];
let input = '2 7 + 3 / 14 3 - 4 * + 2 /';
’use strict’;
for (let i = 0; i < 10000; i++) {
} else {
numArray.push(num);
}
}
}

WYŻSZOŚĆ IF/ELSE
switch(symbol) {
case '*':
return val1 * val2;
case '/':
return val1 / val2;
case '+':
case '-':
case '^':
}
}
return false;
}
let numArray = [];
let input = '2 7 + 3 / 14 3 - 4 * + 2 /';
’use strict’;
for (let i = 0; i < 10000; i++) {
} else {
numArray.push(num);
}
}
}
var x = true;
var y = false;
switch(true) {
case (x || y):
//…
}

WYŻSZOŚĆ IF/ELSE
return false;
}
let numArray = [];
let input = '2 7 + 3 / 14 3 - 4 * + 2 /';
’use strict’;
for (let i = 0; i < 10000; i++) {
} else {
numArray.push(num);
}
}
}

WYŻSZOŚĆ IF/ELSE
return false;
}
let numArray = [];
let input = '2 7 + 3 / 14 3 - 4 * + 2 /';
’use strict’;
for (let i = 0; i < 10000; i++) {
} else {
numArray.push(num);
}
}
}
if (symbol == '*') { return val1*val2; }
else if (symbol == '/') { return val1/val2; }
else if (symbol == '+') { return +val1 + +val2; }
else if (symbol == '-') { return +val1 - +val2; }
else if (symbol == '^') { return Math.pow(val1, val2); }
}

OGRANICZAMY ILOŚĆ ZMIENNYCH
return false;
}
let numArray = [];
let input = '2 7 + 3 / 14 3 - 4 * + 2 /';
’use strict’;
for (let i = 0; i < 10000; i++) {
} else {
}
}
}
}
let performOperation = (symbol,
numArray.push(performOperation(num,
numArray.push(
val2, val1) => {
value1, value2));
num);

return false;
}
let numArray = [];
let input = '2 7 + 3 / 14 3 - 4 * + 2 /';
’use strict’;
for (let i = 0; i < 10000; i++) {
} else {
}
}
}
}
numArray.push(
val2, val1) => {
value1, value2));
num);

return false;
}
let numArray = [];
let input = '2 7 + 3 / 14 3 - 4 * + 2 /';
’use strict’;
for (let i = 0; i < 10000; i++) {
} else {
}
}
}
}
numArray.push(
if (isOperator(toBeInterpreted[i])) {
val2, val1) => {
value1, value2));
num);

return false;
}
let numArray = [];
let input = '2 7 + 3 / 14 3 - 4 * + 2 /';
’use strict’;
for (let i = 0; i < 10000; i++) {
} else {
}
}
}
}
numArray.push(
val1, val2) => {
value1, value2));
num);

return false;
}
let numArray = [];
let input = '2 7 + 3 / 14 3 - 4 * + 2 /';
’use strict’;
for (let i = 0; i < 10000; i++) {
} else {
}
}
}
}
numArray.push(
val1, val2) => {
numArray.pop(), numArray.pop()));
num);

return false;
}
let numArray = [];
let input = '2 7 + 3 / 14 3 - 4 * + 2 /';
’use strict’;
for (let i = 0; i < 10000; i++) {
} else {
}
}
}
}
numArray.push(
val1, val2) => {
numArray.pop(), numArray.pop()));
toBeInterpreted[i]);

OGRANICZAMY ILOŚĆ ZMIENNYCH - PORÓWNANIE
41.11 ops/s 200 ops/s

WYRZUCAMY STAŁE Z PĘTLI OBLICZENIOWEJ
isOperator = (val) => {
return false;
}
input = '2 7 + 3 / 14 3 - 4 * + 2 /';
toBeInterpeted = input.split(' ');
for (let i = 0; i < 10000; i++) {
let numArray = [];
numArray.push(performOperation(num, numArray.pop(), numArray.pop()));
} else {
numArray.push(toBeInterpreted[i]);
}
}
}
performOperation = (symbol, val1, val2) => {
}
let
let
let
let
’use strict’;

WYRZUCAMY STAŁE Z PĘTLI OBLICZENIOWEJ
isOperator = (val) => {
return false;
}
input = '2 7 + 3 / 14 3 - 4 * + 2 /';
toBeInterpeted = input.split(' ');
for (let i = 0; i < 10000; i++) {
let numArray = [];
numArray.push(performOperation(num, numArray.pop(), numArray.pop()));
} else {
numArray.push(toBeInterpreted[i]);
}
}
}
performOperation = (symbol, val1, val2) => {
}
const
const
const
const
’use strict’;

WYRZUCAMY STAŁE Z PĘTLI OBLICZENIOWEJ - PORÓWNANIE
204 ops/s 279 ops/s

~75 ms
PODSUMOWANIE - ILE TERAZ TRWA CAŁA OPERACJA?

PODSUMOWANIE - ILE TERAZ TRWA CAŁA OPERACJA?
~3.5 ms(przyspieszenie o ~2050%)

'USE STRICT';
•kompilator nie musi się „domyślać”
•mniejsza szansa na głupi błąd
•niewielki skok wydajności
DELEGACJA ZADAŃ DO
DEDYKOWANYCH FUNKCJI
•czystszy kod
•znaczny skok wydajności
IF/ELSE
•mikrooptymalizacja - do poświęcenia w celu
zwiększenia czytelności kodu
•niewielki skok wydajności
OGRANICZ LICZBĘ
ZMIENNYCH
•potrafi zmniejszyć czytelność kodu
•bardzo duży skok wydajności
PRZENIEŚ STAŁE Z PĘTLI
OBLICZENIOWEJ
•zwiększa „reużywalność” kodu
•duży skok wydajności
TL;DR
LINKI
•https://mythbusters.js.org/

DZIĘKUJĘ
Michał Kostrzyński
Frontend Developer
michal.kostrzynski@vml.com
linkedin.com/in/michalkostrzynski
Zawartość niniejszej prezentacji, a w szczególności koncepcje i sposób prezentacji treści, stanowią własność intelektualną VML Poland, chronioną prawem zgodnie
z ustawą z dnia 4 lutego 1994 r. o ochronie praw autorskich i praw pokrewnych. Wykorzystanie całości lub części niniejszego utworu w jakichkolwiek celach wymaga
pisemnej zgody właściciela. Niniejsza oferta zachowuje ważność przez okres 3 miesięcy od daty otrzymania.
http://frontowo.pl
https://joind.in/event/codetecon/

Javascript i wydajność - czy to się spina?

More Related Content

What's hot

Javascript i wydajność - czy to się spina?