Есть ли облегчение выбора даты в JavaScript?

Я использую jQuery Date picker, но он слишком тяжелый, уменьшенная версия ui.datepicker.min.js составляет 44 КБ. Изображения дампикера имеют собственный вес. Структура jQuery составляет 59 КБ. И общее количество изображений на странице составляет около 80 КБ. Общий HTML файл составляет около 70 КБ, а размер файла CSS - около 72 КБ. И многое другое, и все это составляет до 600 КБ (0,6 МБ).

Считаете ли вы, что пользователь будет ожидать загрузки 600 KB в браузере? Это может занять до 8 - 10 секунд. И я не думаю, что пользователь будет ждать такого долгого времени.

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

Ответы

Ответ 1

Один из вариантов заключается в использовании сети доставки контента (CDN), такой как API Google Libraries API, чтобы обслуживать общие файлы script, такие как jQuery. Использование возможностей CDN заключается в том, что пользователи уже будут хранить файл script в своем браузере, и им не нужно будет загружать его снова. Что касается других статических ресурсов, вы можете читать рекомендации YSlow для оптимизации времени загрузки статических ресурсов (вы могли бы minify, gzip compress и кеш-статические ресурсы).

Ответ 2

Я только что натолкнулся на Pikaday, который выглядит хорошо и довольно легкий (около 11 КБ JS, уменьшенный). Также не требует jQuery.

Вот демо.

Снимок экрана выбора:

Pikaday Screenshot
(источник: github.com)

Пример использования pikaday с timepicker и moment.js 

<link rel="stylesheet" href="/pikaday/css/pikaday.css">
<script src="/pikaday/moment.js"></script>
<script src="/pikaday/pikaday.js"></script>
<script>
var timepicker = new Pikaday({
    field: document.getElementById('datetimepicker'),
    firstDay: 1,
    minDate: new Date(2016, 0, 1),
    maxDate: new Date(2100, 12, 31),
    yearRange: [2016,2100],
    showTime: true,
    autoClose: false,
    use24hour: false,
    format: 'MMM Do YYYY, h:mm a'
});
</script>

github.com/owenmead/Pikaday

momentjs.com

Ответ 3

Я столкнулся с той же проблемой с официальным примером jQuery (см. мой комментарий выше). Я изолировал проблему от тем, связанных с CSS, и начал удалять нежелательные файлы. Прежде чем я закончил, я обнаружил, что парень сделал то, что мне нужно: http://keith-wood.name/datepickBasics.html

Требуется DatePicker.js и один файл CSS. Все сказали 2 HTTP-запроса и 40 кбайт в дополнение к основному файлу jQuery, который каждый должен был кэшировать как говорит Дарин.

Ответ 6

Пользовательский интерфейс в основном ориентирован на сенсорные устройства, но использование настольных компьютеров также в порядке. Что касается веса, minified и gZipped, он приходит к приемлемому 15kb.

Календарь Mobiscroll