क्रोम में यादृच्छिक उच्च सामग्री डाउनलोड समय?

Question

हमारे पास एक एपीआई है जो क्रोम में यादृच्छिक रूप से उच्च content download समय लेती है, यह हमेशा फ़ायरफ़ॉक्स में ठीक काम करती है और केवल कुछ ms लेती है। प्रतिक्रिया आकार 20kb असम्पीडित और 4kb संपीड़ित है। वही अनुरोध कर्ल का उपयोग करके ठीक काम करता है।

चीज़ें है कि हम कोशिश की है:

1. If-None-Match हैडर को अक्षम करने से ब्राउज़र से कैश प्रतिक्रिया निष्क्रिय करने के लिए।
2. विभिन्न संपीड़न (gzip, deflate, br) का प्रयास कर रहा है।
3. संपीड़न को अक्षम करना।
4. सभी क्रोम एक्सटेंशन अक्षम करना।

वही अनुरोध कभी-कभी क्रोम पर ठीक काम करता है लेकिन यादृच्छिक रूप से बहुत अधिक सामग्री डाउनलोड समय देता है।

हम इस मुद्दे के मूल कारण को समझने में असमर्थ हैं। इस समय को कम करने के लिए हम अन्य चीजें क्या कर सकते हैं?

मैं यहाँ तीन अनुरोध किया और 3 एक (पिछले कील से पहले) सबसे अधिक समय ले लिया। सीपीयू लंबे समय तक अधिकतम नहीं लग रहा है। अधिकांश समय निष्क्रिय समय है।

इसके अलावा, कॉल Replay XHR मेनू का उपयोग कर पुनः हैं, तो सामग्री डाउनलोड अवधि 200 एमएस करने के लिए 2s से चला जाता है।

Answer 1

क्या आप अनंत स्क्रॉलिंग को लागू करने का प्रयास कर रहे हैं?यदि आप हैं, माउस व्हील का उपयोग करने के बजाय स्क्रॉल बार खींचने का प्रयास करें। किसी कारण से, क्रोम माउस स्क्रॉल घटनाओं के साथ संघर्ष करना प्रतीत होता है। यदि स्क्रॉल बार ठीक काम करता है, तो पढ़ना जारी रखें।

इस पोस्ट में कुछ इसी तरह का अनुभव किसी के बारे में विस्तृत जानकारी प्रदान करता है - https://github.com/TryGhost/Ghost/issues/7934

मैं scroll घटना है जो एक AJAX अनुरोध को ट्रिगर करेगा पर एक द्रष्टा संलग्न था। मैंने अनुरोध को थका दिया था और देख सकता था कि केवल 1 भेजा जा रहा था। मैंने देखा कि मेरा देव सर्वर कुछ एमएस के भीतर प्रतिक्रिया वापस कर देता है लेकिन क्रोम में 2 सेकंड की देरी होगी। कोई रेंडर नहीं, कोई एपीआई कॉल नहीं, कोई और स्क्रिप्ट निष्पादित नहीं है। लेकिन "सामग्री डाउनलोड" में 14kb के लिए 3 सेकंड लगेंगे। इस मुद्दे पर कोई अन्य ब्राउज़र नहीं था।

मैं setTimeout के बजाय requestAnimationFrame का उपयोग करके सुझावों को हल कर दूंगा। उस दृष्टिकोण से लगता है कि दृष्टिकोण "काम करता है" या हरा महत्वपूर्ण होता है, "सामग्री डाउनलोड" या नीले रंग के लिए इतना नहीं।

खोदने के कुछ घंटों के बाद, मैंने mousewheel ईवेंट पर सशर्त रूप से e.preventDefault() पर कॉल करने की कोशिश की और मेरे आश्चर्य के लिए, यह काम किया।

कुछ बातें ध्यान रखें:

1) मैं एपीआई कॉल करने के लिए mousewheel घटना का उपयोग नहीं किया। मैंने थ्रॉटलिंग के साथ scroll ईवेंट का उपयोग किया।

2) mousewheel घटना गैर-मानक है और इसका उपयोग नहीं किया जाना चाहिए। https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel

3) लेकिन इस मामले में, आपको क्रोम के कारण mousewheel ईवेंट देखना और संभालना होगा। अन्य ब्राउज़र ईवेंट को अनदेखा करते हैं यदि वे इसका समर्थन नहीं करते हैं और मुझे अभी तक यह देखना है कि यह किसी अन्य ब्राउज़र में कोई समस्या नहीं है।

4) आप हर बार preventDefault() पर कॉल नहीं करना चाहते हैं क्योंकि यह माउस के साथ स्क्रॉलिंग अक्षम करता है :) आप केवल इसे कॉल करना चाहते हैं जब deltaY 1 है यदि आप लंबवत स्क्रॉल का उपयोग कर रहे हैं। आप संलग्न छवि से देख सकते हैं कि deltaY 1 है जब आप मूल रूप से स्क्रॉल नहीं कर सकते हैं। mousewheel ईवेंट को निकाल दिया गया है भले ही पृष्ठ स्क्रॉल नहीं कर सकता है। एक साइड नोट के रूप में, deltaX है -0 जब आप लंबवत स्क्रॉल कर रहे हैं और deltaY क्षैतिज स्क्रॉल करते समय -0 है।

मेरे समाधान:

window.addEventListener("mousewheel", (e) => { 
    if (e.deltaY === 1) { 
     e.preventDefault(); 
    } 
}) 

एकमात्र समाधान है कि मैं काम देखा है और मैंने नहीं देखा है यह उल्लेख किया है या कहीं और विचार-विमर्श किया गया है कि। मुझे आशा है कि वह मदद करेंगे।

console log of mousewheel event

Answer 2

मुझे लगता है कि आप इसे गलत कर रहे हैं। ™

मूल रूप से, यदि यह वास्तव में केवल क्रोम के साथ होता है, तो शायद क्लाइंट-साइड कोड दोष देना है, जिसमें से आप कोई विवरण प्रकट नहीं करते हैं।

अन्यथा, आप डिबग करने के लिए कोशिश कर रहे हैं आप एक बैकएंड हालत (nginx टैग पर पसंद के आधार पर) सामने के अंत उपकरणों के साथ के रूप में उपस्थित:

• क्या आपने tcpdump(8) का उपयोग कर की कोशिश की समस्या का निवारण करने ? कौन से पैकेट का आदान-प्रदान हो जाता है और किस समय?

• क्या आपने nginx द्वारा प्राप्त किए गए अनुरोध और संसाधित होने के अनुरोधों को लॉग करने का प्रयास किया है? उदा।, $request_time?

• सर्वर कहां स्थित है? शायद आपको पैकेट नुकसान का सामना करना पड़ रहा है, जिसके लिए कुछ टीसीपी पैकेट्स के टाइमआउट और रीट्रांसमिशन की आवश्यकता हो सकती है, जो हमेशा यादृच्छिक देरी पेश करेगी?

अंत में, पिछले संभावना है कि क्षेत्र मतलब यह नहीं है कि आप क्या सोचते यह होता है - यह लग रहा है जैसे कि यह सीपीयू लोड से एक हिट ले सकते हैं, के रूप में इस XMLHTTPRequest (XHR) का परिणाम है प्रसंस्करण - शायद आप उपयोगकर्ता ट्रैकिंग के साथ कुछ विज्ञापन चलाते हैं जो यादृच्छिक रूप से सीपीयू की एक महत्वपूर्ण मात्रा का उपभोग करता है, जो आपके मीट्रिक को धीमा कर देता है?