Html5-boilerplate: أضف "مسافة بيضاء: nowrap" إلى .visuallyhidden لتصيير أسرع

تم إنشاؤها على ٦ يوليو ٢٠١٦ · 5تعليقات · مصدر: h5bp/html5-boilerplate

قبل:

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

بعد، بعدما:

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: no-wrap;
    width: 1px;
}

Codepen: https://codepen.io/tomasz86/pen/pbwQqV
Codepen (تصحيح الأخطاء): https://s.codepen.io/tomasz86/debug/pbwQqV

تؤدي إضافة white-space: no-wrap إلى إحداث فرق إيجابي كبير في سرعة العرض.

لقد اختبرت الكود في IE11 ، أحدث إصدارات Firefox و Chrome ، وكذلك Opera 12 القديم (المتصفح الوحيد الذي يحتوي على ملف تعريف CSS مناسب). يعمل الرمز بشكل أسرع في كل منهم. هناك فرق ملحوظ في كل من IE11 و Firefox. يُظهر Opera 12 فرقًا يبلغ 400 مللي ثانية بين الاثنين. يتوقف Chrome بالفعل عند محاولة عرض الإصدار بدون white-space على جهاز الكمبيوتر الخاص بي الذي يعمل بنظام Windows 7 ولكنه يعرض الآخر بسرعة كبيرة.

help wanted

مصدر

tomasz1986

❤2

ال 5 كومينتر

هذه نظرة ممتعة للغاية على الفصل المخفي بصريًا ، شكرًا لك توماس.

نظرت أيضًا إلى قلم جيمس كورد في مقطع مستقيم يتم إهماله و
الاستبدال المحتمل بمسار القصاصة: داخلي (0 1 بكسل 1 بكسل 0)
https://codepen.io/aminimalanimal/pen/wMedpo

نتائج الاختبار الخاصة بي (تم اختبارها في Chrome فقط)

اختبار

استدعاء

المجموع:

خط الأساس مع مقطع مستقيم

3912 مللي ثانية

2521 م AVG 3027

2649 مللي ثانية

4.85 ثانية

3.33 ثانية AVG 3.87

3.44 ثانية

أضف مسافة بيضاء: nowrap

2590 مللي ثانية

2207 مللي ثانية AVG 2450

2554 مللي ثانية

3.79 ثانية

2.98sec AVG 3.35

3.29 ثانية

أضف مسافة بيضاء ، قم بإزالة المقطع المستقيم

2820 مللي ثانية

2424 مللي ثانية AVG 2520

2317 مللي ثانية

4.32 ثانية

3.65 ثانية AVG 3.83.1

3.53

إضافة مسافة بيضاء ، وإزالة مقطع مستطيل ، وإضافة مسار مقطع

* تحتاج إلى بادئة البائع!

2820 مللي ثانية

1845ms _AVG 2241_

2057 مللي ثانية

4.32 ثانية

3.20 ثانية _AVG 3.63_

3.37 ثانية

ملخص: كان هناك نطاق كبير جدًا ضمن الاختبارات الفردية. ال
بدا الاختبار الرابع الأفضل في Chrome ، لكن التوفير في الإنتاج "الحقيقي"
الصفحة التي تحتوي على عنصرين مخفيين فقط قد لا تساوي تكلفة
تغيير فئة css.

* (لقد وجدت أن مسار المقطع يحتاج إلى إضافة بادئة من البائع!)

- سكوت ديفيس--

في يوم الأربعاء ، 6 يوليو ، 2016 الساعة 4:20 صباحًا ، كتب Tomasz W. [email protected] :

