Комментарии 47
НЛО прилетело и опубликовало эту надпись здесь
Описаная проблема возникает из-за того, что перерисовка канваса вызывает необходимость перерисовать и html-элементы, находящиеся над ним, вместе со сглаживанием и полупрозрачностью. Когда нужно перерисовать canvas 60 раз в секунду (например, при перемещении ползунков), издержки, связанные с перерисовкой html-элементов над canvas становятся заметными.
У автора jschart.usercontent.dev/entry81 отдельный канвас для миникарты и он не перерисовывается при перемещении ползунков, потому что сами ползунки сделаны на css. Соответственно, и проблема не актуальна. В целом, такой подход и производительнее и проще в реализации — нужно стараться отрисовывать canvas как можно реже, по-возможности перекладывая рендеринг на html-движок.
У автора jschart.usercontent.dev/entry81 отдельный канвас для миникарты и он не перерисовывается при перемещении ползунков, потому что сами ползунки сделаны на css. Соответственно, и проблема не актуальна. В целом, такой подход и производительнее и проще в реализации — нужно стараться отрисовывать canvas как можно реже, по-возможности перекладывая рендеринг на html-движок.
Спасибо — есть моменты которые подчеркнул для себя.
Поздно я узнал об этом конкурсе. Автор, вы молодец, и слог очень понравился как пишете, все понятно и по полочкам. Единственное, не понял к чему в конце список каких-то вакансий, в свободное от хакатонов время HR-ом подрабатываете?
Спасибо за отзыв :-) Заметка опубликована в блоге компании ГК ЛАНИТ, где я имею счастье работать ка краб на галерах уже джва года, поэтому коллеги из отдела HR не упустили возможность «попиарить» горячие вакансии.
P.S. Если что, нам, а точнее мне в команду, так же ОЧЕНЬ нужен Fullstack JavaScript разработчик.
P.S. Если что, нам, а точнее мне в команду, так же ОЧЕНЬ нужен Fullstack JavaScript разработчик.
>Я считаю, что за адекватные деньги Телеграм получит самую лучшую в мире библиотеку для отображения графиков: лучший результат из сотен попыток сделать лучше, чем у других. Соревновательный принцип позволяет получить настолько высокий уровень качества, который на заказ не способен сделать никто и ни за какие деньги.
Вы же знаете про вечный баланс олимпиадников-рокстаров и инженеров-середнячков. Вы не получите «высокий уровень качества» и «лучший результат». Точнее, результат может хорошо работать и быть производительным, но очень маловероятно, что он будет maintainable и production-quality.
Вы же знаете про вечный баланс олимпиадников-рокстаров и инженеров-середнячков. Вы не получите «высокий уровень качества» и «лучший результат». Точнее, результат может хорошо работать и быть производительным, но очень маловероятно, что он будет maintainable и production-quality.
Я сам считаю, что из «олимпиадников» боевые единицы для разработки прикладного ПО так себе — возможно это просто моя зависть, потому что я на олимпиадах показывал средние, если не сказать плохие, результаты :-)
Однако в этом конкурсе всё же своеобразный подход: он проходил в несколько этапов и задачи ставились таким образом, что плохая архитектура должна была бы привести
участника в тупик, образованный невозможностью сопровождать собственный же код. Опять же, у Дурова это не первый опыт получения кода для своих программ на конкурсной основе, полагаю он видит в этом смысл.
Жаль, что при оценке приложений судьи не обращали внимания на исходники, но, думаю, перед тем, как выбрать код, который нужно влить в свой репозиторий, они будут руководствоваться в том числе и критериями качества программ, благо выбирать им есть из чего.
Однако в этом конкурсе всё же своеобразный подход: он проходил в несколько этапов и задачи ставились таким образом, что плохая архитектура должна была бы привести
участника в тупик, образованный невозможностью сопровождать собственный же код. Опять же, у Дурова это не первый опыт получения кода для своих программ на конкурсной основе, полагаю он видит в этом смысл.
Жаль, что при оценке приложений судьи не обращали внимания на исходники, но, думаю, перед тем, как выбрать код, который нужно влить в свой репозиторий, они будут руководствоваться в том числе и критериями качества программ, благо выбирать им есть из чего.
Подпишусь под каждым словом, более того, копая исходники open source либ, я всегда видел почему сделан тот или иной костыль. И любой совершенный изначально код обрастает костылями.
То же и про производительность. Помню, вышел Chrome году в 2009-м, о боже как он быстро работал, все сразу стали на него переходить. А потом, когда его функциональность сравнялась с тем же фаерфоксом, разрыв стал уже далеко не таким впечатляющим.
Если компонент останется достаточно простым, все будет хорошо, но стоит прикрутить 20 видов анимированных маркеров, разную универсальность, поддержку тем и т.п., станет таким же как все остальные
То же и про производительность. Помню, вышел Chrome году в 2009-м, о боже как он быстро работал, все сразу стали на него переходить. А потом, когда его функциональность сравнялась с тем же фаерфоксом, разрыв стал уже далеко не таким впечатляющим.
Если компонент останется достаточно простым, все будет хорошо, но стоит прикрутить 20 видов анимированных маркеров, разную универсальность, поддержку тем и т.п., станет таким же как все остальные
Ах еслиб еще можно было открутить, цены бы решений этим небыло. Но у некоторых либ приходиться с мясом вырывать эти костыли
любые фичи несложно сделать подключаемыми и отключаемыми. засада в том, что каждая подключаемая или отключаемая фича это минимум одна, а то и несколько дополнительных опций в настройках. а чем больше у программы опций, тем более сложно и пугающе она выглядит для среднестатистического юзера. в общем, практика показывает, что юзеры намного легче мирятся с тормозами, чем со сложными для них настройками, поэтому тенденция на пихание всех фич по дефолту без явной возможности отключения или оптимизации будет скорее всего только нарастать.
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
эмм,
В конце мая, перед началом сезона отпусков, суточная посещаемость ВКонтакте достигла очередного рекорда — почти 50 млн. пользователей. Именно тогда мы завершили перевод всего кода ВКонтакте на компилируемый язык программирования, который разрабатывали более года, — KPHP. В результате практически все страницы сайта стали грузиться более чем 2 раза быстрее.
Тем не менее, в итоге все-таки ВК работает на порядок шустрее и приятнее ФБ. Вполне возможно, что говнокод от олимпиадников, который не очень поддерживаемый, но при этом работает :) Мне как пользователю важнее, что сайт работает быстро, нежели что говнокод внутри. Баланс такой баланс…
Vk — это коммерческая компания, целью которой является получение прибыли.
Они её таки получали. Разработка программного продукта была средством получения, а не целью.
Это совершенно здоровый подход в случае замкнутой на саму себя экосистемы. Используется в геймдеве под консоли повсеместно.
Vk был новой предметной областью для применения существующих подходов.
Они её таки получали. Разработка программного продукта была средством получения, а не целью.
Уже существующие решения и библиотеки использовать было нельзя, всё должно было быть написано с нуля
Это совершенно здоровый подход в случае замкнутой на саму себя экосистемы. Используется в геймдеве под консоли повсеместно.
Vk был новой предметной областью для применения существующих подходов.
Почему используете setInterval когда для плавных анимаций есть requestAnimationaframe?
requestAnimationFrame для рендеринга, поскольку в примерах рендеринга нет, решил не усложнять.
не совсем с вами согласен, это может быть полезно не только с рендерингом, React давно использует raf, вот пример из RN
facebook.github.io/react-native/docs/performance#my-touchablex-view-isn-t-very-responsive
facebook.github.io/react-native/docs/performance#my-touchablex-view-isn-t-very-responsive
НЛО прилетело и опубликовало эту надпись здесь
Статистики такой нет, при желании можно её собрать вручную, но в телеграмм-чатеге конкурсантов на первом этапе конкурса обсуждался исход участников с SVG в сторону Canvas из-за неудовлетворительной производительности. Хотя мне тогда казалось, что SVG всё-таки пошустрее. Субъективно, среди лидеров конкурса Canvas преобладает.
Очень круто. Прямо захотелось утащить пару кусков себе, жалко граффики редко юзаю.
Очень радостно видеть, что еще остались разработчики, которые заботятся о быстродействии и удобстве.
Очень радостно видеть, что еще остались разработчики, которые заботятся о быстродействии и удобстве.
Участники могут публиковать исходники? Я бы посмотрел на организацию кода в разных вариантах.
Отправка решения в виде необфусцированного кода — одно из условий второго тура. Решения и соответствующий код можно посмотреть здесь: https://contest.dev/chart-js
Как я не занял первое место
Где вы сейчас не снимаетесь?
Я занял в том же конкурсе два вторых места среди разработчиков на Андроиде, в первом туре и во втором. Ask me anything.
Тут опубликовал исходники, если кому будет интересно: github.com/where-is-s/telegram-chart-contest
Тут опубликовал исходники, если кому будет интересно: github.com/where-is-s/telegram-chart-contest
Перед реализацией графиков я провёл сравнение производительности canvas и SVG на примере, имитирующем нагрузку графиков из задания, и выяснил, что SVG намного медленнее на Android. А реализации на WebGL не получили награду выше 3-го места.
Про ускорение кода)) Проблема как всегда в базовых знаниях смежных областей. Пока афтор не разберется что такое 60fps и чем это отличается например от 50fps или 25fps — дела не будет. Можно бесконечно биться об стену головой, но если там гвоздь — в голове выйдет дырка. И дело не в коде, а в подходе))
Зарегался тут специально чтобы оставить этот коммент. Будет сумбурно, но, как говорится, нет времени объяснять.
1. Это самый несправедливый конкурс, в котором мне когда-либо приходилось принимать участие. Просто не хватает матов, чтобы изложить, что я думаю об жюри этого конкурса. Как можно призовать работы, в которых не реализован ключевой с инженерной точки зрения функционал второго этапа конкурса? я говорю о возможности зумить график.
1.1. объективно лучшая работа в конкурсе contest.dev/chart-js/entry150. но заняла 3 место.
2. Автор, вот вы пишите о перформансах свг, канваса, тайпскрипта, о 10 лет опыта. ну зачем вы обманываете себя насчет своих скиллов? делать анимацию через интервал при наличии requestanimationframe — ну это просто фейспалм. по-моему в 21 веке уже любой школьник знает, что ключевой аспект браузерного перформанса — это рендеринг. а так как рендеринг и скриптовые вычисления происходят в одном потоке, то только с помощью requestanimationframe их можно условно разделить и добиться высокого фпс. ну хотя бы контролировать этот процесс. и интервалом вы никогда не добьетесь того фпс, о котором мечтаете (деля 1000 на 16). все ваши итерации будут выстраиваться в очередь, не важно сколько времени будет занимать реальная отработка каждого цикла. и реальный фпс с вашим мнимым никогда не сойдутся, даже на примитивных задачах. не говоря уже о задаче конкурса. на старых мобилках гоняли свои графики?
3. моя работа тут contest.dev/chart-js/entry163
выиграла никакое место. замеченные ошибки описаны в ссылке. есть зум 2 графиков и плавнейший скроллинг. планировал успеть сделать остальные 3 за день-два с зумом. но времени не хватило. сделать 5 графиков без зума можно за два дня, если участвовал в первой части конкурса.
p.s. что качается справедливости оценки работ. да, согласен, это мероприятие частной компании, со своим блекджеком, и, следовательно — как хотим, так и судим, если что — идите на… Но камон, если главный устроитель конкурса из каждого ящика осуждает российское мракобесие, то имеет ли он моральное право устраивать конкурсы и судить как захочется? именно из-за репутации Дурова я решил принять участие. но, спасибо, больше не надо.
p.s.s в школе участвовал в олимпиадах по математике, физики, химии. и во всех олимпиадах принцип был такой. если суть задачи (ее ключевая фишка, заковырка) конкурсантом уловлена, а принцип, которым можно задачу решить, установлен, то даже если вычисления не верны или даже если не успел их провести, то всё равно хоть какой балл за задачу да получишь. причем если задача реально сложная, то только за метод решения (без решения) можно получить баллов больше чем за простую задачу, решенную полностью.
и это справедливо.
тут же предложили задачу на 2 недели, которую по-хорошему нужно делать месяца 2 и оценивают кто сколько графиков сверстал и кому друзья больше лайков на странице поставили. при этом еще главное продлевают на 3ий этап, т.к. никто на первое место не потянул.
заб… ла вся эта иррациональщина и упрямство. что автор, что устроитель конкурса, что гос. верховоды — одна ху… ня
1. Это самый несправедливый конкурс, в котором мне когда-либо приходилось принимать участие. Просто не хватает матов, чтобы изложить, что я думаю об жюри этого конкурса. Как можно призовать работы, в которых не реализован ключевой с инженерной точки зрения функционал второго этапа конкурса? я говорю о возможности зумить график.
1.1. объективно лучшая работа в конкурсе contest.dev/chart-js/entry150. но заняла 3 место.
2. Автор, вот вы пишите о перформансах свг, канваса, тайпскрипта, о 10 лет опыта. ну зачем вы обманываете себя насчет своих скиллов? делать анимацию через интервал при наличии requestanimationframe — ну это просто фейспалм. по-моему в 21 веке уже любой школьник знает, что ключевой аспект браузерного перформанса — это рендеринг. а так как рендеринг и скриптовые вычисления происходят в одном потоке, то только с помощью requestanimationframe их можно условно разделить и добиться высокого фпс. ну хотя бы контролировать этот процесс. и интервалом вы никогда не добьетесь того фпс, о котором мечтаете (деля 1000 на 16). все ваши итерации будут выстраиваться в очередь, не важно сколько времени будет занимать реальная отработка каждого цикла. и реальный фпс с вашим мнимым никогда не сойдутся, даже на примитивных задачах. не говоря уже о задаче конкурса. на старых мобилках гоняли свои графики?
3. моя работа тут contest.dev/chart-js/entry163
выиграла никакое место. замеченные ошибки описаны в ссылке. есть зум 2 графиков и плавнейший скроллинг. планировал успеть сделать остальные 3 за день-два с зумом. но времени не хватило. сделать 5 графиков без зума можно за два дня, если участвовал в первой части конкурса.
p.s. что качается справедливости оценки работ. да, согласен, это мероприятие частной компании, со своим блекджеком, и, следовательно — как хотим, так и судим, если что — идите на… Но камон, если главный устроитель конкурса из каждого ящика осуждает российское мракобесие, то имеет ли он моральное право устраивать конкурсы и судить как захочется? именно из-за репутации Дурова я решил принять участие. но, спасибо, больше не надо.
p.s.s в школе участвовал в олимпиадах по математике, физики, химии. и во всех олимпиадах принцип был такой. если суть задачи (ее ключевая фишка, заковырка) конкурсантом уловлена, а принцип, которым можно задачу решить, установлен, то даже если вычисления не верны или даже если не успел их провести, то всё равно хоть какой балл за задачу да получишь. причем если задача реально сложная, то только за метод решения (без решения) можно получить баллов больше чем за простую задачу, решенную полностью.
и это справедливо.
тут же предложили задачу на 2 недели, которую по-хорошему нужно делать месяца 2 и оценивают кто сколько графиков сверстал и кому друзья больше лайков на странице поставили. при этом еще главное продлевают на 3ий этап, т.к. никто на первое место не потянул.
заб… ла вся эта иррациональщина и упрямство. что автор, что устроитель конкурса, что гос. верховоды — одна ху… ня
Спасибо за отзыв, мне очень интересна ваша точка зрения по поводу конкурса, жаль что есть мат, хоть и «запиканый», как бы не прилетело НЛО и не удалило комментарий.
Мне есть что вам ответить по поводу requestanimationframe, я его использовал именно для рендеринга, а в примерах setInterval привёл потому, что в них рендеринга нет, а усложнять примеры не хотелось.
В остальном, я вас хорошо понимаю, хотя и не со всем согласен.
Мне есть что вам ответить по поводу requestanimationframe, я его использовал именно для рендеринга, а в примерах setInterval привёл потому, что в них рендеринга нет, а усложнять примеры не хотелось.
В остальном, я вас хорошо понимаю, хотя и не со всем согласен.
Согласен. Писал свое решение на WebGl (несколько типов графиков с зумом, возможностью выделить диапазон данных и т.п.). Производительность был сумашедшая. Видел, другие работы на WebGL. Они были лучше. Думал, что выйграет что-то подобное.
Когда увидел код победителя (первый этап, лапша на SVG) задумался о качестве кода в тележке и вк. Желание когда либо ещё участвовать в подобном конкурсе отпало.
Когда увидел код победителя (первый этап, лапша на SVG) задумался о качестве кода в тележке и вк. Желание когда либо ещё участвовать в подобном конкурсе отпало.
Благодарю за статью и хорошо структурированный код. Сам незримо участвовал для получения опыта — за пару дней собрал рабочий прототип (тоже canvas), определил моменты в которых был слаб и точечно прокачал. Отдавая себе отчет, что первое-второе место для javascript-разработчика (а участвовало их много) взять будет неоправданно сложно, а поощрительные призы экономически невыгодны, дальше дорабатывать не стал. А пара дней на то, чтобы расшевелить мозг новыми задачами — это удовольствие.
к сожалению поздно узнал о конкурсе (где-то неделя первого прошла), но было интересно)
опыта с канвасом вообще не имел до этого(да и вообще еще малоопытный:) ), плюс паралельно работал, но было интересно)
хотя исходники оставляют желать лучшего… сейчас занят немножко другим обучением, закончу, отрефачу и закину в проектик который пилю сейчас)
shersh1k.github.io — собсно мой результат)
опыта с канвасом вообще не имел до этого(да и вообще еще малоопытный:) ), плюс паралельно работал, но было интересно)
хотя исходники оставляют желать лучшего… сейчас занят немножко другим обучением, закончу, отрефачу и закину в проектик который пилю сейчас)
shersh1k.github.io — собсно мой результат)
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Как я не занял первое место в конкурсе для JavaScript-разработчиков от Telegram