Обновить
64K+

Клиентская оптимизация *

Делаем сайты удобнее и приятнее

22,29
Рейтинг
Сначала показывать
Период
Уровень сложности

Раздувание кода стало астрономическим

Время на прочтение5 мин
Охват и читатели100K

Время от времени я пользуюсь одним сервисом: мне нужно загрузить файлы в какое-то место (название сервиса не имеет роли, потому что, откровенно говоря, все они одинаковы). По сути, я просто указываю папку на своём жёстком диске, после чего её содержимое копируется на удалённый сервер, на котором, вероятно, происходит что-то связанное с базами данных — этим файлам присваиваются имена и выполняются проверки того, кто их скачивает.

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

… но по сути, речь идёт о том, что нужно зарегистрировать несколько файлов, считать их, загрузить, а затем закрыть соединение и записать в файл лога, всё ли прошло успешно, а если нет, то что именно случилось. В этом нет ничего сложного, и даже я писал с нуля подобный код при помощи Wininet API и PHP на сервере, общающемся с моей базой данных MySQL. Наверно, моя система была не такой надёжной, как системы уровня энтерпрайза, однако поддерживала сотни тысяч загруженных файлов, их верификацию, скачивание и логирование. Наверно, это работа для одного кодера на две-три недели?

Специальный инструмент загрузки на сервер, которым я пользуюсь сегодня, суммарно имеет 230 МБ клиентских файлов и задействует 2,7 тысяч файлов для управления этим процессом.
Читать дальше →

Новости

Как молодой девушке уехать на Яндекс.Такси в промзону и пропасть среди гаражей

Уровень сложностиПростой
Время на прочтение7 мин
Охват и читатели53K

Прошло почти 5 лет с момента вскрытия уязвимости кнопки «Безопасность» в сервисе Яндекс.Такси, который ныне зовётся YandexGo. Но я снова решил сожрать тот же кактус.

И отправил двух дорогих мне людей на этом сервисе...

Уехать в гаражи на Яндекс.Такси...

7-zip — нет времени спешить

Время на прочтение12 мин
Охват и читатели50K

Данной заметки не должно было быть, но мы живем не в идеальном мире. Есть много пользователей, что предпочли стандартному проводнику Windows альтернативу и наверное еще больше пользователей архиватора 7-zip. Имеет смысл поделиться с ними, подумал я и вот мы здесь.

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

Что делает обычный эникейщик в подобной ситуации? Конечно же берет в руки первый подвернувшийся профайлер.

Читать далее

Оптимизация PNG и JPEG без потери качества. Часть 1

Время на прочтение9 мин
Охват и читатели238K

Введение


Предлагаю Вашему вниманию обзор посвященный оптимизации изображений формата PNG и JPEG без потери качества. Под «без потери качества» подразумевается, что визуально оригинальные и оптимизированные изображения ни чем не будут отличаться. Я читал на Хабре довольно много статьей посвященных данному вопросу, но скажу, большая часть — полная чушь, в них констатируются факты, а не причины. Данный обзор посвящен людям, которые имеют базовые знания об оптимизации изображений.
Читать дальше →

Совместный эксперимент команд Яндекс.Почты и Nginx: действительно ли SPDY ускорит интернет?

Время на прочтение7 мин
Охват и читатели67K
Мы в Яндекс.Почте совместно с командой Nginx провели исследование, чтобы на живом примере с подробностями расставить точки над «ё» в вопросе о том, насколько и за счет чего SPDY ускоряет интернет.

Про сам SPDY вы, конечно, знаете. В 2011 году несколько разработчиков компании Google опубликовали черновик нового протокола, призванного стать заменой привычному HTTP. Его основные отличия заключались в мультиплексировании ответов, сжатии заголовков и приоритизации трафика. Первые несколько версий были не вполне удачными, но к 2012 году спецификация устоялась, появились первые альтернативные (не из Google) реализации, доля поддержки в браузерах достигла 80%, вышла стабильная версия nginx с поддержкий SPDY.



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

