אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » jQuery למתקדמים » יעילות ב-jQuery: סלקטורים

יעילות ב-jQuery: סלקטורים

רן בר-זיק אפריל 1, 2012 8:03 am תגובה אחת

כך תכתבו סלקטורים יעילים יותר עם jQuery

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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

את רוב הדוגמאות בדקתי באמצעות כלי הבדיקה הנפלא של jsPref. אתם גם מוזמנים לבדוק את כל מה שאני אומר באמצעות הכלי הנהדר הזה, להשתמש בתוצאות הבדיקות שלי ואף להכניס תוצאות משלכם. נסו ותהנו.

אז הנה הטיפים:

להשתמש בגרסת jQuery עדכנית

הטיפ הזה הוא 'כאילו דהההה' והוא מאד מאד טריוויאלי. ככל שגרסת ה-jQuery מתקדמת יותר, כך הביצועים שלה טובים יותר. לפעמים אנחנו חייבים להשתמש בגרסת jQuery עתיקת יומין – במיוחד אם אנו משתמשים ב-CMS או פריימוורק שבא עם גרסה מסוימת ויש תוספים ומודולים שתלויים בה (למשל דרופל 6 שבאה עם גרסת 1.2 ואבוי למי שישדרג). אבל אם אתם יכולים לשדרג – שדרגו כאילו אין מחר.

סלקטור מבוסס id הוא תמיד טוב יותר מהאפשרויות האחרות

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

משתמשים בסלקטור מבוסס id? תסתפקו בו

באופן פרדוקסלי משהו, סלקטור מבוסס id טוב יותר כאשר הוא לבד #myId ולא למשל div#myId. אם אתם משתמשים ב-id, תסתפקו בו.

משתמשים בסלקטור שהוא לא id? עדיף לא לפרט על סוג האלמנט

אם אתם חייבים להשתמש בסלקטור של class, או בסלקטור אחר, אל תפרטו את סוג האלמנט, תעשו ל-jQuery עבודה יותר קלה. כך למשל במקום הסלקטור div.myClass תשתמשו בסלקטור .myClass.

והנה הגרפים הרלוונטיים:

תוצאות בדיקת סלקטורים
תוצאות בדיקת סלקטורים

בעיות ב-jQuery עם אינטרנט אקספלורר 7? תנו לאבא לדבר

הטיפ הזה רלוונטי לאינטרנט אקספלורר 7 בלבד – יש בדפדפן הזה בעיה עם סלקטורים של class בגלל סיבות שלא אכנס אליהם.אם אתרע מזלכם ואתם נדרשים לפתור בעיה של סקריפט איטי בדפדפן הזה – תכניסו הורים לסלקטורים.
אם אתם חייבים להשתמש בסלקטור של class, או בסלקטור אחר, אם תפרטו את סוג האלמנט, תעשו לאינטרנט אקספלורר 7 עבודה יותר קלה והסקריפט שלכם יהיה יותר טוב. כך למשל במקום הסלקטור myClass. תשתמשו בסלקטור div.myClass – נכון שזה מנוגד למה שכתבתי בסעיף הקודם – אבל זה נכון רק לאינטרנט אקספלורר 7.

רוצה להאיץ את העניינים באופן רציני? השתמש ב-getElementById במקום סלקטור id

איפה שאפשר – עדיף להשתמש בסלקטור טבעי ל-JavaScript. כך למשל:


$(document.getElementById('my-id'));

יהיה הרבה יותר יעיל ומהיר מ:


$('#my-id');

לא מאמינים? הכנסו לקישור הבא על מנת לבדוק בעצמכם או עיינו בדיאגרמה:

id vs getElementById
id vs getElementById

ההבדל בביצועים יכול להיות דרמטי. אם יש לכם בעית ביצועים, נסו את זה.

בשביל כבוד אתה צריך לשמור על ה-cache

במקום לעשות סלקטורים כפולים כמו למשל:


$(document.getElementById('my-id')).doSomething();
$(document.getElementById('my-id')).doSomethingElse();

אפשר לעשות cache באופן הבא:


$(document.getElementById('my-id')).doSomething().doSomethingElse();

או, אם אתם משתמשים בלולאות, או צריכים את אותו אלמנט במקומות אחרים בסקריפט, להשתמש בזה:


var cache = $(document.getElementById('my-id'));
cache.doSomething();
cache.doSomethingElse();

והנה ה-test case הרלוונטי.

cache מהיר יותר
cache מהיר יותר

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
ג'אווה סקריפט ו-jQuery באתרי אינטרנט סקריפטים

תגובה אחת

  1. משתמש אנונימי (לא מזוהה) הגב נובמבר 3, 2016 בשעה 9:42 am

    תודה רבה למדתי המון

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

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

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד