למד כיצד להאיץ את דפי האינטרנט שלך על ידי התאמה של JavaScript שלך כדי להסיר צווארי בקבוק.
JavaScript חיוני לפיתוח אתרים. השפה עומדת מאחורי רוב האינטראקטיביות והאנימציה שתראה באתרי אינטרנט. אבל JavaScript יכול גם לגרום לאתר להאט אם הקוד כתוב בצורה גרועה. חוסר יעילות יכול לגרום גם לזמני טעינה גרועים וגם למהירות רינדור איטית.
אמצו את השיטות הבאות כדי לשפר את המהירות והביצועים של האתר שלכם.
1. הגדר משתנים באופן מקומי
בתור מתכנת אתה צריך לדעת כיצד פועלת scoping. ישנם שני סוגים של משתנים ב-JavaScript: משתנים מקומיים ומשתנים גלובליים.
משתנים מקומיים הם משתנים המוצהרים בתוך בלוק פונקציות. ה-scope נשאר בפונקציה שבה הם מוצהרים בלבד. משתנים גלובליים הם משתנים הנגישים בכל הסקריפט. במקרה של משתנים גלובליים, ההיקף נשאר לאורך כל התוכנית.
בכל פעם שאתה מנסה לגשת למשתנה, הדפדפן עושה משהו המכונה בדיקת היקף. הוא בודק את הטווח הקרוב ביותר עבור המשתנה וממשיך לחפש עד שהוא מוצא את המשתנה. לפיכך, ככל שיש לך יותר שרשרת היקף בתוכנית שלך, כך ייקח יותר זמן לגשת למשתנים מעבר להיקף הנוכחי.
מסיבה זו, עדיף תמיד להגדיר את המשתנים שלך קרוב יותר להקשר הביצוע. השתמש במשתנים גלובליים רק במקרים נדירים; כאשר אתה רוצה לאחסן נתונים המשמשים בכל הסקריפט, למשל. זה יקטין את מספר ההיקפים בתוכנית שלך, ובכך ישפר את הביצועים.
2. טען JavaScript באופן אסינכרוני
JavaScript היא שפת תכנות עם חוט יחיד. המשמעות היא שברגע שפונקציה מופעלת, היא צריכה לפעול עד הסוף לפני שפונקציה אחרת תוכל לפעול. ארכיטקטורה זו יכולה להוביל למצבים שבהם קוד יכול לחסום את השרשור ולהקפיא את האפליקציה.
כדי לשמור על ביצועים טובים של השרשור, עליך להפעיל משימות מבזבזות זמן מסוימות באופן אסינכרוני. כאשר משימה פועלת בא-סינכרוני, היא לא תופסת את כל כוח העיבוד של השרשור. במקום זאת, הפונקציה מצטרפת לתור אירועים שבו היא מופעלת לאחר ביצוע כל הקודים האחרים.
קריאות API מושלמות לדפוס האסינכרוני מכיוון שלוקח זמן לפתור אותן. אז במקום שהוא יחזיק את השרשור, תשתמש בספרייה מבוססת הבטחות כמו ה-API של אחזור כדי להביא את הנתונים באופן אסינכרוני. בדרך זו, קוד אחר יכול לפעול בזמן שהדפדפן מאחזר נתונים מה-API.
הבן את המורכבויות של תכנות אסינכרוני ותשפר את הביצועים של היישום שלך.
3. הימנע מלולאות מיותרות
שימוש בלולאות ב-JavaScript יכול להיות יקר אם לא תיזהר. רכיבה על אופניים באוסף של פריטים עלולה להעמיס על הדפדפן עומס רב.
למרות שאתה בהחלט לא יכול להימנע מלולאות בקוד שלך, אתה צריך לעשות בהן כמה שפחות עבודה. אתה יכול להשתמש בטכניקות אחרות שימנעו את הצורך לעבור בלולאה דרך האוסף.
לדוגמה, אתה יכול לאחסן אורך של מערך במשתנה אחר, במקום לקרוא אותו במהלך כל איטרציה של הלולאה. אם אתה מקבל את מה שאתה רוצה מלולאה, פרוץ ממנה מיד.
4. הקטנת קוד JavaScript
הקטנה היא שיטה יעילה לאופטימיזציה של קוד JavaScript. מזעור הופך את קוד המקור הגולמי שלך לקובץ ייצור קטן יותר. הם מסירים הערות, חותכים תחביר מיותר ומקצרים שמות משתנים ארוכים. הם גם מסירים קוד שאינו בשימוש ומייעלים פונקציות קיימות כדי לתפוס פחות שורות.
דוגמאות לממזערים הם Google Closure Compiler, UglifyJS ו-Microsoft AJAX miniifier. אתה יכול גם לצמצם את הקוד שלך באופן ידני על ידי בדיקתו וחיפוש אחר דרכים לייעל אותו. לדוגמה, אתה יכול פשט את הצהרות if בקוד שלך.
5. דחוס קבצים גדולים עם Gzip
רוב הלקוחות השתמש ב-Gzip כדי לדחוס ולפרוק קבצי JavaScript גדולים. כאשר דפדפן מבקש משאב, השרת יכול לדחוס אותו כדי להחזיר קובץ קטן יותר בתגובה. כאשר הלקוח מקבל את הקובץ, הוא משחרר אותו. בסך הכל, גישה זו חוסכת רוחב פס ומפחיתה את זמן ההשהיה, ומשפרת את ביצועי האפליקציה.
6. צמצם את הגישה ל-DOM
גישה ל-DOM יכולה להשפיע על הביצועים של האפליקציה שלך מכיוון שהדפדפן צריך לרענן עם כל עדכון DOM. עדיף להגביל את גישת ה-DOM לתדר המינימלי האפשרי. אחת הדרכים לעשות זאת היא על ידי אחסון הפניות לאובייקטים בדפדפן.
אתה יכול גם להשתמש בספרייה כמו React שמבצעת שינויים ב-DOM הווירטואלי לפני שדוחפים אותם ל-DOM האמיתי. כתוצאה מכך, הדפדפן מעדכן את חלקי האפליקציה הזקוקים לעדכון, במקום לרענן את כל העמוד.
7. דחה עומס מיותר של JavaScript
למרות שחיוני שהדף שלך ייטען בזמן, לא כל הפונקציות צריכות לעבוד על הטעינה הראשונית. נניח שיש לך כפתור הניתן ללחיצה ותפריט כרטיסייה שמתייחסים לקוד JavaScript; אתה יכול לדחות את שניהם עד לאחר טעינת הדף.
שיטה זו משחררת כוח עיבוד, ומאפשרת לך לעבד את רכיבי העמוד הדרושים בזמן. אתה מעכב את הקומפילציה שעשוי להחזיק את התצוגה הראשונית של הדף. לאחר מכן, לאחר סיום טעינת הדף, תוכל להתחיל לטעון את הפונקציונליות. כך, המשתמש יכול ליהנות מזמן טעינה מהיר ולהתחיל ליצור אינטראקציה עם האלמנטים בזמן.
אתה יכול גם לכלול את הכמות הקטנה ביותר של CSS ו-JavaScript באלמנט הראש שלך, כך שהוא נטען מיד. קוד משני יכול לחיות בקבצי .css ו-.js נפרדים. טכניקה זו דורשת ידע הגון של כיצד פועל ה-DOM.
8. השתמש ב-CDN כדי לטעון JavaScript
שימוש ברשת אספקת תוכן עוזר להאיץ את זמן טעינת הדפים, אבל זה לא תמיד יעיל. לדוגמה, אם תבחר CDN ללא שרת מקומי במדינה של מבקר, הם לא ירוויחו.
כדי לפתור בעיה זו, אתה יכול להשתמש בכלים כדי להשוות מספר CDNs ולהחליט איזה מציע את הביצועים הטובים ביותר עבור מקרה השימוש שלך. כדי ללמוד איזה CDN הוא הטוב ביותר עבור הספרייה שלך, בדוק את cdnjs אתר אינטרנט.
9. הסר דליפות זיכרון
דליפות זיכרון יכולות להשפיע לרעה על ביצועי האפליקציה. דליפות מתרחשות כאשר הדף הנטען תופס יותר ויותר זיכרון.
דוגמה לדליפת זיכרון היא כאשר הדפדפן שלך מתחיל להאט לאחר סשן ארוך של עבודה עם האפליקציה.
אתה יכול להשתמש בכלי המפתחים של Chrome כדי לזהות דליפות זיכרון באפליקציה שלך. הכלי מתעד את ציר הזמן בלשונית הביצועים. דליפות זיכרון רבות מתרחשות כתוצאה מהסרת רכיבי DOM. אספן האשפה ישחרר זיכרון רק ברגע שכל המשתנים המתייחסים לאלמנטים אלה מחוץ לתחום.
כלים כמו Lighthouse, Google PageSpeed Insights ו-Chrome יכולים לעזור לך לזהות בעיות. Lighthouse בודק בעיות נגישות, ביצועים וקידום אתרים. Google PageSpeed יכול לעזור לך לבצע אופטימיזציה של JavaScript כדי לשפר את ביצועי היישום שלך.
דפדפן Chrome מספק תכונה של כלי מפתחים אותה תוכל לשנות על ידי לחיצה על F12 על מילת המפתח שלך. אתה יכול להשתמש בניתוח הביצועים שלו כדי להפעיל ולכבות את הרשת ולבדוק את צריכת המעבד. זה גם בודק מדדים אחרים כדי לחשוף בעיות המשפיעות על האתר שלך.
כמפתח אינטרנט, אתה הולך לעבוד הרבה בדפדפן האינטרנט שלך. רוב הדפדפנים מגיעים עם חבילה של כלים למפתחים כדי לעזור לך בפתרון בעיות באתר. התכונה Google Chromes Developer Tools כוללת פונקציות רבות שיסייעו לך.