Браузеры и новые технологии

Вопросы для интервью из моего проекта«Предварительное интервью и расширенное руководство»

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

Каковы общие ядра браузера?

Браузер/среда выполнения	ядро (движок рендеринга)	JavaScript-движок
Chrome	Мигание (28~) Вебкит (Chrome 27)	V8
FireFox	Gecko	SpiderMonkey
Safari	Webkit	JavaScriptCore
Edge	EdgeHTML	Chakra(for JavaScript)
IE	Trident	Chakra(for JScript)
PhantomJS	Webkit	JavaScriptCore
Node.js	-	V8

Каковы основные компоненты браузера?

Пользовательский интерфейс- Включает адресную строку, кнопки вперед/назад, меню закладок и многое другое. За исключением запрошенной вами страницы, которая отображается в главном окне браузера, различные отображаемые части являются частью пользовательского интерфейса.
браузерный движок- Передача инструкций между пользовательским интерфейсом и механизмом рендеринга.
движок рендеринга- Отвечает за отображение запрошенного контента. Если запрошенный контент представляет собой HTML, он отвечает за синтаксический анализ содержимого HTML и CSS и отображение проанализированного содержимого на экране.
Интернет- Для сетевых вызовов, таких как HTTP-запросы. Его интерфейс не зависит от платформы и обеспечивает базовую реализацию для всех платформ.
Серверная часть пользовательского интерфейса- Используется для рисования основных виджетов, таких как поля со списком и окна. Он предоставляет независимый от платформы общий интерфейс, в то же время используя под капотом методы пользовательского интерфейса операционной системы.
Интерпретатор JavaScript. Используется для анализа и выполнения кода JavaScript.
хранилище данных. Это слой сохранения. Браузер должен сохранять на жестком диске различные данные, например файлы cookie. Новая спецификация HTML (HTML5) определяет «веб-базу данных», полную (но облегченную) базу данных в браузере.

Рисунок: Основные компоненты браузера.

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

Как браузеры отображают пользовательский интерфейс?

Браузер получает файл HTML, а затем анализирует файл для формирования дерева DOM.
В то же время выполните синтаксический анализ CSS для создания правил стиля.
Затем объедините DOM Tree и Style Rules в Render Tree.
Затем войдите в фазу компоновки (Layout), которая заключается в том, чтобы назначить каждому узлу точную координату, которая должна появиться на экране.
Затем вызовите графический процессор для рисования (Paint), пройдитесь по узлам дерева рендеринга и отрисуйте элементы.

Как браузеры анализируют селекторы css?

Браузеры анализируют селекторы CSS «справа налево».

Мы знаем, что DOM Tree и Style Rules синтезированы в Render Tree, на самом деле необходимо совместитьStyle RulesПривязан к дереву DOM, поэтому необходимо пройти по дереву DOM в соответствии с информацией, предоставленной селектором, чтобы прикрепить стиль к соответствующему элементу DOM.

Следующий css в качестве примера

.mod-nav h3 span {font-size: 16px;}

Наше соответствующее дерево DOM выглядит следующим образом

При сопоставлении слева направо процесс выглядит следующим образом:

Начиная с .mod-nav, просмотрите заголовок дочернего узла и div дочернего узла.
Затем перейдите к дочерним узлам. в ветке правого дива
Наконец, перейдите к листовому узлу a и обнаружите, что он не соответствует правилам. Ему нужно вернуться к узлу ul, а затем пройти следующий узел li-a. Узлы дерева DOM могут перемещаться тысячи раз. , что очень неэффективно.

При совпадении справа налево:

Сначала найдите все самые правые промежутки узлов, для каждого промежутка найдите узел h3.
Найдите узел class=mod-nav из h3
Наконец, нахождение корневого элемента html завершает обход этой ветки.

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

Как строится дерево DOM?

Транскодирование: Браузер преобразует полученные двоичные данные в строку HTML в соответствии с указанным форматом кодирования.
Сгенерировать токены: после запуска парсера браузер разберет строку HTML в токены.
Создание узлов: добавление определенных атрибутов к узлу и определение родительского, дочернего, родственного отношения и древовидной области узла с помощью указателей.
Создать дерево DOM: построить DOM с помощью отношения, определяемого указателем, содержащимся в узле. Дерево

В чем разница между перерисовкой браузера и переформатированием?

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

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

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

«Перерисовать» не обязательно будет «перерисовать», а «перерисовать» неизбежно будет «перерисовать».

