VcorpJS, JavaScript - модуль, встроенные плагины, скорость рендеринга, отзывчивость веб-страниц

JavaScript-модуль VcorpJS

VcorpJS - независимый кросс-браузерный JavaScript-модуль, написанный на чистом JavaScript и содержащий набор встроенных плагинов и полезных функций.
Размер около 67 Кбайт (без gzip-сжатия), поддержка старых браузеров (Opera12 и IE8), авто-поддержка сенсорных экранов и ряда современных технологий.
Автор старается максимально увеличивать скорость работы и уменьшить размер модуля, сохраняя оптимизацию под разные браузеры (часть деталей здесь: Тест гридов).

Автор никак не ограничивает использование VcorpJS, но не дает никаких гарантий на этот JavaScript-модуль и не отвечает ни за какие последствия использования VcorpJS, ни частично, ни целиком. Исходный код с комментариями закрыт и не будет выкладываться в открытый доступ, но будет дорабатываться по мере развития технологий, сохраняя обратную совместимость.

Автор много лет использует собственные наработки, включённые в состав VcorpJS, под стандартом html5, и не имеет проблем с веб-страницами.
Работа над VcorpJS продолжается (появляются новые плагины или происходит внутренняя оптимизация после реализации новых веб-технологий в браузерах).

Для навигации по всем страницам этого раздела сайта используйте пиктограмму или ссылку Навигация в верхней строке навигации.

VcorpJS содержит следующие функции и плагины:

модальные (для страницы) перемещаемые диалоговые окна и окна сообщений,
оконная система (до 48 переключаемых и перемещаемых окон с изменяемыми размерами), панель окон,
галерея всплывающих изображений с показом/переключением до 9 изображений одновременно, перелистывание начиная с позиции любого увеличенного изображения,
динамичные анимационные многоуровневые меню (неограниченное количество меню, до 50 уровней вложенности каждое),
перетаскивание объектов, ротация любого числа изображений в блоке,
форматированный ввод данных (spinner, phone), работа с курсором в редактируемых полях ввода,
календарь (datepicker) в английском и русском вариантах,
флажки-переключатели (checkbox) с произвольным текстом подписи,
поля ввода с раскрываемыми анимационными списками вариантов быстрого выбора (combobox),
табличный вывод объёмных данных с навигацией (JS-Grid) - в том числе в окнах или в модальном диалоговом окне,
анимация и обёртки анимации,
спец-объект для работы с обработчиками событий,
работа со слоями, coockies, localStorage, селекторами, классами и стилями, функции общего назначения,
формирование и отправка POST-запроса с произвольным телом (любыми полями и данными в виде строки),
работа с Canvas (набор функций ограничен - пока в зачаточном состоянии).
работа с SVG (пока одна тестовая функция создания графиков и диаграмм).

Скачать vcorp_js_00_80.zip (35 Kb - js и css файлы)

Май-Октябрь 2016 г.

Рендеринг и отзывчивость веб-страниц

Не следует слепо верить замеряемому времени выполнения JavaScript-кода, это не имеет никакого отношения к скорости рендеринга (отображения изменений).
Те разработчики, которые считают скорость выполнения JavaScript определяющим фактором быстроты работы web-страницы, заблуждаются или плохо тестируют.
Автор VcorpJS уделяет много внимания на отзывчивость веб-страниц - это важнейшее условие комфортной работы с любыми web-приложениями.

VcorpJS создаёт почти все визуальные объекты через .innerHTML-вставки, по 2 причинам:

1. Тесты показали, что рендеринг после .innerHTML быстрее рендеринга после DOM-вставок, несмотря на спорную разницу скорости выполнения JavaScript в Chrome и FireFox. В других браузерах скорость JavaScript при DOM-операциях всегда медленнее, чем сборка строки с последующей .innerHTML-вставкой (например, в IE 11 до 8-10 раз, в Opera12 до 1.5 раза). На мобильных и SmartTV, .innerHTML-вставки превосходят DOM-вставки по скорости отображения в 10 и более раз при увеличении объёма добавляемых объектов, несмотря на то, что имеют большее время выполнения JavaScript-кода.

2. Создание визуальных объектов путём сборки строки HTML - быстрая и гибкая операция. Обработчики событий могут встраиваться в HTML-код (даже с частичной реализацией) - такие обработчики не пропадают при переносе HTML-содержимого. Хотя многим не нравится такой подход (видимо, по религиозно-шаблонным причинам).
Смешивание создаваемых в HTML и добавляемых отдельно обработчиков упрощает JavaScript-код и позволяет делать более быстрые, простые и компактные реализации.

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

Разумеется, волшебного средства не существует, много зависит от опыта разработчика, поэтому в случае расхождения ожидаемого результата с реальным, нужно разбираться в HTML и CSS всего проекта и его частей.
VcorpJS использует CSS-классы с префиксом "pb_" (образец типового CSS-файла прилагается), много зависит от настроек CSS-стилей.

Содержание раздела «VcorpJS»

Основные сведения:

Работа с функциями различного назначения:

Работа со встроенными плагинами:

Плагины VcorpJS - краткий обзор и правила
Перетаскивание объектов
Многоуровневые анимационные меню а так же Визуальные примеры работы меню
Галереи изображений (всплывание, перемещение, переключение, одновременно до 9 окрытых изображений), а так же Визуальный пример галереи
Блоки ротации изображений а так же Визуальный пример блока ротации
Модальное диалоговое окно ( визуальный пример по кнопке "Показать сообщение")
Модальное окно сообщения ( визуальный пример по кнопке "Показать диалог")
Переключатели-флажки checkbox а так же Визуальный пример флажков checkbox
Форматированный ввод данных а так же Визуальные примеры
Поля ввода со списком выбора - combobox а так же Визуальный пример комбинированного списка выбора combobox
Календарь (datepicker) а так же Визуальный пример календаря (по кнопкам)

Оконная система VcorpJS:

Табличный вывод данных Grid:

Анимация объектов:

POST запросы VcorpJS:

POST запросы VcorpJS

Canvas и SVG - графика:

VcorpJS - независимый JavaScript-модуль со встроенными плагинами

JavaScript-модуль VcorpJS

Рендеринг и отзывчивость веб-страниц

Содержание раздела «VcorpJS»