Html5-boilerplate: तेज़ रेंडरिंग के लिए `व्हाइट-स्पेस: अब्रैप` को .visuallyhidden में जोड़ें

को निर्मित 6 जुल॰ 2016 · 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;
}

कोडपेन: https://codepen.io/tomasz86/pen/pbwQqV
कोडपेन (डीबग): https://s.codepen.io/tomasz86/debug/pbwQqV

white-space: no-wrap जोड़ने से प्रतिपादन गति में बहुत बड़ा सकारात्मक अंतर आता है।

मैंने IE11 में कोड का परीक्षण किया है, फ़ायरफ़ॉक्स और क्रोम के नवीनतम संस्करण, और पुराने ओपेरा 12 (एक उचित सीएसएस प्रोफाइलर वाला एकमात्र ब्राउज़र)। उन सभी में कोड तेजी से चलता है। IE11 और Firefox दोनों में ध्यान देने योग्य अंतर है। ओपेरा 12 दोनों के बीच 400ms का अंतर दिखाता है। मेरे विंडोज 7 पीसी पर white-space बिना संस्करण को प्रस्तुत करने का प्रयास करते समय क्रोम वास्तव में लटकता है लेकिन दूसरे को बहुत जल्दी प्रस्तुत करता है।

help wanted

स्रोत

tomasz1986

❤2

सभी 5 टिप्पणियाँ

यह नेत्रहीन वर्ग पर एक बहुत ही दिलचस्प नज़र है, धन्यवाद, टॉमस।

मैंने क्लिप रेक्ट को हटाये जाने पर जेम्स कर्ड की कलम को भी देखा और
संभवतः क्लिप-पथ के साथ प्रतिस्थापित करना: इनसेट(0 1px 1px 0)
https://codepen.io/aminimalanimal/pen/wMedpo

मेरे परीक्षण के परिणाम (केवल क्रोम में परीक्षण किए गए)

परीक्षण

प्रतिपादन

कुल:

क्लिप रेक्ट के साथ बेसलाइन

3912ms

2521मी औसत 3027

२६४९ms

4.85सेकंड

3.33 सेकेंड औसत 3.87

3.44सेकंड

व्हाइट- स्पेस जोड़ें

२५९०ms

२२०७ms औसत २४५०

2554ms

3.79सेकंड

2.98 सेकेंड औसत 3.35

3.29सेकंड

व्हाइट-स्पेस जोड़ें, क्लिप रेक्ट हटाएं

2820ms

2424ms औसत 2520

२३१७ms

4.32सेकंड

3.65सेकंड औसत 3.83

3.53

व्हाइट-स्पेस जोड़ें, क्लिप रेक्ट हटाएं, क्लिप-पथ जोड़ें

*विक्रेता उपसर्ग की आवश्यकता है!

2820ms

१८४५ms _एवीजी २२४१_

2057ms

4.32सेकंड

3.20 सेकेंड _एवीजी 3.63_

3.37सेकंड

सारांश: व्यक्तिगत परीक्षणों के भीतर काफी बड़ी रेंज थी। NS
चौथा परीक्षण क्रोम में सबसे अच्छा लग रहा था, लेकिन "वास्तविक" उत्पादन के लिए बचत
जिस पृष्ठ में केवल कुछ छिपे हुए तत्व हैं, वह इसकी कीमत के लायक नहीं हो सकता है
सीएसएस वर्ग बदल रहा है।

*(मैंने पाया कि क्लिप-पथ को विक्रेता उपसर्ग की आवश्यकता है!)

--स्कॉट डेविस--

बुध, 6 जुलाई, 2016 को सुबह 4:20 बजे, टॉमस डब्ल्यू. नोटिफिकेशन @github.com ने लिखा:

