वास्तविक उपलब्ध कंप्यूटिंग पावर ब्राउज़र का पता लगाएं जावास्क्रिप्ट

Question

मैं कई छवियों और एनिमेशन के साथ एक विशाल वेबसाइट विकसित कर रहा हूं। मेरी समस्या यह है कि एनिमेशन और छवियां ब्राउज़र की कई उपलब्ध कंप्यूटिंग शक्ति लेती हैं और कभी-कभी, यह संतृप्त हो सकती है और केवल क्रैश हो सकती है।

तो, मैं यह जानने के लिए ब्राउज़र की वास्तविक उपलब्ध कंप्यूटिंग शक्ति का परीक्षण करना चाहता हूं ताकि मैं एनिमेशन या छवियों को लोड कर सकूं।

वेब में, मुझे Document.readyState विधि मिलती है लेकिन यह केवल मुझे एक जानकारी देता है: जब पृष्ठ लोड होता है और यदि बाहरी संसाधन पूरी तरह से लोड होते हैं। हालांकि, ब्राउज़र एनीमेशन को चित्रित कर सकता है या कुछ अन्य बाहरी संसाधनों को लोड कर सकता है ...

मैं सिर्फ यह जानना चाहता हूं कि ब्राउज़र व्यस्त है या नहीं और यदि मैं इसे और अधिक नौकरियां दे सकता हूं (जैसे लोड की गई छवियां या प्रदर्शन एनिमेशन)। क्यों प्रोग्राम के रूप में नहीं

:

गूगल क्रोम में, हम सांत्वना के साथ ऐसा कर सकते हैं?

नोट, मुझे this स्टैक ओवरफ़्लो में उत्तर मिला। मेरी पोस्ट एक डुप्लिकेट नहीं है क्योंकि मैं अपनी छवि लोड करने और अपने एनिमेशन को प्रदर्शित करने का सबसे अच्छा क्षण ढूंढना चाहता हूं, मैं अपने कोड में कई बार इस परीक्षण का उपयोग नहीं कर सकता।

किसी भी मदद की सराहना की जाती है। मुझे बताओ कि क्या आपके कुछ प्रश्न या टिप्पणियां हैं।

Answer 1

बेशक, मुझे पता है कि प्रदर्शन में सुधार का सबसे अच्छा तरीका है। प्रदर्शन में सुधार करने के लिए बहुत सारे तरीके हैं और बहुत सारे प्रयासों की आवश्यकता है। आदर्श पथ मैं यहाँ सूची: नेटवर्क के लिए

1.reduce लागत (सेक \ concat \ cdn ...)

cpu \ स्मृति (सीएसएस-परिणत-GPU के लिए

2.reduce लागत \ को कम-Dom- पेड़ \ वर्चुअल-डोम \ छाया-डोम ...)

