Hallo! Ich heiße Dmitry Kozichev.

Heute werde ich Ihnen von meinem Versuch erzählen, meine eigene moderne Webbrowser-Engine von Grund auf neu zu erstellen.

Mein Motor heißt Newtoo.

Was ist Newtoo?

Also Newtoo. Warum habe ich es erstellt?

Es ist einfach so passiert, dass es weltweit nur 4 beliebte Browser-Engines gibt, die so komplex sind, dass die Entwickler selbst nicht einmal die Hälfte ihrer Codebasis kennen und so fortschrittlich in der Technologie sind, dass es Zeitverschwendung ist, sie einzuholen.

Ist es wirklich so? Mein Projekt wurde erstellt, um die Exploits moderner Browser-Engines zu wiederholen und zu überprüfen, wie realistisch es ist, eine würdige Alternative zu großen Projekten zu erstellen, deren Geschichte in den neunziger Jahren beginnt. Mein neuer Motor wird von Grund auf neu erstellt, was bedeutet, dass seine Geschichte heute beginnt.

Newtoos Ideologie ist es, die Seite schneller als die anderen zu zeigen.

So funktioniert Newtoo schneller

Wie ich bereits sagte, entwickeln sich die wichtigsten Browser-Engines seit mehreren Jahren. Die Fehler, die in der Anfangsphase der Entwicklung gemacht wurden, bleiben bis zum Ende im Projekt. Das auffälligste Beispiel hierfür sind intelligente Zeiger in C ++ - dies ist eine noch komplexere Syntax, ein großer Aufwand beim Arbeiten, Erstellen und Löschen intelligenter Zeiger. Darüber hinaus gibt es so viele Arten von intelligenten Zeigern, und Sie müssen wissen, welche Sie verwenden müssen, da jeder seine eigenen ~~Überraschungen hat~~ . Schauen Sie sich diese Datei aus WebKit an. Wenn Sie einen solchen Code sehen, die Syntax intelligenter Zeiger, versuchen Sie, sich zu beruhigen und gleichmäßig zu atmen, aber diese Art von Code ist das gesamte Webkit von Kopf bis Fuß. Es gibt keine derartigen Mängel in meinem Motor.

Was ist in der Box

Mal sehen, woraus Newtoo besteht

Derzeit wurden folgende Teile des Projekts umgesetzt:

HTML-Parser
HTML-Serializer
CSS-Parser (Selektoren, Regeln und Eigenschaften)
CSS-Serializer
Grundlegende DOM-API ¹

Die verbleibenden Teile des Projekts, die noch nicht implementiert sind:

CSS-Kaskadierung (Berechnung des CSS-Stils)
Linker
Rendern
JS virtuelle Maschine und Ereignisse
Ereignishandler und interaktive Seitenauswahl

HTML-Parser

Mein HTML-Parser kann als modern bezeichnet werden. Zunächst wird es nach dem HTML5- Standard erstellt. Es berücksichtigt alle Ihre Fehler.

Sie haben beispielsweise vergessen, beim Eingeben eines Attributs Anführungszeichen zu setzen

<article id=hello></article>

,

,


<div>
   <p>First line
   <p>Second line
   <img src="ru/images/2019.png" alt="  !">
   <p>Third line <br> Last line
</div>


<myprefix:span>Hello, world!</myprefix:span>

, , HTML. , , .

HTML

html .

:


<!doctype html><html><head><title>Lorem ipsum</title></head></html>


<!doctype html>   - doctype token
<html>            - tag token
<head>            - tag token
<title>           - tag token
Lorem ipsum       - text token
</title>          - close tag token
</head>           - close tag token
</html>           - close tag token

.

6 :

(doctype)
Javascript css

. .

, ( ), , .

, , , , , , ( ). , , . , .

, <p> .

CSS

css , :

.flex[alignment="right"] { font-weight: light; color: #999 }

, - .

, Newtoo '//' css css javascript.

CSS

, html css, . .

, , , , , .

:

TagName
#Id
.Class
[attr=value]
[attr|=value]
[attr$=value]
[attr~=value]
[attr^=value]
[attr*=value]
.Multi.Class
#Mix#ed.Selec[tor=s]
"Quotes"
'Alternative quotes'
#descedant #child
#parent < #child
#previous + #this
#other ~ #this
.multi, .selectors
#element:hover
#element:active
#element:...

, , .

DOM API

HTML , (DOM). DOM , — , , . C DOM JavaScript c DOM API.

DOM. , html :

document.getElementById("article").innerHTML = " . <b>!</b>";

, , , , , !

JavaScript , API .

, .
, .

Newtoo GitHub

Newtoo - 2018 eine vollwertige Browser-Engine von Grund auf neu entwickeln?