Wiki javascript: Javascript | Викии Вики | Fandom

Leave a Comment / Разное / By /

Содержание

Оптимизация загрузки JavaScript-кода в Wikipedia / Хабр

Автор материала, перевод которого мы сегодня публикуем, говорит, что он, в середине сентября 2019, наконец-то завершил проект, которым занимался уже год. Целью этого проекта было сокращение размеров манифеста, необходимого для инициализации асинхронного JavaScript-конвейера Wikipedia. А именно, размер манифеста составлял 36 Кб. Его нужно было уместить в менее чем 28 Кб, что соответствует двум 14-килобайтным фрагментам последовательности интернет-пакетов.

Результатом этого проекта стала ежедневная экономия 4.3 терабайт трафика.


Сначала размер манифеста превышал 36 Кб, а после оптимизации его размер стал меньше 28 Кб

На графике показано постепенное уменьшение размеров манифеста. Речь идёт о сжатых данных (то есть это — чистая нагрузка на сеть, которую создаёт передача этих данных с сервера в браузер).

Процесс оптимизации

Инициализационный манифест представлен данными, которые непросто оптимизировать. Основной объём его кода — это не что-то вроде функциональной логики, которая может быть оптимизирована традиционными средствами. Вместо этого почти весь манифест представлен чистыми данными. Эти данные автоматически генерируются системой доставки контента ResourceLoader. Они представляют собой реестр бандлов модулей. Система ResourceLoader используется в Wikipedia для работы с JavaScript, с CSS, с текстовыми ресурсами.

Реестр включает в себя метаданные для всего фронтенд-функционала, развёрнутого на Wikipedia. В манифесте перечисляются имена бандлов, их актуальные версии, тут описываются их зависимости от других подобных бандлов.

Я начал работу с поиска кода, который никогда не использовался на практике (T202154). Сюда входило обнаружение незавершённых или забытых фрагментов кода, связанных с устаревшими возможностями. Тут же было проведено и удаление неиспользуемого кода, обеспечивающего совместимость с браузерами, которые больше не проходили наш тест, обеспечивавший их попадание в группу современных браузеров (Grade A).

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

Сокращение количества модулей

Следующим шагом стало сотрудничество с командами инженеров Wikimedia Foundation и Wikimedia Deutschland. Нам нужно было выяснить то, какие возможности системы используют чрезмерное количество модулей. Например, поняв это, можно было бы объединить ранее разрозненные бандлы, из которых была построена некая функциональная возможность. Такие бандлы, даже в разрозненном состоянии, всегда загружались вместе. Это привело бы к тому, что в системе было бы меньше конечных точек, метаданные которых надо было бы хранить в реестре, формируемом ResourceLoader.

Вот некоторые интересные моменты, касающиеся применения этого подхода к оптимизации:

  • У расширения WikiEditor теперь имеется на 11 модулей меньше, чем раньше. Ещё 31 модуль удалось убрать из UploadWizard.
  • При оптимизации программы ContentTranslation удалось скомбинировать 24 модуля.
  • В проекте MobileFrontend скомбинировано 25 модулей.
  • 20 модулей убрали из RevisionSlider и TwoColConflict.

Очень важно и то, что был оптимизирован клиент Wikidata для Wikipedia. Эта часть работы и сама по себе была прямо-таки эпическим проектом (T203696). Вначале за реализацию этой возможности отвечали 248 отдельных модулей. После того, как удалось избавиться от более чем 200 модулей, их осталось всего 42.

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

Уменьшение размеров метаданных

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

Первое улучшение заключается в том, что раньше метаданные схемы расширения EventLogging входили в состав главного манифеста. Этот механизм подвергли рефакторингу, сделав так, что теперь метаданные схемы включались в состав JS-бандла клиента EventLogging. В результате вклад в размер манифеста, вносимый ранее EventLogging, сократился более чем на 90%. А это означало, что критический путь теперь содержит на 2 Кб меньше данных! Это, кроме того, означало, что расширение возможностей EventLogging больше не приводило к росту размеров манифеста. При сборке подобных бандлов была задействована новая возможность ResourceLoader — Package Files. Эта возможность была представлена в феврале 2019, одной из причин интереса к ней является тот факт, что она могла помочь сократить число модулей в реестре.

