Рубрика «Разработка веб-сайтов» - 63

в 11:19, , рубрики: CDN, chrome devtools, css, font-display, Google Fonts, graphql, html, http/2, lighthouse, preconnect, preload, Service Workers, webpack, webpagetest, Блог компании ITSumma, высокая производительность, Клиентская оптимизация, кэширование, оптимизация, производительность, Разработка веб-сайтов, разработка мобильных приложений, сервис-воркеры, шрифты

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

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

Процесс загрузки разделим на три этапа. Для каждого этапа сформулируем общие стратегии повышения производительности:

  1. Начальная отрисовка: сколько времени требуется, чтобы пользователь увидел хоть что-то
    • Сократить запросы, блокирующие рендеринг
    • Избегать последовательных цепочек
    • Повторно использовать соединения с сервером
    • Сервис-воркеры для мгновенного рендеринга
  2. Загрузка приложения: сколько времени требуется, чтобы пользователь смог использовать приложение
    • Разбить пакет приложения на части. Загружать только необходимые ресурсы. Максимизация попаданий в кэш
    • Проверить, что хэши частей пакета не меняются без необходимости
    • Запрашивать данные для страницы до загрузки всего приложения
    • Не блокировать рендеринг загрузкой второстепенных данных
    • Рассмотреть рендеринг на стороне сервера
  3. Следующая страница: сколько времени требуется для перехода на следующую страницу
    • Запрашивать дополнительный код до того, как он понадобится
    • Кэшировать и повторно использовать данные на клиенте

Читать полностью »

в 10:00, , рубрики: javascript, Блог компании RUVDS.com, разработка, Разработка веб-сайтов

Сегодня мы публикуем перевод статьи о математических вычислениях в JavaScript, которая представляет собой письменный вариант выступления её автора на WaffleJS. А само это выступление было чем-то вроде продолжения этой беседы в Twitter.

Об изменчивых методах объекта Math в JavaScript - 1


Математическое образование
Читать полностью »

в 9:30, , рубрики: open source, безопасность, Блог компании RUVDS.com, облачные сервисы, Разработка веб-сайтов

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

7 опенсорсных инструментов для мониторинга безопасности облачных систем, о которых стоит знать - 1

В статье, перевод которой мы сегодня публикуем, представлен обзор 7 опенсорсных инструментов для мониторинга безопасности облачных систем. Эти инструменты предназначены для защиты от хакеров и киберпреступников путём детектирования аномалий и небезопасных действий.
Читать полностью »

в 4:46, , рубрики: ECMAScript, javascript, Specification, Программирование, разработка, Разработка веб-сайтов, спецификация

Понимание спецификации ECMAScript, часть 1 - 1

Доброго времени суток, друзья!

В данной статье мы возьмем функцию из спецификации и разберем ее объяснение. Поехали.

Предисловие

Даже если вы хорошо знаете JavaScript, чтение спецификации может быть затруднительным. Следующий код демонстрирует использование Object.prototype.hasOwnProperty:

const o = {
    foo: 1
}
o.hasOwnProperty('foo') // true
o.hasOwnProperty('bar') // false

В примере объект «o» не имеет метода «hasOwnProperty», поэтому мы обращаемся к его прототипу — «Object.prototype» (цепочка прототипов).

Для описания того, как работает Object.hasOwnProperty, в спецификации используется следующий псевдокод:
Читать полностью »

в 15:04, , рубрики: badoo, idea, kotlin, php, phpstrom, plugin, Блог компании Badoo, высокая производительность, Программирование, Разработка веб-сайтов

Привет! Я тружусь в команде Антиспама, и, как и у большинства бэкенд-разработчиков Badoo, большая часть времени у меня уходит на работу с PHP-кодом.

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

Так появился плагин Badoo для PhpStorm, который мы сегодня активно используем. За несколько лет его возможности серьёзно расширились, мы его развиваем, и в этой статье я расскажу на примере наших кейсов, как адаптировать IDE под свои задачи и инструменты, и докажу, что это не так сложно, как кажется.

Избавляемся от рутины со своим плагином для PhpStorm - 1
Читать полностью »

в 10:00, , рубрики: css, html, javascript, Блог компании RUVDS.com, разработка, Разработка веб-сайтов

