Страница в браузере в упрощенном порядке

Обновлено: 02.07.2024

Процесс загрузки ресурсов страницы браузера и оптимизация

Одним из основных элементов оценки производительности страницы являетсяСкорость загрузки страницы,а такжеСкорость загрузки страницыКлючЗагрузка ресурсов страницы. В этой статье будет проанализирован процесс загрузки ресурса страницы браузера из браузера для перехода на страницу.Критический путь запросаКонцепция и как оптимизироватьКритический путь запросаНекоторые методы. Следующий связанный контент представлен на примере браузера Chrome. Между разными браузерами могут быть небольшие различия, но основной процесс одинаков.

Процесс загрузки ресурсов браузера

Сначала задайте два вопроса:

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

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

Шаг 1. Классификация ресурсов

Браузер Chrome делит ресурсы на 14 категорий, как показано в следующей таблице.

Виды	Введение
kMainResource	А именно основной ресурс, файловый ресурс страницы html принадлежит к этому типу
kImage	Различные ресурсы изображений
kCSSStyleSheet	Как следует из названия, это ресурс css каскадных таблиц стилей.
kScript	Ресурсы скрипта, такие как ресурсы js
kFont	Ресурсы шрифтов, например наборы шрифтов, обычно используемые на веб-страницах. Ресурсы Woff
kRaw	Ресурсы смешанного типа, наиболее распространенный запрос ajax относится к этому типу ресурса
kSVGDocument	Ресурсы файлов масштабируемой векторной графики SVG
kXSLStyleSheet	Расширенный язык таблиц стилей XSLT - это язык преобразования. Вы можете обратиться к w3c XSL для этого типа.
kLinkPrefetch	Предварительная выборка ссылок страницы HTML5, например dns-prefetch. Ниже будет подробное введение
kTextTrack	ресурсы субтитров для видео, а именно <track> этикетка
kImportResource	HTML Imports, импортируйте HTML-файл в другие HTML-документы, например <link href="import/post.html" rel="import" /> . Подробнее см. В соответствующих документах.
kMedia	К этому типу ресурсов относятся мультимедийные ресурсы, видео или аудио.
kManifest	Ресурсы кеша приложения HTML5
kMock	Зарезервированный тип теста

Шаг 2. Проверка политики безопасности

Процесс Второй - передать <meta> Ярлык, который нужно установить. <meta> Он настроен по принципу "ключ-значение". Вот несколько конкретных примеров применения.

Используется для блокировки смешанного содержимого:

Шаг третий: расчет приоритета ресурса

Приоритет ресурсов делится на5 уровень. Различная информация об этом5 уровеньОписание наименования может быть другим. В основном потому, что сами данные могут быть изСетевой уровень，Ядро браузераилиОтображение клиентской консолиПо одному из этих трех направлений. Хотя эти три направления5 уровеньИмена разные, но все они однозначно соответствуют друг другу. Сетевой уровень, 5 уровней: наивысший, средний, низкий, самый низкий, бездействие; Ядро браузера, 5 уровней: очень высокий, высокий, средний, низкий, очень низкий; Отображение клиентской консоли, 5 уровней: самый высокий, высокий, средний, низкий, самый низкий;

СледующееЯдро браузераВ качестве направления исследования мы представим процесс расчета приоритета ресурсов браузера:

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