3. [सबसे महत्वपूर्ण] सब कुछ नियंत्रण में रखें, और वादे में चेन करें। छवि \ css \ js, आप onload का उपयोग अगले ट्रिगर करने के लिए कर सकते हैं; एनीमेशन आप एपीआई (https://css-tricks.com/controlling-css-animations-transitions-javascript/) के माध्यम से जेएस नियंत्रण का उपयोग कर सकते हैं, या move.js जैसे कुछ का उपयोग कर सकते हैं। यह एक वेब गेम की तरह आगे बढ़ रहा है, आपको शायद लोडिंग दृश्य की भी आवश्यकता है।

4.फिर क्या आप जानते हैं यह निष्क्रिय या

--- वर्ष जवाब नहीं ---

मैं इस विचार पर आधारित एक NPM पैकेज बनाया है, https://github.com/postor/cpu-stat-browser

--- वर्ष जवाब है - -

मैं सीपीयू उपयोग का पता लगाने के लिए सेटटाइमआउट का उपयोग करता हूं, लॉग छोटे, सीपीयू बसियर, यह बाहरी पृष्ठ/ब्राउज़र के उपयोग में गिना जाएगा, आप अपना काम शुरू कर सकते हैं और लॉग इन करने की संख्या काफी बड़ी है।

let k = 0 
 
let profilling = true 
 
let interval = null 
 
let period = 1000 
 

 
console.log = (x) => { 
 
    document.write(x + '<br>') 
 
    window.scrollTo(0, document.body.scrollHeight); 
 
} 
 

 
start() 
 

 
interval = setInterval(() => { 
 
    console.log(k) 
 
    k = 0 
 
}, period) 
 

 
async function start() { 
 

 
    while (profilling) { 
 
    await step() 
 
    } 
 
} 
 

 
function stop() { 
 
    clearInterval(interval) 
 
    profilling = false 
 
} 
 

 
async function step() { 
 
    return new Promise((resolve, reject) => { 
 
    setTimeout(() => { 
 
     k++ 
 
     resolve() 
 
    }) 
 
    }) 
 
}

रन का टुकड़ा अपने CPU स्टेट के लिए, आप कुछ महंगा चलाने के लिए और देखते हैं कि कैसे लॉग प्रतिक्रिया करता है

Answer 2

जाँच हो रही है CPU उपयोग उपयोगी यदि आप अनुकूलन करने के लिए कोशिश कर रहे हैं नहीं हो सकता है सकते हैं, जबकि एनिमेशन। आपको सीपीयू पर ग्राफिक्स प्रतिपादन से बचना चाहिए। आधुनिक ब्राउज़र GPU के साथ बहुत कुछ कर सकते हैं, और आदर्श रूप से वह है जहां आपके एनिमेशन चल रहे होंगे।

यहां कुछ ऐसी चीजें हैं जिन्हें आप आजमा सकते हैं। वे मेरे लिए काम करते हैं।

अनुकूलन आपके एनिमेशन

आप सही गुण एनिमेट रहे हैं, तो आप GPU का लाभ उठा सकें। मेरा मानना ​​है कि जीपीयू त्वरित सीएसएस गुण transform, opacity, और filter (source) हैं। यदि आप अन्य गुणों को एनिमेट कर रहे हैं (उदा। margin, left, width), तो आप शायद अधिक जंक और क्रैश देखेंगे। यह विशेष रूप से सापेक्ष स्थित तत्वों के बारे में सच है, क्योंकि यह एक रिफ्लो का कारण बनता है।

मनोहर पतन

मैं अच्छी सफलता एफपीएस विधि से लिंक का उपयोग कर लिया है। requestAnimationFrame वही करता है जो आपको चाहिए। यह आपको बताता है कि ब्राउज़र एक और फ्रेम प्रस्तुत करने के लिए तैयार है। यह आप पर निर्भर है कि उस जानकारी के साथ क्या करना है।

मैं उपयोगकर्ता को प्रदर्शित करने के लिए किस प्रकार की एनीमेशन और प्रभाव प्रदर्शित करने के लिए requestAnimationFrame कॉलबैक के अंदर फ्रेम दर की जांच करता हूं। मेरा दृष्टिकोण पिछले प्रस्तुत समय की एक सरणी रखना है, फिर कभी-कभी निर्णय लेने के लिए उन्हें औसत करें।

यदि आपको लगता है कि आपके अधिकांश उपयोगकर्ता एनीमेशन चलाने में सक्षम होंगे, तो उच्च गुणवत्ता वाले संस्करण से शुरू करें और यदि आप धीमी रेंडर समय का पता लगाते हैं तो इसे घटाएं। इसके विपरीत, यदि अधिकतर उपयोगकर्ता आपके फैंसी ग्राफिक्स को प्रस्तुत नहीं कर पाएंगे, तो यदि आप अच्छे रेंडर समय का पता लगाते हैं तो अपग्रेड करें।

WebGL

WebGL के रूप में तेजी से के रूप में यह ब्राउज़र ग्राफिक्स के लिए जाता है। यदि आपके पास कुछ पूर्ण-विंडो एनिमेशन हैं, तो उन्हें वेबजीएल पर पोर्ट करने पर विचार करें। आम तौर पर वेबग्लो छोटे घटकों को प्रस्तुत करने में बहुत मदद नहीं करेगा क्योंकि आप जल्दी से अधिकतम संदर्भों (16?) की संख्या को हिट करते हैं।