Category Archives: Client Optimization
Инструменты для автоматической оптимизации картинок
http://addyosmani.com/blog/image-optimization-tools/ — большая подборка от Addy Osmani. Задания для grunt, отдельные приложения для png, jpeg, gif и svg.
Логирование клентских ошибок через сервис
https://www.bugsense.com — дают скрипт (http://www.bugsense.com/releases/html5/1.1/download) и потом можно логировать разные клиентские ошибки (более подробное описание от авторов). Единственный минус — очень платные. Мобильные друзья используют другой сервис — http://try.crashlytics.com/, но для web решения пока нет. Вообще-то я давно писал про то, как можно логировать ошибки (https://blog.bullgare.com/2012/03/%D0%BB%D0%BE%D0%B3%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-js-%D0%BE%D1%88%D0%B8%D0%B1%D0%BE%D0%BA-%D0%BD%D0%B0-%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80%D0%B5/), но иногда неохота городить огород на серверной стороне, а …
Методы тестирования мобильных приложений
http://webuild.envato.com/blog/techniques-for-mobile-and-responsive-cross-browser-testing/
Оптимизация загрузки сайта для мобильных устройств
http://youtu.be/YV1nKLWoARQ Слайды:https://docs.google.com/presentation/d/1IRHyU7_crIiCjl0Gvue0WY3eY_eYvFQvSfwQouW9368/present Основные вещи: В идеале надо стараться уложиться в 14 кБ для отрисовки первичной страницы (хотя бы для основного макета со стилями). При этом стили для этого сделать встраиваемыми, т.к. для избежания FOUC (flash of unstyled content) браузер ждет догрузки css и только после этого начинает отрисовывать страницу. Javascript стараться грузить уже после отрисовки …
Sizzle: как работает движок селекторов в jQuery
http://blog.bigbinary.com/2010/02/15/how-jquery-selects-elements-using-sizzle.html Главное: Если в браузере доступен document.querySelectorAll(), или достаточно методов document.getElementById() и document.getElementsByTagName(), то запрос к DOM-у будет передан этим методам, и потом ответ будет обёрнут в jQuery. Интересное наступает, если этими методами обойтись нельзя. Для примера возьмем старый браузер без document.querySelectorAll() и селектор
|
1 |
$(".header a") |
Best practices клиентской оптимизации от Yahoo!
http://developer.yahoo.com/performance/rules.html
Квест о запросах браузеров к внешним ресурсам в разных ситуациях
http://jakearchibald.github.io/request-quest/
Отложенная загрузка шаблона в AngularJS
Допустим есть некий шаблон, который нужно показать, только когда пользователь заблокирован. Вот код.
|
1 2 3 |
<section ng-show="showUserBlocked"> <div ng-include="'views/partials/user_blocked.html'"></div> </section> |
Но тогда получится, что блок покажется пользователю только когда будет выставлена переменная showUserBlocked, а внешний шаблон будет подгружаться в любом случае сразу при загрузке страницы. Что неправильно, особенно на мобильных устройствах. Решение этой проблемы — простое:
|
1 2 3 |
<section ng-show="showUserBlocked"> <div ng-include="showUserBlocked && 'views/partials/user_blocked.html'"></div> </section> |
Т.е. пока переменная showUserBlocked …
Performance Checklist for the Mobile Web
http://www.youtube.com/watch?v=0UNWi7FA36M Говорится об оптимизации web-приложений под мобильные устройства. 3 составляющих. Сеть 3G имеет теоретическую максимальную пропускную способность в 3Mbps Радиомодуль мобильных устройств (у которого 3 состояния: Active, Pending, Idle) из спящего режима в режим нормальной работы переходит порядка 1-2 секунд. Поэтому желательно подгружать большие пачки данных сразу и потом эмулировать подгрузку по аяксу (к тому …
Сжатие картинок
http://www.smushit.com/ysmush.it/ Сжимает PNG32 очень хорошо.