חדש בגרסה 122 של Chrome

Adriana Jara

דברים שעליך לדעת:

קוראים לי Adriana Jara. נצלול פנימה ונראה מה חדש למפתחים ב-Chrome 122.

Storage Buckets API.

Storage Buckets API מספק רמת פירוט גבוהה יותר לניהול יעיל יותר של אחסון קבוע.

באופן מסורתי, כשהמשתמשים מתחילים להתרוקן ממקום אחסון במכשיר, הנתונים שנשמרים בממשקי API כמו IndexedDB או localStorage הולכים לאיבוד בלי שהמשתמשים יכולים למנוע זאת. אחת מהדרכים להפוך את האחסון לעקבי היא להשתמש בשיטה persist() של ממשק StorageManager. עם זאת, השיטה הזו לבקש שהאחסון יהיה מתמיד היא 'הכול או כלום'.

הרעיון המרכזי של Storage Buckets API הוא לתת לאתרים את היכולת ליצור כמה קטגוריות אחסון, שבהן הדפדפן יכול למחוק כל קטגוריה בנפרד מקטגוריות אחרות. כך תוכלו לציין את תעדוף ההוצאה כדי לוודא שהנתונים החשובים ביותר לא יימחקו.כל קטגוריה של אחסון יכולה להכיל נתונים שמשויכים לממשקי API לאחסון קיימים, כמו IndexedDB ו-CacheStorage.

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

שיפורים ב-DevTools בחלונית הביצועים

בגרסה 122 של Chrome, כלי הפיתוח כוללים את השיפורים הבאים בחלונית ביצועים.

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

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

  • אימות לא תקין של סגנון או פריסה –> חישוב מחדש של סגנונות או פריסה
  • בקשה לפריים אנימציה -> הופעל פריים אנימציה
  • Request Idle Callback -> Fire Idle Callback
  • התקנת טיימר -> הופעל הטיימר
  • יצירת WebSocket -> שליחת… וקבלת לחיצת יד של WebSocket או כיבוי סופי של WebSocket

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

חץ מהבקשה והפעלה של קריאה חוזרת (callback) ללא פעילות.

עדכונים נוספים לגבי כלי הפיתוח זמינים במאמר מה חדש בגרסה 122 של כלי הפיתוח.

האפשרות unsanitized ב-Async Clipboard API

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

כברירת מחדל, כשקוראים סוגי MIME מסוג text/html באמצעות ה-API האסינכרוני, הכלי לניקוי קוד מופעל כדי להסיר תוכן מסימני ה-HTML בגלל חששות אבטחה, והסגנונות מוטמעים בקוד ה-HTML שנוצר. כתוצאה מכך, עומס הנתונים של HTML גדול והאיכות של תוכן ה-HTML נפגעת כשמפתחי אתרים או אפליקציות לנייד קוראים אותו.

ההבדל בפלט מוצג בדוגמה הבאה.

קלט:

<style>p { color: blue; }</style><p>Hello, World!</p>'

סניטיזציה (ברירת מחדל):

<p style='color: blue; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;'>Hello, World!</p>

עם האפשרות unsanitized:

<html><head><style>p { color: blue; }</style></head><body><p>Hello, World!</p></body></html>

במאמר ביטול החסימה של הגישה ללוח העריכה מוסבר על העקרונות הבסיסיים של Clipboard API.

ועוד.

כמובן שיש עוד הרבה.

  • ב-CSS, שאילתות קונטיינר עם תכונות שלא נתמכות אף פעם לא תואמות. לדוגמה, השאילתה הבאה לעולם לא תתאים בגלל המאפיין הלא ידוע:
@container (width > 0px) or (unknown) {}

  • dataTransfer.clearData() לא משפיעה על אובייקטים מסוג File, אלא רק על אובייקטים מסוג טקסט.

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

קריאה נוספת

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

להרשמה

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

קוראים לי Adriana Jara, ואחרי שגרסת Chrome 123 תפורסם, אספר לכם מה חדש ב-Chrome!