Package Files чрезвычайно упрощает процедуру комбинирования сгенерированных данных и JavaScript-кода в виде единого модуля.

Второе улучшение произошло тогда, когда мы уменьшили средний размер каждой записи реестра (T229245). Манифест содержит две записи для каждого модуля. Это — имя модуля и идентификатор (ID) его версии. На идентификатор версии раньше нужно было 7 байт данных. После размышлений над парадоксом дней рождения в контексте ResourceLoader мы решили, что спектр вероятности для ID версий можно безопасно снизить с 78 миллиардов до «всего лишь» 60 миллионов. Подробности об этом можно почитать в комментариях к коду. Но, если подвести итог этого улучшения, то можно сказать, что это позволило сэкономить 2 байта в описании каждого из 1100 модулей, которые всё ещё имеются в реестре. В результате размер манифеста удалось снизить ещё на 2-3 Кб.

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

Изменение размеров манифеста на завершающем этапе работы над проектом

Изменение было зафиксировано системой мониторинга ResourceLoader. На скриншоте показана панель Startup manifest size, расположенная в общедоступном экземпляре Grafana. Здесь можно видеть, что размер несжатого потока данных уменьшился на 2.8 Кб.

Развёртывание системы, которое пришлось на середину сентября, привело к достижению изначальной цели, которая заключалась в сжатии манифеста до размеров, не превышающих 28 Кб. Реализация этого крупномасштабного проекта привела к тому, что инициализационный манифест был уменьшен на 9 Кб (речь идёт о сжатых данных). Года назад этот размер составлял 36.2 Кб, а после завершения проекта это уже было 27.2 Кб.

Ежеминутно на Wikipedia и родственных проектах набирается около 363000 просмотров страниц. В час — 21 миллион и  800 тысяч. Ежедневно — 523 миллиона (вот статистика по просмотрам страниц). Та версия системы, что была развёрнута в середине сентября, привела к экономии примерно 1.

4 терабайта трафика в день. А если сравнивать то, что есть сегодня, с тем, что было год назад, то окажется, что ежедневно теперь экономится 4.3 терабайта трафика.

Что дальше?

Нам удалось уместить манифест инициализации Wikipedia в 28 Кб. Именно такой размер был выбран из-за того, что он представляет собой наименьший размер, кратный 14 Кб. Данные такого размера можно разместить во фрагментах последовательности интернет-пакетов, передаваемых браузеру.

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

Если верить этой панели, то у нас есть ещё много возможностей по совершенствованию упаковки кода, и по решению задач, которые ещё сильнее, чем сейчас, облегчают создание бандлов.

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

Уважаемые читатели! Доводилось ли вам принимать участие в оптимизации крупных интернет-проектов?


Движок правил wb-rules — Wiren Board

From Wiren Board

This is the approved revision of this page, as well as being the most recent.

Contents

  • 1 Описание
  • 2 Как создавать и редактировать правила
  • 3 Если правило не работает
  • 4 Примеры правил и решения сообщества
  • 5 Версии wb-rules и совместимость скриптов

Описание

Редактирование правил в веб-интерфейсе

wb-rules — это специальный сервис в контроллере Wiren Board, который работает поверх операционной системы и позволяет создавать сценарии управления с помощью правил на языке JavaScript.

wb-rules установлен в контроллер по умолчанию и запускается автоматически. Управлять им можно из консоли контроллера, о чем подробнее написано в статье Диагностика ошибок в работе контроллера Wiren Board.

Альтернатива правилам wb-rules для создания сценариев управления — среда графического программирования Node-RED.

Как создавать и редактировать правила

Файлы с правилами хранятся в контроллере в папке /etc/wb-rules/ с расширением .js. Их можно редактировать и загружать их напрямую с компьютера, а также использовать встроенный в веб-интерфейс редактор правил на вкладке Rules.

Для написания правил необходимы базовые знания синтаксиса языка JavaScript с учетом особенностей ECMAScript 5. Если вы ранее не работали с JavaScript, то рекомендуем учебник learn.javascript.ru.