Три типа ресурсов: html, css и font имеют наивысший приоритет;
Затем предварительно загрузите ресурсы (через <link rel=“preload"> Предварительная загрузка метки), скрипт, запрос xhr;
Затем есть изображения, голоса и видео;
Самый низкийprefetchПредварительно загруженные ресурсы.

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

заXHR запросРесурсы: WillСинхронный запрос XHRПриоритет установлен на самый высокий. Запросы XHR можно разделить на синхронные запросы и асинхронные запросы. Браузер повысит приоритет синхронных запросов до самого высокого уровня, чтобы получить данные как можно скорее и ускорить отображение страницы.
заобразРесурс: приоритет будет изменен в зависимости от того, находится ли изображение в видимой области экрана. По умолчанию для ресурсов изображений установлен низкий приоритет. Чтобы улучшить впечатление пользователя от первого экрана, современные браузеры будут вычислять, находится ли ресурс изображения в пределах видимого представления первого экрана во время рендеринга. Если это так, приоритет этой части ресурса изображения области просмотра (изображение в области просмотра) будет повышен до высокого. .
засценарийРесурсы: браузер разделит сценарий на три категории в соответствии с тегами местоположения и атрибутов сценария и установит приоритет соответственно. Прежде всего, приоритет скриптов с добавленными тегами атрибутов defer / async будет снижен до низкого. Затем для сценариев, в которых этот атрибут не добавлен, в зависимости от того, находится ли положение сценария в документе до или после первого изображения, отображаемого браузером, его можно разделить на две категории. Перед (Отмечено как раннее **) Будет установлен высокий приоритет после (Отмечено поздно **) Будет установлен средний приоритет. На следующем рисунке показаны приоритеты различных ресурсов после расчета приоритета ресурсов, в частности, выделены три общих ресурса, упомянутых выше. Красное поле - это тип сценария, фиолетовое поле - тип изображения, а синее поле - запрос XHR. Источник изображениякликните сюда。 Процесс

Шаг 4: Загрузите или заблокируйте ресурсы в соответствии с политикой безопасности и приоритетом, рассчитанными выше.

Цепочка критических запросов и оптимизация

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

Сначала давайте представимЦепочки критических запросовКонцепция чего-либо. Когда видимая область отображается (первый экран) и доступна пользователю, вызывается очередь запросов ресурсов, которая должна быть загружена.Цепочка критических запросов. Таким образом, мы можем передатьЦепочка критических запросов, Чтобы определить приоритетность загрузки ресурсов и последовательность загрузки, чтобы браузер мог загружать страницу как можно быстрее.

Как найти страницуЦепочка критических запросов

Получите ресурсы ключевого изображения с помощью первого снимка экрана. Как показано на рисунке ниже, мы используем первый снимок экрана для получения ресурсов изображения, которые будут загружены на первом экране. (В красном поле) Процесс
отLightHouseПлагин получает ресурсы ключей js и css в цепочке запросов ключей. LightHouseПодробное использование можно щелкнутьВотПридите понять. Наконец, можно создать отчет, запустив плагин, который содержит всесторонние отчеты и предложения по производительности страницы. Отчет о цепочке запросов ключей показан на рисунке ниже: Процесс
Просмотр приоритета каждого запроса через консоль браузера Откройте консоль Chrome, перейдите на вкладку «Сеть», и вы сможете просмотреть приоритет ресурса (Priority). Если столбец «Приоритет» отсутствует, щелкните правой кнопкой мыши и выберите «Приоритет» в раскрывающемся меню. Как показано на рисунке ниже: Процесс

оптимизацияЦепочка критических запросов

оптимизацияЦепочка критических запросовСуществует много методов, два из которых в основном представлены здесь.

Первый тип: использованиеPreloadс участиемPrefetch。

Эти два тега были представлены в предыдущем введении к статье, и оба они представляют собой методы оптимизации производительности с предварительной загрузкой. Что касается разработчиков, мы можем знать наши приложения лучше, чем браузеры. Следовательно, эту технологию можно использовать для информирования браузера о том, что определенные ресурсы могут быть использованы в будущем, и позволять браузеру загружать эти ресурсы заранее. Preload:

Полить холодной водой: ПосколькуPrefetchс участиемPreloadЭффект настолько мощный, можем ли мы использовать его с уверенностью? Но на самом деле, помимо dns-prefetch, очень беспокоит другая совместимость. В частности, в Safari, из-за высоких требований Apple к безопасности, практически ни одна из этих технологий предварительной загрузки не была реализована. PreloadКак показано на рисунке ниже, поддержка новой версии Chrome оказалась лучше, но Safari был уничтожен. Процесс dns-prefetchПоддержка неплохая. Процесс PrefetchТот же Safari был уничтожен. Процесс

WeChat: Используйте LS для кеширования файлов js. Как показано на рисунке ниже, с помощью браузера открыть статью общедоступного аккаунта WeChat, открыть консоль и обнаружить, что файл js в сети не нужно загружать? Вы смущаетесь!

Tmall: Используйте LS для кэширования ключевых асинхронных запросов XHR. вTmall Супермаркет ДомНапример: Как показано на рисунке ниже, проверьте LS и обнаружите, что он кэширует карусель на первом экране и данные 10 записей классификации.

Процесс Приведенное выше содержимое json после форматирования обнаружило, что оно содержит два атрибута, banner и flowIcons, и данные в нем соответствуют данным записи карусели и классификации соответственно. Это может значительно увеличить время рендеринга первого экрана.

Я сделал несколько веб-проектов, но я не слишком много думаю о последовательности загрузки и выполнения обычной веб-страницы. Но теперь мне нужно знать подробности. Трудно найти ответы от Google или около того, поэтому я создал этот вопрос.

пример страницы выглядит так:

Так вот мои вопросы:

как загружается эта страница?
какова последовательность загрузки?
когда выполняется код JS? (встроенный и внешний)
когда выполняется (применяется) CSS?
когда $(документ).готов к казни?
будет abc.в формате JPG можно скачать? Или он просто загружает kkk.jpg?

у меня есть следующее понимание:

браузер сначала загружает html (DOM).
браузер начинает загружать внешние ресурсы сверху вниз, построчно.
если <script> выполнено, загрузка будет заблокирован и ждать, пока файл JS не будет загружен и выполнен, а затем продолжить.
другие ресурсы (CSS/images) загружаются параллельно и выполняются при необходимости (например, CSS).

браузер анализирует html (DOM) и получает внешние ресурсы в массиве или стековой структуре. После загрузки html браузер начинает параллельно загружать внешние ресурсы в структуру и выполнять, пока все ресурсы не будут нагруженный. Затем DOM будет изменен в соответствии с поведением пользователя в зависимости от JS.

может ли кто-нибудь дать подробное объяснение о том, что происходит, когда у вас есть ответ html-страницы? Отличается ли это в разных браузерах? Любая ссылка на этот вопрос?

Я провел эксперимент в Firefox с Firebug. И он показывает как следующее изображение:

по вашему образцу,

грубо говоря, поток выполнения примерно таков:

HTML-документ загружается
начинается синтаксический анализ HTML-документа
парсинг HTML достигает <script src="https://askdev.ru/q/posledovatelnost-zagruzki-i-vypolneniya-veb-stranicy-6968/jquery.js" .
jquery.js загружается и парсится
парсинг HTML достигает <script src="https://askdev.ru/q/posledovatelnost-zagruzki-i-vypolneniya-veb-stranicy-6968/abc.js" .
abc.js загружается, анализируется и выполняется
достигает синтаксического анализа HTML <link href="abc.css" .
abc.css загружается и парсится
парсинг HTML достигает <style>. </style>
внутренние правила CSS анализируются и определяются
парсинг HTML достигает <script>. </script>
внутренний Javascript анализируется и запускается
парсинг HTML достигает <img src="https://askdev.ru/q/posledovatelnost-zagruzki-i-vypolneniya-veb-stranicy-6968/abc.jpg" .
abc.jpg загружается и отображается
парсинг HTML достигает <script src="https://askdev.ru/q/posledovatelnost-zagruzki-i-vypolneniya-veb-stranicy-6968/kkk.js" .
kkk.js загружается, обрабатывается и запустить
разбор HTML-документа заканчивается

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

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

Edit - эта часть более подробно описывает параллельную или нет часть:

по умолчанию, и из моего текущего понимания, браузер обычно запускает каждую страницу 3 способами: HTML parser, Javascript/DOM и CSS.

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

например, когда парсер натыкается на эту строку:

парсер сделает 3 вызова, два на Javascript и один на CSS. Во-первых, анализатор создаст этот элемент и зарегистрирует его в пространстве имен DOM вместе со всеми атрибутами, связанными с этим элементом. Во-вторых, анализатор вызовет привязку события onclick к этому конкретному элементу. Наконец, он сделает еще один вызов потоку CSS для применения стиля CSS к этому конкретному элементу.

исполнение сверху вниз и один нарезной. Javascript может выглядеть многопоточным, но факт в том, что Javascript однопоточный. Вот почему при загрузке внешнего файла javascript разбор главной HTML-страницы приостанавливается.

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

элемент будет доступен только в DOM после его анализа. Таким образом, при работе с конкретным элементом скрипт всегда размещается после или внутри события window onload.

такой скрипт вызовет ошибку (на jQuery):

1) HTML загружается.

