חדש ב-Chrome 63

פיט לפייג'
פיט לה פייג'
Twitter GitHub Glitch Mastodon דף הבית

ויש עוד עוד המון!

שמי Pete LePage. בואו נראה מה חדש למפתחים ב-Chrome 63.

רוצה לקבל את רשימת השינויים המלאה? כדאי לעיין ברשימת השינויים במאגרי המקור ב-Chromium.

ייבוא של מודולים דינמיים

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

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

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  });
});

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

איטרטורים וגנרטורים אסינכרוניים

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

עכשיו, בזכות async generator functions והפרוטוקול לגרסה האסינכרונית, תהליך הצריכה וההטמעה של מקורות נתונים בסטרימינג מתייעל, ומפשט את השאלה שלי לגבי תכנות.

async function* getChunkSizes(url) {
  const response = await fetch(url);
  const b = response.body;
  for await (const chunk of magic(b)) {
    yield chunk.length;
  }
}

אפשר להשתמש באיטרטורים אסינכרוניים בלולאות for-of, וגם כדי ליצור איטרטורים אסינכרוניים בהתאמה אישית דרך מפעלים של איטרטור אסינכרוני.

התנהגות של גלילת יתר

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

לפני כן, ברענון הדף המלא.

לאחר מכן, צריך לרענן רק את התוכן.

במקרים מסוימים, כדאי לשנות את ההתנהגות הזו ולספק חוויה משלכם. זה מה שאפליקציית Progressive Web App של Twitter עושה זאת: כשמושכים למטה את הדף, במקום לטעון מחדש את כל הדף, היא פשוט מוסיפה ציוצים חדשים לתצוגה הנוכחית.

ב-Chrome 63 יש עכשיו תמיכה במאפיין overscroll-behavior ב-CSS, וכך קל לשנות את התנהגות הגלילה של אפשרויות נוספות בדפדפן המוגדרת כברירת מחדל.

אפשר להשתמש בו כדי:

היתרון הכי חשוב הוא שלoverscroll-behavior אין השפעה שלילית על ביצועי הדף!

שינויים בממשק המשתמש של ההרשאות

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

המערכת מתעלמת מ-90% מכל הבקשות להרשאות, או שהן נחסמות באופן זמני.

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

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

ועוד!

אלה רק כמה מהשינויים שב-Chrome 63 למפתחים, כמובן, ויש עוד הרבה יותר.

  • הפקודה finally זמינה עכשיו במכונות של Promise ומופעלת אחרי מילוי או דחייה של Promise.
  • ה-Device Memory JavaScript API החדש מאפשר לכם להבין את אילוצי הביצועים, באמצעות רמזים לגבי נפח ה-RAM הכולל במכשיר של המשתמש. תוכלו להתאים את חוויית השימוש בזמן הריצה, וכך להפחית את המורכבות במכשירים פחות מתקדמים ולספק למשתמשים חוויה טובה יותר עם פחות תסכולים.
  • באמצעות Intl.PluralRules API אפשר ליצור אפליקציות שמבינות את אופן הרבים של שפה נתונה, על ידי ציון צורת הרבים שמתאימה למספר נתון ולשפה מסוימת. הוא יכול לעזור עם מספרים סידוריים.

הקפידו להירשם כמנויים לערוץ YouTube שלנו, ולקבל התראה באימייל בכל פעם שסרטון חדש יושק.

אני פיט לה פייג', וברגע שגרסת Chrome 64 תושק, אני אהיה כאן כדי לספר לכם מה חדש ב-Chrome!