Pull to refresh
325
0.1
Николай Мациевский @sunnybear

СTO Айри.рф. CEdO ITtensive

Send message

Рекомендательные системы: перепросмотр

Reading time6 min
Views2.5K
Примечание: ниже перевод статьи «Rethinking Recommendation Engines» от Alex Iskold (знаменитого своими исследованиями в области экономики внимания и теоретических основ механизма социальных сетей), в которой автор рассматривает текущие рекомендательные системы и пытается предсказать, что ждет их в будущем (фактически, предлагает радикальный способ по их улучшению).

NeflixБолее двух лет назад Netflix анонсировал соревнование по движку рекомендаций: любой, кто изобретает алгоритм, позволяющий улучшить качество их рекомендательной системы не менее, чем на 10%, выигрывал один миллион долларов. Многие исследовательские группы с энтузиазмом взялись за дело, воодушевленные количеством доступной для анализа информации. В самом начале был достигнут некоторый прогресс, но затем он затормозился, и сейчас исследователи остановились в районе улучшения примерно на 8,5%.

В этом посте мы разберем, почему улучшения рекомендательного движка является не алгоритмической проблемой, а, скорее, вопросом представления. Переосмысление рекомендаций как фильтров и их применение без ориентации на высокий конечный результат, по-видимому, скорее приведет к успеху, чем более быстрое «перемалывание» (crunching) данных.
Читать дальше →
Total votes 30: ↑27 and ↓3+24
Comments25

Разгоняем CSS-селекторы. Часть 2: транзитивность

Reading time1 min
Views1.4K
После статьи «Разгоняем CSS-селекторы: стоит ли?» было предложено рассмотреть несколько дополнительных случаев, учитывающих транзитивность селекторов (например, насколько быстрее a c, чем a b c, или наоборот). Данное исследование посвящено как раз разбору таких случаев.

Методика



Методика и уменьшение погрешности подробно рассматривались в первой статье, на них сильно много останавливаться не буду. Скажу лишь, что при наращивании количества классов и идентификаторов Opera стала значительно медленнее (раза в 3) отображать код (при этом общий его объем увеличился примерно в 1,5-2 раза). Скорее всего, в следующую статью войдет исследование влияния количества классов/идентификаторов/размера кода на общую производительность браузера.

Еще раз подчеркну, что действительную ценность представляет относительное изменение времени отображения страницы в пределах одного браузера в зависимости от того или иного случая (а никак не абсолютное или же сравнение разных браузеров: дополнительно присутствует слишком много неучтенных факторов).

читать дальше на webo.in →
Total votes 29: ↑22 and ↓7+15
Comments27

Инструменты для устранения утечек памяти в IE

Reading time1 min
Views1.3K
Примечание: ниже перевод заметки «Tools for Detecting Memory Leaks» от John Hrvatin (менеджера команды разработчиков IE). В ней автор рассказывает о прогрессе в устранении утечек памяти в текущих реализациях IE, а также делает краткий обзор существующих инструментов для детектирования таких утечек.

Всем привет. Веб-разработчики знают, как легко создать сайт, который будет «течь» в памяти при просмотре в Internet Explorer. Члены команды IE написали специальную статью в MSDN по поводу утечек памяти, также существует большое количество статей, написанных в подобном ключе, в которых освещается эта проблема, в зависимости от той или иной степени авторской озабоченности.

Очень часто эти утечки памяти возникают из-за циклических ссылок между объектами Jscript и IE DOM (объектной модели документа). Так как движок Jscript и IE имеют независимые схемы для управления выделением памяти, каждый из них не в состоянии отследить полный цикл таких ссылок.

читать дальше на webo.in →
Total votes 15: ↑13 and ↓2+11
Comments0

WEB Optimizator: от beta до zeta

Reading time2 min
Views566
Прошло чуть больше месяца с последней публикации о проекте webo.in, полностью посвященном клиентской оптимизации веб-сайтов и веб-приложений, и чуть больше 2 месяцев с момента его появления в сети.

Хочется сказать огромное спасибо всем, кто написал свои замечания и комментарии. Без вашей помощи нам бы вряд ли удалось так далеко продвинуться. Список новых возможностей и найденных ошибок вышел достаточно объемным, но весь его удалось реализовать. Однако, статья посвящена не совсем этому.