3)После анализа HTML DOM отображается. CSS визуализируется параллельно с визуализацией DOM почти во всех пользовательских агентах. В результате настоятельно рекомендуется поместить весь код CSS во внешние файлы CSS, которые запрашиваются как можно выше в разделе

документа. В противном случае страница отображается до появления позиции запроса CSS в DOM, а затем рендеринг начинается сверху.

из вышеперечисленных шагов наиболее интенсивным процессором является синтаксический анализ DOM / CSS. Если вы хотите, чтобы ваша страница обрабатывалась быстрее, напишите эффективный CSS, исключив избыточность инструкции и консолидация инструкций CSS в наименьшее возможное количество ссылок на элементы. Уменьшение количества узлов в дереве DOM также приведет к более быстрой отрисовке.

На собеседованиях мы часто просим кандидата рассказать настолько подробно, насколько он может, что происходит, когда вводишь в адресной строке браузера адрес сайта и нажимаешь кнопку “Ввод”. В зависимости от того, кого собеседуем — фронтендщика или бекендщика — мы ожидаем разные ответы. А как бы выглядел идеальный ответ на этот вопрос? Ниже мой вариант ответа.

Итак, пользователь вводит в адресной строке браузера адрес сайта и нажимает кнопку “Ввод”.

Браузер состоит из нескольких компонентов, одним из которых является User Interface. Адресная строка как раз является одной из частей этого компонента.