Каждое правило представляет собой функцию на языке JavaScript с определенным набором входных параметров. Выполнение правила происходит при наступлении заданного события или циклически. Подробное описание типов правил и механизма их работы читайте в документации на Github.

Для создания правила:

  1. Откройте вкладку Rules в веб-интерфейсе контроллера.
  2. Создайте новый файл правил или откройте стандартный rules.js.
  3. Напишите скрипт или вставьте код из примера.
  4. Нажмите кнопку Сохранить.

Если в правиле нет ошибок, оно начинает работать сразу после сохранения файла.

Если правило не работает

Подсветка ошибок в редакторе правил wb-rules

Если написанный скрипт не работает:

  1. Проверьте еще раз знаки пунктуации, количество открывающихся и закрывающихся скобок, возможные ошибки в написании имен переменных. Обычно синтаксические ошибки подсвечиваются красным, но некоторые могут быть пропущены компилятором.
  2. Проверьте правильность написания ссылок на MQTT-топики.
  3. Уточните правильно ли выбран тип правила.

Если правило не работает или показывает красным строку и вы не понимаете причину, то вы можете получить дополнительную информацию в Системном журнале, который можно отфильтровать по имени сервиса — wb-rules.

Примеры правил и решения сообщества

Примеры правил:

  • в статье Примеры правил;
  • в специальной теме на портале техподдержки;

Проекты сообщества на wb-rules:

  • Конвертер ESPHome → Wiren Board: esphome2wb.
  • Конвертер OpenMQTTGateway → Wiren Board omg2wb.
  • Телеграм-бот telegram2wb.

Версии wb-rules и совместимость скриптов

Существует две версии движка:

  • wb-rules 1.7 — устаревшая версия, поддерживаются контроллеры Wiren Board 5 и 6.
  • wb-rules 2.0 — актуальная версия, поддерживаются контроллеры Wiren Board 6 и 7.

Если у вас контроллер Wiren Board 6 из первых партий и вы переходите с версии 1.7 на 2.0, то прочитайте статью Совместимость скриптов — в ней мы описали возможные проблемы и пути решения.

Wikibooks, открытые книги для открытого мира

From Wikibooks, открытые книги для открытого мира

(перенаправлено с Javascript)

Перейти к навигацииПерейти к поиску

JavaScript JavaScript: программирование для Интернета

Викиучебник предназначен в качестве руководства для веб-разработчиков, которые хотят изучить основы языка программирования JavaScript . Он предлагает краткие описания концепций, синтаксиса, контекста и Технологии, связанные с JavaScript , а также примеры кода и упражнения. Дополнительные ссылки ведут читателя к подробной информации о более сложных функциях и таких проблемах, которые имеют слабое отношение к JavaScript . В частности, курс Викиверситета «Программирование на JavaScript» предлагает богатый набор дополнительных сведений и ссылок на обучающие видео на YouTube. Кроме того, мы рекомендуем страницы JavaScript MDN для получения подробной информации о синтаксисе и API.

Предполагается, что читатель обладает хорошими знаниями и некоторым опытом работы с компьютерами, веб-браузерами, текстовыми редакторами и средами разработки программного обеспечения. Поскольку в этой книге он не узнает о HTML, CSS или дизайне веб-сайтов, было бы неплохо обратиться к соответствующей книге, чтобы узнать об этих предметах. Также полезно, если у него есть предварительное знание другого языка программирования, такого как Python, PHP или C, потому что викибук не объясняет все небольшие первые шаги, которые являются общими для таких языков. Вместо этого он фокусируется на различиях.

В большинстве случаев в примерах используется текущий синтаксис (по состоянию на 2022 год). Иногда встречаются намеки на синтаксис старых стандартов вроде HTML4.

JavaScript — JS для краткости — это язык программирования с динамической типизацией, основанный на прототипах (даже для его объектно-ориентированных функций), поддерживающий функциональное программирование и в большинстве случаев компилируемый точно в срок. . Его синтаксис похож на синтаксис C или Java, но его концепции и поведение во время выполнения заметно отличаются. Язык программирования JavaScript соответствует международному стандарту ECMAScript (веб-сайт ECMA-262; в формате PDF; в формате HTML; последняя спецификация (TC39)).