Читать дальше →
Total votes 21: ↑18 and ↓3+15
Comments26

Высокопроизводительные AJAX-приложения

Reading time1 min
Views706
Примечание: ниже перевод презентации «High Performance Ajax Applications», подготовленной ведущим специалистом из Yahoo (а теперь уже из Apple) Julien Lecomte. В ней автор освещает некоторые аспекты оптимизации как JavaScript-приложений, так и веб-сайтов вообще. В целом, советов много, и почти все, действительно, по делу. Однако, встречается и откровенная реклама Yahoo :) Мои комментарии далее курсивом.

Часть 1. Разработка для высокой производительности



Планируем и проектируем для высокой производительности



  • Ориентируемся на производительность с самого первого дня
  • Тесно работаем с дизайнерами и менеджерами продукта
  • Понимаем рациональность дизайна
  • Объясняем компромиссы между дизайном и производительностью
  • Предлагаем альтернативы и показываем, что еще возможно (на уровне прототипа)
  • Пробуем силы в реализации нетривиального дизайна (нельзя сразу говорит «нет»)
  • Помогаем упростить дизайн и взаимодействие с пользователем (добиваемся компромисса)


читать дальше на webo.in →
Total votes 77: ↑73 and ↓4+69
Comments28

Создаем высокопроизводительные HTML-страницы для IE

Reading time1 min
Views864
Примечание: ниже находится перевод статьи с MSDN «Building High Performance HTML Pages», в которой приводится ряд советов от экспертов из Microsoft по оптимизации времени загрузки страниц. Очень интересно сравнить их подход с аналогичным для Yahoo!. На мой взгляд, большая часть советов уже не является такой актуальной (спасибо Zeroglif, все приведенные советы, скорее всего, десятилетней давности), но в свое время все они были весьма действенны. Мои комментарии далее курсивом.

Интернет, интранеты (внутренние корпоративные порталы) и экстранеты (все то, что находится в свободном доступе) содержат уйму информации. Сейчас значительная часть этой информации являет собой HTML в том или ином виде.

Коммуникационные возможности, обеспечиваемые Microsoft Internet Explorer 4.0 и более поздними версиями, помогли превратит Веб в мощное пространство, где можно как работать, так и играть. Число HTML-страниц и их сложность вместе с общим количеством потребителей конечных продуктов существенно увеличили общий интернет-трафик. Вместе со всеми выгодами, которые получили разработчики приложений, это привело и к ряду проблем. Среди этих проблем можно выделить:

  • Доставка содержания через интернет (across the wire).
  • Будучи доставленным, содержание должно быстро отобразиться на экране.


В этой статьи предлагается несколько советов, как добиться максимальной производительности ваших страниц.
читать дальше на webo.in →
Total votes 49: ↑34 and ↓15+19
Comments31

Разгоняем CSS-селекторы: стоит ли?

Reading time1 min
Views2.9K
Виталию Харисову посвящается

После перевода заметки «Оптимизируем CSS-производительность» и справедливых замечаний Виталия vithar, я решил поставить серию экспериментов по скорости работы CSS-селекторов внутреннего движка браузеров. Результаты получились весьма забавными, а местами, наверное, даже интересными.

Методика. Размер файлов



Естественно, что скорость работы одиночного CSS-правила весьма высока, и даже десятки и сотни их не должны заметно замедлить работу браузеров. Поэтому нужно ставить эксперимент по работе с несколькими тысячами правил, иначе точность результатов будет весьма невысока. Использовать JavaScript для генерации HTML/CSS-кода не представляется разумным, ибо тогда придется учитывать еще и скорость работы JS-движка в браузерах, в итоге, эксперимент будет недостаточно чистым.

В конце концов, было решено сгенерить статичные файлы (порядка 300Кб), которые будут содержать достаточное число различных CSS-селекторов. Это самое «достаточное» число подбиралось по нескольким параметрам, в том числе: размер файла (гонять несколько Мб через браузер и интернет совсем не хотелось) и скорость работы HTML/CSS-кода в браузерах (она должна быть достаточно низкой, чтобы файлы в несколько сотен Кб уже заметно тормозили при открытии).

читать дальше на webo.in →
Total votes 42: ↑38 and ↓4+34
Comments32

