חדש ב-Chrome 66

Pete LePage

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

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

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

מודל אובייקטים מסוג CSS

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

el.style.opacity = 0.3;
console.log(typeof el.style.opacity);
> 'string' // A string!?

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

function step(timestamp) {
  const currentOpacity = parseFloat(el.style.opacity);
  const newOpacity = currentOpacity + 0.01;
  element.style.opacity = newOpacity;
  if (newOpacity <= 1) {
    window.requestAnimationFrame(step);
  }
}

עם מודל ה-CSS Typed Object החדש, ערכי CSS נחשפים כאובייקטים מסוג JavaScript, וכך מבטלים הרבה מניפולציה של סוגים ומספקים דרך הגיונית יותר לעבוד עם CSS.

במקום להשתמש ב-element.style, אפשר לגשת לסגנונות דרך הנכס .attributeStyleMap או .styleMap. הם מחזירים אובייקט דמוי מפה, שמאפשר לקרוא או לעדכן בקלות.

el.attributeStyleMap.set('opacity', 0.3);
const oType = typeof el.attributeStyleMap.get('opacity').value;
console.log(oType);
> 'number' // Yay!

בהשוואה למודל האובייקטים הישן של CSS, נקודות ההשוואה המוקדמות מראות שיפור של 30% בפעולות לשנייה – דבר שחשוב במיוחד עבור אנימציות JavaScript.

el.attributeStyleMap.set('opacity', 0.3);
el.attributeStyleMap.has('opacity'); // true
el.attributeStyleMap.delete('opacity');
el.attributeStyleMap.clear(); // remove all styles

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

el.style.opacity = 3;
const opacity = el.computedStyleMap().get('opacity').value;
console.log(opacity);
> 1

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

Async Clipboard API

const successful = document.execCommand('copy');

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

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

אפשר להעתיק את הטקסט ללוח בהקשה על writeText().

navigator.clipboard.writeText('Copy me!')
  .then(() => {
    console.log('Text is on the clipboard.');
  });

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

באופן דומה, אפשר לקרוא טקסט מהלוח על ידי קריאה ל-getText() והמתנה לפקודת ההבטחה שהוחזרה עם הטקסט.

navigator.clipboard.getText()
  .then((text) => {
    console.log('Clipboard: ', text);
  });

קראו את הפוסט של ג'ייסון ואת ההדגמות שלו במסביר. הוא גם קיבל דוגמאות שבהן נעשה שימוש בפונקציות async.

הקשר חדש של לוח הציור BitmapRenderer

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

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

const context = el.getContext('2d');
const img = new Image();
img.onload = function () {
  context.drawImage(img, 0, 0);
}
img.src = 'llama.png';

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

כדי להשתמש בה:

  1. התקשר אל createImageBitmap ומסור לו blob תמונה, כדי ליצור את התמונה.
  2. יש לקחת את ההקשר bitmaprenderer מ-canvas.
  3. ומעבירים את התמונה פנימה.
const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

סיימתי, עיבדתי את התמונה!

AudioWorklet

יש לנו Worklets! אפליקציית PaintWorklet נשלחה בגרסה 65 של Chrome, ועכשיו אנחנו מפעילים את AudioWorklet כברירת מחדל ב-Chrome 66. אפשר להשתמש בסוג החדש של Worklet כדי לעבד את האודיו בשרשור האודיו הייעודי, ולהחליף את ה-ScriptProcessorNode מדור קודם, שפעל ב-thread הראשי. כל AudioWorklet פועל בהיקף גלובלי משלו, מקצר את זמן האחזור ומשפר את יציבות התפוקה.

ב-Google Chrome Labs מופיעות כמה דוגמאות מעניינות ל-AudioWorklet.

ופעולות נוספות.

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

  • TextArea ו-Select תומכים עכשיו במאפיין autocomplete.
  • הגדרה של autocapitalize ברכיב form תחול על כל השדות בטופס צאצא, ותשפר את התאימות להטמעת autocapitalize ב-Safari.
  • trimStart() ו-trimEnd() זמינים עכשיו כשיטה מבוססת-תקנים לחיתוך רווחים לבנים ממחרוזות.

מומלץ לקרוא את המאמר חדש ב-Chrome DevTools, בכדי ללמוד מה חדש ב-DevTools ב-Chrome 66. ואם אתם מתעניינים ב-Progressive Web Apps, צפו בסדרת הסרטונים החדשה של PWA Roadshow. לאחר מכן לחצו על הלחצן הרשמה בערוץ ה-YouTube שלנו, ותקבלו התראה באימייל בכל פעם שנשיק סרטון חדש.

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