Category Archives: Client Optimization
Benchpress: автоматическое тестирование производительности AngularJS-компонент
Использование для своего приложения https://youtu.be/e6J_JZaIOAQ Что это такое и как используется для разработки AngularJS core https://youtu.be/x1PJn5qMUT4
Мониторинг загрузки страницы с Navigation Timing API
Содержит следующие события: navigationStart unloadEventStart unloadEventEnd redirectStart redirectEnd fetchStart domainLookupStart domainLookupEnd connectStart connectEnd secureConnectionStart requestStart responseStart responseEnd domLoading domInteractive domContentLoadedEventStart domContentLoadedEventEnd domComplete loadEventStart loadEventEnd Поддерживается ie9+ и нормальными браузерами. Подробнее — https://developer.mozilla.org/en-US/docs/Web/API/PerformanceTiming и https://developer.mozilla.org/en-US/docs/Navigation_timing. Пример использования от Яндекса — Как мы измеряем скорость загрузки Яндекс.Почты
Voronoi algorithm
Использование алгоритма Вороного в javascript. Смотреть с 10 минут. http://youtu.be/90NsjKvz9Ns?t=10m15s Ссылки: http://cgm.cs.mcgill.ca/~mcleish/644/Projects/DerekJohns/Sweep.htm http://philogb.github.io/blog/assets/voronoijs/voronoi.html (http://philogb.github.io/blog/2010/02/12/voronoi-tessellation/) https://code.google.com/p/javascript-voronoi/ https://github.com/mikolalysenko/voronoi-diagram https://ru.wikipedia.org/wiki/%D0%9F%D0%B0%D1%80%D0%B0%D0%B1%D0%BE%D0%BB%D0%B0 (ликбез по параболе) http://habrahabr.ru/post/110790/ http://www.cs.princeton.edu/~edwardz/voronoi/voronoi.html http://www.devforrest.com/examples/voronoi/ http://www.ams.org/samplings/feature-column/fcarc-voronoi https://ru.wikipedia.org/wiki/%D0%97%D0%B0%D0%B4%D0%B0%D1%87%D0%B0_%D0%BF%D0%BE%D0%B8%D1%81%D0%BA%D0%B0_%D0%B1%D0%BB%D0%B8%D0%B6%D0%B0%D0%B9%D1%88%D0%B5%D0%B3%D0%BE_%D1%81%D0%BE%D1%81%D0%B5%D0%B4%D0%B0 http://strongriley.github.io/d3/ex/voronoi.html http://www.raymondhill.net/voronoi/rhill-voronoi-demo3.php
Оптимизация вывода длинного списка в браузере
Попросили оптимизировать вывод меню. Состоит оно из нескольких пунктов верхнего уровня, при нажатии на каждый открывается соответствующее подменю. В одном из подменю расположено более 30000(!) пунктов, и ожидается его дальнейшее увеличение.
Отладка мобильных сайтов через Google Chrome
Отличное видео от Paul Irish. Рассказывает, как отлаживать сайты на мобильных устройствах без плагинов. Как поменялась эмуляция. Ну и немного про workspaces (теперь поддерживается и less) http://youtu.be/gZH1d2Co1X0
AngularJS: $watch за объектами
Чтобы не вызывалась лишний раз функция, нужно добавить еще один параметр true в $watch:
|
1 2 3 |
$rootScope.$watch('session', function (value) { $scope.profile = ProfileDataService.get(); }, true); |
Но он иногда запускает обработчик, поэтому можно сделать внутри дополнительную проверку:
|
1 2 3 4 5 |
$rootScope.$watch('session', function (value, valueOld) { if (! angular.equals(value, valueOld)) { $scope.profile = ProfileDataService.get(); } }); |
Google Web Tracing Framework
https://chrome.google.com/webstore/detail/web-tracing-framework/gmdhhnlkjmknaopofnadmoamhmnlicme?hl=ru
Dirty checking в AngularJS и производительность
Misko Havery рассуждает о производительности data-binding в AngularJS: http://stackoverflow.com/questions/9682092/databinding-in-angularjs/9693933#9693933
Прототипы быстрее фабричных фунций
Dan Tao : The prototype is your friend (if you care about perf) — https://coderwall.com/p/jj6fwa Очередная статья о том, почему использование прототипов лучше при больших нагрузках. Но лично мне ближе фабрики. И узким местом, требующим внимания, я такие вещи не считаю.
requestAnimationFrame
requestAnimationFrame удобен для группировки изменений DOM-структуры. В том числе между различными модулями. Позволяет избежать «layout thrashing». Работает как callback. Описание — https://developer.mozilla.org/ru/docs/DOM/window.requestAnimationFrame Пример использования и библиотека-обёртка — http://wilsonpage.co.uk/preventing-layout-thrashing/