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

כיצד לטעון ולבצע JavaScript אסינכרוני של סקריפטים ב-HTML5 ואיך תוכלו לבחון את זה באינטרנט אקספלורר 10

צילום: יח"צ, עיבוד תמונה

טעינת קבצי 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

הפוסט פורסם לראשונה ב-Guy Burstein’s Blog

גיא בורשטיין

מומחה טכנולוגיות פיתוח במיקרוסופט ישראל, אחראי על הקשר עם קהילת הפתחים בארץ ובימים אלו מוביל את פעילות פיתוח האפליקציות ל- Windows 8

הגב

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

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 

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

סידור לפי:   חדש | ישן | הכי מדורגים
יותם
Guest

חבל שאקספלורר 10 יהיה זמין רק לחלונות 7 ו8. ולעומת זאת אנשי vista/xp ישארו מאחור ויאלצו לנטוש את הדפדפן הקלוקל של מיקורוספט לטובת דפדפנים טובים בהרבה.

יותם
Guest

שכחתי לציין שפיירפוקס מאז גרסה 3.6 תומך במאפיין.

none
Guest

שכחתם לכתוב בראש הכתבה : “מדור פרסומי”
ניוזגייק, אתם מתחילים להתדרדר.

כמו שיותם כתב, פיירפוקס תומך במאפיין זה מגרסה 3.6 שיצאה ב 21 לינואר 2010
(כאשר גרסאת המפתחים שוחררה כבר בדצמבר 2008).

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

קובי סטוק
Guest

שווה להזכיר גם את defer (בולאני כמו async)
שקיים כבר ב HTML4 שעושה get ומבצע בלוקים של סקריפט רק לאחר
parsing של הדף.
כדאי להוסיף defer לדפים שאנו מעוניינים שיתמכו בHTML4 וב-5
ניתן לקרוא עוד ב – http://www.websiteoptimization.com/speed/tweak/defer
קובי.

נתי טרן
Guest

אתה מיקרוב

עדי
Guest

את רוב הפעולות בטח נרצה לבצע שיש לנו dom ואנחנו יכולים לשנות אותו, אז ברוב ה-js יש המתנה ל-dom ורק אז תחילת פעולה , אז לא תהיה בעיית טעינה בכל מקרה.

לגבי html5 יש את worker , שמבצע פעולות אסינכרוניות ברקע’ וגם נתמך ב-ie
http://www.html5rocks.com/en/tutorials/workers/basics/

תומר
Guest

האפשרות הזאת התווספה לפיירפוקס בגרסה 3.6, עוד בשנת 2009. חבל שניוזגיק הפך למדור הפרסומי של גיא בורשטיין ממיקרוסופט ולא מהווה יותר מקור מידע אוביקטיבי.

גיא בורשטיין
Guest

@תומר, הפכת להיות המעריץ מספר 1 שלי! אתה מי שמגיב לי הכי הרבה על המאמרים! המשך כך!

תומר
Guest

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

ויפה שמיקרוסופט מוכנה לשלם לך כסף על זמן הכתיבה של מאמרים טכניים בעברית.

קרטמן
Guest
תוכל להסביר איך זה בדיוק עוזר? אם אתה טוען קובץ JS ב-HEAD של הדף, ז”א שאתה צריך את מה שיש בסקריפט לפני שה-DOM נטען. ז”א שאתה לא רוצה שהוא יטען בצורה אסיכרונית, כי אתה צריך אותו לפני ה-DOM, ואם אתה לא צריך אותו לפני ה-DOM, שזאת הצורה הנכונה, כי הוא צריך בדרך כלל לדבר עם אוביקטים של ה-DOM, אז אתה מוסיף אותו בסוף העמוד וככה הוא בכל מקרה נטען אחרון, ואם אתה מאחד את כולם לקובץ אחד, ומשתמש בקיבוץ של השרת, זה גם מאוד מהיר, למה שהדפדפן ישתמש במשאבים כדי לעשות משהו שהשרת אמור לעשות?ובמקרה שאתה צריך באמת טעינה אסיכרונית… Read more »
wpDiscuz

תגיות לכתבה: