Кратко опишите Chromium, CEF, Webkit, JavaScriptCore, V8, Blink

Chrome V8

1. Разберитесь с браузером

  1. Концепции ядра браузера

Ядро браузера разделено на две части: движок рендеринга (render engin), js движок (js engin)

Механизм рендеринга: отвечает за интерпретацию синтаксиса веб-страниц (HTML, JavaScript, импорт css и т. д.) и рендеринг (отображение) веб-страниц.

js engine: интерпретация, компиляция и выполнение javaScript

Основные ядра: Trident (IE), Gecko (FireFox), Webkit (Safari), Presto (ядро до Opera, устарело), ​​blink (Chrome)

2. История прогресса механизма рендеринга браузера webkit.


3. Введение в основной контент браузера webkit



Интерпретатор HTML: интерпретатор, который интерпретирует текст HTML. Его основная функция — интерпретировать текст HTML в дерево DOM. DOM — это метод представления документа.

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

Макет: после создания DOM webkit необходимо объединить объекты элементов с информацией о стиле, рассчитать информацию о макете, такую ​​как их размер и положение, и сформировать внутреннюю модель представления соотношения, которая может представлять всю информацию.

Механизм JavaScript: код JavaScript может использоваться для изменения содержимого веб-страницы и информации CSS. Механизм JavaScript может интерпретировать код JavaScript и изменять содержимое и информацию о стиле веб-страницы через интерфейс DOM и режим просмотра CSSOM, тем самым изменяя результат рендеринга.

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

Два, Chromium, CEF, Webkit, JavaScriptCore, V8, Blink

  1. V8 (вздесьУзнать больше)
  2. Webkit
    (refer: W)

    Применение: сафари, почта, магазин приложений и другие приложения

    макет вебкита:

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

    Классификация расчета макета: первая категория — это расчет всего дерева RenderObject; вторая категория — это расчет поддерева в дереве RenderObject, который обычно используется при расчете текстовых элементов или блоков overflow:auto.

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

    Пополнить:

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

    1. Процесс рендеринга Webkit: стиль -> Макет (здесь происходит перекомпоновка) -> Краска (здесь происходит перерисовка) -> Композит, преобразование находится в «Композит (слияние слоев рендеринга)», а ширина, левое поле, поля и т. Д. На слое «Макет» это должно привести к перекомпоновке.

    2. Современные браузеры открываются для ускоренного GPU трансформации и так далее.

    style -> Layout (здесь происходит перерисовка) -> Paint (здесь происходит перерисовка) -> Composite (в это время происходит преобразование)

    (ссылаться:

    Оптимизация производительности анимации CSS

    Объясните производительность анимации преобразования с точки зрения перерисовки и перестановки.

    Несомненно

  3. JavaScriptCore Engine

    В начале он был разработан на основе KJS, который является абстрактным интерпретатором на основе синтаксиса с плохой производительностью. В 2008 году Apple переписала компилятор и переводчик Bytecode, называемый Tacrefish


    (см.: JУглубленный анализ JavaScriptCore)

  4. Chromium/Blink

    Chromium основан на webkit, но код Webkit стал более читабельным, многопроцессорная структура

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

    (см.: СВведение в загрузку веб-страницы chromium)

    Blink: проект Chromium разработал движок рендеринга, основанный на Webkit и вне его.

    Более мощный рендеринг и макет:

    1. Следование многопоточной верстке
    2. пересчет стиля
    3. Не создавайте рендерер для скрытого iframe
    4. Исправьте старые ошибки, такие как удаление плагина при настройке display:none для плагинов.
    5. Асинхронно выгружайте iframe, быстрее

    (Ссылаться:Часто задаваемые вопросы разработчиков Blink)

5. CEF (встраиваемая платформа Chromium)

Фреймворк для встраивания функций браузера (рендеринг страниц, выполнение js) в другие приложения, поддерживающий платформы Windows, Linux, Mac.

История ЦЭФ:

  • CEF имеет две версии Chromium Embedded Framework: CEF 1 и CEF 3.
  • Разработка CEF 2 была прекращена после появления Chromium Content API.
  • CEF 1 — это реализация одного процесса, основанная на Chromium WebKit API. Он больше не разрабатывается и не поддерживается.
  • CEF 3 — это многопроцессорная реализация, основанная на Chromium Content API, с производительностью, аналогичной Google Chrome.

заявление:

1) сделать браузер

2) базовая кроссплатформенная настольная программаelectron.js

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

3. Резюме

Движок V8 — это JS-движок, разработанный независимой компанией Google.

Webkit основан на KHTML и включает JavaScriptCore.

Chromium основан на Webkit, производном от Blink.

CEF — это платформа приложений, включающая браузер Chromium.

Создатель всего:KHTML


Категории