Есть много интересных исследований вокруг SPDY, в том числе самого Google. Компания-автор протокола показывала, что в их случае SPDY ускоряет загрузку на 40%. Исследование протокола SPDY проводила и компания Opera. Но ни методик подсчета, ни примеров страниц, на которых были достигнуты столь впечатляющие результаты, в этих исследованиях не было.
Итак, что именно мы измеряли и к каким выводам пришли

Почему для открытия меню Windows читает один файл сто тысяч раз?

Время на прочтение4 мин
Охват и читатели160K

«Проводник тратит 700 мс на то, чтобы открыть контекстное меню панели задач. 75% этого времени он выполняет 114 801 операцию считывания из одного файла, средний объём считываемых данных 68 байт.

Мне стоит написать пост об этом, или достаточно саркастичного твита?»


За компьютером я работаю быстро, и поэтому меня раздражает, когда приходится ждать завершения операции, которая должна выполняться мгновенно. Постоянной помехой на моём сверхмощном домашнем ноутбуке стало медленное закрывание окон на панели задач. Я нажимаю правой клавишей на значок, жду, пока откроется меню, а затем выбираю «Закрыть окно». Самым медленным в этом процессе должны быть перемещения мыши, но выясняется, что наиболее долгим компонентом оказывается задержка перед появлением меню.

Это напрягало меня уже давно, но я проявлял нехарактерный мне самоконтроль и удерживался от раздражения. Так было до сегодняшнего дня, когда я наконец сорвался и схватился за трассировщик ETW.

Этот пост написан как проверка скоростного блогинга. От момента нахождения проблемы и саркастичного твита о ней до публикации поста прошло примерно 90 минут.
Читать дальше →

Название имеет значение: как получить оптимизацию, переименовав браузер

Время на прочтение4 мин
Охват и читатели41K

Всем привет! Меня зовут Максим Смирнов, я руковожу командой, которая работает над производительностью Яндекс Браузера и отвечает за его графическую подсистему. В этой статье я расскажу об одном неочевидном улучшении, которое наша команда внедрила в Браузер для Windows. Если описать его в двух словах, то нам удалось улучшить стабильность и производительность браузера, убедив драйверы видеокарт, что наше приложение — это Google Chrome.

Читать далее

Лёгкий сайт или как посадить браузер на диету

Время на прочтение14 мин
Охват и читатели145K

А что если объединить профессионалов, работавших над крупными web проектами, чтобы создать исчерпывающее руководство по оптимизации front-end разработки?
И получить в результате не скучную инструкцию, а что то поинтереснее? А если позвать Briza Bueno (Americanas.com), Davidson Fellipe (Globo.com), Giovanni Keppelen (ex-Peixe Urbano), Jaydson Gomes (Terra), Marcel Duran (Twitter), Mike Taylor (Opera), Renato Mangini (Google), и Sérgio Lopes (Caelum) чтобы собрать лучшие практики?

Именно это мы и сделали! Мы научим вас создавать быстрые сайты.

Zeno Rocha, руководитель проекта.


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

Как я сократил время загрузки GTA Online на 70%

Время на прочтение7 мин
Охват и читатели98K
GTA Online. Многопользовательская игра, печально известная медленной загрузкой. Недавно я вернулся, чтобы завершить несколько ограблений — и был потрясён, что она загружается настолько же медленно, как и в день своего выпуска, 7 лет назад.

Пришло время докопаться до сути.

Разведка


Сначала я хотел проверить, вдруг кто-то уже решил проблему. Но нашёл только рассказы о великой сложности игры, из-за чего она так долго загружается, истории о том, что сетевая p2p-архитектура — мусор (хотя это не так), некоторые сложные способы загрузки в сюжетный режим, а потом в одиночную сессию, и ещё пару модов, чтобы скипнуть видео с логотипом R* во время загрузки. Ещё немного почитав форумы, я узнал, что можно сэкономить колоссальные 10-30 секунд, если использовать все эти способы вместе!
Читать дальше →

