שישה jQuery שיטות עבודה מומלצות לשיפור הביצועים

jQuery הוא אחד ה הספריות הפופולריות ביותר של JavaScript כיום. ה- API שלו הוא קל מאוד לשימוש מוביל עקומת למידה תלולה כל כך. הרבה פרויקטים להשתמש בקוד jQuery במקום ישירות באמצעות וניל JavaScript כדי להביא פונקציות דינמיות.

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

1. Lazy לטעון סקריפטים בעת הצורך

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

אחת הדרכים לעשות זאת ב- jQuery היא באמצעות $ .getScript כדי לטעון כל קובץ script בזמן הצורך שלה ולא במהלך טעינת הדף.

$ .getScript ("scripts / gallery.js", callback); 

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

$ .ajaxSetup (cache: true); 

2. הימנע $ (window) .load () אם הסקריפט שלך לא צריך שום משאבי משנה של הדף

ה $ (document) .ready () שווה ל DOMContentLoaded (איפה DOMContentLoaded זמין) $ (window) .load () ל טען. הראשון הוא ירה כאשר דף DOM עצמו נטען, אבל לא נכסים חיצוניים כמו תמונות וגליונות. השני הוא ירה כאשר כל דף מורכב, כולל התוכן שלה ואת המשאבים המשנה שלה נטענים.

לכן, אם אתה כותב סקריפט המבוסס על משאבי משנה של דף, כמו שינוי צבע הרקע של a div זה מנוסח על ידי גיליון סגנונות חיצוני, עדיף להשתמש $ (window) .load ().

אבל, אם זה לא המקרה, עדיף לדבוק $ (document) .ready () כי, jQuery שיחות שלה מוכן אם אתה משתמש $ (document) .ready () או לא, אז להשתמש בו כאשר אתה יכול.

3. השתמש לנתק כדי להסיר רכיבים מ- DOM שיש לשנותם.

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

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

של jQuery לנתק() מאפשר לנו להסיר רכיב מהדף, זה שונה מ הסר () משום שהיא תשמור את הנתונים המשויכים למרכיב עבור כאשר יש להוסיף אותו לדף מאוחר יותר. לאחר מכן, ניתן להחזיר אלמנט מנותק אל הדף.

4. השתמש css () כדי להגדיר גובה או רוחב במקום גובה () ו רוחב ()

אם אתה מגדיר את הגובה או הרוחב של אלמנט ב- jQuery, אני מציע לך להשתמש css () כי הגדרת ערכים אלה באמצעות גובה () ו רוחב () יגרמו להזרמות נוספות עקב גישה לחלק מתכונות הפריסה בפונקציה computeStyleTests ב- jQuery (נבדק בגרסה האחרונה)..

עבור הקוד p.height ("300px"); הנה ההזרמות.

ל p.css ("height": "300px");

computeStyleTests משמש לביצוע בדיקות תמיכה מסוימות. זה נקרא גם בזמן מקבל גובה וגובה רוחב שניהם css () ו גובה רוחב() , אלא בשביל הגדרה זה נקרא רק עבור גובה רוחב() אשר ייתכן שלא יהיה צורך, אז להשתמש css () במקום זאת.

5. אל תשתמש במאפייני פריסה שלא לצורך

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

אז אם אתה משתמש jQuery או וניל JavaScript, היזהר גישה מאפייני הפריסה שלא לצורך במיוחד בלולאה או לאחר ביצוע שינויים בסגנון.

6. לעשות שימוש במטמון שבו אתה יכול

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

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

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

סיכום

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

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