מיקרוסופט מוסיפה את הכרטיסייה 'שכבות מורכבות' בכלי תצוגת 3D

מיקרוסופט מפתיעה מפתחי אינטרנט עם תכונה חדשה שהוזרקה לתוכו כלי תצוגת 3D, שהוא חלק מכלי הפיתוח (Dev Tools). הוכרזה ביום שלישי, התכונה הנקראת לשונית Composited Layers תצטרף לכלים אחרים של כלי 3D View המשמשים לטיפול בבעיות רגילות בפיתוח אתרים, כמו פסי גלילה מיותרים, בעיות ערימה של Z-Index ומורכבות DOM.

התכונה Composited Layers נועדה לחלק את דף האינטרנט למספר הנכון של שכבות. אדג מיקרוסופט מנהל מוצר בכיר פטריק ברוסט אומר שזה יהיה שימושי כאשר הרכיבים מונפשים או משתנים ללא תלות בשאר. ניתן לזכור של- Microsoft Edge DevTools היה בעבר כלי שכבות נפרד המציע את אותה פונקציונליות. עם זאת, החברה החליטה להסיר עבורה את הפאנל, וכתוצאה מכך התמזגה עם הכלי 3D View.

בפוסט בבלוג המודיע על הגעתו של הפיצ'ר החדש, Brosset מפרט גם כמה חשובות השכבות וכיצד הן בעצם מתרחשות באינטרנט על ידי דיון בפעילות של מנועי עיבוד דפדפן ברמה גבוהה. לדבריו, מנוע דפדפן עוקב אחר שורה של שלבים כדי להתקדם מ-HTML ו-CSS לפיקסלים על מסך. נהלים אלו כוללים ניתוח קוד ה-HTML ויצירת עץ ה-DOM, ניתוח קוד CSS ורכישת מידע על סגנון ופריסה, הפקת מבנה עץ חדש וצביעת העמוד למסך.

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

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

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