Насколько быстр Javascript? Симулируем 20 миллионов частиц

Уровень сложностиПростой
Время на прочтение23 мин
Охват и читатели44K

Я бросил себе вызов: симулировать 1000000 (миллион) частиц на чистом Javascript на телефоне, используя только CPU и добившись 60 FPS.

Поехали.

Задача не особо сложна, если выполнять всю работу на GPU, но правило гласит, что нужно пользоваться только CPU, при этом работая на JS, так что никакого WASM.

Читать далее

Заглядываем под капот нового Gmail

Время на прочтение4 мин
Охват и читатели59K

Полгода назад Google представила обновленную версию своего почтового сервиса. Несмотря на то что многие пользователи были недовольны редизайном, в том числе и на Хабре, это теперь основной интерфейс для пользователей.


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

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

Собираем автономную игру на C# в 2 килобайтах

Уровень сложностиСредний
Время на прочтение11 мин
Охват и читатели24K

Моё детство пришлось на эпоху 1,44-мегабайтных дискет и 56-килобитных модемов, поэтому я всегда любил маленькие программы. Раньше можно было записать на дискету кучу мелких игр и таскать её с собой. Если программа не помещалась на дискету, я задумывался, почему — в ней много графики? Есть музыка? Возможно, она выполняет много сложных операций? Или она просто раздута?

В наши дни дисковое пространство стало настолько дешёвым, что люди отказались от оптимизации по размеру.

Размер важен только при передаче: если вы передаёте программу по проводам, мегабайты равны секундам. По быстрому соединению на 100 Мбит в лучшем случае можно передать 12 МБ в секунду. Если на другом конце провода находится человек, ожидающий завершения скачивания, то разница между пятью и одной секундой может существенно повлиять на его ощущения.

Человек может зависеть от времени передачи как напрямую (пользователь, скачивающий программу по сети), так и косвенно (serverless-сервис, отвечающий на веб-запрос).

Люди обычно воспринимают всё, что длится меньше 0,1 секунды, как мгновенное, 3 секунды — это примерно тот предел, после которого прерывается состояние потока пользователя; а уж 10 секунд удержать внимание пользователя очень сложно.

Хотя уменьшение сегодня уже необязательно, оно всё равно лучше.

Эта статья задумывалась как эксперимент, позволяющий выяснить, каким может быть минимальный размер полезного автономного исполняемого файла C#. Могут ли приложения на C# достичь размеров, при которых пользователи будут ощущать их скачивание как мгновенное? Позволит ли это использовать C# там, где он не используется сейчас?
Читать дальше →

14 интересных фич Python (возможно, не совсем pythonic)

Уровень сложностиСредний
Время на прочтение21 мин
Охват и читатели44K

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

Если загуглить лучшие 10 продвинутых хитростей Python, то вы найдёте кучу постов или статей на LinkedIn с обзором тривиальных (но всё же полезных) вещей типа генераторов или кортежей.

Я пишу на Python уже двенадцать лет, и за это время нашёл кучу очень интересных, недооценённых, уникальных или (как может кто-то сказать) «не-pythonic» хитростей, позволяющих по-настоящему расширить границы возможного для Python.

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

Ближайшие события

CSS спрайты из командной строки

Время на прочтение3 мин
Охват и читатели4.4K
Да, инструменты для создания CSS спрайтов существуют. Я даже сделал один такой сервис. Но они время от времени ломаются (как сейчас, мой). Но и командная многого стоит, и imagemagick. Давайте посмотрим, как мы можем создавать CSS спрайты только из командной строки.

Создание картинки


Начнем с того, что у нас есть список отдельных файлов:
$ ls

1.png  2.gif  dot.png  phoney.gif  tw.gif

  • — 1.png
  • — 2.gif
  • — dot.png
  • — phoney.gif
  • — tw.gif

Сделаем из них спрайт:
$ convert *png *gif -append result/result-sprite.png

Да, это все. Смотрим результат.

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

Я хочу, чтобы сайты открывались мгновенно

