Возможна ли настоящая отладка HTML? - PullRequest
18 голосов
/ 22 декабря 2008

Я довольно давно работаю веб-разработчиком, и что помогло мне в обучении, так это визуально увидеть, что происходит.

Вот почему такие инструменты, как Aardvark, веб-разработчик, Firebug и многие другие.

Но когда я увидел видео геккона Reflow , они просто поразили меня.

Тогда у меня вопрос, возможно ли действительно отладить html (шаг через каждый элемент)? Или приблизиться к нему?

Что я много делал, так это использовал Aardvark и удалял элементы, но у Aardvark есть проблемы с «фоном» и элементами того же размера и невозможностью нацелить их.

ОБНОВЛЕНИЕ: Я пытался написать хорошее обновление для этого вопроса, так как это заставило меня больше думать об этом. Но поскольку английский не является моим основным языком, это было трудно.

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

Мы можем думать о прошедших десятилетиях как о ранних годах HTML / CSS, где главной целью было просто заставить это работать. Теперь мы должны искать методы, которые ускоряют текущий процесс. Примером этого является видео выше, где движок Gecko дважды выполняет код. Это почему? И есть ли другие случаи, когда он делает ненужные вещи (даже если они работают и совместимы)

Это то, что явно необходимо проверить, чтобы подтвердить, поэтому мой первоначальный вопрос об истинном отладчике.

Ответы [ 6 ]

14 голосов
/ 22 декабря 2008

Мои $ 0,02:

«Истинная» отладка HTML, в том смысле, о котором вы говорите, технически невозможна, потому что не требуется, чтобы пользовательские агенты HTML (веб-браузеры) отображали элементы HTML в определенном порядке, и ничего подобного атомарная единица выполнения, такая как «оператор».

Например, при рендеринге таблицы должен ли пользовательский агент резервировать место для каждого <tr> перед рендерингом своего дочернего элемента <td>s (в ширину)? Или он должен отображать каждого ребенка <td> и каждого <td>s ребенка и т. Д. (Сначала в глубину)? На практике, пользовательские агенты делают все возможное, чтобы попытаться отобразить страницы как можно быстрее. Другими словами, не было бы никакой гарантии, что порядок отладки будет соответствовать фактическому порядку рендеринга, и не должно быть.

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

IMO, панель инструментов webdev и Firebug - лучшее, что у нас есть, где мы можем редактировать / отключать определенные элементы HTML и правила CSS.

2 голосов
/ 22 декабря 2008

хорошо - серьезный ответ.

Судя по комментариям на сайтах, по которым я следовал по этой ссылке, я думаю, что вы и я знаем, что, вероятно, нет. В этих потоках много умных парней и блокетов, и все они сшиты, чтобы указывать на «нет, это все умные $ 4! #, Которые не помогут нам в понимании рендеринга.

Тем не менее, я думаю, что ваш вопрос мог бы подчеркнуть, что рендеринг на уровне браузера очень интересен.

Позвольте мне просто выбросить это туда. Вы думаете, что установка body { overflow: scroll; } по умолчанию может немного ускорить нас ???

1 голос
/ 01 августа 2012

По моему профессиональному мнению, существует только один эффективный инструмент для факторизации / оценки / отладки времени в HTML-среде: Итератор WebDev

0 голосов
/ 11 мая 2009

Тогда у меня вопрос, возможно ли действительно отладить html (шаг через каждый элемент)? Или приблизиться к этому?

Вы, вероятно, могли бы пройти через процесс рендеринга страницы, запустив Firefox под GDB, или изменить браузер с открытым исходным кодом, чтобы иметь кнопку "step", но я действительно сомневаюсь, что это даст что-то полезное.

CSS не так уж и сложен, все в основном представляет собой блок с шириной / высотой / отступом / полем. Проблема веб-разработки (в частности, CSS) заключается в том, что каждый браузер реализует рендеринг немного по-своему (некоторые по-другому, чем другие). ) ..

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

Возможно, вы могли бы сократить нагрузку на 2 мс своей страницы, переупорядочив некоторые теги и используя другой метод позиционирования CSS ... или вы могли бы сократить время генерации страницы на 200 мс за счет кэширования и уменьшить половину задержки в сети, настроив второй веб-интерфейс. -сервер ближе к вашим пользователям. Сжатие вашего логотипа лучше или сокращение вашего javascript, скорее всего, уменьшит время загрузки (универсально, во всех браузерах!)

В основном, если вас беспокоит время загрузки, есть намного лучших мест для начала. Если вы обеспокоены тем, как отображается страница, Firebug (- Lite ) и http://browsershots.org (или виртуальная машина или две) - все, что вам нужно!

0 голосов
/ 23 декабря 2008

Лично я чувствую, что ваш HTML соответствует спецификации W3C, разве это не имеет значения? Нужно разработать свой HTML для спецификации и позволить браузерным компаниям беспокоиться о своих ошибках (которые в наши дни встречаются довольно редко), чем сосредоточиться на старых ошибках браузера в прошлом.

Плагин HTML Validator для Firefox (он же Tidy) - это все, что нужно любому веб-разработчику, чтобы проверить, правильна ли его разметка, что неправильно, а где нет.

Даже если бы вы могли выполнять настоящую отладку, каждый браузер анализирует HTML по-своему, поэтому, даже если вы можете пройтись по Firefox, чтобы увидеть, как происходит ошибка рендеринга, это не поможет вам с IE или Safari / Chrome вообще, потому что они выполняют синтаксический анализ по-своему. Это не похоже на PHP, .NET или Java, где разбор кода одинаков для всех, отладка здесь имеет смысл.

0 голосов
/ 22 декабря 2008

Большую информацию я могу найти по этой ссылке, которую нашел в комментарии внизу ссылки, которую вы разместили:

http://dougt.wordpress.com/2008/05/24/what-is-a-reflow/

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