User Interface после ввода URL в адресной строке передаёт управление компоненту Browser Engine, который отвечает за взаимодействие различных компонентов браузера.

Чтобы сделать запрос по указанному URL, браузеру нужно знать IP сервера. Первым делом он смотрим в свой локальный кэш DNS.Компонент Browser Engine как раз имеет доступ к этому кэшу.

Если там нет соответствующей записи, то браузер передаёт управление операционной системе, которая проверяет свой кэш DNS. Если и там отсутствует соответствующая запись, то ОС смотрит в локальные хосты (файл /etc/hosts в Unix-системах). Если запись о хосте отсутствует, то операционная система обращается к интернет провайдеру, у которого тоже есть свой кэш DNS на своих рекурсивных серверах DNS. В случае отсутствия записи в кэше на серверах DNS провайдера, запрос идёт на корневой DNS. У корневого DNS тоже есть кэш. Если соответствующей записи в кэше корневого DNS нет, запрос идёт дальше по цепочке серверов DNS.

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

Процесс получения IP адреса называется DNS lookup.

На сервере запрос принимает веб-сервер (например, nginx или apache).

В конфигурационных файлах веб-сервера прописаны обслуживаемые хосты. Веб-сервер достаёт хост из заголовка запроса host и сопоставляет с теми, которые указаны в конфигурации. Если есть совпадение, то веб-сервер находит в конфигурационном файле правила обработки такого запроса и выполняет их. Дальнейшее поведение сервера зависит от технологии и особенностей приложения. Здесь может происходить работа с базами данных, кэшами, запросы к другим серверам и сервисам, выполнение различных скриптов. Для простоты представим, что приложение сгенерировало файл HTML, и веб-сервер отдал его браузеру.

Заголовки ответа сервера можно увидеть в Chrome DevTools на вкладке Networking, выбрав нужный запрос

Если длина контента больше нуля и тип контента поддерживается браузером, то браузер пытается его обработать. В нашем случае браузер получает файл HTML с соответствующим заголовком Content-Type. Браузер начинает разбор (parsing) этого файла с первой инструкции, которой является инструкция <!DOCTYPE>. DOCTYPE указывает на версию HTML, чтобы браузер понимал, каким правилам следовать во время разбора (какие теги как обрабатывать).

Если DOCTYPE отсутствует, то браузер переключится в режим quirks mode и попытается разобрать документ HTML, однако многие элементы будут проигнорированы. Если указан корректный DOCTYPE, то браузер будет работать в standards mode и будет разбирать документ в соответствии с правилами той версии, которая указана в DOCTYPE.

Rendering Engine начинает разбор документа HTML.

Создаётся DOM (Document Object Model). В браузере этот объект доступен по ссылке, которая хранится в переменной document. У документа есть несколько состояний. Первое состояние — loading. Оно означает, что документ только начал формироваться.