Время на прочтение10 мин
Охват и читатели141K
Здравствуйте, меня зовут Александр Зеленин и я веб-разработчик. Я расскажу, как сделать так, чтобы ваш сайт открывался быстро. Очень быстро.


Я хочу, чтобы мой сайт открывался быстро

Как я оптимизировал отдел и получил врагов вместо премии

Время на прочтение4 мин
Охват и читатели44K

Продолжаю цикл статей из серии давно минувших дней.

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

2010г: по семейным обстоятельствам я оказался в глубоком финансовом кризисе. У меня не было денег даже на бензин. Один знакомый мне предложил поработать у них в отделе 1с-ником. Оплата была небольшая (по сравнению с рынком). Я согласился поработать у них несколько месяцев, пока не найду нормальное место, такой и был изначальный уговор. В отделе 1С было 3 человека, я стал четвертым.

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

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

В том отделе 4 человека. Одна из их задач была подбирать копейки для счетов-фактур. Чтобы строки с итоговой суммой сходились. Ну вы знаете про округление. Для этого у них был целый инструмент - документ в 1С аж с десятитысячными долями в ценах! Они там сидели вручную подбирали десятые доли копеек. Этот процесс был легендарным. Считалось, что его нельзя автоматизировать - кто ни пробовал, ни у кого не получалось, так мне сказал начальник.

Да как так? Не может такого быть! Я-не-ве-рю! Покажите!

Читать далее

Неожиданные причины торможения программ и систем

Время на прочтение29 мин
Охват и читатели54K

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

Я назвал пост Surprisingly Slow потому, что замедление было для меня неожиданным, или неоптимальные практики, ведущие к замедлению, настолько распространены, что многие программисты будут удивлены их существованию.

Разделы поста чаще всего никак не связаны друг с другом, поэтому можете выбирать самые интересные для вас.
Читать дальше →

Js, трюки, наблюдения, бенчмарки и как Лиса уничтожает Хром. Я протестировал всё, что вам было лень

Время на прочтение4 мин
Охват и читатели27K
Картинка, конечно, стронгли анрилейтед

Разные трюки я тестировал на Google Chrome 107.0.5304.107 и Mozilla Firefox 107.0 на Windows 10.

Чтобы результаты всегда были железно воспроизводимыми, я отключил все С-State’ы, ядра зафиксировал на 5 ГГц.

У меня 9900К, это Coffee Lake c AVX256, какие оптимизации применит Jit для вашего процессора — я не знаю, результат на вашем компьютере может отличаться от моего, в т.ч. из-за микроархитектуры процессора.

Скорость парсинга кода тоже входит в бенчмарк, поэтому браузер с быстрым парсером будет впереди.
Читать дальше →

Производительность flash-баннеров

Время на прочтение2 мин
Охват и читатели4.5K
Частяком, когда я работаю с множеством сайтов, какая-нибудь самая наглая страничка отнимает слишком много процессорного времени, из-за чего система неприятно подтормаживает. Чаще всего оказывается, что виновник — это какой-нибудь хитрый баннер на Flash или совершенно бесполезная приблуда на JavaScript, выполняющаяся в фоне.
Читать дальше →

Славик и GMT+3 или польза для людей

Время на прочтение3 мин
Охват и читатели36K
Это Славик — обычный ПХП-программист. Не джуниор и не сеньор, а парень из тех, кого раньше называли «веб-мастерами». Славик может и ЦМС поковырять, и свою написать, и шаблон сверстать, и сервер поадминить.

В этом году Славик завязал со всем этим и решил устроиться на стабильную работу. Знакомые подкинули неплохой вариант — транспортной компании «N-лайнз» нужен разработчик на поддержку готовой системы бронирования.

Славик обрадовался. Оплата неплохая, стабильная, всегда есть что делать. А главное, наконец-то будет явная польза для людей. Славику всегда хотелось понимать, как его работа кому-то принесёт пользу. Так он туда и устроился.

Однажды утром Славик увидел в Джире новую задачу:


Читать дальше →
1
23 ...