Кнопка — это один из тех элементов, которые чаще всего используются на веб-страницах. Тег <button></button> может быть применён для запуска некоего процесса вроде вывода данных, открытия модального окна, отправки формы и так далее. В материале, перевод которого мы публикуем, речь пойдёт о тонкостях стилизации элемента button и о том, как оформлять кнопки с учётом того, чтобы они хорошо работали бы в любых браузерах. Кроме того, тут будет рассмотрено большинство часто используемых стилей кнопок. Поговорим мы здесь и о некоторых сложностях, которые возникают при работе с кнопками.

Стилизация старого доброго элемента button - 1
Читать полностью »

в 9:30, , рубрики: javascript, Блог компании RUVDS.com, браузеры, разработка, Разработка веб-сайтов

Автор статьи, перевод которой мы сегодня публикуем, решил рассказать о нескольких необычных способах измерения времени в браузерах. Для их использования понадобится доступ к различным API, которые применяются в веб-разработке, поэтому они не подходят для платформы Node.js. Правда, если кто-то нуждается в необычном способе измерения времени в Node.js, то, полагаем, после прочтения этого материала у него могут появиться кое-какие идеи на этот счёт.

JavaScript и кое-что ещё: 4 креативных подхода к измерению времени в браузерах - 1
Читать полностью »

в 12:36, , рубрики: heisenbug, heisenbug playwright, heisenbug testing, heisenbug2020, heisenbug2020piter, javascript, playwright, Разработка веб-сайтов, Тестирование IT-систем, Тестирование веб-сервисов

Совсем недавно вышла статья про новый инструмент Playwright, одним из авторов которого является Андрей Лушников. Нам выпала возможность пообщаться с Андреем и задать все вопросы, которые внимательные читатели написали в комментариях. Думаю, в этом лонгриде они смогут найти ответы. Немного спойлеров:

  • Андрей рассказал историю развития Playwright и Puppeteer;
  • ответил на вопросы про протоколы, которые используют для работы с браузерами;
  • рассказал про сложности браузерных движков и планируемые интеграции Playwright.

«Если сайты будут работать лучше — это будет идеально»: интервью с разработчиком Playwright Андреем Лушниковым - 1

Андрей Лушников приедет в Санкт-Петербург 8-9 апреля на конференцию Heisenbug, где и у вас будет возможность задать ему вопросы.
Читать полностью »

в 9:34, , рубрики: Блог компании RUVDS.com, математика, разработка, Разработка веб-сайтов

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

Генерирование псевдослучайных чисел с помощью клеточного автомата: Правило 30 - 1

Существует множество способов генерирования псевдослучайных чисел. Например — алгоритм Блюма — Блюма — Шуба, метод средних квадратов, метод Фибоначчи с запаздываниями. Сегодня мы поговорим о генерировании случайных чисел с помощью Правила 30, которое использует неоднозначный подход, предусматривающий применение модели клеточного автомата. Этот метод прошёл множество стандартных тестов на случайность чисел и использовался в системе Mathematica для генерирования случайных целых чисел.
Читать полностью »

в 7:15, , рубрики: devops, Facebook, observability, sre, Блог компании Конференции Олега Бунина (Онтико), высокая производительность, дашборд, Разработка веб-сайтов, Серверная оптимизация

Когда Facebook «лежит», люди думают, что это из-за хакеров или DDoS-атак, но это не так. Все «падения» за последние несколько лет были вызваны внутренними изменениями или поломками. Чтобы учить новых сотрудников не ломать Facebook на примерах, всем большим инцидентам дают имена, например, «Call the Cops» или «CAPSLOCK». Первый так назвали из-за того, что когда однажды соцсеть упала, в полицию Лос-Анджелеса звонили пользователи и просили его починить, а шериф в отчаянии в Твиттере просил не беспокоить их по этому поводу. Во время второго инцидента на кэш-машинах опустился и не поднялся сетевой интерфейс, и все машины перезапускали руками.

Элина Лобанова работает в Facebook последние 4 года в команде Web Foundation. Участники команды зовутся продакшн-инженерами и следят за надежностью и производительностью всего бэкенда, тушат Facebook, когда он горит, пишут мониторинг и автоматизацию, чтобы облегчить жизнь себе и другим.

Взгляд изнутри на надежность сервисов Facebook - 1

В статье, основанной на докладе Элины на HighLoad++ 2019, расскажем, как продакшн-инженеры следят за бэкендом Facebook, какие инструменты используют, из-за чего возникают крупные сбои и как с ними справиться.
Читать полностью »

1...1020...626364...7080...347
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js