דפדפן אינטרנט

מפת הקורס

דפדפן הוא מערכת תוכנה מורכבת שמחברת בין רשת, מערכת הפעלה, מנוע JavaScript, מנוע Rendering, אבטחה, אחסון וחומרת גרפיקה.

1. מהו דפדפן?

דפדפן הוא יישום שמסוגל לתקשר עם שרתי אינטרנט, להוריד משאבים, לפרש מסמכים וקוד, לבנות מודלים פנימיים של הדף, לחשב כיצד הוא צריך להיראות, ולהציג אותו למשתמש.

דוגמאות לרכיבים בדפדפן

2. URL

URL הוא כתובת משאב.

https://www.example.com:443/products?id=42#reviews

Navigation

כאשר המשתמש מקליד URL, הדפדפן צריך להחליט לאן יש לשלוח את הבקשה ואיזה סוג משאב הוא מבקש.

3. DNS

מחשבים מתקשרים באמצעות כתובות רשת. בני אדם מעדיפים שמות כמו example.com. DNS מתרגם בין שמות לבין מידע כתובות מתאים.

Cache

תוצאות DNS יכולות להישמר לזמן מסוים, כדי להפחית צורך בשאילתות נוספות.

Record Types

4. מה קורה ברשת?

TCP

TCP מספק זרם נתונים אמין ומסודר בין נקודות קצה.

UDP

UDP מספק מודל פשוט יותר ללא מנגנוני אמינות וסדר כמו TCP.

QUIC

QUIC הוא פרוטוקול תעבורה מודרני המבוסס על UDP ומשמש בסיס ל־HTTP/3.

5. HTTP

HTTP הוא אחד הפרוטוקולים המרכזיים המשמשים להעברת משאבי Web.

Request

GET /index.html HTTP/1.1
Host: example.com
Accept: text/html

Response

HTTP/1.1 200 OK
Content-Type: text/html

<html>...</html>

Methods

Status Codes

6. HTTPS ו־TLS

HTTPS הוא HTTP שמועבר באמצעות TLS.

מה TLS מספק?

• הצפנת התעבורה.
• הגנה על שלמות המידע.
• אימות שרת באמצעות מנגנון תעודות.

Certificate

תעודת TLS מאפשרת לקשר זהות של אתר למפתח ציבורי באמצעות מערכת אמון של PKI.

7. טעינת אתר — שלב אחר שלב

8. HTML

HTML מתאר את המבנה והמשמעות של המסמך.

<article>
  <h1>שלום</h1>
  <p>זהו טקסט.</p>
</article>

Semantic HTML

אלמנטים כמו header, nav, main, article ו־footer מספקים משמעות מבנית.

Attributes

<img src="image.jpg" alt="תמונה">

Attributes מספקים מידע נוסף על האלמנט.

9. HTML Parser

הדפדפן מקבל HTML כטקסט. הוא צריך לנתח אותו ולבנות מבנה פנימי.

Parser אינו רק "קורא תגיות". הוא צריך להתמודד גם עם HTML לא מושלם ולהשתמש בכללי parsing מוגדרים.

10. DOM

DOM הוא מודל אובייקטים של המסמך.

<body>
  <h1>Hello</h1>
  <p>World</p>
</body>

JavaScript + DOM

const title = document.querySelector("h1");

title.textContent = "New title";

JavaScript יכול לשנות את מבנה המסמך ואת תוכנו באמצעות ממשקי DOM.

11. CSS

CSS מתאר כיצד אלמנטים יוצגו.

.card {
    color: white;
    background: #162943;
    padding: 20px;
}

Selectors

h1
.card
#main
nav a
button:hover

Cascade

כאשר מספר כללים יכולים להשפיע על אותו אלמנט, הדפדפן משתמש במנגנוני cascade, specificity, inheritance וסדר הופעה.

Box Model

12. CSSOM

CSSOM הוא מבנה פנימי המייצג את כללי ה־CSS שהדפדפן פירש.

DOM ו־CSSOM מספקים מידע הדרוש למנוע ה־Rendering כדי לקבוע אילו אלמנטים קיימים ואיך הם צריכים להיראות.

13. Rendering

Render Tree

במנועי דפדפן קיימים מבנים פנימיים המתארים את המידע הדרוש לציור האלמנטים. לא כל Node ב־DOM בהכרח הופך לאובייקט שמצויר.

14. Layout

Layout קובע את המיקום והגודל של האלמנטים.

