אחד מהיתרונות המיוחדים של האינטרנט הוא היכולת ליצור ממנו יצירות מורכבות. דפי אינטרנט כוללים מגוון משאבים שונים, שעשויים להגיע ממספר מקורות.
Blink משמש כמנוע הרינדור של דפדפנים המבוססים על Chromium, כולל Chrome, Android WebView, Microsoft Edge, Opera ו-Brave.
מנוע עיבוד הוא הרכיב בדפדפן אינטרנט שממיר קוד HTML, CSS ו-JavaScript – יחד עם תמונות ומשאבים אחרים – לדפי אינטרנט שאפשר להציג ולנהל איתם אינטראקציה.
איך Blink מעבדת דף אינטרנט?
כדי להתחיל בתהליך הרינדור, Blink אוספת את כל המשאבים הנדרשים, כמו HTML, CSS, JavaScript, סרטונים ותמונות. כדי לאחזר את המשאבים האלה, Blink מנהל את האינטראקציות עם סטאק הרשת ב-Chromium ובמערכת ההפעלה הבסיסית.
ברגע ש-CSS ו-HTML נטענים, Blink יכול להפוך את הקוד הזה, בצורת טקסט, לייצוג שהוא יכול לעבוד איתו. התהליך הזה נקרא ניתוח. צריך גם לנתח את JavaScript ואז להריץ אותו.
לאחר מכן, Blink יכול להתחיל בתכנון ולהציג דפי אינטרנט שתוכלו לראות ולנהל איתם אינטראקציה. זהו עיבוד (רינדור).
בתרשים הבא מוצגים השלבים בצינור עיבוד הנתונים של משימות הרינדור, כולל הרכיבים, התהליכים והמשאבים שקשורים לכל אחת מהן. ל-Blink יש הרבה עבודה לעשות!
עיבוד גרפיקה
ב-Blink נעשה שימוש במנוע הגרפיקה Skia בקוד פתוח, כדי ליצור אינטראקציה עם חומרת הגרפיקה הבסיסית של מחשב או מכשיר נייד.
Skia מספק ממשקי API נפוצים שפועלים במגוון פלטפורמות של חומרה ותוכנה. הוא משמש כמנוע הגרפיקה של Google Chrome ושל מוצרים רבים אחרים.
במקום לנסות לתמוך במערכות הפעלה ובמכשירים שונים, תוך כדי עדכון לשינויים בפלטפורמות, Skia משתמשת בספריות גרפיקה, כולל OpenGL, Vulkan ו-DirectX. הספרייה שבה Skia משתמשת תלויה בפלטפורמה שבה היא פועלת, למשל Android בנייד או Windows במחשב.
ניתוח והפעלה של JavaScript
כדי לנתח ולבצע קוד JavaScript ו-WebAssembly, Blink משתמש ב-V8, מנוע קוד פתוח שפותח על ידי הפרויקטים של Chromium.
V8 מאפשר למפתחים להשתמש בקוד JavaScript או WebAssembly כדי לגשת ליכולות של הדפדפן הבסיסי. לדוגמה: כדי לבצע פעולות על Document Object Model, שהוא הייצוג הפנימי של מסמך ש-Blink יוצרת מקוד HTML.
V8 מעבד JavaScript בהתאם לתקן JavaScript, שנקרא ECMAScript.
רינדור לפי תקנים
V8 מעבד JavaScript בהתאם לתקן JavaScript, שנקרא ECMAScript. מנועי עיבוד כמו Blink נועדו להטמיע סטנדרטים של אינטרנט באופן שמאפשר פעולה הדדית. תקני האינטרנט מאפשרים למפתחים ולמשתמשי הקצה להיות בטוחים שדפי האינטרנט פועלים היטב, לא משנה באיזה דפדפן הם משתמשים.
Blink פועל בהתאם למפרטים של מאפייני הדפדפן והשפה שמוגדרים בתקני האינטרנט, כולל HTML, CSS ו-DOM.
HTML ו-DOM
תקן ה-HTML מגדיר איך מהנדסי הדפדפנים צריכים להטמיע רכיבי HTML. המפרט של כל אלמנט HTML כולל קטע שמגדיר את ממשק ה-DOM של האלמנט. כאן מוסבר איך הדפדפן צריך להטמיע את JavaScript כדי לאפשר אינטראקציה עם הרכיב באופן סטנדרטי במכשירים ובפלטפורמות שונים.
מפרט הממשק נכתב ב-WebIDL: שפת הגדרה לבניית ממשק אינטרנט. ה-WebIDL הבא הוא חלק מההגדרה של HTMLImageElement בתקן HTML.
[Exposed=Window,
LegacyFactoryFunction=Image(optional unsigned long width, optional unsigned
long height)]
interface HTMLImageElement : HTMLElement {
[HTMLConstructor] constructor();
[CEReactions] attribute DOMString alt;
[CEReactions] attribute USVString src;
[CEReactions] attribute USVString srcset;
[CEReactions] attribute DOMString sizes;
[CEReactions] attribute DOMString? crossOrigin;
[CEReactions] attribute DOMString useMap;
[CEReactions] attribute boolean isMap;
[CEReactions] attribute unsigned long width;
[CEReactions] attribute unsigned long height;
readonly attribute unsigned long naturalWidth;
readonly attribute unsigned long naturalHeight;
readonly attribute boolean complete;
readonly attribute USVString currentSrc;
[CEReactions] attribute DOMString referrerPolicy;
[CEReactions] attribute DOMString decoding;
[CEReactions] attribute DOMString loading;
[CEReactions] attribute DOMString fetchPriority;
Promise<undefined> decode();
// also has obsolete members
};
WebIDL היא דרך סטנדרטית לתאר ממשקים פונקציונליים, כמו אלה שמרכיבים את רוב תקני האינטרנט.
כדי להטמיע תכונה, המהנדסים מכניסים את קוד ה-WebIDL לקובץ, והוא עובר טרנספורמציה אוטומטית על ידי Blink כדי לספק למפתחים ממשק לתכונה הזו. אחרי שהממשק מוגדר באמצעות WebIDL, המהנדסים יכולים ליצור את ההטמעות שמגיבות לקריאות לממשק.
html_image_element.idl במקור של Chromium.ספריות של צד שלישי
ב-Blink נעשה שימוש במספר ספריות של צד שלישי. לדוגמה, WebGL משמש לעיבוד גרפיקה אינטראקטיבית דו-ממדית ותלת-ממדית.
ספריות כמו WebGL עוברות אופטימיזציה רבה ובדיקות קפדניות. הם מעניקים ל-Blink גישה לתכונות ולפונקציונליות חשובות, בלי צורך להמציא מחדש את הגלגל. ה-WebGL IDL מוגדר, והמהנדסים של Blink מחברים את ממשק האינטרנט הזה לקוד ולספריות בקצה העורפי שמשמשים לרינדור של רכיבים רבים ושונים .
כדי לראות את WebGL בפעולה, כדאי לבדוק את אפליקציית הטרנספורמציה של פלקטלים Fractious, שמשתמשת ב-WebGL.
רינדור בפלטפורמות שונות
יכול להיות שתהיו סקרנים לדעת אם Chrome משתמש ב-Blink בכל מקום, בכל המכשירים ובכל מערכות ההפעלה.
ב-iOS וב-iPadOS, Chrome משתמש ב-WebKit כמנוע הרינדור שלו. WebKit היה למעשה פורק של פרויקט אחר, KDE, שהחל בשנת 1998. למעשה, גם Safari וגם Chromium התבססו בהתחלה על WebKit. כיום, דפדפן Safari וכל הדפדפנים בסביבה העסקית של Apple משתמשים ב-WebKit, בהתאם לדרישות של Apple ל-App Store.
עם הזמן, הפרויקטים של Chromium פיתחו ארכיטקטורת תוכנה שונה עם כמה תהליכים, כי שמירה על שתי ארכיטקטורות נפרדות בבסיס קוד אחד הפכה לבעייתית.
בנוסף, ב-Chromium רצו להשתמש בתכונות שלא היו מובנות ב-WebKit. לכן, החל מגרסה 28, מהנדסי Chromium החליטו להתחיל לעבוד על מנוע עיבוד גרפי משלהם. הם יצרו פורק מ-WebKit ושינו את השם ל-Blink. יש שמועה ש-Blink נקרא על שם התג <blink> (לא כל כך) האהוב שהיה זמין בדפדפן Netscape Navigator כדי להציג טקסט באופן מהבהב.
לסיכום: Blink משמש בדפדפנים ובמסגרות אחרות שמבוססות על Chromium, כמו Chrome, Microsoft Edge, Opera, Vivaldi, Arc ו-Brave. דפדפן Safari ודפדפנים נוספים משתמשים ב-WebKit, וגם כל הדפדפנים ב-iOS וב-iPadOS, כולל Chrome. ב-Firefox נעשה שימוש במנוע עיבוד שנקרא Gecko.