Возьмём самый распространенный вариант - смайлики. Их очень много (~1500) и отображаются все одновременно, как лучше их выводить?
- На сервер храниться одна большая картинка (спрайт) где все смайлики расположены друг за другом, у клиента в css расписаны расположение каждого смайлика (
background-image
иbackground-position
) и в html документе с помощью class распознаются смайлики. - На сервер хранится каждая картинка смайлика отдельно, у клиента в css расписаны путь до каждого смайлика (
background-image
) и в html документе с помощью class распознаются смайлики. - На сервер хранятся изображения отдельно, у клиента только в html документе написаны путь до смайликов (
img[src]
).
И какие картинки лучше использовать svg
или png
?
Возможно вы предложите ещё более правильный вариант, пожалуйста расскажите максимально подробно, почему именно так?
Второй вопрос заключается в генерации этого списка смайликов, как лучше его генерировать?
- Сгенерировать заранее и хранить на сервере в виде шаблона/html документа и подгружать его через ajax и вставлять в html страницу, когда это нужно.
- Хранить html код в JS коде, в виде строки и вставлять когда это нужно.
- Генерировать html код из заранее составленного массива хранящийся в js коде.
- Генерировать код из массива хранящейся на сервер и полученного через ajax.
Так же прошу рассказывать максимально подробно.
Под правильным вариантом подразумевается не только правильно по написанию кода, но и по быстроте загрузки смайликов и нагрузки на обе стороны (сервер и клиент).
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 1850 1635" xmlns:xlink="http://www.w3.org/1999/xlink">...</svg>');
Или как?