Flexbox

Grid

Positioning

• static
• relative
• absolute
• fixed
• sticky

15. Paint

לאחר שהדפדפן יודע היכן נמצאים האלמנטים, הוא צריך לקבוע כיצד לצייר אותם.

16. Compositing

הדפדפן יכול לחלק את התצוגה לשכבות ולשלב אותן ליצירת התמונה הסופית.

הפרדת שכבות יכולה לאפשר עדכונים יעילים יותר במקרים מסוימים.

17. מהקוד לפיקסלים

18. JavaScript

JavaScript מאפשר לדפים להיות דינמיים ואינטראקטיביים.

const button = document.querySelector("button");

button.addEventListener("click", () => {
    document.body.classList.toggle("dark");
});

JavaScript יכול

• לשנות DOM.
• לשנות CSS.
• להגיב לאירועים.
• לבצע חישובים.
• לבצע בקשות רשת.
• לשמור מידע.
• לתקשר עם APIs של הדפדפן.

19. JavaScript Engine

JavaScript Engine הוא הרכיב שמפרש ומבצע JavaScript.

JIT

Just-In-Time Compilation מאפשרת למנועים מודרניים לתרגם חלקים מהקוד לצורה יעילה יותר בזמן הריצה.

Garbage Collection

המנוע מנהל אובייקטים בזיכרון ומזהה אובייקטים שאינם נגישים עוד בהתאם למנגנון ניהול הזיכרון שלו.

20. Event Loop

JavaScript בדפדפן משולב עם מערכת אירועים ומנגנונים אסינכרוניים.

console.log("A");

setTimeout(() => {
    console.log("B");
}, 0);

console.log("C");

פלט טיפוסי:

A
C
B

21. Async

Promise

fetch("/api/data")
  .then(response => response.json())
  .then(data => {
      console.log(data);
  });

async / await

async function load() {
    const response = await fetch("/api/data");
    const data = await response.json();

    console.log(data);
}

ה־await אינו אומר בהכרח שכל הדפדפן נעצר; הוא מאפשר לקוד האסינכרוני להיכתב בצורה ליניארית יותר בתוך פונקציה אסינכרונית.

22. Fetch / XHR

JavaScript יכול לבקש משאבים מהשרת גם לאחר שהדף נטען.

const response =
    await fetch("/api/users");

const users =
    await response.json();

23. Storage

Storage Quota

לדפדפנים יש מנגנונים ומגבלות לניהול נפח אחסון, וההתנהגות המדויקת תלויה בסוג האחסון ובדפדפן.

24. Cookies

Cookie הוא פיסת מידע שהדפדפן שומר ומשייך ל־HTTP requests בהתאם לכללים שהוגדרו.

Set-Cookie:
session=abc123;
Secure;
HttpOnly;
SameSite=Lax

Secure

מגביל שליחה דרך ערוצים שאינם HTTPS.

HttpOnly

מונע גישה ל־Cookie דרך JavaScript APIs מסוימים.

SameSite

שולט בהיבטים של שליחת Cookie בהקשרי cross-site.

25. Cache

Cache מאפשר לדפדפן להשתמש מחדש במשאבים במקום להוריד אותם בכל פעם מחדש.

Cache-Control

Cache-Control: max-age=3600

Validation

במקרים מתאימים הדפדפן יכול לבדוק מול השרת אם עותק שכבר נשמר עדיין תקף.

26. Service Workers

Service Worker הוא סקריפט שפועל בהקשר מיוחד ויכול לשמש כמתווך בין הדף לבין משאבי רשת, בכפוף למגבלות ולמודל האבטחה של הדפדפן.

אחד השימושים הוא בניית Progressive Web Apps ושליטה באסטרטגיות Cache.

27. אבטחת דפדפן

הדפדפן מריץ קוד שמגיע ממקורות חיצוניים, ולכן מודל האבטחה הוא חלק מרכזי מהארכיטקטורה שלו.

איומים מרכזיים

28. Origin

Origin מוגדר לפי שילוב של scheme, host ו-port.

https://example.com:443

שני מסמכים נחשבים same-origin כאשר שלושת המרכיבים תואמים בהתאם להגדרת Same-Origin Policy.

Same-Origin Policy

זהו מנגנון בסיסי שמגביל אינטראקציה בין מקורות שונים.

29. CORS

