Возможна ли истинная отладка HTML?
Я уже давно занимаюсь веб-разработкой, и то, что помогло мне в обучении, - это визуально увидеть, что происходит.
Это причина для таких инструментов, как Aardvark, веб-разработчик, Firebug и многие другие.
Но когда я увидел Gecko Reflow Videos, они просто взорвали мой разум.
Тогда мой вопрос: возможно ли действительно отлаживать html (шаг через каждый элемент)? Или приблизиться к нему?
То, что я делал много, - использовать Aardvark и удалять элементы, но у Aardvark есть свои проблемы с "фоном" и одинаковыми элементами размера и неспособными настроить таргетинг на них.
UPDATE: Я пытался написать хорошее обновление для этого вопроса, так как это заставило меня задуматься об этом больше. Но поскольку английский язык не является моим основным языком, он был жестким.
В последние годы именно браузеру была поставлена задача совместимости со стандартами. По мере приближения к этой цели нам нужно подумать о том, что мы действительно можем создать, когда совместимость с браузером минимальна, и если есть методы, которые мы можем использовать, это ускоряет рендеринг страницы.
Мы можем думать о прошлых десятилетиях как о ранних годах HTML/CSS, где главной целью было просто заставить работу работать. Теперь мы должны искать методы, которые ускоряют текущий процесс. Пример этого в видео выше, где движок Gecko работает через код дважды. Почему это? И есть ли другие случаи, когда он делает ненужные вещи (хотя они работают и совместимы)
Это то, что явно нужно проверить, чтобы быть подтвержденным, поэтому мой оригинальный вопрос об истинном отладчике.
Ответы
Ответ 1
Мои $0,02:
"Истинная" отладка HTML в том смысле, о котором вы говорите, технически невозможна, поскольку нет требований к пользовательским агентам HTML (веб-браузерам) для отображения HTML-элементов в определенном порядке, и нет ничего подобного атомная единица исполнения, такая как "инструкция".
Например, при рендеринге таблицы должен ли пользовательский агент зарезервировать место для каждого <tr> перед тем, как передать их дочерний элемент <td>s (в ширину)? Или он должен отображать каждый ребенок <td> и каждого ребенка <td>s и т.д. (По глубине)? На практике пользовательские агенты делают всевозможные догадки, чтобы попытаться отобразить страницы как можно быстрее. Другими словами, не было бы никакой гарантии, что отладочный порядок будет соответствовать фактическому порядку визуализации и не должен быть.
HTML можно рассматривать как декларативный язык в этом смысле, поскольку он указывает, что должно быть сделано (страница, отображаемая в спецификации), но не совсем точно, как это сделать (точно, какой порядок отображать элементы на экране). В общем, лучше предположить, что все происходит сразу, хотя W3C дает несколько советов об ускорении рендеринга <table> на основе того, как пользователь агенты должны отображать элементы <table>.
IMO, панель инструментов webdev и Firebug - это лучшее, что у нас есть, где мы можем редактировать/отключать определенные HTML-элементы и правила CSS.
Ответ 2
ok - серьезный ответ.
Судя по комментариям на сайтах, которые я следил за этой ссылкой, я думаю, что вы и я знаем, что, вероятно, нет. В этих потоках много умных парней и блокетов, и они все швы указывают на "нет, это все умные 4 $!", Которые не помогут нам понять рендеринг.
Однако, я думаю, что ваш вопрос, возможно, захочет сделать акцент на том, что рендеринг на уровне браузера очень интересен.
Позвольте мне просто выбросить это. Считаете ли вы, что установка body { overflow: scroll; } по умолчанию может немного ускорить нас?
Ответ 3
По моему профессиональному мнению, действительно существует только один эффективный инструмент для факторинга/оценки/отладки в среде html: Итератор WebDev
Ответ 4
Большая часть информации, которую я могу найти на этой странице, это ссылка, которую я нашел в комментарии в нижней части ссылки, которую вы опубликовали:
http://dougt.wordpress.com/2008/05/24/what-is-a-reflow/
Ответ 5
Лично я чувствую, что ваш HTML проверяет спецификацию W3C, разве это не так? Необходимо разработать свой HTML-код для спецификации и позволить компаниям-разработчикам беспокоиться о своих ошибках (которые в наши дни довольно редки), чем сосредоточиться на старых ошибках браузера прошлого.
Плагин HTML Validator для Firefox (aka Tidy) - все, что любой веб-разработчик должен проверить, правильна ли их разметка, что неправильно, и где это неправильно.
Даже если вы можете выполнить истинную отладку, каждый браузер анализирует HTML по-своему, поэтому, даже если вы можете пройти через Firefox, чтобы увидеть, как происходит ошибка рендеринга, это не поможет вам с IE или Safari/Chrome вообще, потому что они выполняют разбор по-своему. Это не похоже на PHP,.NET или Java, где синтаксический анализ кода для всех одинаковый, отладка имеет смысл там.
Ответ 6
Тогда мой вопрос: возможно ли действительно отлаживать html (шаг через каждый элемент)? Или приблизиться к нему?
Возможно, вы можете пройти через процесс рендеринга страницы, запустив Firefox под gdb или изменив браузер с открытым исходным кодом, чтобы иметь кнопку "шаг", но я действительно сомневаюсь, что это достигнет чего-то полезного.
CSS не настолько сложный, все в основном представляет собой коробку с шириной/высотой/дополнением/маркой. Проблема с веб-разработкой (особенно CSS) заключается в том, что каждый браузер реализует рендеринг немного по-другому (несколько иначе, чем другие)..
Если вы хотите знать порядок рендеринга, чтобы ускорить загрузку страницы, я бы сказал, что вы делаете это неправильно. В браузере, отображающем страницу, возможно, приходится 5% времени загрузки, остальные - время генерации страницы и время ожидания сети.
Вы могли бы побрить 2 мс загрузки страницы, переупорядочив некоторые теги и используя другой метод позиционирования CSS.. или вы могли бы сократить время генерации страницы на 200 мс путем кеширования и половину времени ожидания сети, настроив вторую веб-страницу -сервер приближается к вашим пользователям. Сжатие вашего логотипа лучше, или сокращение вашего javascript, скорее всего, улучшит время загрузки (универсально, во всех браузерах!)
В принципе, если вас беспокоит время загрузки, есть гораздо лучшие места для начала. Если вы обеспокоены тем, как страница отображается, Firebug (- Lite) и http://browsershots.org (или виртуальная машина или две) - все, что вам нужно!