قبل:
.visuallyhidden {
الحدود: 0؛
مقطع: مستطيل (0 0 0 0) ؛
الارتفاع: 1 بكسل ؛
الهامش: -1 بكسل ؛
إخفاء الفائض؛
حشوة: 0 ؛
الموقف: مطلق.
العرض: 1 بكسل ؛
}
بعد، بعدما:
.visuallyhidden {
الحدود: 0؛
مقطع: مستطيل (0 0 0 0) ؛
الارتفاع: 1 بكسل ؛
الهامش: -1 بكسل ؛
إخفاء الفائض؛
حشوة: 0 ؛
الموقف: مطلق.
مساحة بيضاء: لا التفاف ؛
العرض: 1 بكسل ؛
}
Codepen: https://codepen.io/tomasz86/pen/pbwQqV
Codepen (تصحيح الأخطاء): https://s.codepen.io/tomasz86/debug/pbwQqV
إضافة مسافة بيضاء: يحدث عدم الالتفاف فرقًا إيجابيًا كبيرًا في العرض
سرعة.
لقد اختبرت الكود في IE11 ، أحدث إصدارات Firefox و Chrome ،
وكذلك Opera 12 القديم (المتصفح الوحيد الذي يحتوي على ملف تعريف CSS مناسب).
يعمل الرمز بشكل أسرع في كل منهم. هناك فرق ملحوظ على حد سواء
في IE11 و Firefox. يُظهر Opera 12 فرقًا يبلغ 400 مللي ثانية بين الاثنين.
يتوقف Chrome بالفعل عند محاولة عرض الإصدار بدون
white-space على جهاز الكمبيوتر الخاص بي الذي يعمل بنظام Windows 7 ولكنه يعرض الآخر بسرعة كبيرة.
-
أنت تتلقى هذا لأنك مشترك في هذا الموضوع.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/h5bp/html5-boilerplate/issues/1874 ، أو كتم صوت
مسلك
https://github.com/notifications/unsubscribe/ACKY8sYNxXJ6f9HLoTgQIKGkVDcHcnzDks5qS3NOgaJpZM4JF5XK
.

avprod1 في ٦ يوليو ٢٠١٦

👍1

شكرا لإجراء اختبارات إضافية :)

لم أفكر في clip-path على الإطلاق بسبب توافق المتصفح الرائع clip (حتى 4 IE!). قد يتم إهماله ولكنه يعمل بشكل لا تشوبه شائبة في جميع المتصفحات وهذا ليس شيئًا شائعًا.

بالعودة إلى النقطة المهمة - في اختباراتي المحلية في Opera 12 ، يكون الفرق دائمًا حوالي 400 مللي ثانية. لقد اكتشفت ذلك عن طريق الصدفة عند اختبار مثال أكثر واقعية مع إضافة 400 عنصر زائف بهذه الطريقة. يعتبر عرض العناصر الزائفة نفسها بطيئًا بشكل عام ، لذا كنت أتساءل عما إذا كان يمكن فعل شيء حيال ذلك ، وفوجئت بسرور لأن إضافة white-space: nowrap قللت من وقت العرض بمقدار 40 مللي ثانية. قد لا يبدو هذا فرقًا كبيرًا ولكن يمكن ملاحظته بسهولة عندما يتم عرض الموقع بالكامل في 360 مللي ثانية (و 320 مللي ثانية مع white-space ).

من المحتمل أن يكون الاختلاف ضئيلًا في معظم الحالات عندما تكون هناك عناصر قليلة فقط ، ومع ذلك سيساعد الأشخاص مثلي في الحصول على المئات منها. كما أنني لا أعتقد أن هناك أي عيوب أو مخاطر عند إضافة white-space: nowrap . إذا كان من الممكن تحسين الأداء بهذه الطريقة دون أي تكاليف إضافية ، فلماذا لا تفعل ذلك؟

أعتقد أنه يجب إجراء المزيد من الاختبارات ، في كل من المتصفحات وأنظمة التشغيل المختلفة.

tomasz1986 في ٧ يوليو ٢٠١٦

👍1

أنا أؤيد هذا التغيير. تريد أن تفعل العلاقات العامة؟