Состояние документа хранится в переменной document.readyState.

Также создаётся объект styleSheets, который будет хранить все стили.

Все стили на странице доступны по ссылке, которая хранится в переменной document.styleSheets.

Любой файл — это набор байтов. Браузер берёт полученный набор байтов и преобразует их в символы по таблице символов в соответствии с кодировкой, которая была передана в заголовке Content-Type. В нашем примере это кодировка UTF-8.

Следующий процесс —разбивание текста на смысловые блоки (tokenization). Так браузер распознаёт теги <html>, <head> и проч., а также понимает, какие правила к какому тегу применять (например, поддерживаемые атрибуты).

Далее токены собираются в узлы (nodes). Эти узлы и сохраняются в DOM со всеми взаимными связями.

Во время разбора, если Rendering Engine встречает ссылку на внешний ресурс, то он передаёт команду загрузить этот ресурс компоненту Networking Component. Это может быть ссылка на стили, скрипты, картинки и т.п. Networking Component ставит все ресурсы в очередь на загрузку. Каждому ресурсу Networking Component присваивает приоритет.

Приоритеты ресурсов можно посмотреть в Chrome DevTools на вкладке Networking в колонке Priority.

Так, у HTML, CSS и шрифтов самый высокий приоритет. У изображений приоритет изначально низкий, но если Rendering Engine обнаружит, что изображение попадает в поле видимости (view port) пользователя, то повысит приоритет до среднего. Приоритет скрипта зависит от положения на странице и способа загрузки. У асинхронных скриптов (async/defer) низкий приоритет. У скриптов, которые в документе перед изображениями — высокий, у тех, что после хотя бы одного изображение — средний.

По возможности браузер пытается загружать ресурсы параллельно. Однако, он не может загружать параллельно более 6 ресурсов с одного домена.

Кроме того, когда Rendering Engine отдаёт команду компоненту Networking Component на синхронную загрузку стиля или скрипта, он останавливает разбор документа.

С загрузкой стилей происходит подобный процесс преобразования из байтов в Object Model (CSSOM): байты -> символы -> токены -> узлы -> CSSOM.

Немного иначе происходит загрузка скрипта. Вместо того, чтобы вернуть управление Rendering Engine’у, Networking Component . передаёт управление JavaScript Interpreter, который преобразует байты в исполняемый код: байты -> символы -> токены -> Abstract Syntax Tree (evaluating). Далее в работу вступает компилятор, который оптимизирует AST, кэширует некоторые участки кода, компилирует его на лету (JIT compilation) в исполняемый код и исполняет (executing). Однако исполняется скрипт только, когда готова CSSOM. До тех пор скрипт стоит в очереди на исполнение.

Во многих современных браузерах во время исполнения JavaScript в отдельном потоке продолжается сканирование документа на наличие ссылок на другие ресурсы и постановка ресурсов в очередь на скачивание (Speculative parsing).

Каждый этап разбора HTML, CSS и JS можно увидеть в Chrome DevTools во вкладке Performance

Если при загрузке скрипта Rendering Engine видит у скрипта атрибут async, то он не останавливает разбор документа во время загрузки скрипта. Скрипт также станет в очередь на исполнение, дожидаясь, когда CSSOM будет готова.

Если при загрузке скрипта Rendering Engine видит у скрипта атрибут defer, то он не останавливает разбор документа во время загрузки скрипта, но когда скрипт загрузится, он станет в очередь на исполнение, которая заработает при возникновении события DOMContentLoaded. К этому моменту CSSOM будет уже готова.

Когда Rendering Engine заканчивает разбор документа, он вызывает событие DOMContentLoaded, и состояние документа меняется на interactive. При этом ресурсы (например, картинки) могут продолжать загружаться.

Когда все ресурсы загрузились, вызывается событие load, а состояние документа меняется на complete.

После того, как документ полностью разобран и сформированы DOM и CSSOM, Rendering Engine начинает построение Render Tree. В него попадут все элементы, которые нужно отрисовать. Некоторые элементы изначально могут быть невидимыми — их не нужно рисовать. Для каждого элемента, который “выпадает” из потока (например, используется position: absolute), будет создаваться отдельная ветка в Render Tree.