Помимо HTML и CSS, JavaScript является краеугольным камнем для веб-разработки. Он обрабатывает все динамические (поведенческие) аспекты, такие как обработка событий, манипулирование DOM и взаимодействие клиент-сервер. На стороне клиента все современные браузеры поддерживают JavaScript , а на стороне сервера многие приложения, библиотеки и фреймворки для веб-серверов написаны на JavaScript .

  • Введение
  • Связь с другими языками
  • Ваша первая настоящая программа: Hello World
  • JavaScript в HTML
  • Обработка событий
  • Средства разработки
  • Самопроверка
  • Полезные советы
  • Лексическая структура
    • Автоматическая вставка точки с запятой (ASI)
    • Зарезервированные слова
  • Переменные
  • Типы данных; Инициализация
    • Примитивный тип данных
    • Объекты
    • Массивы
    • Финики
    • Регулярные выражения
  • Операторы
  • Поток программы I: если, переключиться, попробовать
  • Поток программы II: циклы
  • Функции
  • Закрытия
  • Асинхронное поведение
  • Объектно-ориентированное программирование (ООП)
    • Синтаксис на основе прототипа
    • Синтаксис класса
  • Модули
  • Генераторы последовательностей
Объектная модель документа (DOM)
  • Введение
  • Поиск элементов
  • Изменение содержимого элемента
  • Добавление элементов
  • Удаление элементов
  • Реструктуризация дерева DOM
  • Изменение стилей элементов
События
  • Обработка событий DOM
Отступление: простые игры
  • Применяйте и углубляйте свои знания
Разное
Подсказка: Эта глава частично устарела.
  • Отладка
  • Оптимизация
  • Корпус
  • Формы
  • Букмарклеты
  • Работа с файлами
  • Обработка XML
  • Обработка JSON

Взаимодействие клиент-сервер[edit | изменить источник]

  • Взаимодействие клиент-сервер

JavaScript на стороне сервера (ToDo)[edit | изменить источник]

  • Глоссарий
  • Индекс
  • Ссылки
  • Полезные программные инструменты
  • История JavaScript
  • Лучшие практики
  • Язык гипертекстовой разметки
  • Каскадные таблицы стилей
  • Веб-разработка
  • Программирование веб-страниц
  • Ajax-программирование
  • Программирование ActionScript
  • Поваренная книга по программированию: JavaScript

Ресурсы в Википедии и Викиверситете[edit | изменить источник]

  • JS в Википедии (главная страница)
  • JS в Википедии (категория)
  • JS в Викиверситете — Введение
  • JS в Викиверситете — Программирование
  • JS в Викиверситете (категория)
  • Веб-сайт ECMA-262
  • Последняя спецификация (TC39)
  • JavaScript в MDN Web Docs (ранее Mozilla) на разных языках
  • Учебник по JavaScript на codecademy. com

Самое мощное и расширяемое программное обеспечение Wiki с открытым исходным кодом

Превратите документацию в удовольствие, написав


, используя красивый и интуитивно понятный интерфейс Wiki.js!

Выпущено по лицензии AGPL-v3.

Установка в любом месте

Работает практически на любой платформе и совместима с PostgreSQL, MySQL, MariaDB, MS SQL Server или SQLite!

Администрирование

Управляйте всеми аспектами своей вики, используя обширную и интуитивно понятную административную область.

Производительность

Работающий на молниеносно быстром движке Node.js, Wiki.js создан с учетом производительности.

Настраиваемый

Полностью настраивайте внешний вид вашей вики, включая светлый и темный режимы.

Защищено

Сделайте свою вики общедоступной, полностью частной или и то, и другое.

Масштабируемость

Будь то крошечный Raspberry Pi или высокопроизводительная виртуальная машина в облаке, Wiki. js разумно использует доступные ресурсы.

Простая установка

Вы будете готовы к работе уже через несколько минут! Пошаговые руководства по установке доступны для всех платформ.

Начало работы

В комплекте все необходимое

Не всем командам нужен одинаковый набор функций. Вот почему Wiki.js предлагает широкий спектр модулей, которые можно включать и выключать по требованию.

Аутентификация

Редакторы

История

Локализация

Медиаактивы

Рендеринг

Поиск

Хранилище

Управление пользователями

Темы