Скорость загрузки JavaScript-библиотек

Reading time1 min
Views1.1K
Примечание: ниже перевод заметки John Resig (автора jQuery) «JavaScript Library Loading Speed», в которой он рассматривает, как сжатие, обфускация и архивирование влияет на производительность наиболее распространенных на данный момент JavaScript-библиотек. Мои комментарии даны курсивом.

Опубликована: 5 февраля 2008

Введение



Недавно командой PBWiki был проведен весьма впечатляющий анализ производительности JavaScript. Они собирались разобраться, насколько быстро грузятся JavaScript-библиотеки (конечно, их скорость загрузки будет заметно влиять на скорость загрузки всей страницы). Они развернули тестовое окружение для получения информации от различных браузеров, затем собрали все результаты в итоговом отчете. В нем достаточно много информации, которая может быть полезна как разработчикам веб-приложений, так и браузеров: структурированная таким образом информация достаточно обширна.

читать дальше на webo.in →
Total votes 17: ↑12 and ↓5+7
Comments21

Практический JS: избавляемся от утечек памяти в IE

Reading time2 min
Views1.2K
Примечание: ниже находится перевод статьи Understanding and Solving Internet Explorer Leak Patterns", в которой автор рассматривает некоторые характерные случаи утечек памяти в IE и предлагает методы для их избежания и устранения. Рассмотренные проблемы не являются чем-то новым или революционным, однако, знать об их существовании должен любой уважающий себя программист клиентских интерфейсов. Мои комментарии далее курсивом.

Опубликована: июнь 2005

Развитие веб-разработок



В прошлом утечки памяти не создавали никаких проблем веб-разработчикам. Страницы были предельно простыми, а переход с одной на другую был единственным нормальным способом для освобождения всей доступной памяти. Если утечка и происходила, то была настолько незначительна, что оставалась незамеченной.

Современные веб-приложения должны разрабатываться с учетом более высоких стандартов. Страница может выполняться в течение часов без дополнительных переходов по сайту, при этом она будет сама динамически запрашивать новую информацию через веб-сервисы. Языковой движок испытывают на прочность сложными схемами отработки событий, объектно-ориентированным JScript и замыканиями (closures), производя на свет все более мощными и продвинутые приложения. При все при этом, учитывая некоторые другие особенности, знание характерных шаблонов утечек памяти становится все более необходимым, даже если они были раньше спрятаны за механизмом навигации по сайту.

Большим плюсом в данной ситуации будет то, что шаблоны утечек памяти могут быть легко обнаружены, если вы знаете, где их искать. Наиболее тяжелые из них, с которыми, возможно, вам довелось столкнуться, имеют подробно описанные методы устранения, которые, скорее всего, в вашем случае потребуют лишь небольшого количества дополнительной работы. Хотя некоторые страницы могут по-прежнему «падать» из-за небольших утечек, самые значительные могут быть легко удалены.

читать дальше на webo.in →
Total votes 34: ↑32 and ↓2+30
Comments13

Время порталов закончилось, началось время Маркетинга

Reading time3 min
Views670
Говорят, что сегодня определяющим фактором успеха для стартапа становится продвинутый маркетинг. Магический и волнующий для технарей. Мне как маркетологу с хорошим багажом в интернет-индустрии это очень нравится. Наконец-то заканчивается время «убитых» порталов, зарабатывающих солидный куш. Интернет все же стал рынком с острой конкурентной борьбой, и маркетологи теперь в почете.

Итак, у вас в команде есть веб-программисты, и нет маркетолога, но вы настроены весьма решительно. Вы планируете запустить стартап или же пока только раздумываете над этим. Возможно, у вас уже есть парочка стартовавших проектов, но ожидания пока не оправдались.

О секретах успеха стартапов написано уже достаточно много. Надеюсь, вы изучили эту литературу и у вас есть представления об элементарных правилах по разработке стартапов. Поэтому предлагаю поговорить нам на такую тему как удержание посетителей на сайте. Почему именно удержание посетителей, а не их привлечение?
Читать дальше →
Total votes 25: ↑11 and ↓14-3
Comments54

Оптимизируем CSS-производительность