Как вызвать перекомпоновку и перерисовку?

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

Добавлять, удалять, обновлять узлы DOM
Скрыть узел DOM с отображением: нет — вызывает перекомпоновку и перерисовку
Скрытие узла DOM с помощью видимости: hidden — вызывает только перерисовку, так как геометрия не меняется.
Перемещение или анимация узлов DOM на странице
Добавьте таблицу стилей и настройте свойства стиля
Действия пользователя, такие как изменение размера окна, изменение размера шрифта или прокрутка.

Как избежать перерисовки или перекомпоновки?

Сконцентрируйтесь на изменении стиля

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

// 判断是否是黑色系样式
const theme = isDark ? 'dark' : 'light'

// 根据判断来设置不同的class
ele.setAttribute('className', theme)

Использование фрагментов документа

Мы можем создать узел вне дерева DOM с помощью createDocumentFragment, затем выполнить пакетные операции с этим узлом и, наконец, вставить его в дерево DOM, чтобы сработала только одна перекомпоновка.

var fragment = document.createDocumentFragment();

for (let i = 0;i<10;i++){
  let node = document.createElement("p");
  node.innerHTML = i;
  fragment.appendChild(node);
}

document.body.appendChild(fragment);

Поднять на синтетический слой

Повышение уровня элемента до составного слоя имеет следующие преимущества:

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

Лучший способ повысить уровень композиции — использовать свойство CSS will-change:

#target {
  will-change: transform;
}

Пожалуйста, перейдите к подробному объяснению составного слояОптимизация производительности беспроводной сети: Композитный

Как внешний интерфейс реализует обмен мгновенными сообщениями?

короткий опрос

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

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

comet

Существует два основных метода реализации кометы: один — метод длительного опроса, основанный на AJAX, а другой — метод потоковой передачи, основанный на Iframe и html-файле, который обычно называют длинным соединением.

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

Преимущества и недостатки длительного опроса:

Достоинства: хорошая совместимость, меньшая трата ресурсов
Недостатки: удержание соединения с сервером будет потреблять ресурсы, порядок возвращаемых данных не гарантируется, им сложно управлять и поддерживать

Преимущества и недостатки длинного соединения:

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

SSE

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

SSE (Server-Sent Event, push-событие на стороне сервера) — это технология HTML5, которая позволяет серверу отправлять новые данные клиенту.

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

Websocket

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

Websocket — это совершенно новый независимый протокол, основанный на протоколе TCP, совместимый с протоколом http, но не интегрированный в протокол http.Как только часть HTML5, его роль заключается в установлении двусторонней связи в реальном времени между сервер и клиент.

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

Web Worker

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

Роль Web Worker заключается в создании многопоточной среды для JavaScript, позволяющей основному потоку создавать рабочие потоки и назначать последним некоторые задачи для выполнения.

Учебник по веб-воркеру

Service workers

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

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

Учебное пособие для сервисных работников

Что такое политика браузера с одинаковым источником?

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。 Это важный механизм безопасности для изоляции потенциально вредоносных файлов.

Гомология означает, что «Protocol + доменное имя + порт» одинаковы, даже если два разных доменных имена указывают на тот же IP-адрес, они не гомологичны.

В следующей таблице приведены примеры обнаружения гомологии относительно http://store.company.com/dir/page.html:

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

<img src=XXX>
<link href=XXX>
<script src=XXX>

Как добиться кросс-доменности?

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

Самое классическое междоменное решение jsonp

jsonp — это, по сути, хак, который использует<script>Метки, которые не ограничены политикой одного и того же происхождения, работают в разных доменах.

Преимущества jsonp:

Простота реализации
Совместимость очень хорошая

Недостатки jsonp:

Поддерживаются только запросы на получение (поскольку<script>Теги могут быть только получить)
Проблемы с безопасностью, легко переносить XSS-атаки
Сервер должен взаимодействовать с jsonp для определенной степени трансформации.

Реализация jsonp:

function JSONP({  
  url,
  params,
  callbackKey,
  callback
}) {
  // 在参数里制定 callback 的名字
  params = params || {}
  params[callbackKey] = 'jsonpCallback'
    // 预留 callback
  window.jsonpCallback = callback
    // 拼接参数字符串
  const paramKeys = Object.keys(params)
  const paramString = paramKeys
    .map(key => `${key}=${params[key]}`)
    .join('&')
    // 插入 DOM 元素
  const script = document.createElement('script')
  script.setAttribute('src', `${url}?${paramString}`)
  document.body.appendChild(script)
}