Во время Rendering Tree происходит сопоставление узлов из DOM и узлов CSSOM.

Свойства узла можно получить с помощью функции window.getComputedStyles(узел).

Когда Rendering Tree готов, Rendering Engine запускает процесс layout. Он заключается в вычислении размеров и позиций каждого элемента на странице.

Следующий этап — paint. Rendering Engine вычисляет цвет каждого пикселя.

И, наконец, последний этап — composite. Компонент UI Backend слой за слоем отрисовывает элементы на странице. При этом, если требуется отрисовать изображение, которое ещё не загрузилось, во время процесса layout, Rendering Engine зарезервирует место для изображения, если у него указаны ширина и высота. Rendering Engine вынесет на отдельный слой те элементы, стили которых содержат правила opacity, transform или will-change. Более того, эти слои Rendering Engine передаст для обработки GPU.

Если требуется отобразить текст, для которого используется нестандартный шрифт, то современные браузеры скроют текст до момента загрузки шрифта (flash of invisible text).

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

В документе HTML могут присутствовать некоторые мета-теги, которые могут менять порядок загрузки ресурсов, а также их приоритет.

К примеру, мета-тег dns-prefetch вынуждает Rendering Engine обратиться к Networking Component и получить IP нужного домена ещё до того, как Rendering Engine встретить его в документе.

Мета-тег prefetch вынудит Networking Component поставить указанный ресурс в очередь на загрузку с низким приоритетом.

Мета-тег preload вынудит Networking Component поставить указанный ресурс в очередь на загрузку с высоким приоритетом.

Мета-тег preconnect вынудит Networking Component заранее подключиться к другом хосту, то есть пройти нужные этапы: DNS lookup, redirects, hand shakes.

На многих компьютерах сегодня интернет браузер - наиболее часто используемое пользователями приложение. Социальные сети , online-кинотеатры , игры , работа - интернет обслуживает практически все сферы нашей жизни, а во главе этой глобальной паутины стоит, конечно же, браузер. И не важно, что вы выбрали для себя: Google Chrome , Opera , Internet Explorer , Mozilla Firefox, Microsoft Edge , Яндекс.Браузер или что-то ещё - работа программы должна быть быстрой , стабильной и удобной , чтобы ничто не отвлекало вас от конкретных действий.

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

Об одной из таких проблем мы и поговорим сегодня.

Содержание статьи:

Проблемы изменения стартовой страницы браузера

Многие пользователи сети интернет сталкиваются с проблемой, когда при запуске интернет браузера выходит произвольная страница , отличающаяся от той, которую вы назначали домашней. Часто это бывает сайт " webalta ", " вулкан ", " apeha ", бывает " яндекс " и " mail ", для IE это " bing ", вариантов огромное количество.
Иногда случается даже такое, что браузер открывается в системе каждый раз при включении компьютера сам, без обращения пользователя, либо стартует с определённым интервалом времени, открывая не нужные посторонние сайты, рекламные страницы и тому подобное.
Виной такого поведения программы может быть как вирусная атака на ваш компьютер, так и установка легального софта от недобросовестного разработчика или распространителя.

Домашняя страница браузера (стартовая страница, Homepage) - это страница, которая открывается сразу после запуска программы интернет-обозревателя. В качестве домашней страницы может выступать конкретный адрес/адреса в интернете; пустая страница; либо последние сайты, которые были открыты во вкладках браузера перед завершением его работы

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

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

Что делать, если при запуске браузера открывается страница рекламного сайта

Поговорим о четырёх вариантах настройки домашней страницы браузера от простой (по нашему мнению) к сложной.

Настройка стартовой страницы браузера

Первое, что нужно сделать - проверить пользовательские настройки браузера.

Настроить стартовую страницу браузера в Google Chrome

Нажимаем кнопку Меню браузера, и выбрать из открывшегося списка пункт Настройки

После этого ставим галочку на пункт Заданные страницы и нажимаем кнопку Добавить

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

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

Проверьте, нет ли тут адресов, которые вы не хотите видеть при открытии браузера

Если вам хочется, чтобы браузер стартовал с новой пустой вкладки часто посещаемых страниц и строки поиска, то просто удаляем отсюда все адреса и жмём кнопку ОК .

