• Обходим ограничения браузера на число соединений

    • Перевод
    Несколько дней назад эта видео-запись размещенная на metacafe высветилась на digg. В ней объяснялось, как увеличить скорость открытия сайтов путем тонкого тюнинга браузера и изменения его настроек, отвечающих за число параллельных соединений. Чтобы объяснить, почему это работает, давайте немного углубимся в то, как браузеры обслуживают серверные соединения.

    Утилитарный выбор



    При разработке любых приложений всем разработчикам приходится делать то, что называется «утилитарным» выбором (utilitarian choice). Если несколько вычурно перефразировать Jeremy Bentham, то «утилитарным» можно назвать тот подход, «в результате которого мы получаем наибольшее количество добра для наибольшего числа [людей]». Много раз производительностью жертвовали для небольшого числа пользователей, чтобы, в результате, средняя производительность для всех пользователей в совокупности была бы лучше.

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

    читать дальше на webo.in →
  • Оптимизируем «тяжелые» JavaScript-вычисления

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

    Введение



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

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

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

    читать дальше на webo.in →
  • Изучаем потоки, чанки и ищем конец

    • Перевод
    Примечание: ниже перевод статьи «On Streaming, Chunking, and Finding the End», в которой авторы рассматривают процесс передачи информации по HTTP-соединению и возможности для ускорения этого процесса. Мои комментарии далее курсивом.

    Два способа передачи



    Как и в большинстве механизмов передачи данных, в HTTP существует два основных способа отправить сообщение: «все и сразу» или «по частям». Другими словами, в HTTP есть возможность отправлять данные до тех пор, пока еще есть хотя бы что-то, что можно отправить, либо отправить все данные как одну логическую единицу, указав предварительно ее размер.

    Если вы занимаетесь веб-разработками достаточно продолжительное время, скорее всего, вы уже знаете, как работает сброс буфера (flush) на стороне сервера. Этот метод позволяет начать отправку части данных пользователю, в то время как скрипт может продолжать выполнять некоторые, достаточно медленные, действия (скажем, ресурсоемкий запрос к базе данных). Если вы уже применяли эту возможность, тогда вы, вероятно, использовали преимущества потокового (streaming) механизма, хотя могли и не знать всех деталей работы HTTP-протокола.

    читать дальше на webo.in →
  • Проблемы сжатия и объединения Javascript

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

      Начнем с простого: как JS-сжатие способно испортить нам настроение. И как его поднять обратно :)

      UPD стартовал конкурс ускорения сайтов. В призах: монитор, веб-камера, мышь. Все гипер-быстрое.
      Читать дальше →
    • Исследование степени gzip-сжатия и загрузки процессора

        Статья «Как gzip-сжатие влияет на производительность сервера» вызвала вполне понятную, но несколько неоднозначную реакцию, ибо было не понятно, насколько сильно издержки на gzip зависят от степени сжатия и как ее прогнозировать с учетом всех остальных параметров. Хочется сказать отдельное спасибо посмотреть профиль alfa, который, собственно, и поднял этот вопрос.

        Итак, новая серия тестов была направлена на установление зависимости между степенью сжатия, процессорными издержками и уменьшением размера файла, чтобы на основе этих данных сделать аналитический инструмент для вычисления оптимальной степени сжатия.
        Читать дальше →
      • Практический JS: избавляемся от утечек памяти в IE

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

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

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



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

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

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

        читать дальше на webo.in →
      • Еще один способ сжатия CSS файлов

        image


        На изображении выше многие увидят известную картину. Так выглядит большинство CSS файлов на продакшене. Мы все стараемся, чтобы наши веб-страницы загружались быстро; для достижения этой цели используем различные инструменты и техники оптимизации загрузки и рендеринга страниц. Об одном, но редко используемом методе, я бы хотел поговорить и рассказать, как мне удалось сократить размер CSS файла почты mail.ru на 180Кб.
        Читать дальше →
      • Локализацию можно автоматизировать: опыт использования Lokalise в боевых условиях

          Lokalise — это сервис для локализации проектов, который позволяет автоматизировать процесс перевода элементов UI в мобильных приложениях, ПО и на вебе. Обычно в качестве первого шага вы загружаете свои файлы локализации, а дальше тексты правятся менеджерами продукта и переводятся либо вашими переводчиками, либо наемной командой уже на стороне Lokalise.

          image
          Читать дальше →
        • Цена JavaScript в 2018 году

          • Перевод
          Процесс работы пользователей с интерактивными веб-сайтами может включать в себя шаг отправки им JavaScript-кода. Часто — слишком большого объёма такого кода. Если на сайте используется очень много JavaScript, это особенно сильно сказывается на мобильных пользователях. Например, вам случалось бывать на мобильных веб-страницах, которые, вроде бы, выглядят как уже готовые к работе, но не реагируют на щелчки по ссылкам или на попытки прокрутить страницу?


          JavaScript-код, который попадает в мобильные браузеры, всё ещё остаётся самым дорогостоящим ресурсом, так как он, многими способами, может задержать переход страниц в состояние, в котором с ними можно взаимодействовать. Какую нагрузку на системы создаёт JavaScript в наши дни? Как анализировать сайты? Как ускорить загрузку и обработку браузерами интерактивных веб-страниц? Эдди Османи, перевод материала которого мы сегодня публикуем, решил найти ответы на эти и на многие другие вопросы, встающие перед теми, кто пользуется JavaScript для разработки веб-сайтов в 2018 году.
          Читать дальше →
        • Рефакторинг платежного процесса Я.Денег — пробуждение силы

            image alt text


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


            И тогда приходит он, рефакторинг платежного процесса. Но мы решили сделать процесс еще интереснее, добавив к рефакторингу идеи IDEF-0.

            Читать дальше →
            • +30
            • 8,9k
            • 8
          • Оптимизируем CSS-производительность

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

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

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

            читать дальше на webo.in →
          • Что взять за основу React приложения

              Каждый раз начиная писать React приложение, вы так или иначе выберите какой-то вариант:


              • копи-паст вашего предыдущего проекта
              • какой-то бойлерплейт или даже генератор (типа Yeoman)
              • готовый фреймворк не требующий конфигурации
              • пишете сами все с нуля

              Каждый из способов имеет свои сильные и слабые стороны, как на длинной, так и на короткой дистанции.


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

              Читать дальше →
            • Оптимизация HTTP-сервера через версионность ресурсов. Особенности реализации

                1. Суть оптимизации
                2. Page load vs forced refresh
                3. Потребуется автоматизация
                4. Реализация серверной части
                5. Оптимизация серверной части
                6. Особенности google app engine
                7. Исходный код
                8. Резюме


                Рассматривается пример реализации для Google App Engine / Python.

                Читать дальше →
              • Вы можете себе это позволить? Бюджет веб-производительности в реальном мире

                • Перевод
                Автор — Алекс Расселл, разработчик Chrome, Blink и веб-платформы в Google

                TL;DR: бюджеты производительности — существенная, но недооценённая часть успешного продукта и здоровой команды. Большинство наших партнёров не осведомлены об условиях реального мира — и в результате выбирают не те технологии. Мы установили бюджет по времени пять и менее секунд до интерактивности сайта после первой загрузки, а также две или менее секунд при последующих загрузках. При соблюдении этих нормативов мы ограничены типичным устройством из реального мира и типичной сетевой конфигурацией. Это Android-смартфон за $200 на канале 400 Кбит/с, RTT 400 мс. Это означает бюджет ~130-170 КБ ресурсов критического пути, в зависимости от их состава: чем больше JS — тем меньше объём.

                За последние несколько лет мы имели удовольствие работать с десятками команд. Работа оказалась просветляющей, иногда в очень неожиданных местах. Один из самых неожиданных результатов — частые случаи «западни JavaScript».


                «Нам нужен новый термин для упущенных деловых возможностей из-за современного фронтенда. Может быть, “западня JavaScript”»?

                Управленцы, которые дают добро на создание прогрессивных веб-приложений (PWA), часто основным мотивом называют практически беспроблемный охват новых пользователей. В то же время разработчики осваивают инструменты, которые делают возможной достижение такой цели. Никто не хотел плохого. Тем не менее, результаты «готового» проекта PWA часто требуют недель или месяцев болезненной переделки, чтобы обеспечить минимально приемлемую производительность.
                Читать дальше →
              • Как нам удалось построить видеохостинг за 1¢/ГБ

                  Почему видеохостинг такой дорогой


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

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

                  Аренда серверов для видеохостинга в США значительно дешевле (за исходящий гигабайт), чем во многих других странах. Однако доставка видео с американских серверов на другие континенты редко бывает достаточно быстрой, чтобы фильм можно было смотреть без перерывов на буферизацию, и чтобы время ожидания перед началом воспроизведения было приемлемым. Поэтому хозяевам сайтов с видеороликами, выходящих на международную аудиторию, приходится арендовать местные сервера в разных частях света поближе к своим пользователям. Показ ролика пользователю из России, например, обходится типичному видеосайту в несколько раз дороже, чем показ того же ролика американцу. Приходится или дороже платить, или снижать качество видео для зарубежных зрителей. Вот и выходи после этого на международный рынок.

                  Чтобы решить эту проблему, нам пришлось сделать софт умнее.


                  Читать дальше →
                • Оптимизация статического сайта: десятикратное ускорение

                  • Перевод
                  Джонлука Де Каро, автор материала, перевод которого мы сегодня публикуем, однажды оказался в заграничной поездке и захотел показать другу свою личную страничку в интернете. Надо сказать, что это был обычный статический сайт, но, в процессе демонстрации оказалось, что всё работает медленнее, чем можно было бы ожидать.

                  image

                  На сайте не применялось никаких динамических механизмов — там было немного анимации, он был создан с применением методов отзывчивого дизайна, но содержимое ресурса практически всегда оставалось неизменным. Автор статьи говорит, что то, что он увидел, быстро проанализировав ситуацию, буквально привело его в ужас. События DOMContentLoaded пришлось ждать около 4-х секунд, на полную загрузку страницы ушло 6.8 секунды. В процессе загрузки было выполнено 20 запросов, общий объём переданных данных составил около мегабайта. А ведь речь идёт о статическом сайте. Тут Джонлука понял, что он раньше считал свой сайт невероятно быстрым лишь потому, что привык к гигабитному интернет-соединению с низкой задержкой, используя которое, он, из Лос-Анджелеса, работал с сервером, расположенным в Сан-Франциско. Теперь же он оказался в Италии и воспользовался интернет-соединением на 8 Мбит/с. А это совершенно поменяло картину происходящего.

                  В этой статье Джонлука Де Каро расскажет о том, как ему удалось ускорить свой статический сайт в десять раз.
                  Читать дальше →
                • Настраиваем Windows Server так, чтобы у вас все было, при этом вам за это ничего не было


                    Parallels Parallels Remote Application Server (RAS) представляет из себя RDP с человеческим лицом, но некоторые его фишки должны быть настроены на стороне Windows Server (либо в виртуальных машинах, которые вы используете). Под катом рекомендации Матвея Коровина из команды техподдержки Parallels о настройках Windows Server при использовании RAS.
                    Читать дальше →
                  • Быстрая интерактивная схема зала на canvas


                      Разрабатываем библиотеку для отображения больших интерактивных схем залов на canvas без фреймворков и заставляем хорошо работать в ie и мобильных устройствах. Попутно разбираемся с особенностями работы canvas.

                      Читать дальше →
                    • PWA — это просто. Hello Habr

                        Продолжаем знакомство с Progressive Web Applications. После теоретической прошлой части самое время перейти к практике.

                        Сегодня мы построим простое, но полноценное PWA «Hello Habr».




                        Приложение доступно по адресу https://altrusl.github.io/habr-pwa/hello-habr/. При открытии в браузере на мобильном устройстве возможно добавление ярлыка на домашний экран и запуск в полноэкранном режиме.
                        Читать дальше →
                      • Android Go — будущий миллиард устройств и лимит в 50 МБ. Лекция Яндекса

                          Новые направления развития уже знакомой платформы — это всегда интересно. С одной стороны, вы расширяете клиентскую базу, с другой — не вкладываетесь в создание софта с нуля, а используете существующие наработки. Но если направление действительно новое, со своей спецификой, то совсем малой кровью обойтись не удастся. На очередной встрече сообщества Mosdroid в нашем офисе разработчик Артур Василов Arturka рассказал об адаптации приложения «Яндекс» под систему Android Go.


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

                          Читать дальше →

                        Самое читаемое