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

Adriana Jara

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

שמי אדריאנה ג'ארה. בואו נראה מה חדש למפתחים ב-Chrome 122.

ממשק API של קטגוריות אחסון.

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

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

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

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

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

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

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

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

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

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

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

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

האפשרות Async Clipboard API unsanitized

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

כברירת מחדל, כשקוראים סוגי MIME מסוג text/html באמצעות ה-API האסינכרוני, ה-sanitizer מופעל כדי להסיר תוכן מתגי העיצוב של ה-HTML מטעמי אבטחה, והסגנונות מסומנים ב-HTML שנוצר. המצב הזה מוביל למטען ייעודי (payload) גדול של 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>

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

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

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

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

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

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

קריאה נוספת

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

הרשמה

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

יו סויה אדריאנה ג'ארה, ומיד כש-Chrome 123 יושק, אהיה כאן כדי לספר לך מה חדש ב-Chrome!