Настроить домашнюю страницу в Mozilla Firefox

Открываем Меню программы, выбираем пункт Настройки

В строке При запуске Firefox: выбираем пункт Показать домашнюю страницу
В строке Домашняя страница вбиваем адрес сайта, который хотим видеть при запуске браузера Mozilla Firefox

Проверяем, нет ли тут адресов, которые вы не хотите видеть при открытии браузера.

Домашняя страница из надстроек браузера

Теперь проверим установленные расширения браузера и имеющиеся в системы панели.

Проверить установленные расширения в Google Chrome можно по пути Меню - Дополнительные инструменты - Расширения

Чтобы узнать, какие расширения установлены в Firefox, идём по пути Меню - Дополнения - Расширения

Кроме расширения изменением домашней страницы часто грешат различные панели для Internet Explorer, обнаружить их не сложно, устанавливаются они в Windows как отдельные программы и удаляются, соответственно, из меню Удаление программы, в названии часто содержат слова "панель" , "bar" .

Ниже приведён пример, демонстрирующий, как удалить панель Bing

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

Свойства ярлыка браузера

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

Для того, чтобы проверить не прописан ли адрес сайта в свойствах ярдыка браузера , жмём правой кнопкой мыши по ярлыку и выбираем пункт Свойства

Здесь обращаем внимание на строчку Объект . Нужно проверить, чтобы в этой строке не было ничего подозрительного. Например, в конце строки может быть просто приписан адрес сайта:

Кроме того, в строке объект может быть прописан совсем другой путь , допустим, к вредоносному файлу chrome.bat (в примере с хромом), в это случае запуск браузера тоже будет осуществляться с несанкционированной пользователем страницы, т.к. использование bat-файлов позволяет очень широко использовать средства операционной системы, подробнее об этом мы говорили в статье Пакетные файлы (bat, батники) Windows. Поэтому очень внимательно проверяйте строчку Объект на соответствие путям установленной программы.

Домашняя страница браузера в реестре Windows

И ещё один момент, на который следует обратить внимание, если у вас браузер открывается с неизвестной страницы, это реестр Windows. Отмечу, что данный пункт касается больше пользователей Internet Explorer, но он тоже достаточно распространён, поэтому, думаем, заслуживает внимания.

Открываем редактор реестра Windows:

Запускаем утилиту Выполнить перейдя в Пуск - Все программы - Стандартные (в Windows 10 утилита Выполнить находится в каталоге Служебные), либо зажав на клавиатуре клавиши Пуск (на некоторых клавиатурах она отмечается как Win) и R
В открывшемся окне вбиваем команду

Далее в верхней панели меню нажимаем кнопку Правка и выбираем пункт Найти . В строке поиска открывшегося окна вводим сайт, который нас донимает, например так:

Нажимаем клавишу Enter. Должен начаться поиск по реестру. Если какие-то совпадения будут найдены, вам необходимо удалить значения этих параметров (! удалять нужно именно значения, а не сами параметры !) . После удаления каждого найденного значения нажимаем на клавиатуре F3, и поиск продолжится. После окончания поиска вы увидите окно с оповещением Поиск в реестре завершен.

Теперь нужно зайти в настройки браузера и изменить домашнюю страницу. Чтобы изменить домашнюю страницу в Internet Explorer, нужно зайти в Меню , пункт Свойства браузера , на вкладке Общие поставить галочку напротив опции Начинать с домашней страницы и в окне Домашняя страница прописать нужный адрес (или нужные адреса).

После этого нажимаем кнопку OK и проверяем внесённые изменения.

Что делать, если браузер сам запускается с рекламой

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

Тут возможно два варианта:

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

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

Самопроизвольно открытие браузера , осуществлённое без обращения к программе пользователя, свидетельствует о наличии записей, касающихся самого браузера, либо открывающегося URL, в автозагрузке системы или планировщике задач Windows

Оба способа работы с автозагрузкой Windows подробно рассмотрены в статье Автозагрузка. Добавление приложений в автозагрузку Windows.

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

На этом всё. Мы рассмотрели способы исправления ситуации, когда браузер запускается с рекламным сайтом. Удобных вам домашних страниц в каждый браузер.

Читайте также: