В одной из предыдущих статей я написал о скрипте sessvars.js, который позволяет работать с сессиями без cookies, используя свойство window.name. Однако у этого скрипта есть одна большая проблема – сессии сохраняются только в том случае, если вы открываете ссылки в том же окне. Если же открывать ссылки в новом окне/табе, то данные сессий там будут не доступны.

Скрипт, который я вам сегодня представлю – PersistJS, также работает с сессиями, однако в отличии от sessvars.js он использует для хранения данных другие “накопители”. Суть в том, что многие браузеры имеют механизмы хранения данных на стороне клиента отличные от cookies. Все они намного проще и лучше последних, могут хранить больше данных, и не передаются в HTTP запросах. Однако, каждый браузер реализует эти механизмы по-своему. В данный момент существуют 4 различных решения для хранения данных на стороне клиента:

• globalStorage: Firefox 2.0+, Internet Explorer 8
• localStorage: development WebKit
• openDatabase: Safari 3.1+
• userdata: Internet Explorer 5.5+

Помимо вышеперечисленного, работу с сессиями можно организовать при помощи плагинов Adobe Flash и Google Gears, однако они также имеют свои проблемы – Flash может быть отключен или отсутствовать в браузере, а Google Gears пока еще не очень распространен.

PersistJS способен работать с сессиями исользуя собственный API и автоматически определяя, какую технологию использовать для хранения данных. В данный момент он поддерживает следующие механизмы:

• Flash 8
• Google Gears
• localstorage
• whatwg_db
• globalstorage
• UserData (Internet Explorer)
• cookie: хранение данных при помощи Cookie.

Как видите Cookies также могут использоваться, но только в том случае если другие методы невозможно использовать. Можно также явно запретить использовать Cookies, об этом ниже.

Это пока что первый релиз PersistJS, и протестирован он только на FireFox 2.0, FireFox 3.0rc1, IE7, и Safari 3.1.

<< читать дальше >>

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

<< читать дальше >>

Тег canvas постепенно набирает популярность, поскольку позволяет создавать 2-х мерную графику при помощи JavaScript. Однако отсутствие поддержки со стороны Internet Explorer значительно тормозит дальнейшее его продвижение. Сегодня я нашел скрипт ExplorerCanvas, который добавляет поддержку этого тега в IE используя возможности Vector Markup Language (VML). Конечно же не все возможности canvas реализованы (например радиальный градиент), но будем надеяться в будущем они появятся. Также трудно сказать о производительности этого чуда, по всей видимости она уступает canvas.

Подключать скрипт нужно только для IE используя условное подключение:

<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->

Чтобы продемонстрировать его в работе, я выложил один из демо примеров, доступных в дистрибутиве: смотреть демо

Загрузить

Bananascript.com – это онлайн инструмент, который позволяет очень эффективно сжимать скрипты JavaScript, уменьшая из размер в среднем на 72% (по данным авторов этого сервиса).

Работает этот “packer” точно также, как и аналогичный, более распространенный инструмент от Dean Edwards. Чтобы сравнить эти два инструмента я попробовал сжать файл скрипта Lightgallery. Исходный размер скрипта – 21,3 Кб, паккер Дина Эдвардса сжал его до 7,8 Кб, в то время как bananascript.com уменьшил размер до 5,8 Кб. Довольно таки неплохой результат.

Одно важное замечание – при подключении скриптов, созданных этим инструментом, обязательно указывать кодировку для скриптов ISO-8859-1:

<script src="lightgallery/lightgallery.banana.js" charset="ISO-8859-1" type="text/javascript"></script>

Если вам интересна тема сжатия скриптов, советую почитать статью JavaScript: жать или не жать? на webo.in, в которой сравнивается ряд популярных инструментов для сжатия скриптов JavaScript.

Такой инструмент хранения данных как cookies зачастую избегают из-за многих проблем связанных с их использованием – ограниченный размер хранимых данных (4 х 20Kb на один домен), хранить можно только строки, и, кроме того все эти данные добавляются в заголовки запросов браузера, что не способствует производительной работе сайта. Решение этой проблеме я нашел вчера – скрипт sessvars.js способен устанавливать и хранить данные сессий при помощи JavaScript и без использования cookies. Вместо cookies используется свойство window.name, прелесть которого в том, что оно сохраняет свое значение при перезагрузке страниц и может хранить до 2 мегабайт данных. Также как и в cookies здесь можно хранить только строковые данные. Чтобы обойти это ограничение sessvars.js использует преобразователь JSON в строку для сериализации объектных данных.

Скрипт работает во всех основных браузерах: IE 6/7, Firefox 1.5/2/3b5, Safari, Opera 9.

<< читать дальше >>