Reading time1 min
Views2.2K
Примечание: ниже перевод статьи Dean Edwards «Optimising Performance» с советами по написанию CSS-кода для Internet Explorer'а, который будет быстрее отрабатывать на клиенте. Мои комментарии далее курсивом.

При первоначальном поиске информации по теме удалось только наткнуться на советы от разработчиков Firefox, однако, последняя редакция датирована 2000 годом, да и сами советы несколько противоречивы. Если кто-то может поделиться информацией по теме, сделайте это, пожалуйста, в комментариях.

Есть несколько приемов, с помощью которых можно Увеличить производительность IE7 на вашем сайте. Они перечислены в порядке убывания важности, если можно так сказать.

читать дальше на webo.in →
Total votes 43: ↑36 and ↓7+29
Comments37

Анализируем загрузку веб-страницы

Reading time1 min
Views2K
Ниже перевод статьи «Optimizing Page Load Time», в которой автор математически рассчитывает оптимальный размер файлов для эффективной передачи при веб-запросах, рассматривает некоторые прикладные вопросы оптимизации загрузки страницы с учетом особенностей браузеров, а также дает несколько развернутых и ценных советов. Мои комментарии далее курсивом.

Существует распространенное мнение, что быстро загружающая страница положительно влияет на впечатление пользователя (improve the user experience). В последние годы многие сайты начали использовать для этой цели технологию AJAX, чтобы уменьшить время ожидания (при загрузке данных). Вместо того, что запрашивать с сервера новую страницу полностью при каждом клике, браузер часто можно либо поменять вид самой страницы (отобразив или скрыв какие-либо блоки), либо подгрузить небольшую порцию HTML-, XML- или JavaScript-кода и внести изменения на существующую страницу. В любом случае, это значительно уменьшает время, проходящее между кликом пользователя и окончанием визуализации браузером нового содержания.

Что влияет на загрузку страницы?



Однако, для большинства сайтов, загрузка страницы затрагивает десятки внешних объектов, основное время загрузки тратится на различные HTTP-запросы картинок, JavaScript-файлов и файлов стилей. AJAX, возможно, поможет в данной ситуации, но ускорение или удаление этих HTTP-запросов может принести гораздо больше пользы, хотя на данный момент нет единого мнения (a common body of knowledge), как именно это следует делать.

читать дальше на webo.in →
Total votes 60: ↑57 and ↓3+54
Comments49

Проверь силу своей дружбы

Reading time2 min
Views874
Всем нам известна пословица «Не имей сто рублей, а имей сто друзей», но мало кто пробовал ее обосновать математически. Казалось бы, что тут доказывать — каждый из друзей просто должен дать не меньше 1р. Но вот тут вступают в действие законы социальных отношений и межличностных связей: у одних может под рукой не оказаться такой суммы, другие будут недоступны, а третьи, наоборот, смогут дать целых 5.

Еще не одна социальная сеть не пробовала превратить сильные или слабые связи между своими участниками в какой-то денежный эквивалент или хотя бы попробовать их оценить. Но… встречайте: первая финансовая социальная сеть: «Казуля».

Регистрация



Регистрация открытая, основная мотивация: приведи друга и получи выигрыш. Сеть друзей удобно разбита на дерево отношений — кто кого приводит.

Путь к выигрышу

Читать дальше →
Total votes 23: ↑2 and ↓21-19
Comments25

Практический JS: проблемы innerHTML

Reading time3 min
Views41K
Примечание: ниже перевод статьи Julien Lecomte «The Problem With innerHTML», в которой автор рассматривает проблемы при использовании метода innerHTML в современных браузерах и предлагает ряд советов, как ее можно избежать. Мои комментарии далее курсивом

Свойство innerHTML крайне популярно среди веб-разработчиков в силу своей простоты и удобства, поскольку оно совершено элементарно позволяет заменить HTML-содержание у конкретного тега. Можно также воспользоваться DOM Level 2 API (removeChild, createElement, appendChild), но использование innerHTML гораздо более простой и эффективный способ для модификации DOM-дерева. Однако, есть ряд проблем при использовании innerHTML, которых следует избегать:

  • Неправильная обработка свойства innerHTML может привести к атакам, связанным со script-инъекциями (XSS) в Internet Explorer, когда HTML-строка содержит вызов <script>, помеченного как отложенный: <script defer>...</script>
  • Выставление свойства innerHTML уничтожит все текущие вложенные HTML-элементы со всеми обработчиками событий, что потенциально может вызвать утечки памяти в некоторых браузерах.