JSONP({  
  url: 'http://s.weibo.com/ajax/jsonp/suggestion',
  params: {
    key: 'test',
  },
  callbackKey: '_cb',
  callback(result) {
    console.log(result.data)
  }
})

Самое популярное междоменное решение Cors

В настоящее время Cors является основным междоменным решением.Cross-Origin Resource Sharing (CORS) — это механизм, который использует дополнительные заголовки HTTP, чтобы сообщить браузерам, что веб-приложениям, работающим в одном источнике (домене), разрешен доступ из разных источников. сервер. Когда ресурс запрашивает ресурс из домена, протокола или порта, отличного от сервера, на котором находится сам ресурс, ресурс инициирует междоменный HTTP-запрос.

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

//CORS middleware
var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', 'http://example.com');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');

    next();
}

//...
app.configure(function() {
    app.use(express.bodyParser());
    app.use(express.cookieParser());
    app.use(express.session({ secret: 'cool beans' }));
    app.use(express.methodOverride());
    app.use(allowCrossDomain);
    app.use(app.router);
    app.use(express.static(__dirname + '/public'));
});

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

Самое удобное кроссдоменное решение Nginx

Nginx — чрезвычайно мощный веб-сервер, преимуществами которого являются легкий вес, быстрый запуск и высокий уровень параллелизма.

Nginx сейчас почти первый выбор в новых проектах.Сервисы, которые мы разрабатываем с помощью node или java, обычно должны проходить через обратный прокси-сервер nginx.

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

#进程, 可更具cpu数量调整
worker_processes  1;

events {
    #连接数
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    #连接超时时间，服务器会在这个时间过后关闭连接。
    keepalive_timeout  10;

    # gizp压缩
    gzip  on;

    # 直接请求nginx也是会报跨域错误的这里设置允许跨域
    # 如果代理地址已经允许跨域则不需要这些, 否则报错(虽然这样nginx跨域就没意义了)
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Headers X-Requested-With;
    add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

    # srever模块配置是http模块中的一个子模块，用来定义一个虚拟访问主机
    server {
        listen       80;
        server_name  localhost;
        
        # 根路径指到index.html
        location / {
            root   html;
            index  index.html index.htm;
        }

        # localhost/api 的请求会被转发到192.168.0.103:8080
        location /api {
            rewrite ^/b/(.*)$ /$1 break; # 去除本地接口/api前缀, 否则会出现404
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://192.168.0.103:8080; # 转发地址
        }
        
        # 重定向错误页面到/50x.html
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }

}

Другие междоменные решения

HTML5 XMLHttpRequest имеет API.Метод postMessage() позволяет сценариям из разных источников обмениваться данными асинхронно с ограниченным взаимодействием, обеспечивая кросс-текстовый документ, многооконный и междоменный обмен сообщениями.
WebSocket – это протокол двусторонней связи. После установления соединения сервер WebSocket и клиент могут активно отправлять или получать данные друг другу. После установления соединения двусторонняя связь между клиентом и сервером прекращается. ничего общего с HTTP, поэтому его можно использовать по всему миру.
window.name + iframe: значение свойства window.name все еще существует после загрузки разных страниц (даже разных доменных имен), и оно может поддерживать очень длинные значения имени. Мы можем использовать эту функцию для междоменного взаимодействия.
location.hash + iframe: a.html хочет взаимодействовать с c.html через домены, что достигается через промежуточную страницу b.html. Для трех страниц для передачи значений между разными доменами используется location.hash iframe, а для связи между одними и теми же доменами используется прямой js-доступ.
document.domain + iframe: Этот метод можно использовать только при совпадении доменного имени второго уровня.Например,для этого метода подходят a.test.com и b.test.com.Нам нужно только добавить document. domain = 'test.com' означает, что доменное имя второго уровня одинаково для достижения междоменного. Обе страницы принудительно устанавливают document.domain в качестве основного основного домена через js, и достигается один и тот же домен.

Остальные планы исходят отДевять междоменных методов

Справочная статья:

Почему селекторы CSS анализируются справа налево?

публика

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

Шаблон резюме:Подпишитесь на официальный аккаунт, чтобы ответить на «шаблон», чтобы получить

«Руководство по фронтальным интервью»:Руководство по нападению, сопровождающее это руководство, следуйте официальной учетной записи и ответьте на «fed», чтобы получить его.