Как сделать HTML рендеринг быстрым

Question

Я работаю над веб-приложением, разработанным на C # / ASP.NET. Мы используем сторонние элементы управления для отображения гридов, вкладок, деревьев и других сложных элементов управления на наших страницах. Проблема в том, что эти элементы управления отображают огромное количество HTML. Из-за этого размер страниц сильно вырос, и браузеру требуется время, чтобы загрузить страницу. Я хочу найти некоторые общие приемы, позволяющие сделать рендеринг HTML в браузере быстрым. (100)

Обратите внимание, что на всех страницах ViewState отключен.

Answer 1

Существует расширение Firefox YSlow (http://developer.yahoo.com/yslow/), которое анализирует любую веб-страницу и перечисляет конкретные изменения, которые необходимо внести для повышения скорости. Некоторые предлагаемые изменения касаются веб-сервера, а не содержимого HTML, но в любом случае это очень полезно.
Снимок экрана с веб-страницы YSlow:

Answer 2

gzip HTML - не увеличит скорость рендеринга, но значительно уменьшит размер страницы.

Убедитесь, что вы не используете макет на основе таблицы, и убедитесь, что любой используемый javascript или css минимизирован, gzipped и связан в голове, чтобы его можно было кэшировать.

Answer 3

Откройте обычные страницы, введите его в URL и нажмите enter:

javascript:var tags = document.getElementsByTagName('*');alert('Page weight: ' + tags.length + ' tags.');

(вы даже можете сохранить его как букмарклет)

Если у вас более 500 меток, вы, вероятно, захотите по возможности очистить часть «супа метки».

Домашняя страница Digg весит около 1000 тегов! поэтому очень медленно рендерится (в первый раз)

Домашняя страница MSN весит около 700+ тегов ... поэтому очень медленно рендерится

Домашняя страница Yahoo весит около 600 тегов ... таким образом, рендеринг быстрее

Домашняя страница Google весит около 92 тегов! ... таким образом, отображается как молния!

Answer 4

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

Но при кодировании вы можете использовать несколько приемов. Одним из ключевых моментов является понимание того, что вызов DOM JavaScript намного медленнее, чем анализ html. Поэтому, если вы установили innerHTML = "...." с тысячами строк, это будет чрезвычайно быстро по сравнению с отображением его с помощью вызовов document.createElement () в цикле.

Вот советы от MSDN:

http://msdn.microsoft.com/en-us/library/ms533019.aspx

Answer 5

1. Сжатие HTML с помощью стороннего инструмента или, по крайней мере, с помощью встроенной функции сжатия IIS6 ( Microsoft TechNet ).

2. Оцените сторонние элементы управления, чтобы убедиться, что они необходимы. Если они есть, напишите свои собственные для своих нужд и / или используйте их элементы управления, если они «AJAX-включены». Большинство популярных сторонних элементов управления имеют возможности AJAX и позволяют заполнять данные после загрузки остальной части страницы, показывая пользователю некоторый прогресс.

3. Выключите ViewState, если это не нужно. При использовании сторонних элементов управления ViewState может стать огромным.

Обновление: Я писал об этом в http://weblogs.asp.net/jgaylord/archive/2008/09/29/web-site-performance.aspx

Answer 6

Сжатие вообще не ускоряет рендеринг, оно просто ускоряет доставку контента.

Я бы порекомендовал сделать какое-то «профилирование» - создать тестовую страницу с большим количеством каких-либо html-объектов (таких как строка таблицы или некоторый общий div-контейнер) - и затем использовать плагины, такие как YSlow, чтобы проверить, насколько например, требуется 10К таких элементов. После профилирования вы увидите фактический рендер ботлинек ..

Кстати, проблема может заключаться в доставке контента, а не в рендеринге. YSlow также покажет, где это. Вы также можете использовать некоторые визуальные инструменты для проверки скорости загрузки сайта, например http://Site -Perf.com /

Answer 7

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

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

При использовании стандартных элементов управления ASP.NET также выяснилось, что они работают быстрее при использовании адаптеров управления CSS Friendly. Адаптеры управления CSS Friendly

Answer 8

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

И помните, установите EnableViewstate в false, где вы можете

Answer 9

Я бы настоятельно рекомендовал взглянуть на Yahoo CSS & JavaScript Compressor , который не только уменьшит размеры файлов CSS и JavaScript, но также вызовет любые ошибки и возможное дублирование в вашем коде. Обязательное требование в наборе инструментов любого веб-разработчика.

Answer 10

Я бы взглянул на Viewstate элементов управления на странице. Вы должны отключить его, если это возможно, так как он сериализуется (и я думаю, что он закодирован в Base64) и вставлен в страницу. Если вы обновляете данные в элементах управления каждого постбека, вы сможете безопасно отключить режим просмотра и, вероятно, сэкономить значительную часть полосы пропускания.