Salut Je m'appelle Dmitry Kozichev.
Aujourd'hui, je vais vous parler de ma tentative de créer mon propre moteur de navigateur Web moderne à partir de zéro.
Mon moteur s'appelle Newtoo.
Qu'est-ce que Newtoo
Alors Newtoo. Pourquoi l'ai-je créé?
Il se trouve qu'il n'y a que 4 moteurs de navigation populaires dans le monde qui sont si complexes que les développeurs eux-mêmes ne connaissent même pas la moitié de leur base de code et sont si avancés en technologie que c'est une perte de temps de commencer à les rattraper.
En est-il vraiment ainsi? Mon projet a été créé pour répéter les exploits des moteurs de navigation modernes et vérifier à quel point il est réaliste de créer une alternative digne des grands projets dont l'histoire commence dans les années 90. Mon nouveau moteur est créé à partir de zéro, ce qui signifie que son histoire commence aujourd'hui.
L'idéologie de Newtoo est d'afficher la page plus rapidement que les autres.
Comment Newtoo fonctionne plus rapidement
Comme je l'ai dit plus tôt, les principaux moteurs de navigation se développent depuis plusieurs années. Ces erreurs commises aux stades initiaux de développement restent dans le projet jusqu'à la fin. L'exemple le plus frappant en est les pointeurs intelligents en C ++ - il s'agit d'une syntaxe encore plus complexe, un gros surcoût lors du travail, de la création et de la suppression de pointeurs intelligents. En outre, il existe de
nombreux types de pointeurs intelligents et vous devez savoir lequel utiliser, car chacun a ses propres
surprises . Regardez
ce fichier de WebKit. Lorsque vous voyez un tel code, la syntaxe des pointeurs intelligents, vous essayez de vous calmer et de respirer uniformément, mais ce type de code est l'ensemble du kit Web de la tête aux pieds. Il n'y a pas de tels défauts dans mon moteur.
Contenu de la boîte
Voyons voir en quoi consiste Newtoo
À l'heure actuelle, les parties suivantes du projet ont été mises en œuvre:
- Analyseur HTML
- Sérialiseur HTML
- Analyseur CSS (sélecteurs, règles et propriétés)
- Sérialiseur CSS
- API DOM de base 1
Les autres parties du projet qui ne sont pas encore mises en œuvre:
- CSS en cascade (calcul de style CSS)
- Linker
- Rendu
- Machine virtuelle JS et événements
- Gestionnaire d'événements et sélection de page interactive
Analyseur HTML
Mon analyseur HTML peut être appelé moderne. Pour commencer, il est construit selon la norme
HTML5 . Il prend en compte toutes vos erreurs.
Par exemple, vous avez oublié de mettre des guillemets lors de la saisie d'un attribut
<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 :
. .
, ( ), , .
, , , , , , ( ). , , . , ., <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