Опыт веб-оптимизации веб-интерфейса.

С наступлением эры WEB2.0 сеть получила беспрецедентное развитие. Опыт взаимодействия с пользователем становится все более важным, чтобы компенсировать некоторые недостатки плохого взаимодействия с пользователем в структуре B/S. Однако это приведет к проблеме, заключающейся в увеличении давления на клиента. Например, используя большое количество JS-кода, каждый будет знать, что JS-код выполняется на клиенте, что повлияет на эффективность анализа всей веб-страницы в браузере, что также может означать увеличение клиентского трафика, так ли это. с точки зрения нагрузки на сервер или с точки зрения пользователя, поскольку особенно важно оптимизировать клиентский код! В этой статье в основном объясняются методы оптимизации веб-интерфейса как с внутренней, так и с внешней стороны. Я надеюсь, что это может дать читателям некоторый опыт и вдохновение.

Во-первых, давайте посмотрим на данные http-трафика http://yahoo.com через статистическую диаграмму Yahoo:

Мы можем обнаружить, что от первого запроса к серверу до полной загрузки страницы на клиенте чтение HTML-кода занимает всего 5% всего времени ответа. Этот результат применим к подавляющему большинству веб-сайтов в выборке США. из десяти лучших веб-сайтов только один имеет более 5%, но менее 20%. Остальные 80% времени используются для чтения другого контента веб-страницы, то есть внешнего интерфейса (исходный текст находится на передней панели). -end, то есть не включает html. Остальной код может быть картинками, скриптами, flash, видео, разным). Это основная причина, по которой нам следует сосредоточиться на этих вещах, чтобы улучшить скорость отображения.

Есть три основные причины, почему вам следует начать с внешнего интерфейса :

1. Здесь есть потенциал для улучшения и совершенствования. Если громкость можно уменьшить вдвое, время отклика можно сократить на 40%.
2. Улучшение клиентской части требует меньше времени и ресурсов, чем улучшение внутренней части. (Улучшение серверной части предполагает перепроектирование плана приложения, кода, поиск способов оптимизации кода, добавление или изменение конфигураций оборудования, распределенных баз данных и т. д.)
3. Наше золотое правило: сначала оптимизируйте производительность внешнего интерфейса, эти вещи занимают 80% времени отклика на стороне пользователя.

1. Вне кода у нас есть следующие три метода:

1. Используйте технологию CDN

Для конкретных методов вы можете использовать Google. (Похоже, общий принцип заключается в том, чтобы определить местоположение посетителя и доступный к нему контент, чтобы выбрать ближайший сервер для обработки запроса пользователя)

2. Добавьте заголовок с истекшим сроком действия

Истекает: четверг, 15 апреля 2010 г., 20:00:00 GMT.

Браузеры будут использовать кеширование, чтобы уменьшить количество HTTP-запросов и ускорить загрузку страницы. Если в заголовок страницы добавлен длительный срок действия, браузер всегда будет кэшировать элементы на странице.
Однако это приведет к проблеме: если что-то на странице изменится, имя необходимо изменить, иначе клиент не будет активно обновляться. В рабочей группе Yahoo используется номер версии, например yahoo_2. 0.6.js

3.Gzip-сжатие

Gzip — самый популярный и эффективный метод сжатия на сегодняшний день. Он был разработан GNU и стандартизирован RFC1952.
(Gzip сжимает изображения, css, скрипты и т. д. на стороне сервера, а затем отправляет их в браузер клиента для распаковки. Это может увеличить скорость передачи, но увеличится нагрузка на сервер. Как правило, это более целесообразно сжать некоторые элементы.