CORS מאפשר לשרת לציין אילו cross-origin requests מהדפדפן רשאי לחשוף לקוד של האתר.

Access-Control-Allow-Origin:
https://example.com

30. CSP

Content Security Policy מאפשר לאתר להגדיר מדיניות למקורות תוכן וסקריפטים שהדפדפן רשאי לטעון או לבצע.

Content-Security-Policy:
default-src 'self';
script-src 'self';

CSP יכול להפחית סיכונים מסוימים, במיוחד סביב הזרקת תוכן וסקריפטים.

31. Sandbox

דפדפנים מודרניים משתמשים בבידוד בין חלקים שונים של המערכת כדי לצמצם את הנזק האפשרי במקרה של באג או קוד זדוני.

הפרטים המדויקים משתנים בין דפדפנים ומערכות הפעלה.

32. Processes

דפדפן מודרני אינו בהכרח תוכנית יחידה שמבצעת הכול בתהליך אחד.

למה?

• בידוד.
• יציבות.
• אבטחה.
• ניהול משאבים.
• אפשרות להתמודד עם כשל ברכיב מסוים.

33. GPU

הדפדפן יכול להשתמש ב־GPU כדי לבצע חלקים מהעבודה הגרפית.

Transforms

transform: translateX(100px);

פעולות גרפיות מסוימות יכולות להיות יעילות במיוחד כאשר ניתן לבצע אותן במסגרת compositing.

34. Performance

מה יכול להאט אתר?

Frame

ממשקים אינטראקטיביים שואפים בדרך כלל לייצר תנועה חלקה. בקצב של 60Hz יש בערך 16.67ms לכל מחזור תצוגה.

35. DevTools

כלי הפיתוח של הדפדפן מאפשרים לראות מה קורה בתוך הדף.

36. Browser Extensions

Extension מאפשר להוסיף יכולות לדפדפן באמצעות APIs ומודל הרשאות.

Permissions

Extension עשוי לבקש הרשאות לגישה למשאבים מסוימים. לכן יש משמעות רבה להרשאות שהוא מקבל.

37. Accessibility

דפדפן אינו מציג מידע רק לעיניים. הוא צריך לעבוד יחד עם טכנולוגיות מסייעות.

Semantic HTML

מבנה סמנטי מאפשר למערכות מסייעות להבין טוב יותר את תפקידם של רכיבי הדף.

Keyboard

אתר צריך להיות ניתן לניווט גם באמצעות מקלדת כאשר הדבר רלוונטי.

ARIA

ARIA מספקת מאפיינים שמוסיפים מידע סמנטי במקרים שבהם HTML רגיל אינו מספיק.

38. Privacy

דפדפן מנהל כמויות גדולות של מידע על פעילות מקומית: Cookies, Cache, History, Storage ועוד.

Tracking

אתרים ושירותים יכולים להשתמש בטכניקות שונות כדי לזהות או לקשר פעילות, בהתאם למידע הזמין להם ולמגבלות הדפדפן.

Privacy Controls

• ניהול Cookies.
• חסימת תוכן מסוים.
• Permissions לאתרים.
• מחיקת היסטוריה ונתוני אתר.
• מצבי גלישה פרטיים.

39. Progressive Web Apps

PWA הוא מודל לבניית יישומי Web שיכולים לספק חוויית שימוש הקרובה במובנים מסוימים ליישום מותקן.

יכולות זמינות תלויות בדפדפן ובמערכת ההפעלה.

40. ארכיטקטורה מלאה של דפדפן

התרשים מסכם את הרעיון: הדפדפן הוא שכבת תיווך עצומה בין המשתמש, האינטרנט, מערכת ההפעלה והחומרה.

41. Debugging

בעיה: הדף לא נטען

בעיה: CSS לא עובד

• בדוק האם הקובץ נטען.
• בדוק Selector.
• בדוק Specificity.
• בדוק Cascade.
• בדוק Computed Styles.

בעיה: JavaScript לא עובד

• בדוק Console.
• בדוק Stack Trace.
• השתמש ב־Breakpoints.
• בדוק Network.
• בדוק DOM.

בעיה: האתר איטי

• בדוק Network Waterfall.
• בדוק JavaScript.
• בדוק Long Tasks.
• בדוק Layout.
• בדוק Paint.
• בדוק Memory.

42. פרויקטים

43. פרויקט גמר

לבנות "דפדפן לימודי" שמדמה את כל השרשרת.

מילון מושגים

תרגול מסכם