مرحبًا اسمي دميتري كوزيتشيف.

اليوم سوف أخبركم عن محاولتي إنشاء محرك متصفح الويب الحديث الخاص بي من البداية.

محركي يسمى Newtoo.

ما هو Newtoo

حتى Newtoo. لماذا صنعته؟

لقد حدث أن هناك فقط 4 محركات متصفح شائعة في العالم معقدة للغاية لدرجة أن المطورين أنفسهم لا يعرفون حتى نصف قاعدة التعليمات البرمجية الخاصة بهم ، وهم متقدمون جدًا في التكنولوجيا لدرجة أنه قد يكون مضيعة للوقت لبدء اللحاق بها.

هل هو حقا كذلك؟ تم إنشاء مشروعي لتكرار مآثر محركات المتصفح الحديثة والتحقق من مدى واقعية إنشاء بديل جدير بالمشاريع الكبيرة التي يبدأ تاريخها في التسعينات. يتم إنشاء محركي الجديد من الصفر ، مما يعني أن قصته تبدأ اليوم.

إيديولوجية Newtoo هي إظهار الصفحة بشكل أسرع من الباقي.

كيف يعمل Newtoo بشكل أسرع

كما قلت سابقًا ، تم تطوير محركات المتصفح الرئيسية لعدة سنوات. تلك الأخطاء التي ارتكبت في المراحل الأولى من التطوير تبقى في المشروع حتى النهاية. وأبرز مثال على ذلك هو المؤشرات الذكية في C ++ - وهذا بناء أكثر تعقيدًا ، وهو عبء كبير عند العمل وإنشاء وحذف المؤشرات الذكية. بالإضافة إلى ذلك ، هناك العديد من أنواع المؤشرات الذكية وتحتاج إلى معرفة أي منها تستخدم ، لأن كل واحد لديه ~~مفاجآت~~ خاصة به. انظر إلى هذا الملف من WebKit. عندما ترى مثل هذا الرمز ، بناء الجملة من المؤشرات الذكية ، تحاول التهدئة والتنفس بالتساوي ، ولكن هذا النوع من التعليمات البرمجية هو مجموعة الويب بأكملها من الرأس إلى أخمص القدمين. لا توجد مثل هذه العيوب في محركي.

ماذا يوجد في الصندوق

دعونا نرى ما يتكون Newtoo

في الوقت الحالي ، تم تنفيذ الأجزاء التالية من المشروع:

محلل HTML
مُسلسل HTML
محلل CSS (المحددات والقواعد والخصائص)
مُسلسل CSS
API DOM الأساسي ¹

الأجزاء المتبقية من المشروع التي لم يتم تنفيذها بعد:

المتتالية CSS (حساب نمط Css)
رابط
تقديم
الجهاز الظاهري والأحداث شبيبة
معالج الأحداث واختيار الصفحة التفاعلية

محلل HTML

يمكن تسمية محلل HTML حديث. بادئ ذي بدء ، تم تصميمه وفقًا لمعيار HTML5 . يأخذ في الاعتبار أي من أخطائك.

على سبيل المثال ، نسيت وضع علامات الاقتباس أثناء كتابة سمة

<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؟