नमस्ते! मेरा नाम दिमित्री कोज़िचव है।

आज मैं आपको स्क्रैच से अपना खुद का आधुनिक वेब ब्राउज़र इंजन बनाने के अपने प्रयास के बारे में बताऊंगा।

मेरे इंजन को न्यूटू कहा जाता है।

न्यूटू क्या है

तो न्यूटू। मैंने इसे क्यों बनाया?

यह सिर्फ इतना हुआ कि दुनिया में केवल 4 लोकप्रिय ब्राउज़र इंजन हैं जो इतने जटिल हैं कि डेवलपर्स स्वयं अपने कोड आधार का आधा भी नहीं जानते हैं, और तकनीक में इतने उन्नत हैं कि उनके साथ पकड़ना शुरू करना समय की बर्बादी है।

क्या सच में ऐसा है? मेरी परियोजना आधुनिक ब्राउज़र इंजनों के कारनामों को दोहराने के लिए बनाई गई थी और यह जांचने के लिए कि यह बड़ी परियोजनाओं के लिए एक योग्य विकल्प बनाने के लिए कितना यथार्थवादी है, जिसका इतिहास नब्बे के दशक में शुरू होता है। मेरा नया इंजन स्क्रैच से बनाया जा रहा है, जिसका मतलब है कि इसकी कहानी आज से शुरू होगी।

न्यूटू की विचारधारा पेज को बाकी की तुलना में तेजी से दिखाना है।

न्यूटू कैसे तेजी से काम करता है

जैसा कि मैंने पहले कहा था, मुख्य ब्राउज़र इंजन कई वर्षों से विकसित हो रहे हैं। विकास के शुरुआती चरणों में जो गलतियाँ की गई थीं, वे अंत तक परियोजना में बनी रहती हैं। इसका सबसे स्पष्ट उदाहरण C ++ में स्मार्ट पॉइंटर्स हैं - यह एक और भी अधिक जटिल सिंटैक्स है, स्मार्ट पॉइंटर्स को काम करते, बनाते और हटाते समय एक बड़ा ओवरहेड। इसके अलावा, बहुत सारे प्रकार के स्मार्ट पॉइंटर्स हैं और आपको यह जानना होगा कि किसका उपयोग करना है, क्योंकि प्रत्येक का अपना ~~आश्चर्य है~~ । WebKit की इस फ़ाइल को देखें। जब आप इस तरह के कोड को देखते हैं, तो स्मार्ट पॉइंटर्स का सिंटैक्स, आप समान रूप से शांत और साँस लेने की कोशिश करते हैं, लेकिन इस तरह का कोड सिर से पैर तक पूरा वेबकिट है। मेरे इंजन में ऐसी कोई खामियां नहीं हैं।

बॉक्स में क्या है

देखते हैं कि न्यूटू में क्या है

फिलहाल, परियोजना के निम्नलिखित भागों को लागू किया गया है:

HTML पार्सर
एचटीएमएल धारावाहिक
CSS पार्सर (चयनकर्ता, नियम और गुण)
सीएसएस धारावाहिक
मूल DOM API ^१

परियोजना के शेष भाग जिन्हें अभी तक लागू नहीं किया गया है:

सीएसएस कैस्केडिंग (सीएसएस शैली गणना)
संगीतकार
प्रस्तुत करना
जेएस आभासी मशीन और घटनाओं
इवेंट हैंडलर और इंटरएक्टिव पेज चयन

HTML पार्सर

मेरे HTML पार्सर को आधुनिक कहा जा सकता है। शुरू करने के लिए, यह एचटीएमएल 5 मानक के अनुसार बनाया गया है। यह आपकी किसी भी गलती को ध्यान में रखता है।

उदाहरण के लिए, आप एक विशेषता टाइप करते समय उद्धरण चिह्न लगाना भूल गए

<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 में खरोंच से पूर्ण विकसित ब्राउज़र इंजन विकसित करना?