SlideShare a Scribd company logo
1 of 20
Download to read offline
ОПТИМИЗАЦИЯ
JAVASCRIPT
ИЛИ СОВРЕМЕННЫЕ ДВИЖКИ В ДЕЙСТВИИ
Максим Терехин / @materAwe
ОПТИМИЗАЦИИ
ПРИЛОЖЕНИЯ
(ТЕХНИКИ И ИНСТРУМЕНТЫ)
Benchmarking:
Profiling: , , etc
Memory leaks detection
Взаимодействие с DOM: repaint/reflow
Отладка Javascript с целью оптимизации
jsPerf
Chrome Developer Tools Firebug
ПРОИЗВОДИТЕЛЬНОСТЬ
JAVASCRIPT
JIT компиляция vs Интерпретация
Сборка мусора
Новые структуры данных (typed arrays:
Int32Array, Float64Array etc)
JIT для регулярных выражений
asm.js ?
JIT КОМПИЛЯЦИЯ
Hidden classes
Full compiler
Inline caching
Оптимизация "горячего кода"
ПРОФИЛИРОВАНИЕ
ПРОФИЛИРОВАНИЕ
ПРОФИЛИРОВАНИЕ
Bottlenecks
Это действительно JavaScript?
Поиск конкретных мест
Почему? Что делать?
ЧТО ВЛИЯЕТ НА
СКОРОСТЬ JAVASCRIPT?
МАССИВЫ
"Плотные" (dense) массивы – ОК
"Разреженные"(sparse) массивы – BAD
Разные типы в массиве – BAD
"дырки" в массиве – BAD
index iteration – ОК
функциональный стиль или for..in – BAD
МАССИВЫ
// dense array
var a = [];
for (var i = 0; i < 1000; i++) {
a[i] = i;
}
// sparse array
var a = [];
a[100000] = 0;
for (var i = 0; i < 1000; i++) {
a[i] = i;
}
МАССИВЫ
// indexed iteration
for (var i = 0; i < a.length; ++i) {
sum += a[i];
}
// functional style
even = a.filter(function(item) { return item % 2 == 0; });
// for..in
for (var i in a) {
a[i] += i;
}
ФУНКЦИИ
fun.call() – BAD
fun.apply() – BAD
arguments – OK
полиморфные функции – BAD
мономорфные функции – OK
closures – зависит от объекта функции
ОБЪЕКТЫ
Создание объектов – ОК
Object.create – BAD
OOP через prototype – OK
OOP через closure – BAD
Копирование больших объектов – BAD
conditional proprety assignment – BAD
delete property – BAD
ОБЪЕКТЫ
function Example(a, b) {
this.a = a;
this.b = b;
if ((a + b) % 2) {
// anti-pattern. different hidden classes
this.c = a + b;
}
}
var a = new Example(1, 2);
var b = new Example(2, 3);
// anti-pattern. different hidden classes
// declare it in the constructor
b.z = "aaa";
ОБЩИЕ СОВЕТЫ
Избегайте eval и with
Избегайте try/catch/throw
type safe код
OOP через closure – BAD
Копирование больших объектов – BAD
V8 PROFILER
Просмотр стека JavaScript и C/C++ кода;
* – оптимизированная функция
~ – деоптимизированная функция
$ ./out/ia32.release/d8 ~/temp/test.js --prof
$ tools/mac-tick-processor
Statistical profiling result from v8.log, (203 ticks, 1 unaccounted,
[Shared libraries]:
ticks total nonlib name
[JavaScript]:
ticks total nonlib name
21 10.3% 10.3% LazyCompile: *<anonymous> /Users/Neurostep/tem
15 7.4% 7.4% LazyCompile: STRING_ADD_RIGHT native runtime.j
6 3.0% 3.0% Stub: CompareICStub
</anonymous>
IR + DISASSEMBLED
CODE
Сгенерированный код промежуточного представления можно посмотреть
через
$ ./out/ia32.debug/d8 --trace-hydrogen --print-opt-code --code-comments
C1Visualizer
IRHYDRA
ВОПРОСЫ?
e-mail: neurostep@aboutecho.com
twitter:materAwe
СПАСИБО
WE ARE HIRING
jobs@aboutecho.com

More Related Content

What's hot

"G1 GC и Обзор сборки мусора в HotSpot JVM" @ JUG SPb, 31-05-2012
"G1 GC и Обзор сборки мусора в HotSpot JVM" @ JUG SPb, 31-05-2012"G1 GC и Обзор сборки мусора в HotSpot JVM" @ JUG SPb, 31-05-2012
"G1 GC и Обзор сборки мусора в HotSpot JVM" @ JUG SPb, 31-05-2012Vladimir Ivanov
 
Cборка мусора в Java без пауз (HighLoad++ 2013)
Cборка мусора в Java без пауз  (HighLoad++ 2013)Cборка мусора в Java без пауз  (HighLoad++ 2013)
Cборка мусора в Java без пауз (HighLoad++ 2013)aragozin
 
Борис Сазонов, RAII потоки и CancellationToken в C++
Борис Сазонов, RAII потоки и CancellationToken в C++Борис Сазонов, RAII потоки и CancellationToken в C++
Борис Сазонов, RAII потоки и CancellationToken в C++Sergey Platonov
 
Оптимизация трассирования с использованием Expression templates
Оптимизация трассирования с использованием Expression templatesОптимизация трассирования с использованием Expression templates
Оптимизация трассирования с использованием Expression templatesPlatonov Sergey
 
Секреты сборки мусора в Java (Алексей Рагозин)
Секреты сборки мусора в Java (Алексей Рагозин)Секреты сборки мусора в Java (Алексей Рагозин)
Секреты сборки мусора в Java (Алексей Рагозин)Ontico
 
Павел Довгалюк, Обратная отладка
Павел Довгалюк, Обратная отладкаПавел Довгалюк, Обратная отладка
Павел Довгалюк, Обратная отладкаSergey Platonov
 
Поиск уязвимостей с использованием статического анализа кода
Поиск уязвимостей с использованием статического анализа кодаПоиск уязвимостей с использованием статического анализа кода
Поиск уязвимостей с использованием статического анализа кодаAndrey Karpov
 
Поиск уязвимостей с использованием статического анализа кода
Поиск уязвимостей с использованием статического анализа кодаПоиск уязвимостей с использованием статического анализа кода
Поиск уязвимостей с использованием статического анализа кодаcorehard_by
 
SWIFT нужен ли он вам?
SWIFT нужен ли он вам?SWIFT нужен ли он вам?
SWIFT нужен ли он вам?Improve Group
 
JIT-компиляция в виртуальной машине Java (HighLoad++ 2013)
JIT-компиляция в виртуальной машине Java (HighLoad++ 2013)JIT-компиляция в виртуальной машине Java (HighLoad++ 2013)
JIT-компиляция в виртуальной машине Java (HighLoad++ 2013)aragozin
 
Оптицизация: на грани и за
Оптицизация: на грани и заОптицизация: на грани и за
Оптицизация: на грани и заAnton Patrushev
 
Станислав Сидристый «Шаблон Lifetime: для сложного Disposing»
Станислав Сидристый «Шаблон Lifetime: для сложного Disposing»Станислав Сидристый «Шаблон Lifetime: для сложного Disposing»
Станислав Сидристый «Шаблон Lifetime: для сложного Disposing»SpbDotNet Community
 
Lift, play, akka, rails part1
Lift, play, akka, rails part1Lift, play, akka, rails part1
Lift, play, akka, rails part1Eduard Antsupov
 
Sampling profiling
Sampling profilingSampling profiling
Sampling profilingSlach
 
Александр Тарасенко, Использование python для автоматизации отладки С/C++ код...
Александр Тарасенко, Использование python для автоматизации отладки С/C++ код...Александр Тарасенко, Использование python для автоматизации отладки С/C++ код...
Александр Тарасенко, Использование python для автоматизации отладки С/C++ код...Sergey Platonov
 
По колено в Си++ г... коде
По колено в Си++ г... кодеПо колено в Си++ г... коде
По колено в Си++ г... кодеTatyanazaxarova
 
Профилирование кода на C/C++ в *nix системах
Профилирование кода на C/C++ в *nix системахПрофилирование кода на C/C++ в *nix системах
Профилирование кода на C/C++ в *nix системахAleksander Alekseev
 

What's hot (18)

"G1 GC и Обзор сборки мусора в HotSpot JVM" @ JUG SPb, 31-05-2012
"G1 GC и Обзор сборки мусора в HotSpot JVM" @ JUG SPb, 31-05-2012"G1 GC и Обзор сборки мусора в HotSpot JVM" @ JUG SPb, 31-05-2012
"G1 GC и Обзор сборки мусора в HotSpot JVM" @ JUG SPb, 31-05-2012
 
Cборка мусора в Java без пауз (HighLoad++ 2013)
Cборка мусора в Java без пауз  (HighLoad++ 2013)Cборка мусора в Java без пауз  (HighLoad++ 2013)
Cборка мусора в Java без пауз (HighLoad++ 2013)
 
Борис Сазонов, RAII потоки и CancellationToken в C++
Борис Сазонов, RAII потоки и CancellationToken в C++Борис Сазонов, RAII потоки и CancellationToken в C++
Борис Сазонов, RAII потоки и CancellationToken в C++
 
Оптимизация трассирования с использованием Expression templates
Оптимизация трассирования с использованием Expression templatesОптимизация трассирования с использованием Expression templates
Оптимизация трассирования с использованием Expression templates
 
Секреты сборки мусора в Java (Алексей Рагозин)
Секреты сборки мусора в Java (Алексей Рагозин)Секреты сборки мусора в Java (Алексей Рагозин)
Секреты сборки мусора в Java (Алексей Рагозин)
 
Павел Довгалюк, Обратная отладка
Павел Довгалюк, Обратная отладкаПавел Довгалюк, Обратная отладка
Павел Довгалюк, Обратная отладка
 
Groovy
GroovyGroovy
Groovy
 
Поиск уязвимостей с использованием статического анализа кода
Поиск уязвимостей с использованием статического анализа кодаПоиск уязвимостей с использованием статического анализа кода
Поиск уязвимостей с использованием статического анализа кода
 
Поиск уязвимостей с использованием статического анализа кода
Поиск уязвимостей с использованием статического анализа кодаПоиск уязвимостей с использованием статического анализа кода
Поиск уязвимостей с использованием статического анализа кода
 
SWIFT нужен ли он вам?
SWIFT нужен ли он вам?SWIFT нужен ли он вам?
SWIFT нужен ли он вам?
 
JIT-компиляция в виртуальной машине Java (HighLoad++ 2013)
JIT-компиляция в виртуальной машине Java (HighLoad++ 2013)JIT-компиляция в виртуальной машине Java (HighLoad++ 2013)
JIT-компиляция в виртуальной машине Java (HighLoad++ 2013)
 
Оптицизация: на грани и за
Оптицизация: на грани и заОптицизация: на грани и за
Оптицизация: на грани и за
 
Станислав Сидристый «Шаблон Lifetime: для сложного Disposing»
Станислав Сидристый «Шаблон Lifetime: для сложного Disposing»Станислав Сидристый «Шаблон Lifetime: для сложного Disposing»
Станислав Сидристый «Шаблон Lifetime: для сложного Disposing»
 
Lift, play, akka, rails part1
Lift, play, akka, rails part1Lift, play, akka, rails part1
Lift, play, akka, rails part1
 
Sampling profiling
Sampling profilingSampling profiling
Sampling profiling
 
Александр Тарасенко, Использование python для автоматизации отладки С/C++ код...
Александр Тарасенко, Использование python для автоматизации отладки С/C++ код...Александр Тарасенко, Использование python для автоматизации отладки С/C++ код...
Александр Тарасенко, Использование python для автоматизации отладки С/C++ код...
 
По колено в Си++ г... коде
По колено в Си++ г... кодеПо колено в Си++ г... коде
По колено в Си++ г... коде
 
Профилирование кода на C/C++ в *nix системах
Профилирование кода на C/C++ в *nix системахПрофилирование кода на C/C++ в *nix системах
Профилирование кода на C/C++ в *nix системах
 

Viewers also liked

Rota de 6º. xunco ata as catedrais
Rota de 6º.  xunco ata as catedraisRota de 6º.  xunco ata as catedrais
Rota de 6º. xunco ata as catedraissenlleiro2
 
Plan proxeecta coñece a costa de ribadeo. rota 1 - 5º curso
Plan proxeecta  coñece a costa de ribadeo. rota 1 -  5º cursoPlan proxeecta  coñece a costa de ribadeo. rota 1 -  5º curso
Plan proxeecta coñece a costa de ribadeo. rota 1 - 5º cursosenlleiro2
 
áLbum de fotografías
áLbum de fotografíasáLbum de fotografías
áLbum de fotografíaskevinozmin
 
Memoria plan proxecta. final
Memoria plan proxecta. finalMemoria plan proxecta. final
Memoria plan proxecta. finalsenlleiro2
 
Presentatie zonnepanelen eric brandt 26 juni 2013
Presentatie zonnepanelen eric brandt 26 juni 2013Presentatie zonnepanelen eric brandt 26 juni 2013
Presentatie zonnepanelen eric brandt 26 juni 2013jolandeschuurman
 
Outros informes
Outros informesOutros informes
Outros informessenlleiro2
 
Rota 3 6º curso
Rota 3   6º cursoRota 3   6º curso
Rota 3 6º cursosenlleiro2
 
شريف عرفة لماذا من حولك أغبياء؟
شريف عرفة   لماذا من حولك أغبياء؟شريف عرفة   لماذا من حولك أغبياء؟
شريف عرفة لماذا من حولك أغبياء؟Hammou Mohammed
 
Mi historia
Mi historiaMi historia
Mi historiarocio
 
Dog Years Dilemma
Dog Years DilemmaDog Years Dilemma
Dog Years DilemmaMHS
 
الفحص الدوري للإنسان د.عبدالرحمن اليوسف
الفحص الدوري للإنسان د.عبدالرحمن اليوسفالفحص الدوري للإنسان د.عبدالرحمن اليوسف
الفحص الدوري للإنسان د.عبدالرحمن اليوسفdr_alwajeeh
 

Viewers also liked (20)

2013 07 03_фом_презентация
2013 07 03_фом_презентация2013 07 03_фом_презентация
2013 07 03_фом_презентация
 
Rota de 6º. xunco ata as catedrais
Rota de 6º.  xunco ata as catedraisRota de 6º.  xunco ata as catedrais
Rota de 6º. xunco ata as catedrais
 
Plan proxeecta coñece a costa de ribadeo. rota 1 - 5º curso
Plan proxeecta  coñece a costa de ribadeo. rota 1 -  5º cursoPlan proxeecta  coñece a costa de ribadeo. rota 1 -  5º curso
Plan proxeecta coñece a costa de ribadeo. rota 1 - 5º curso
 
011
011011
011
 
áLbum de fotografías
áLbum de fotografíasáLbum de fotografías
áLbum de fotografías
 
009
009009
009
 
008
008008
008
 
007
007007
007
 
Lemos teatro
Lemos teatroLemos teatro
Lemos teatro
 
Memoria plan proxecta. final
Memoria plan proxecta. finalMemoria plan proxecta. final
Memoria plan proxecta. final
 
Presentatie zonnepanelen eric brandt 26 juni 2013
Presentatie zonnepanelen eric brandt 26 juni 2013Presentatie zonnepanelen eric brandt 26 juni 2013
Presentatie zonnepanelen eric brandt 26 juni 2013
 
Outros informes
Outros informesOutros informes
Outros informes
 
Rota 3 6º curso
Rota 3   6º cursoRota 3   6º curso
Rota 3 6º curso
 
วิชาเคมี
วิชาเคมีวิชาเคมี
วิชาเคมี
 
شريف عرفة لماذا من حولك أغبياء؟
شريف عرفة   لماذا من حولك أغبياء؟شريف عرفة   لماذا من حولك أغبياء؟
شريف عرفة لماذا من حولك أغبياء؟
 
Mi historia
Mi historiaMi historia
Mi historia
 
012
012012
012
 
Dog Years Dilemma
Dog Years DilemmaDog Years Dilemma
Dog Years Dilemma
 
006
006006
006
 
الفحص الدوري للإنسان د.عبدالرحمن اليوسف
الفحص الدوري للإنسان د.عبدالرحمن اليوسفالفحص الدوري للإنسان د.عبدالرحمن اليوسف
الفحص الدوري للإنسان د.عبدالرحمن اليوسف
 

Similar to Js optimization

Арсений Заречнев и Федор Шумов - Одностраничные приложения
Арсений Заречнев и Федор Шумов - Одностраничные приложенияАрсений Заречнев и Федор Шумов - Одностраничные приложения
Арсений Заречнев и Федор Шумов - Одностраничные приложенияArseny Zarechnev
 
Арсений Заречнев и Федор Шумов - Одностраничные приложения
Арсений Заречнев и Федор Шумов - Одностраничные приложенияАрсений Заречнев и Федор Шумов - Одностраничные приложения
Арсений Заречнев и Федор Шумов - Одностраничные приложенияArseny Zarechnev
 
Использование Java Native Interface (JNI) и кросплатформенных C/C++ реализаци...
Использование Java Native Interface (JNI) и кросплатформенных C/C++ реализаци...Использование Java Native Interface (JNI) и кросплатформенных C/C++ реализаци...
Использование Java Native Interface (JNI) и кросплатформенных C/C++ реализаци...Stfalcon Meetups
 
Распределённое нагрузочное тестирование на Java
Распределённое нагрузочное тестирование на JavaРаспределённое нагрузочное тестирование на Java
Распределённое нагрузочное тестирование на Javaaragozin
 
Graal, Truffle, SubstrateVM and other perks: what are those and why do you ne...
Graal, Truffle, SubstrateVM and other perks: what are those and why do you ne...Graal, Truffle, SubstrateVM and other perks: what are those and why do you ne...
Graal, Truffle, SubstrateVM and other perks: what are those and why do you ne...Oleg Chirukhin
 
CodeFest 2011. Крестьянинов М. — Обзор аспектно-ориентированного программиров...
CodeFest 2011. Крестьянинов М. — Обзор аспектно-ориентированного программиров...CodeFest 2011. Крестьянинов М. — Обзор аспектно-ориентированного программиров...
CodeFest 2011. Крестьянинов М. — Обзор аспектно-ориентированного программиров...CodeFest
 
Ошибки, которые сложно заметить на code review, но которые находятся статичес...
Ошибки, которые сложно заметить на code review, но которые находятся статичес...Ошибки, которые сложно заметить на code review, но которые находятся статичес...
Ошибки, которые сложно заметить на code review, но которые находятся статичес...Andrey Karpov
 
Секреты сборки мусора в Java
Секреты сборки мусора в JavaСекреты сборки мусора в Java
Секреты сборки мусора в Javaaragozin
 
Статический анализ кода: Что? Как? Зачем?
Статический анализ кода: Что? Как? Зачем?Статический анализ кода: Что? Как? Зачем?
Статический анализ кода: Что? Как? Зачем?Andrey Karpov
 
Serge P Nekoval Grails
Serge P  Nekoval  GrailsSerge P  Nekoval  Grails
Serge P Nekoval Grailsguest092df8
 
2014-10-04 02 Владислав Безверхий. Mocha - покрой frontend по полной
2014-10-04 02 Владислав Безверхий. Mocha - покрой frontend по полной2014-10-04 02 Владислав Безверхий. Mocha - покрой frontend по полной
2014-10-04 02 Владислав Безверхий. Mocha - покрой frontend по полнойОмские ИТ-субботники
 
Unsafe: to be or to be removed?
Unsafe: to be or to be removed?Unsafe: to be or to be removed?
Unsafe: to be or to be removed?Alexey Fyodorov
 
Node.js введение в технологию, КПИ #ITmeetingKPI
Node.js введение в технологию, КПИ  #ITmeetingKPINode.js введение в технологию, КПИ  #ITmeetingKPI
Node.js введение в технологию, КПИ #ITmeetingKPITimur Shemsedinov
 
Выявление неполадок в Java приложениях
Выявление неполадок в Java приложенияхВыявление неполадок в Java приложениях
Выявление неполадок в Java приложенияхPavel Grushetzky
 
Groovy On Grails
Groovy On GrailsGroovy On Grails
Groovy On Grailsguest32215a
 
JavaScript: хороший тон клиентской разработки
JavaScript: хороший тон клиентской разработкиJavaScript: хороший тон клиентской разработки
JavaScript: хороший тон клиентской разработкиGetDev.NET
 

Similar to Js optimization (20)

In the sun.misc.Unsafe bowels
In the sun.misc.Unsafe bowelsIn the sun.misc.Unsafe bowels
In the sun.misc.Unsafe bowels
 
Арсений Заречнев и Федор Шумов - Одностраничные приложения
Арсений Заречнев и Федор Шумов - Одностраничные приложенияАрсений Заречнев и Федор Шумов - Одностраничные приложения
Арсений Заречнев и Федор Шумов - Одностраничные приложения
 
Арсений Заречнев и Федор Шумов - Одностраничные приложения
Арсений Заречнев и Федор Шумов - Одностраничные приложенияАрсений Заречнев и Федор Шумов - Одностраничные приложения
Арсений Заречнев и Федор Шумов - Одностраничные приложения
 
Использование Java Native Interface (JNI) и кросплатформенных C/C++ реализаци...
Использование Java Native Interface (JNI) и кросплатформенных C/C++ реализаци...Использование Java Native Interface (JNI) и кросплатформенных C/C++ реализаци...
Использование Java Native Interface (JNI) и кросплатформенных C/C++ реализаци...
 
Распределённое нагрузочное тестирование на Java
Распределённое нагрузочное тестирование на JavaРаспределённое нагрузочное тестирование на Java
Распределённое нагрузочное тестирование на Java
 
Graal, Truffle, SubstrateVM and other perks: what are those and why do you ne...
Graal, Truffle, SubstrateVM and other perks: what are those and why do you ne...Graal, Truffle, SubstrateVM and other perks: what are those and why do you ne...
Graal, Truffle, SubstrateVM and other perks: what are those and why do you ne...
 
CodeFest 2011. Крестьянинов М. — Обзор аспектно-ориентированного программиров...
CodeFest 2011. Крестьянинов М. — Обзор аспектно-ориентированного программиров...CodeFest 2011. Крестьянинов М. — Обзор аспектно-ориентированного программиров...
CodeFest 2011. Крестьянинов М. — Обзор аспектно-ориентированного программиров...
 
Ошибки, которые сложно заметить на code review, но которые находятся статичес...
Ошибки, которые сложно заметить на code review, но которые находятся статичес...Ошибки, которые сложно заметить на code review, но которые находятся статичес...
Ошибки, которые сложно заметить на code review, но которые находятся статичес...
 
бегун
бегунбегун
бегун
 
Секреты сборки мусора в Java
Секреты сборки мусора в JavaСекреты сборки мусора в Java
Секреты сборки мусора в Java
 
Bytecode
BytecodeBytecode
Bytecode
 
Статический анализ кода: Что? Как? Зачем?
Статический анализ кода: Что? Как? Зачем?Статический анализ кода: Что? Как? Зачем?
Статический анализ кода: Что? Как? Зачем?
 
Serge P Nekoval Grails
Serge P  Nekoval  GrailsSerge P  Nekoval  Grails
Serge P Nekoval Grails
 
2014-10-04 02 Владислав Безверхий. Mocha - покрой frontend по полной
2014-10-04 02 Владислав Безверхий. Mocha - покрой frontend по полной2014-10-04 02 Владислав Безверхий. Mocha - покрой frontend по полной
2014-10-04 02 Владислав Безверхий. Mocha - покрой frontend по полной
 
бегун
бегунбегун
бегун
 
Unsafe: to be or to be removed?
Unsafe: to be or to be removed?Unsafe: to be or to be removed?
Unsafe: to be or to be removed?
 
Node.js введение в технологию, КПИ #ITmeetingKPI
Node.js введение в технологию, КПИ  #ITmeetingKPINode.js введение в технологию, КПИ  #ITmeetingKPI
Node.js введение в технологию, КПИ #ITmeetingKPI
 
Выявление неполадок в Java приложениях
Выявление неполадок в Java приложенияхВыявление неполадок в Java приложениях
Выявление неполадок в Java приложениях
 
Groovy On Grails
Groovy On GrailsGroovy On Grails
Groovy On Grails
 
JavaScript: хороший тон клиентской разработки
JavaScript: хороший тон клиентской разработкиJavaScript: хороший тон клиентской разработки
JavaScript: хороший тон клиентской разработки
 

Js optimization