Hola Mi nombre es Dmitry Kozichev.
Hoy les contaré sobre mi intento de crear mi propio motor de navegador web moderno desde cero.
Mi motor se llama Newtoo.
¿Qué es Newtoo?
Entonces Newtoo. ¿Por qué lo creé?
Dio la casualidad de que solo hay 4 motores de navegador populares en el mundo que son tan complejos que los desarrolladores mismos no conocen ni la mitad de su código base, y son tan avanzados en tecnología que es una pérdida de tiempo comenzar a ponerse al día con ellos.
¿Es realmente así? Mi proyecto fue creado para repetir las hazañas de los motores de navegador modernos y comprobar cuán realista es crear una alternativa digna a grandes proyectos cuya historia comienza en los años noventa. Mi nuevo motor se está creando desde cero, lo que significa que su historia comienza hoy.
La ideología de Newtoo es mostrar la página más rápido que el resto.
Cómo Newtoo funciona más rápido
Como dije anteriormente, los motores principales del navegador se han desarrollado durante varios años. Esos errores que se cometieron en las etapas iniciales de desarrollo permanecen en el proyecto hasta el final. El ejemplo más sorprendente de esto son los punteros inteligentes en C ++: esta es una sintaxis aún más compleja, una gran sobrecarga al trabajar, crear y eliminar punteros inteligentes. Además, hay
muchos tipos de punteros inteligentes y necesita saber cuál usar, porque cada uno tiene sus propias
sorpresas . Mira
este archivo de WebKit. Cuando ve dicho código, la sintaxis de los punteros inteligentes, intenta calmarse y respirar de manera uniforme, pero este tipo de código es todo el kit web de pies a cabeza. No hay tales defectos en mi motor.
Que hay en la caja
Veamos en qué consiste Newtoo
Por el momento, se han implementado las siguientes partes del proyecto:
- Analizador HTML
- Serializador HTML
- Analizador CSS (selectores, reglas y propiedades)
- CSS serializador
- Basic DOM API 1
Las partes restantes del proyecto que aún no se han implementado:
- CSS en cascada (cálculo de estilo CSS)
- Linker
- Renderizar
- JS máquina virtual y eventos
- Controlador de eventos y selección de página interactiva
Analizador HTML
Mi analizador HTML se puede llamar moderno. Para empezar, está construido de acuerdo con el estándar
HTML5 . Tiene en cuenta cualquiera de tus errores.
Por ejemplo, olvidó poner comillas al escribir un atributo
<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