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

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 בחלונית הביצועים

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

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

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

  • אימות לא תקין של סגנון או פריסה –> חישוב מחדש של סגנונות או פריסה
  • בקשה לפריים אנימציה -> הופעל פריים אנימציה
  • Request Idle Callback (שליחת קריאה חוזרת (callback) ללא פעילות -> Fire Idle Callback
  • התקנת טיימר -> הופעל הטיימר
  • יצירת WebSocket -> שליחה... וקבלת WebSocket Handshake או Destroy WebSocket

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

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

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

האפשרות unsanitized של ה-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 ביטים.

קריאה נוספת

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

להרשמה

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

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