Есть и еще несколько более мелких недостатков, которые тоже стоит упомянуть:

  • Нельзя получить ссылку на только что созданные элементы, вам приходится добавлять код для получения ссылки на них вручную (используя DOM API).
  • Вы не можете выставить innerHTML для всех HTML-элементов во всех браузерах (к примеру, Internet Explorer не позволяет выставить innerHTML для строки таблицы (tr)).


Читать дальше →
Total votes 35: ↑33 and ↓2+31
Comments50

Разгони свой сайт: gamma-версия

Reading time4 min
Views905
Примерно три недели назад стартовал проект, посвященный методам оптимизации времени загрузки веб-страницы на клиенте.

Почему оптимизация?



На мой взгляд, на текущий момент веб-разработчики очень мало уделяют внимания доступности (accessibility) и удобству пользования (usability) проектов, над которыми работают. Для них сайт — это килобайты кода и пара картинок, которые нужно как-то показать клиенту. О пользователе никто при этом не думает, в лучшем случае, прикрываясь такими выражениями, как: «у меня отсюда и так все быстро грузится» или «каналы сейчас не те, что 10 лет назад».

Да, и каналы стали быстрее, и машины — мощнее. Но веб тоже не стоит на месте, и программное обеспечение порой развивается быстрее, чем «железо», которое его может обслуживать. Именно поэтому оптимизация являлась и является признаком высокого профессионализма, и лишь немногие разработчики понимают и уделяют ей должное внимание. Именно поэтому появился ресурс, целиком и полностью ориентированный на проблемы, методы, техники и решения в области оптимизации клиентской части веба.

Почему клиентской части?



На данный момент среди веб-разработчиков существует расхожее заблуждение, что скорость загрузки веб-сайта в клиентском браузере полностью определяется временем генерации html-страницы на сервере.


Естественно, это совсем не так. Загрузка страницы это не только HTML. Существует множество инструментов, которые позволяют в этом убедиться, проанализировать процесс целиком и найти в нем слабые места. Но именно такой анализ, который находится, фактически, на стороне пользователя и должен быть проведен в первую очередь при оценке доступности веб-сайта, зачастую вообще не проводят либо делают быстро и некачественно. А ведь он может позволить уменьшить время загрузки страниц на порядок.

WEBoptimizator

Читать дальше →
Total votes 77: ↑74 and ↓3+71
Comments120

CSS: все о сжатии

Reading time1 min
Views1.6K
После статей «Практический CSS/JS: архивируем все!» и «JavaScript: жать или не жать» стало ясно, что проблема уменьшения CSS-файлов в размере действительно актуальна, и общественности хотелось бы аналогичного исследования уже конкретно для такой оптимизации. Которое, собственно, и приведено ниже.

В интернете было найдено 6 различных инструментов для минимизации CSS-кода (однако, с одним из них, перловым модулем, разобраться не удалось, поэтому приведены результаты только для 5), далее ими обрабатывались несколько примеров, которые затем подвергались еще и архивированию. Результаты, опять-таки, представлены в виде графиков, ибо таблицы я нахожу менее информативными.

График сжатия CSS-файлов

читать дальше на webo.in →
Total votes 41: ↑39 and ↓2+37
Comments29

Оптимизируем «тяжелые» JavaScript-вычисления

Reading time1 min
Views2K
Примечание: ниже приведен перевод заметки из блога разработчика YUI-утилит Julien Lecomte «Running CPU Intensive JavaScript Computations in a Web Browser», в которой автор рассматривает выполнение «тяжелых» вычислений в веб-браузере и приводят ряд методов для их «оптимизации». Мои комментарии даны курсивом.

Введение



Шаблон, который я хочу ниже обсудить, хорошо известен и используется уже более 10 лет. Целью данной заметки является представить этот шаблон в новом свете и, что более важно, обсудить возможные пути для уменьшения накладных расходов.

