Lighthouse DOM Treemap - كيفية تقليل حجم DOM
في السنوات القليلة الماضية ، أصدرت Google العديد من التحذيرات بشأن الحجم الزائد لتطبيق الويب الخاص بك. يأتي هذا بتكلفة عالية جدًا للمستخدم: عرض بطيء وأداء ضعيف للمتصفح وتجربة المستخدم. p>
من أجل تحسين أداء تطبيقك ، أدخلت Lighthouse خيار تقليل حجم DOM. بالنسبة للعديد من الشركات ، تم تنفيذ هذا الإجراء من أجل تقليل استهلاك الذاكرة ونتيجة لذلك ، حجم المستند الإجمالي. لسوء الحظ ، قد يؤدي التحسن الطفيف جدًا في استهلاك الذاكرة ، على الأقل في Chrome ، إلى إعادة مشكلة الأداء هذه. p>
لمساعدتك في ذلك ، في Chrome strong > لدينا الآن ميزة جديدة لمساعدتك في تحديد الأماكن الثقيلة حقًا في شجرة DOM: DOM Treemap.
إن Treemap هو امتداد لـ Chrome Developer Tools ، حيث يمكنك إضافة علامة تبويب إضافية لتصور شجرة DOM.
يمكنك مشاهدة موقع جميع عُقد DOM في صفحتك الحالية. للعثور على العناصر التي لديها أكبر عدد من الأطفال ، ما عليك سوى النقر فوق الزر "الأطفال" في الزاوية اليمنى السفلية من شريط الأدوات. p>
تم توسيع الأداة أيضًا بميزة تصور BEM affiniciados. هذا يسمح لك بمعرفة مدى كثافة العقدة في متوسط مكون BEM الخاص بك. p>
