חדש ב-Chrome 63

Pete LePage

ויש עוד הרבה!

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

רוצים לראות את רשימת השינויים המלאה? רשימת השינויים במאגר המקור של Chromium

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

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

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

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

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

מחולל וסורק אסינכרוני

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

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

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, וגם כדי ליצור מערכי עיבוד נתונים אסינכרונים מותאמים אישית באמצעות מפעלים של מערכי עיבוד נתונים אסינכרונים.

התנהגות גלילה מעבר לקצה

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

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

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

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

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

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

החלק הכי טוב הוא של-overscroll-behavior אין השפעה שלילית על ביצועי הדף.

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

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

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

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

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

ועוד.

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

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

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

קוראים לי פיט לייפ (Pete LePage), ואחרי שגרסת Chrome 64 תפורסם, אספר לכם מה חדש ב-Chrome.