12 KiB
פרויקט הרחבת דפדפן חלק 3: למדו על משימות רקע וביצועים
חידון לפני השיעור
מבוא
בשני השיעורים האחרונים של מודול זה, למדתם כיצד לבנות טופס ואזור תצוגה עבור נתונים שנמשכים מ-API. זהו אופן סטנדרטי מאוד ליצירת נוכחות ברשת. אפילו למדתם כיצד להתמודד עם משיכת נתונים בצורה אסינכרונית. ההרחבה שלכם לדפדפן כמעט מוכנה.
נותר לנהל כמה משימות רקע, כולל רענון הצבע של האייקון של ההרחבה, ולכן זה זמן מצוין לדבר על איך הדפדפן מנהל משימות מסוג זה. בואו נחשוב על המשימות הללו בהקשר של ביצועי הנכסים שלכם ברשת בזמן שאתם בונים אותם.
יסודות ביצועי רשת
"ביצועי אתר עוסקים בשני דברים: כמה מהר הדף נטען, וכמה מהר הקוד עליו רץ." -- זאק גרוסברט
הנושא של איך להפוך את האתרים שלכם למהירים במיוחד על כל סוגי המכשירים, עבור כל סוגי המשתמשים ובכל סוגי המצבים, הוא כמובן רחב מאוד. הנה כמה נקודות שכדאי לזכור בזמן שאתם בונים פרויקט רשת סטנדרטי או הרחבת דפדפן.
הדבר הראשון שעליכם לעשות כדי לוודא שהאתר שלכם פועל ביעילות הוא לאסוף נתונים על הביצועים שלו. המקום הראשון לעשות זאת הוא בכלי המפתחים של הדפדפן שלכם. ב-Edge, תוכלו לבחור את כפתור "הגדרות ועוד" (האייקון של שלוש הנקודות בפינה הימנית העליונה של הדפדפן), ואז לנווט אל כלים נוספים > כלי מפתחים ולפתוח את לשונית הביצועים. תוכלו גם להשתמש בקיצורי המקלדת Ctrl + Shift + I ב-Windows או Option + Command + I ב-Mac כדי לפתוח את כלי המפתחים.
לשונית הביצועים מכילה כלי פרופילינג. פתחו אתר (נסו, לדוגמה, https://www.microsoft.com) ולחצו על כפתור 'Record', ואז רעננו את האתר. עצרו את ההקלטה בכל זמן, ותוכלו לראות את התהליכים שנוצרו ל'סקריפט', 'רינדור' ו'ציור' של האתר:
✅ בקרו ב-תיעוד של Microsoft על לשונית הביצועים ב-Edge
טיפ: כדי לקבל קריאה מדויקת של זמן ההפעלה של האתר שלכם, נקו את מטמון הדפדפן שלכם
בחרו אלמנטים בציר הזמן של הפרופיל כדי להתמקד באירועים שמתרחשים בזמן שהדף נטען.
קבלו תמונת מצב של ביצועי הדף שלכם על ידי בחירת חלק מציר הזמן של הפרופיל והסתכלות על חלונית הסיכום:
בדקו את חלונית יומן האירועים כדי לראות אם יש אירוע שלקח יותר מ-15 מילישניות:
✅ הכירו את הפרופילר שלכם! פתחו את כלי המפתחים באתר זה ובדקו אם יש צווארי בקבוק. מהו הנכס שנטען הכי לאט? הכי מהר?
בדיקות פרופילינג
באופן כללי, ישנם כמה "אזורים בעייתיים" שכל מפתח רשת צריך לשים לב אליהם בזמן בניית אתר כדי להימנע מהפתעות לא נעימות כאשר מגיע הזמן לפרוס אותו לייצור.
גדלי נכסים: הרשת הפכה ל'כבדה' יותר, ולכן איטית יותר, בשנים האחרונות. חלק מהמשקל הזה קשור לשימוש בתמונות.
✅ עיינו ב-ארכיון האינטרנט כדי לקבל מבט היסטורי על משקל דפים ועוד.
פרקטיקה טובה היא לוודא שהתמונות שלכם מותאמות ונשלחות בגודל וברזולוציה הנכונים עבור המשתמשים שלכם.
מעברים ב-DOM: הדפדפן צריך לבנות את מודל האובייקטים של המסמך (DOM) על בסיס הקוד שאתם כותבים, ולכן זה אינטרס של ביצועי דף טובים לשמור על התגים שלכם מינימליים, תוך שימוש ועיצוב רק מה שהדף צריך. בהקשר זה, CSS מיותר שקשור לדף יכול להיות מותאם; סגנונות שצריכים לשמש רק בדף אחד לא צריכים להיכלל בגיליון הסגנונות הראשי, לדוגמה.
JavaScript: כל מפתח JavaScript צריך לשים לב לסקריפטים שחוסמים רינדור ושחייבים להיטען לפני שניתן לעבור ולצייר את שאר ה-DOM בדפדפן. שקלו להשתמש ב-defer עם הסקריפטים המוטמעים שלכם (כפי שנעשה במודול ה-Terrarium).
✅ נסו כמה אתרים באתר בדיקת מהירות אתרים כדי ללמוד עוד על הבדיקות הנפוצות שנעשות כדי לקבוע ביצועי אתר.
עכשיו, כשיש לכם מושג איך הדפדפן מרנדר את הנכסים שאתם שולחים אליו, בואו נסתכל על הדברים האחרונים שאתם צריכים לעשות כדי להשלים את ההרחבה שלכם:
יצירת פונקציה לחישוב צבע
עבדו ב-/src/index.js, הוסיפו פונקציה בשם calculateColor() אחרי סדרת משתני ה-const שהגדרתם כדי לקבל גישה ל-DOM:
function calculateColor(value) {
let co2Scale = [0, 150, 600, 750, 800];
let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
let closestNum = co2Scale.sort((a, b) => {
return Math.abs(a - value) - Math.abs(b - value);
})[0];
console.log(value + ' is closest to ' + closestNum);
let num = (element) => element > closestNum;
let scaleIndex = co2Scale.findIndex(num);
let closestColor = colors[scaleIndex];
console.log(scaleIndex, closestColor);
chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
}
מה קורה כאן? אתם מעבירים ערך (עוצמת הפחמן) מהקריאה ל-API שביצעתם בשיעור הקודם, ואז מחשבים כמה הערך קרוב לאינדקס שמוצג במערך הצבעים. לאחר מכן אתם שולחים את ערך הצבע הקרוב ביותר ל-runtime של Chrome.
ל-runtime של Chrome יש API שמטפל בכל מיני משימות רקע, וההרחבה שלכם משתמשת בו:
"השתמשו ב-API של chrome.runtime כדי לאחזר את דף הרקע, להחזיר פרטים על המניפסט ולהאזין ולהגיב לאירועים במחזור החיים של האפליקציה או ההרחבה. תוכלו גם להשתמש ב-API זה כדי להמיר את הנתיב היחסי של כתובות URL לכתובות URL מלאות."
✅ אם אתם מפתחים את ההרחבה הזו עבור Edge, ייתכן שתופתעו שאתם משתמשים ב-API של Chrome. גרסאות הדפדפן החדשות יותר של Edge פועלות על מנוע הדפדפן Chromium, כך שתוכלו לנצל את הכלים הללו.
שימו לב, אם אתם רוצים לבצע פרופילינג להרחבת דפדפן, הפעילו את כלי המפתחים מתוך ההרחבה עצמה, שכן היא מופעלת כדפדפן נפרד.
הגדרת צבע ברירת מחדל לאייקון
כעת, בפונקציה init(), הגדירו את האייקון כך שיהיה ירוק כללי כברירת מחדל על ידי קריאה לפעולת updateIcon של Chrome:
chrome.runtime.sendMessage({
action: 'updateIcon',
value: {
color: 'green',
},
});
קריאה לפונקציה, ביצוע הקריאה
לאחר מכן, קראו לפונקציה שיצרתם על ידי הוספתה להבטחה שמוחזרת על ידי ה-API של C02Signal:
//let CO2...
calculateColor(CO2);
ולבסוף, ב-/dist/background.js, הוסיפו מאזין לקריאות פעולה אלו ברקע:
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
if (msg.action === 'updateIcon') {
chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
}
});
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
context.beginPath();
context.fillStyle = value.color;
context.arc(100, 100, 50, 0, 2 * Math.PI);
context.fill();
return context.getImageData(50, 50, 100, 100);
}
בקוד זה, אתם מוסיפים מאזין לכל הודעה שמגיעה למנהל משימות הרקע. אם היא נקראת 'updateIcon', אז הקוד הבא רץ כדי לצייר אייקון בצבע המתאים באמצעות Canvas API.
✅ תלמדו עוד על Canvas API בשיעורי משחק החלל.
כעת, בנו מחדש את ההרחבה שלכם (npm run build), רעננו והפעילו את ההרחבה שלכם, וצפו בצבע משתנה. האם זה זמן טוב לצאת לסידורים או לשטוף כלים? עכשיו אתם יודעים!
ברכות, בניתם הרחבת דפדפן שימושית ולמדתם עוד על איך הדפדפן עובד ואיך לבצע פרופילינג לביצועיו.
🚀 אתגר
חקור כמה אתרים בקוד פתוח שקיימים כבר זמן רב, ועל סמך ההיסטוריה שלהם ב-GitHub, נסה לקבוע כיצד הם שופרו לאורך השנים מבחינת ביצועים, אם בכלל. מהו נקודת הכאב הנפוצה ביותר?
חידון אחרי השיעור
סקירה ולמידה עצמית
שקלו להירשם ל-ניוזלטר ביצועים
חקור כמה מהדרכים שבהן דפדפנים מודדים ביצועי רשת על ידי עיון בלשוניות הביצועים בכלי הרשת שלהם. האם מצאתם הבדלים משמעותיים?
משימה
כתב ויתור:
מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית Co-op Translator. בעוד שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי-דיוקים. המסמך המקורי בשפתו המקורית נחשב למקור הסמכותי. למידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי בני אדם. איננו נושאים באחריות לכל אי-הבנה או פרשנות שגויה הנובעת משימוש בתרגום זה.