Зачем мне нужен исходный код сайта?
Думаете, если вы не программист или верстальщик, то код вам вряд ли понадобится? На самом деле, он может помочь в разных ситуациях. Код может быть полезен:
- SEO-специалистам. Не всегда есть возможность проанализировать страницу и узнать, есть ли с ней какие-либо проблемы. Например, чтобы узнать Description страницы, можно не пользоваться специальными плагинами и прочими средствами – достаточно открыть исходный код, и описание будет перед глазами. Аналогичным образом можно посмотреть заголовок страницы, узнать, подключена ли Яндекс.Метрика и другие скрипты.
- Для более глубокого анализа конкурентов. Посмотреть, какими способами продвигается сайт, мы можем через код: ключевые слова, мета-теги и прочее – все это доступно для обычного пользователя.
- Веб-дизайнерам. Речь снова идет о конкуренции, но и не только. Когда дизайнер создает свой сайт, он часто обращается к различным ресурсам, чтобы посмотреть, как расположены те или иные элементы. Все это мы можем узнать на любом сайте: какой отступ у этой кнопки, какого она размера, сколько пикселей та фотография и так далее.
- Для лучшего понимания кода. Изучив основы HTML-кода и CSS-стилей, вы сможете понять, как работает ваш верстальщик и какие элементы следует оптимизировать.
Еще несколько возможностей при просмотре кода страницы: выгрузка картинок с исходным размером, просмотр сайта в адаптивном режиме, возможность изменять содержимое веб-страницы. Последнее работает в локальном режиме – изменения будут применены только на текущем ПК до тех пор, пока страница не будет обновлена.
Проверьте, доступны ли файлы cookie на страницах конверсий
Чтобы отслеживание конверсий работало правильно, идентификаторы GCLID и AUID, сохраняемые в собственных файлах cookie при посещении целевых страниц, должны быть доступны на страницах конверсий. А значит, эти файлы cookie должны быть доступны браузеру, когда пользователь совершает конверсию. Попросите разработчиков проверить, не удаляются ли файлы cookie до того, как пользователи попадают на страницы конверсий. С помощью наших Инструментов разработчика можно протестировать отслеживание конверсий и узнать, передается ли идентификатор GCLID в URL и сохраняется ли он в файле cookie.
Разбор CSS и создание CSSOM
Возможно, вы слышали о DOM, но слышали ли вы о CSSOM (CSS Object Model) (объектной модели CSS)? До того, как я начал исследовать эту тему, я об этом ни чего не знал!
Подобно файлам HTML и DOM, когда файлы CSS загружаются, они должны быть проанализированы и преобразованы в дерево — на этот раз CSSOM. Он описывает все селекторы CSS на странице, их иерархию и их свойства.
Чем CSSOM отличается от DOM, так это тем, что он не может быть построен постепенно, поскольку правила CSS могут перезаписывать друг друга в разных точках из-за specificity (порядка применения свойства). Вот почему загрузка CSS блокирует рендеринг, поскольку до тех пор, пока весь CSS не будет проанализирован и не будет построен CSSOM, браузер не может знать, где и как разместить каждый элемент на экране.
Современный подход
Сегодня браузеры поддерживают а также атрибуты на скриптах. Эти атрибуты сообщают браузеру, что безопасно продолжать анализ во время загрузки скриптов.
асинхронной
Сценарии с атрибутом async выполняются асинхронно. Это означает, что скрипт выполняется сразу после его загрузки, не блокируя при этом браузер.Это означает, что сценарий 2 может быть загружен и выполнен до сценария 1.
Согласно http://caniuse.com/, 94,57% всех браузеров поддерживают это.
откладывать
Сценарии с атрибутом defer выполняются по порядку (т. Е. Сначала сценарий 1, затем сценарий 2). Это также не блокирует браузер.
В отличие от асинхронных сценариев, отложенные сценарии выполняются только после загрузки всего документа.
Согласно http://caniuse.com/, 94,59% всех браузеров поддерживают это. 94,92% поддерживают его хотя бы частично.
Важное замечание о совместимости браузера: в некоторых случаях IE это в первую очередь!
Текущий уровень техники заключается в размещении сценариев в пометить и использовать или же атрибутов. Это позволяет загружать ваши скрипты как можно быстрее, не блокируя ваш браузер.
Несколько слов об async и defer
Атрибуты async и defer в window onload JavaScript используются только для внешних скриптов. Они игнорируются, если нет подключения через src.
Оба атрибута указывают браузеру, что он может продолжать обрабатывать страницу и загружать скрипты «в фоновом режиме». А затем запускать скрипт после его полной загрузки. Таким образом, скрипт не блокирует создание DOM и отображение страниц.
Между этими атрибутами есть два отличия.
| async | Defer | |
| Порядок | Скрипты с атрибутом async выполняются в том порядке, в котором они загружаются. Порядок, в котором они указаны в документе, не имеет значения — скрипт, загруженный первым, выполняется первым. | Скрипты с атрибутом defer всегда выполняются в соответствии с порядком, в котором они расположены в документе. |
| DOMContentLoaded | Скрипты с атрибутом async могут загружаться и выполняться, пока документ еще не загружен полностью. Это происходит, когда скрипты являются небольшими или кэшируются, а документ достаточно объемен. | Скрипты с атрибутом defer выполняются после того, как документ будет полностью загружен и обработан (если необходимо они ожидают завершения процесса), сразу после события DOMContentLoaded. |
Атрибут async используется для полностью независимых скриптов.
Удалить код JavaScript и CSS из верхней части страницы
В верхней части кода HTML-страницы используйте только контент, нужный для загрузки первого экрана, остальной перенесите вниз. Скрипты JS и CSS влияют на отклик страницы, но не нужны в той части, которая загружается первой. Они тормозят браузер, и получается, что пользователь не видит часть страницы, на которую они влияют, но уже ждет ее загрузку.
Исходный HTML-код страницы:
<link rel="stylesheet" href="<a>small.css< a>"="">
<div class="black">
Текст
</div>
</a>small.css<></a>small.css<>
Стили small.css:
yellow {background-color: white;}
.blue {color: black;}
.big { font-size: 8em; }
.bold { font-weight: bold; }
Встраиваем CSS:
<style>
.black{color:black;}
</style>
<div class="black">
Текст
</div>
<link rel="stylesheet" href="small.css">
Файл стилей small.css будет подгружаться после загрузки первой страницы.
Шаг 3: JavaScript
К счастью, существует способ заставить IE распознавать новые элементы с помощью простого кода JavaScript.
Просто используется вызов для каждого нового не распознанного элемента.
Обычно вызов данного метода используется для вставки элемента непосредственно в ответвление DOM; другими словами, в существующий контейнер внутри тэга <body>. Вы также можете использовать его для фиксирования неизвестного элемента. Однако, этот трюк работает при вызове в тэге<head> без ссылок на содержащий элемент!
Remy Sharp написал “Скрипт HTML 5 Enabling,” который проделывает такой трюк для всех элементов HTML 5.
После добавления JavaScript в наш пример, взглянем на него снова в Internet Explorer:
Отлично. Internet Explorer 6 теперь изображает код HTML 5 также, как и Safari 4.
Атрибут download
Атрибут — новичок, пришедший с HTML5. Этот атрибут дополняет существующий атрибут , и говорит браузеру, что ресурс, на который указывает нужно скачать вместо того, чтобы открывать (например, браузеры уже научились открывать PDF, а этим атрибутом можно принудительно указать, что данный файл предназначен для скачивания, а не просмотра). Значение атрибута используется для задания названия загружаемого файла.
Значение атрибута может быть таким же, как и ссылка на файл в атрибуте , но это необязательно должно быть так. Возможность задавать различные значения для и может быть полезной. Например, на сервере вы генерируете уникальные имена файлов для месячных или годовых отчетов, но пользователю вы бы хотели отдать файл с понятным названием. Так как значение атрибута может отличаться от , это довольно просто реализовать:
<a href="files/eid987jdien2i.pdf" download="Месячный отчет за март 2014.pdf">Download March 2014 Report</a>
Когда пользователь кликнет по данной ссылке, он загрузит файл «Месячный отчет за март 2014.pdf», а не непонятный файл eid987jdien2i.pdf.
В теории нет никаких ограничений на значения атрибута . На практике это не совсем так, так как вам нужно помнить о том, что нельзя использовать некоторые символы, которые являются специфичными для файловых систем, например, символ обратного слеша (\) в Windows, или прямого слеша в *nix и OS X, а акже то, что браузер может подправить значение для того, чтобы исключить подобные запрещенные символы. Стоит также отметить, что значение атрибута может быть переопределено параметром HTTP заголовка .
Атрибут может быть использован на ссылках, ведущих на любые двоичные данные, что может быть полезно, если вы хотите дать возможность пользователю сохранить динамический контент, который он создал в вашем приложении (например, в вашем онлайн графическом редакторе).
Обычно в атрибуте вы будете указывать ссылку на двоичные данные, а дальше, как и в примере с месячным отчетом в PDF, с помощью атрибута укажете более человекопонятное имя. Следующий пример показывает, как это можно использовать в Canvas API:
Наш HTML:
<section>
<canvas id="c" width="400" height="400"></canvas>
<footer>
<a id="download-canvas" href="#">Download</a>
</footer>
</section>
И JavaScript:
(function() {
var canvas = document.getElementById('c'),
cxt = canvas.getContext('2d'),
downloadLink = document.getElementById('download-canvas');
cxt.fillRect(100, 100, 200, 200);
cxt.clearRect(150, 150, 100, 100);
downloadLink.href = canvas.toDataURL();
downloadLink.download = "squares.png";
})();
Заметьте, что в реальных жизненных ситуациях атрибут не стоит задавать жестко, а добавлять его стоит после того, как пользователь введет желаемое название файла, как раз перед тем, как он соберется его загружать.
Поддержка атрибута download браузерами
Если вы думаете, что теперь вам нет необходимости обрабатывать логику загрузки файла на серверной стороне, то смею вас разочаровать. К сожалению, данный атрибут не полностью поддерживается всеми основными браузерами. На время наприсания статьи браузеры Safari и IE (и десктопная, и мобильая версии) не поддерживают данный атрибут.
Беглый обзор элементов HTML 5
Черновой стандарт HTML 5 описывает набор новых семантически значимых элементов для описания стандартного шаблона вэб страницы. Использованием элементов, которые являются “значимыми” (то есть описывают свое содержимое) упрощает чтение и организацию кода, а также облегчает задачу для поисковых механизмов и по чтению и организации вашего контента.
Элементы HTML 5, которые используются в нашем примере:
- header
- footer
- nav
- article
- hgroup
Только чтение названий элементов указывает на их назначение. Для этого их и придумали! <div> во всех ваших без табличных дизайнах, и начать использовать для заголовков “<header>”, а для футеров “<footer>”.
<hgroup>. Он определяет группу заголовочных элементов(<h1>- <h6>), таким образом вы, например, можете группировать название поста блога и подзаголовок вместе. Нужно полагать данный элемент не заголовком страницы, а заголовком текущей секции.
Сайт становится уязвим для фишинговых атак
Если вы применяете кнопку HTML открыть в новом окне, используя target=»_blank», сайт, на который ведёт ссылка, получает доступ к окну/вкладке с вашей страницей и может подменить её содержимое.
И это не теоретическая уязвимость. Специалисты отдела безопасности отметили «значительное количество сообщений» о подобном перехвате вкладок с целью внедрения вредоносного программного обеспечения.
Для тех, кому интересно — технические подробности. Открытый в новом окне сайт получает доступ к вашей странице через объект window.opener в JavaScript. Этот объект с функциями чтения/записи, которым можно управлять. В том числе, можно изменить свойство window.opener.location и заставить браузер перейти по новому адресу, чтобы открыть картинку в новом окне HTML.
Некоторые браузеры позволяют предотвратить подобное поведение добавлением к ссылке атрибута rel=»noopener noreferrer». Пример, приведённый в начале статьи, будет выглядеть следующим образом:
<a href="https://www.thesitewizard.com/" rel="noopener noreferrer" target="_blank">thesitewizard.com</a>
Теоретически, как rel=»noopener», так и rel=»noreferrer» должно быть достаточно, чтобы защититься от подобной атаки при открытии страницы в новом окне HTML. При этом корректнее использовать атрибут rel=»noopener», так как у rel=»noreferrer» есть побочный эффект — браузер не будет передавать сайту URL источника запроса. Но на данный момент не все браузеры поддерживают атрибут rel=»noopener». Аналогично, rel=»noreferrer» не поддерживается некоторыми браузерами. Поэтому, если захотите защитить пользователей как можно большего числа браузеров, вероятно, придётся использовать оба атрибута.
Тем не менее, этот приём работает только на актуальных версиях Chrome, Firefox и Safari. Internet Explorer данную функцию не поддерживает, хотя я успел быстро проверить 11 версию IE, и она, вроде бы, защищена от подобной атаки при настройках безопасности, применяемых по умолчанию. Насчёт браузера Microsoft Edge точно сказать не могу.
Другими словами, описанный выше метод нельзя назвать стопроцентной защитой. Лучший способ избежать этой проблемы — использовать нормальные ссылки без атрибута target=»_blank».
readyState
Что произойдет, если установить обработчик DOMContentLoaded после загрузки документа? Естественно, он никогда не запустится.
Бывают случаи, когда непонятно, готов ли документ. Например, внешний скрипт с атрибутом async загружается и запускается асинхронно. В зависимости от сети он может загружаться и выполняться до завершения загрузки документа или после этого. Поэтому необходимо знать текущее состояние документа.
Свойство document.readyState предоставляет такую информацию. Возможны три значения:
- «» — документ загружается;
- «interactive» — документ полностью считан;
- «complete» — документ полностью считан и все ресурсы (например, изображения) загружены.
Так можно проверить значение document.readyState и настроить обработчик или выполнить код немедленно, как только он будет готов.
Например, следующим образом:
function work() { /*...*/ }
if (document.readyState == 'loading') {
document.addEventListener('DOMContentLoaded', work);
} else {
work();
}
Событие readystatechange запускается при изменении состояния. Можно выводить все эти состояния следующим образом:
// текущее состояние
console.log(document.readyState);
// выводим изменение состояния
document.addEventListener('readystatechange', () => console.log(document.readyState));
Событие readystatechange является альтернативным методом отслеживания состояния загрузки документа, оно было введено давно. В настоящее время оно редко используется, но рассмотрим его для полноты картины.
Как размещается readystatechange по отношению к другим событиям? Чтобы продемонстрировать порядок их срабатывания, ниже приводится пример с <iframe>, <img> и обработчиками, которые регистрируют события (JavaScript onload и другие):
<script>
function log(text) { /* выводим время и сообщение */ }
log('initial readyState:' + document.readyState);
document.addEventListener('readystatechange', () => log('readyState:' + document.readyState));
document.addEventListener('DOMContentLoaded', () => log('DOMContentLoaded'));
window.onload = () => log('window onload');
</script>
<iframe src="iframe.html" onload="log('iframe onload')"></iframe>
<img src="https://en.js.cx/clipart/train.gif" id="img">
<script>
img.onload = () => log('img onload');
</script>
Демо-версию можно найти на sandbox.
Стандартная последовательность событий:
- инициализация readyState:loading;
- readyState:interactive;
- DOMContentLoaded;
- iframe onload;
- readyState:complete;
- img onload;
- window onload JavaScript.
Цифры в квадратных скобках обозначают приблизительное время, когда это происходит. Реальное время немного больше, но события с одинаковой цифрой срабатывают примерно в одно и то же время (± несколько миллисекунд).
Document.readyState принимает состояние interactive непосредственно перед DOMContentLoaded. Эти два события фактически означают одно и то же.
Document.readyState завершается, когда загружаются все ресурсы (iframe и img). Мы видим, что это происходит примерно в то же время, что и img.onload (img — последний ресурс) и window.onload. Переключение на состояние complete означает то же, что и window.onload. Разница в том, что window.onload всегда запускается после всех других обработчиков load.
readyState
В заключение
занятия отметим свойство
document.readyState
которое в момент
загрузки HTML-документа принимает
следующие значения:
-
«loading»
– документ в процессе загрузки; -
«interactive»
– документ был полностью прочитан (парсинг документа завершен); -
«complete»
– документ был полностью прочитан и все ресурсы (изображения, стили и т.п.)
тоже загружены.
В ряде случаев
это свойство бывает весьма полезно. Например, мы вызываем функцию, но не
уверены, что DOM-дерево
полностью построено. Поэтому, делаем такую проверку:
removeImage();
function removeImage() {
if(document.readyState == "loading") {
console.log("документ грузится, вешаем обработчик");
document.addEventListener("DOMContentLoaded", removeImage);
}
else {
console.log("удаляем изображение");
document.body.remove(image);
}
}
По аналогии
могут быть обработаны и остальные свойства.
Для полноты картины
пару слов о событии readystatechange, которое появилось до событий
DOMContentLoaded, load, unload, beforeunload
и в старых версиях
JavaScript процесс
загрузки документа контролировался через него. Например, так:
document.addEventListener('readystatechange', function() {
console.log(document.readyState);
});
Теперь при
обновлении страницы мы можем увидеть изменение состояний свойства document.readyState в процессе
загрузки. Однако такой механизм отслеживания ушел в прошлое и сейчас уже нет смысла
о нем подробно говорить.
Итак, на этом
занятии мы с вами рассмотрели события
DOMContentLoaded,
load, unload, beforeunload
и поговорили о свойстве
document.readyState
которое
дополняет работу с этими событиями.
Видео по теме
JavaScipt (DOM) #1: объектная модель документа DOM и BOM
JavaScipt (DOM) #2: навигация по DOM — parentNode, nextSibling, previousSibling, chidNodes
JavaScipt (DOM) #3: методы поиска элементов в DOM: querySelector, querySelectorAll, getElementById
JavaScipt (DOM) #4: свойства DOM-узлов: nodeName, innerHTML, outerHTML, data, textContent, hidden
JavaScipt (DOM) #5: работа с нестандартными свойствами DOM-элементов: getAttribute, setAttribute, dataset
JavaScipt (DOM) #6: создание и добавление элементов DOM createElement, append, remove, insertAdjacentHTML
JavaScipt (DOM) #7: управление стилями — className, style, classList, getComputedStyle
JavaScipt (DOM) #8: метрики — clientWidth, scrollTop, scrollHeight, offsetLeft, offsetTop, clientLeft
JavaScipt (DOM) #9: HTML-документ: размеры (clientWidth, innerWidth), положение (pageYOffset, scrollBy)
JavaScipt (DOM) #10: расположение элементов — fixed, absolute, getBoundingClientRect, elementFromPoint
JavaScipt (DOM) #11: обработчики событий: onclick, addEventListener, removeEventListener, event
JavaScipt (DOM) #12: погружение и всплытие событий: stopPropagation, stopImmediatePropagation, eventPhase
JavaScipt (DOM) #13: делегирование событий, отмена действия браузера по умолчанию — preventDefault
JavaScipt (DOM) #14: события мыши mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter
JavaScipt (DOM) #15: события клавиатуры keydown, keyup, событие скроллинга scroll
JavaScipt (DOM) #16: навигация и обработка элементов форм (form) — document.forms, form.elements
JavaScipt (DOM) #17: фокусировка — focus, blur, focusin, focusout, tabindex, activeElement
JavaScipt (DOM) #18: события change, input, cut, copy, paste, submit элементов input и select
JavaScipt (DOM) #19: события при загрузке — DOMContentLoaded, load, unload, beforeunload, readyState
JavaScipt (DOM) #20: события load, error; атрибуты async, defer тега script
JavaScipt (DOM) #21: пример предзагрузки изображений с помощью javascript
JavaScipt (DOM) #22: пример создания начала игры арканоид
Выполнение JavaScript
Как и когда ресурсы JavaScript будут загружены, определяет, в какой-то момент они будут проанализированы, скомпилированы и выполнены. В разных браузерах для выполнения этой задачи используются разные механизмы JavaScript. Анализ JavaScript может быть дорогостоящим процессом с точки зрения ресурсов компьютера, в большей степени, чем другие типы ресурсов, поэтому его оптимизация так важна для достижения хорошей производительности. Прочтите этот фантастический пост, чтобы подробнее узнать, как работает движок JavaScript.
События загрузки
После того, как синхронно загруженный JavaScript и DOM будут полностью проанализированы и готовы, будет сгенерировано событие document.DOMContentLoaded. Для любых сценариев, которым требуется доступ к DOM, например, для управления им или прослушивания событий взаимодействия с пользователем, рекомендуется сначала дождаться этого события перед выполнением сценариев.
document.addEventListener('DOMContentLoaded', (event) => {
// You can now safely access the DOM
});
После того, как все остальное, например асинхронный JavaScript, изображения и т. д., завершили загрузку, запускается событие window.load.
window.addEventListener('load', (event) => {
// The page has now fully loaded
});
Убедитесь, что тег срабатывает на всех нужных страницах
Чтобы идентификаторы GCLID правильно собирались и сохранялись в собственных файлах cookie, тег должен быть размещен на всех страницах. Клики по объявлениям, ведущим на целевые страницы без такого тега, могут не отслеживаться. Чтобы посмотреть, какие URL используются в объявлениях, нажмите «Целевые страницы» в меню выбора страниц слева.
Обратите внимание на столбец «Доля кликов, совместимых с отслеживанием конверсий». В этом столбце показано расчетное количество кликов по объявлениям в поисковой сети, которые можно отследить для конверсий с помощью собственных файлов cookie на целевых страницах
Именно этот способ отслеживания – самый точный. Если этот показатель меньше 100 %, значит некоторые конверсии не отслеживаются в определенных браузерах. Если на сайте используются устаревшие теги, в отчете вы увидите рекомендацию перейти на глобальный тег или Google Менеджер тегов. Подробнее о показателе «Доля кликов, совместимых с отслеживанием конверсий»…
Перенаправление при загрузке страницы
Допустим, что перед выполнением JS redirect вы хотите убедиться, что страница закончила загрузку и выполнились определённые скрипты. В зависимости от того, когда нужно осуществить перенаправление, можно использовать следующие три события:
- Событие window.onload: возникает, когда объектная модель документа загружена, и весь контент загружен (то есть всё загружено).
- Событие document.onload: возникает, когда готова объектная модель документа (строится из кода разметки). То есть перед тем, как загружаются изображения или другой внешний контент.
-
Событие document.onreadystatechange: возникает, когда:
- документ всё ещё загружается;
- документ загружен, но внешние ресурсы (изображения, стили, фреймы и т.п.) ещё нет;
- документ и все внешние ресурсы загружены (то же самое, что и событие window.onload).
Примеры:
// Пример №1
window.addEventListener('load', function(event) {
// все ресурсы загружены
window.location = 'http://www.example.com/';
});
// Пример №2
document.onreadystatechange = function () {
switch(document.readyState) {
case 'loading':
// документ всё ещё загружается
break;
case 'interactive':
// документ загружен; теперь возможно обращение к элементам DOM
break;
case 'complete':
// страница полностью загружена (то есть все ресурсы загружены)
break;
}
}
Шаг 2: CSS
<div> позиционирование элементов выполняется просто — мы знаем, как они обрабатываются каждым браузером, поэтому очень просто написать CSS код для них. Однако, это только частный случай, так как каждый браузер применяет к странице таблицу стилей по умолчанию. Даже если Вы ничего не указали, существует CSS, который работает каждый раз при загрузке страницы в Firefox или IE.
Например, стиль, который используется для <div> в файле по умолчанию “html.css”, который используется Firefox:
Но что происходит, когда браузер находит элемент, который не может распознать? Определенного ответа на данный вопрос нет. Такой элемент может остаться без стиля вообще, может использоваться стиль по умолчанию, а может вообще не выводится на экран. Таким образом, нам нужно быть полностью уверенными, что любой из наших новых элементов будет иметь стиль CSS:
Теперь мы можем обращаться с этими элементами как с <div>.
Устаревшая рекомендация
Старый подход к решению этой проблемы заключался в теги в нижней части вашего потому что это гарантирует, что парсер не заблокирован до самого конца.
У этого подхода есть своя собственная проблема: браузер не может начать загрузку скриптов, пока весь документ не будет проанализирован. Для больших веб-сайтов с большими сценариями и таблицами стилей возможность загрузки сценария как можно скорее очень важна для производительности. Если ваш сайт не загружается в течение 2 секунд, люди перейдут на другой сайт.
В оптимальном решении браузер начнет загрузку ваших сценариев как можно скорее, в то же время анализируя остальную часть вашего документа.
Автоматическое заполнение браузерами
Firefox, Chrome и Opera автоматически заполняют поля форм для DOMContentLoaded. Например, если страница имеет форму с полями для ввода имени пользователя и пароля, а браузер запомнил их значения, DOMContentLoaded может попытаться автоматически их заполнить (если это одобрено пользователем).
Поэтому, кроме задержки до полной загрузки и выполнения скриптов, DOMContentLoaded может задерживаться и из-за автоматического заполнения полей форм. Вы могли сталкиваться с этим на некоторых сайтах: поля ввода логина / пароля не обновляются автоматически, и возникает задержка до полной загрузки страницы. На самом деле это задержка события DOMContentLoaded.
Одно из незначительных преимуществ использования атрибутов async и defer для внешних скриптов заключается в том, что они не блокируют DOMContentLoaded и позволяют избежать задержки, связанной с автоматическим заполнением форм.
Устраните неполадки с конверсиями со статусом «Не проверено» или «Тег неактивен»
Если в столбце «Статус отслеживания» таблицы конверсий появилось значение «Не проверено» или «Тег неактивен», воспользуйтесь инструментом Tag Assistant, чтобы проверить действия-конверсии непосредственно на сайте. При этом будет использоваться ваш аккаунт Google Рекламы. Когда вы будете открывать страницы сайта, в окне Tag Assistant будут появляться сведения для отладки, а также инструкции по устранению проблем, которые привели к появлению конверсий со статусом «Не проверено» или «Тег неактивен». Рекомендуем ознакомиться с информацией о том, как работать с расширением Tag Assistant.
Что такое HTML и CSS
HTML – это язык гипертекстовой разметки, выступающий в качестве строительного материала страницы. С его помощью создается основной контент – текстовая часть, изображения, различные блоки и прочее. Все это заполняется с помощью тегов, специальных команд для браузера, которые вводятся пользователем в специальном файле с расширением .html. Синтаксис выглядит следующим образом:
<tag> … </tag> <! Вводится открывающий тег, прописывается содержимое, а затем тег закрывается >
Например, часто используется такая конструкция: <h1> Это мой первый сайт! </h1>, где h1 – тег, обозначающий заголовок первого уровня, внутри которого находится текст, отображаемый на странице.
Подобных тегов более сотни, для их изучения рекомендую обратиться к справочнику.
CSS – это помощник HTML, который позволяет преображать страницу как угодно: можно настраивать цвета элементов, изменять их положение, размер и форму, добавлять адаптивность и многое другое. Подключение CSS выполняется непосредственно в HTML-файле с помощью специального тега.
Рассмотрим на небольшом примере, как работают стили:
- Допустим, у нас есть HTML-тег <body> с текстом «Привет! Это мой первый сайт»:
- Мы хотим, чтобы текст стал другого цвета. Давайте сделаем его красным! Для этого используются каскадные стили (CSS), в данном случае достаточно для тега body прописать стиль «color: red;». В результате текстовый элемент преобразится, а информацию о его стилях мы можем посмотреть в инспекторе браузера:
Каждый сайт, который вы встречаете, использует связку HTML и CSS. Стоит упомянуть, что еще есть язык программирования JavaScript, который позволяет оживлять страницу. Например, он может активировать формы обратной связи, создать сложную анимацию, установить всплывающие окна и многое другое. Обычным пользователям разбираться в нем не нужно от слова совсем. Если вы собираетесь вести аналитику сайта или просто интересуетесь его содержимым, то в знаниях JavaScript нет никакой необходимости.
