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

Сейчас хайлайтер — это отдельный файл с ядром и несколько отдельных файлов с языками. Когда подсветка инициализируется при загрузке страницы, нужные файлы с языками включаются в страницу в виде <script src=".."> и динамически подгружаются. Вся эта механика имеет одну очевидную цель: уменьшить объем загружаемых скриптов.

Однако эта система все равно имеет большой минус. При серьезном количестве языков (у меня на блоге их 13, и это ни разу не исключительный случай) в браузер подгружается довольно много дополнительных файлов. И одно их количество начинает тормозить загрузку. Упомянутые 13 языков выливаются в 7 файлов, на которые браузер тратит больше секунды только для того, чтобы получить с каждого ответ "304 Not Modified".

Поэтому я подумал, что стоит сделать, как у Больших Дядек, и реализовать динамическую сборку хайлайтера при загрузке. Пользователь будет выбирать, какие языки ему нужны, они на сервере будут соединяться вместе с хайлайтером в один файл, дополнительно умно упаковываться, и в таком виде выдаваться на скачивание. В итоге останется один файл какого-нибудь более менее вменяемого размера. Какого именно — не угадаю, но наверное в районе килобайт 30 в среднем.

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

Меня беспокоят две вещи: действительно ли это полезно и не сломает ли это что-то кому-то. Есть идеи?

Комментарии: 15

  1. MaxD

    Добрый день,

    Вчера как раз сделал что-то подобное с highlight.js в своём блоге :)

    Я тоже заметил что если подключено много языков, то грузится много файлов и это занимает время. Поэтому я выбрал нужные мне языки и создал один большой файл в который все их поместил. Немного подправил код ядра чтобы он грузил только этот файл (в начале ядра есть константы их и менял). Стало вроде как получше (по крайней мере YSlow перенёс меня с F позиции на D)

    Но полного счастья у меня все равно нет. Объясню почему. В Rails в можно сделать кеширование JS и CSS. Заключается оно в том что, при первом запросе все JS и CSS отмеченные специальным образом склеиваются в два больших JS и CSS файла. Соответственно при текущей логике в highlight.js, полученный большой файл с языками никак не приклеить к большому файлу с JS.

    Поэтому было бы здорово иметь возможность:

    1) Выбирать какие языки действительно нужны (без copy-paste как делал я)

    2) Убрать умный механизм подгрузки языков или по крайней мере сделать доп. вариант когда он работать не будет, а сам разработчик должен подключить нужные JS файлы

    Заранее спасибо :)

  2. Alex Lebedev

    MaxD: +1

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

  3. barbuza

    идея правильная. меня бы например вполне устроил механизм сборки как у mootools - выбираем что нам нужно, тип компрессии и жмем на кнопку download.

  4. Петр

    Я очень за.

    Система сборки, правда, лично мне не пригодится. А вот отключать загрузчик мне уже приходилось.

  5. Sam

    Я за. Занимался именно этим, когда не так давно репортил о лишних комментариях, которые мешали сжатию.

  6. Иван Сагалаев

    Идея, похоже, и вправду живучая оказалась! Я на скорую руку поэкспериментировал со постобработкой скриптов (замена длинных названий атрибутов на короткие) + сжатие yuicompressor'ом, и вся библиотека целиком умешается в 60 КБ примерно. Если не включать экзотические языки — 35 КБ. И это еще без удаления собственно кода динамической подгрузки.

  7. bw

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

    ..bw

  8. Иван Сагалаев

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

  9. Vooon

    Я отказался от динамической загрузки, все файлы языков собрал в один и упаковал.

    cd ./languages/
cat * > ../languages.js

    Упаковывал этим пакером,
    размер - 1,8 КиБ.

    И потребовалось небольшое изменение ядра:

    --- highlight.js    2008-10-07 12:49:45.000000000 +0400
+++ highlight.js    2008-10-13 21:43:12.000000000 +0400
@@ -466,6 +466,7 @@
   this.ALL_LANGUAGES = ALL_LANGUAGES;
   this.initHighlightingOnLoad = initHighlightingOnLoad;
   this.highlightBlock = highlightBlock;
+  this.initHighlighting = initHighlighting;

   // Common regexps
   this.IDENT_RE = '[a-zA-Z][a-zA-Z0-9_]*';

    ПС: что-то не хочет прнимать мой openid.

  10. Иван Сагалаев

    размер - 1,8 КиБ.

    Так не может быть даже теоретически! Основное место там занимают названия ключевых слов языков, и они никуда не денутся.

    И потребовалось небольшое изменение ядра:

    Ага, я видел :-). Уже скоммитил это в транк к себе тоже.

    что-то не хочет прнимать мой openid

    Да нет, вроде вон сработало.

  11. Vooon

    Ошибочка вышла.

    cat * >> ../languages.js

    И после упаковки вышло 67,5 КиБ.

  12. Борисов Глеб

    Я вот как раз этим занимаюсь. Выкинул кусок для подгрузки языков и пакую все нужные мне языки и хайлайтер через ycssjs.

  13. Octane

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

    А еще, не по теме правда, пользователи IE тоже люди и эмуляция «DOMContentLoaded» была бы очень кстати :-)

  14. Тестирование упакованной версии

    [...] мотивам давних идей запустил на этих форумах и в блоге тестирование [...]

  15. Авто-подгузка схем больше не живет в пятой версии?

    [...] Чем она плоха я как-то подробно описывал: http://softwaremaniacs.org/blog/2008/10/14/building-highlight-js-with-languages/ [...]

Добавить комментарий