Oi Meu nome é Dmitry Kozichev.

Hoje vou falar sobre minha tentativa de criar meu próprio mecanismo moderno de navegador da Web do zero.

Meu mecanismo se chama Newtoo.

O que é Newtoo

Então Newtoo. Por que eu o criei?

Aconteceu que existem apenas quatro mecanismos de navegador populares no mundo que são tão complexos que os próprios desenvolvedores não conhecem nem metade de sua base de código e são tão avançados em tecnologia que começar a alcançá-los é uma perda de tempo.

É mesmo assim? Meu projeto foi criado para repetir as explorações dos mecanismos modernos de navegadores e verificar o quão realista é criar uma alternativa digna para grandes projetos cuja história começa nos anos noventa. Meu novo mecanismo está sendo criado do zero, o que significa que sua história começa hoje.

A ideologia de Newtoo é mostrar a página mais rapidamente que o resto.

Como Newtoo funciona mais rápido

Como eu disse anteriormente, os principais mecanismos de navegador estão em desenvolvimento há vários anos. Os erros cometidos nos estágios iniciais de desenvolvimento permanecem no projeto até o final. O exemplo mais impressionante disso são os ponteiros inteligentes em C ++ - essa é uma sintaxe ainda mais complexa, uma grande sobrecarga ao trabalhar, criar e excluir ponteiros inteligentes. Além disso, existem muitos tipos de ponteiros inteligentes e você precisa saber qual usar, porque cada um tem suas próprias ~~surpresas~~ . Veja este arquivo no WebKit. Quando você vê esse código, a sintaxe de indicadores inteligentes, tenta se acalmar e respirar uniformemente, mas esse tipo de código é o kit completo da web, da cabeça aos pés. Não existem tais falhas no meu motor.

Conteúdo da caixa

Vamos ver o que Newtoo consiste

No momento, as seguintes partes do projeto são implementadas:

Analisador HTML
Serializador HTML
Analisador de CSS (seletores, regras e propriedades)
Serializador CSS
API DOM básica ¹

As partes restantes do projeto que ainda não foram implementadas:

CSS em cascata (cálculo no estilo css)
Linker
Render
JS máquina virtual e eventos
Manipulador de Eventos e Seleção de Página Interativa

Analisador HTML

Meu analisador de HTML pode ser chamado de moderno. Para começar, ele é construído de acordo com o padrão HTML5 . Ele leva em consideração qualquer um dos seus erros.

Por exemplo, você esqueceu de colocar aspas ao digitar um 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 :

(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 - desenvolvendo um mecanismo de navegador completo do zero em 2018?