Наиболее существенным препятствием для выполнения в веб-браузере «тяжелых» вычислений является тот факт, что весь интерфейс пользователя в браузере останавливается и ждет окончания исполнения JavaScript-кода. Это означает, что ни при каких условиях нельзя допускать того, чтобы для завершения работы скрипта требовалось более 300 мс (а лучше, если горадо меньше). Нарушение этого правила неминуемо ведет к плохому восприятию ресурса пользователем (bad user experience).

К тому же в веб-браузерах у JavaScript-процесса имеется ограниченное время для завершения своего выполнения (это может быть как фиксированное число — в случае браузеров на движке Mozilla — или какое-либо другое ограничение, например, максимальное число элементарных операций — в случае Internet Explorer). Если скрипт выполняется слишком долго, то пользователю выводится диалоговое окно, в котором запрашивается, нужно ли прервать скрипт.

читать дальше на webo.in →
Total votes 37: ↑34 and ↓3+31
Comments19

Практический JS: разгоняем все, что движется

Reading time1 min
Views854
Примечание: ниже находится перевод статьи «Speed Up Your Javascript Load Time», в ней автор рассматривает некоторые наиболее эффективные техники и методы действия по уменьшению времени отработки JavaScript'а на клиенте. Большая часть из них общеизвестна, но в статье важно не просто их перечисление, а общий подход для решения задачи оптимизации времени загрузки. Далее мои комментарии курсивом.

JavaScript становится все популярнее и популярнее. Каждый уважающий себя вебсайт старается применить его хоть где-нибудь: будь то подгрузка динамических данных через AJAX, или же некоторые специальные (визуальные) эффекты. К несчастью, за все нужно платить: приходится использовать «тяжелые» JavaScript-библиотеки, которые добавляют к размеру вашей страницы десятки или даже сотни килобайтов кода.

Пользователи так ненавидят ждать: им подавай все и сразу. Давайте тогда рассмотрим несколько методов, которые помогут вам «причесать» ваш сайт. Здесь находятся все рабочие примеры, которые будут приведены далее.

читать дальше на webo.in →
Total votes 51: ↑49 and ↓2+47
Comments27

JavaScript: жать или не жать?

Reading time1 min
Views1.8K
После публикации статьи на тему архивирования JS/CSS-файлов для последующей выдачи клиенту, я задумался на тему, какой же метод минимизации (minify) следует использовать. В докладе на конференции ClientSide'2007 не удалось установить четкого критерия, чем и как лучше всего сжимать JavaScript-файлы. Данная заметка посвящена рассмотрению как раз этой проблемы.

Задача



В качестве цели исследования был закреплен анализ всех известных средств статической минимизации JavaScript-кода, после чего нужно было ответить на три основных вопроса:

  • Имеет ли смысл пользоваться каким-либо минимизатором JS-кода?
  • Есть ли среди них универсальное средство, показывающее лучшие результаты в подавляющем большинстве случаев?
  • Если такого средства нет, то каковы критерии использования набора инструментов?


Итак, с постановкой задачи разобрались. Теперь рассмотрим, собственно, сами инструменты и графики степени сжатия ими исходного кода.

читать дальше на webo.in →
Total votes 45: ↑41 and ↓4+37
Comments61

Практический JS: оптимизируем CSS expressions

Reading time1 min
Views1.1K
Примечание: ниже находится перевод статьи «CSS Expression Optimization», в которой автор немного освещает использование и проблематику динамических свойств в CSS (aka CSS expressions). Также автор предлагает способ их оптимизации (исполнение один-единственный раз вместо постоянного выполнения). Далее приведены несколько тезисов с ClientSide'2007 по заявленной тематике. Мои комментарии даны курсивом.

CSS expressions были впервые представлены в Internet Explorer 5.0, который позволял назначать JavaScript-выражение в качестве CSS-свойства. Например, следующий код позволит разместить элемент в зависимости от того, какого размера окно браузера.

#myDiv {
   position:   absolute;
   width:      100px;
   height:     100px;
   left:       expression(document.body.offsetWidth  - 110 + "px");
   top:        expression(document.body.offsetHeight - 110 + "px");
   background: red;
}


Не самый лучший способ решения поставленной задачи, но в качестве примера его достаточно.

читать дальше на webo.in →
Total votes 40: ↑30 and ↓10+20
Comments26

Information

Rating
2,724-th
Location
Калининградская обл., Россия
Date of birth
Registered
Activity