HTML5: טעינה וביצוע של JavaScript באופן אסינכרוני

14 ביולי 2011

no comments

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

פיתרון נפוץ – סקריפט בסוף הדף

פיתרון נפוץ, הוא לשים את תגי ה- script בסוף עמוד ה- HTML, ממש לפני התגית <body/>. אמנם זה לא יפתור את העובדה שהדפדפן יקדיש זמן לטעינה וביצוע של הסקריפט, אבל לפחות תוכן הדף כבר נטען והמשתמש יכול לקרוא אותו. אבל – אם באתר שלי תוכן רב (למשל בבלוג) והסקריפט יבוצע רק בסוף טעינת כל התוכן, הרי שגם במקרה הזה נפגעת חווית המשתמש.

טעינה וביצוע אסינכרוני של סקריפטיםב- HTML5

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

כדי לבצע את הסקריפט באופן אסינכרוני, נוודא שהוא מוגדר בקובץ נפרד, נמקם את הקריאה אליו בראשית הקובץ, ונשתמש במאפיין async:

<head>
  <title>My Blog</title>
  <script async src="widgets.js"></script
>
</
head
>

נסו בעצמכם עם אינטרנט אקספלורר 10

החל מגירסת המפתחים השניה של אינטרנט אקספלורר 10 (Platform Preview 2), ישנה תמיכה בהרצת סקריפטים באופן אסינכרוני לשיפור ביצועים. את ה- Platform Preview ניתן להתקין במקביל לגירסת האקספלורר שמותקנת לכם על המחשב ללא חשש מהתנגשויות.

באתר IE Test Drive, שהוא אתר ההדגמות וההתנסות בתכונות החדשות של אינטרנט אקספלורר, תמצאו את הדמו HTML5 Async Scripts בו תוכלו לחוש את ההבדל בעצמכם. בהדגמה תמצאו שני iframe, שאחד טוען את הלוגו של אקספלורר באופן סינכרוני והשני באופן אסינכרוני, ולכן מסיים את ביצועו קודם.

image

תהנו!

Add comment
facebook linkedin twitter email