पहले:
.दृष्टि से छिपा हुआ {
सीमा: 0;
क्लिप: रेक्ट (0 0 0 0);
ऊंचाई: 1 पीएक्स;
मार्जिन: -1 पीएक्स;
ओवर फलो हिडेन;
पैडिंग: 0;
स्थिति: निरपेक्ष;
चौड़ाई: 1px;
}
बाद में:
.दृष्टि से छिपा हुआ {
सीमा: 0;
क्लिप: रेक्ट (0 0 0 0);
ऊंचाई: 1 पीएक्स;
मार्जिन: -1 पीएक्स;
ओवर फलो हिडेन;
पैडिंग: 0;
स्थिति: निरपेक्ष;
व्हाइट-स्पेस: नो-रैप;
चौड़ाई: 1px;
}
कोडपेन: https://codepen.io/tomasz86/pen/pbwQqV
कोडपेन (डीबग): https://s.codepen.io/tomasz86/debug/pbwQqV
व्हाइट-स्पेस जोड़ना: नो-रैप रेंडरिंग में बहुत बड़ा सकारात्मक अंतर लाता है
गति।
मैंने IE11 में कोड का परीक्षण किया है, फ़ायरफ़ॉक्स और क्रोम के नवीनतम संस्करण,
और पुराना ओपेरा 12 (एक उचित सीएसएस प्रोफाइलर वाला एकमात्र ब्राउज़र)।
उन सभी में कोड तेजी से चलता है। दोनों में एक उल्लेखनीय अंतर है
IE11 और फ़ायरफ़ॉक्स में। ओपेरा 12 दोनों के बीच 400ms का अंतर दिखाता है।
बिना संस्करण को रेंडर करने का प्रयास करते समय क्रोम वास्तव में हैंग हो जाता है
मेरे विंडोज 7 पीसी पर व्हाइट-स्पेस लेकिन दूसरे को बहुत जल्दी रेंडर करता है।
-
आप इसे प्राप्त कर रहे हैं क्योंकि आपने इस थ्रेड की सदस्यता ली है।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें
https://github.com/h5bp/html5-boilerplate/issues/1874 , या म्यूट करें
धागा
https://github.com/notifications/unsubscribe/ACKY8sYNxXJ6f9HLoTgQIKGkVDcHcnzDks5qS3NOgaJpZM4JF5XK
.

avprod1 6 जुल॰ 2016

👍1

अतिरिक्त परीक्षण करने के लिए धन्यवाद :)

मैंने केवल clip की महान ब्राउज़र संगतता (आईई 4 तक!) के कारण clip-path पर विचार नहीं किया है। इसे पदावनत किया जा सकता है लेकिन सभी ब्राउज़रों में त्रुटिपूर्ण रूप से काम करता है जो एक सामान्य बात नहीं है।

बिंदु पर वापस - ओपेरा 12 में मेरे स्थानीय परीक्षणों में अंतर हमेशा 400 एमएस के आसपास होता है। 400 छद्म तत्वों के साथ एक और वास्तविक जीवन उदाहरण का परीक्षण करते समय मुझे वास्तव में दुर्घटना से यह पता चला है। छद्म तत्वों का प्रतिपादन स्वयं सामान्य रूप से धीमा है इसलिए मैं सोच रहा था कि क्या इसके बारे में कुछ किया जा सकता है, और सुखद आश्चर्य हुआ कि केवल white-space: nowrap जोड़ने से प्रतिपादन समय 40 एमएस तक कम हो गया। यह एक बड़े अंतर की तरह नहीं लग सकता है, लेकिन आसानी से ध्यान देने योग्य है जब पूरी साइट 360 एमएस (और 320 एमएस के साथ white-space ) में रेंडर करती है।

अंतर शायद ज्यादातर मामलों में महत्वहीन होगा जब केवल कुछ तत्व मौजूद हों, फिर भी मेरे जैसे सैकड़ों लोगों की मदद करेंगे। मैं यह भी नहीं सोचता कि white-space: nowrap जोड़ने से कोई नुकसान या जोखिम हैं। यदि बिना किसी अतिरिक्त लागत के प्रदर्शन में सुधार किया जा सकता है, तो ऐसा क्यों न करें?

मुझे लगता है कि अलग-अलग ब्राउज़रों और ऑपरेटिंग सिस्टम दोनों में अधिक परीक्षण किए जाने चाहिए।

tomasz1986 7 जुल॰ 2016

👍1

मैं इस बदलाव का समर्थन करता हूं। पीआर करना चाहते हैं?