Category Archives: клиентская оптимизация

Отладка сторонних скриптов в Google Chrome

Если у вас есть на сайте какая-нибудь вредная система, которая вставляет произвольные скрипты на сайт, то рано или поздно встаёт проблема с тем, что их нужно отладить. В Google Chrome это можно сделать так: .

Как выявить лишние стили на сайте

https://github.com/ben-eb/gulp-uncss https://github.com/addyosmani/critical

Загрузка css, которая не блокирует загрузку страницы

Забавный хак-костыль, вдруг когда-нибудь пригодится. Конечно, лучше сначала загрузить critical path css, а все остальные стили убрать в конец страницы (при этом загрузка css не будет мешать загрузке кода страницы), но вдруг пригодится:

http://keithclark.co.uk/articles/loading-css-without-blocking-render/

Chrome Dev Tools Filmstrip View

Что это Это дополнительная кнопка во вкладке «Сеть» в Google Chrome, которая показывает «раскадровку». Как включить Make sure you are on Chrome 44.0.2388.0+ Go to chrome://flags Find Enable Developer Tools experiments and enable it. Click the gear icon. Go to Experiments in the left hand sidebar. Press shift 6 times to reveal hidden features. Enable …

Read more

Советы по производительности AngularJS

Это перепечатка статьи Релиз Angular.js 2.0 приближается, а проблемы с производительностью первой версии все еще остаются. Эта статья посвящена оптимизации Angular.js приложений и будет полезна как начинающим, так и тем, кто уже использует этот фреймворк, но еще не сталкивался с проблемами его производительности. Немного простой теории Как известно, Angular.js это декларативный фронт-енд фреймворк, предоставляющий удобный …

Read more

Как Github логирует клиентские ошибки (Haystack)

http://githubengineering.com/browser-monitoring-for-github-com/ Ничего сверхнового в идеях нет, есть наглядная картинка:

Логирование времени загрузки страниц в piwik

В продолжение темы логирования ошибок в пивик. Неплохо было бы логировать в ту же систему и время загрузки страницы у реальных пользователей. Для этого в упомянутый в предыдущей статье логгер нужно добавить следующее:

И поправить window.onload на:

Подробнее об объекте window.performance.timing можно почитать тут — http://job-blog.bullgare.ru/2014/12/%D0%BC%D0%BE%D0%BD%D0%B8%D1%82%D0%BE%D1%80%D0%B8%D0%BD%D0%B3-%D0%B7%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B8-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B-%D1%81-navigation-timing-api/ или сразу на mdn https://developer.mozilla.org/en-US/docs/Web/API/PerformanceTiming.

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