2011-10-12 16 views
14

मैं ड्रैग & ड्रॉप और एकाधिक चयन फ़ाइलों के साथ सर्वर पर छवियों को अपलोड करने के लिए एक HTML इंटरफ़ेस बना रहा हूं। मैं उन्हें सर्वर पर भेजने से पहले चित्रों को प्रदर्शित करना चाहता हूं। तो मैं पहले FileReader का उपयोग करने का प्रयास करता हूं लेकिन मुझे this post में कुछ समस्याएं आई हैं। तो मैं अपना रास्ता बदलता हूं और मैंने ब्लॉब का उपयोग करने का निर्णय लिया: यूआरएलएल की तरह यूआरएलएल window.URL.createObjectURL() और window.URL.revokeObjectURL() मेमोरी रिलीज करने के लिए पोस्ट में अनुशंसा करता है।window.URL.revokeObjectURL() तुरंत स्मृति जारी नहीं करता है (या बिल्कुल नहीं)?

लेकिन अब, मुझे एक और समस्या है, जो this one के समान है। मैं चाहता हूं कि एक ग्राहक समय पर 200 छवियों को अपलोड कर सकता है यदि वह चाहता है। लेकिन ब्राउज़र दुर्घटनाग्रस्त हो गया और राम का इस्तेमाल बहुत अधिक था! तो मैंने सोचा कि शायद एक ही समय में बहुत अधिक छवियों को प्रदर्शित किया गया था, और मैंने समय पर केवल 10 फ़ाइलों का इलाज करने के लिए, एक सरणी का उपयोग कर फ़ाइलों की प्रतीक्षा कतार के साथ एक प्रणाली स्थापित की थी। लेकिन समस्या अभी भी होती है।

गूगल क्रोम, यदि मैं chrome://blob-internals/ फ़ाइलें (सामान्य रूप से पहले से ही window.URL.revokeObjectURL() द्वारा जारी किया जाता है) की जांच एक 8 सेकंड विलंब के बाद approximatively जारी कर रहे हैं। फ़ायरफ़ॉक्स पर मुझे यकीन नहीं है लेकिन ऐसा लगता है कि फाइलें जारी नहीं की गई थीं (मैं about:memory पर जांच करता हूं -> इसके लिए छवियां)

क्या मेरा कोड खराब है, या क्या यह मुझसे स्वतंत्र समस्या है? क्या नेविगेटर को तत्काल स्मृति को रिहा करने के लिए मजबूर करने का कोई समाधान है? यदि यह मदद कर सकता है, तो यह समस्याएं होती है जो जावास्क्रिप्ट का हिस्सा है: (क्षमा करें, लेकिन मैं नए सदस्यों के लिए छवि स्पैम तंत्र की वजह से यहां एक लिंक देता हूं) http://www26.zippyshare.com/v/14195278/file.html

संपादित

यह खुद जवाब + एक जवाब की तरह है (एक टिप्पणी के लिए बहुत लंबा पाठ) bennlich को

मैं user1835582 का जवाब है कि मैं वास्तव में निकाल सकते से समझा ब्लॉब/फ़ाइल लेकिन ब्राउज़र को छवियों की आवश्यकता होती है, लेकिन यह उन्हें स्मृति में कहीं भी रखती है (जो तार्किक है)। तो छवियों को प्रदर्शित करने के लिए यह तथ्य है (कई & भारी) जिसने मुझे & धीमा कर दिया, revokeObjectURL विधि नहीं। इसके अलावा, प्रत्येक ब्राउज़र स्मृति को अपने तरीके से प्रबंधित करता है, जिससे विभिन्न व्यवहार होते हैं। यहां बताया गया है कि मैं इस निष्कर्ष पर कैसे आया।

सबसे पहले, के लिए प्रयास करें कि revokeObjectURLhttps://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Example.3A_Using_object_URLs_to_display_images के स्रोत कोड का उपयोग कर एक सरल उदाहरण के साथ अच्छी तरह से काम करता है, करते हैं। क्रोम का उपयोग करके आप यह सत्यापित कर सकते हैं कि chrome://blob-internals/ की जांच करके या प्रदर्शित छवियों को एक नए टैब में खोलने का प्रयास करके ब्लॉब अच्छी तरह से निरस्त कर दिया गया है जो रिक्त होगा। नोट: ब्लॉब संदर्भों को पूरी तरह से रिलीज़ करने के लिए, document.getElementById("fileElem").value = "" जोड़ें। जब मैंने कुछ साल पहले अपना प्रश्न पोस्ट किया था, तो ब्लॉब जारी करने के लिए लगभग 8 सेकंड थे, अब यह लगभग तत्काल है (शायद क्रोम &/या बेहतर कंप्यूटर में सुधार के कारण)

फिर, चार्ज टेस्ट के लिए समय। मैंने इसे ~ 2.5 मो प्रत्येक के एक जेपीजी के साथ किया। उन छवियों को प्रदर्शित करने के बाद, मैंने पृष्ठ को स्क्रॉल किया। क्रोम क्रैश हो गया और फ़ायरफ़ॉक्स धीमा था (अन्य ब्राउज़रों पर परीक्षण नहीं किया गया)। हालांकि, जब मैंने li.appendChild(img) पर टिप्पणी की, तो सभी छवियों के एक विशाल समूह के साथ भी अच्छी तरह से चले गए। इससे पता चलता है कि समस्याएं revokeObjectURL विधि से नहीं आ रही हैं जो वास्तव में ठीक से काम करती है, लेकिन भारी छवियों को प्रदर्शित करने से। आप सैकड़ों भारी छवियों के साथ एक सरल HTML पृष्ठ बनाने और इसे स्क्रॉल करने के लिए भी परीक्षण कर सकते हैं => एक ही परिणाम (क्रैश/धीमा)।

अंततः छवियों मेमोरी प्रबंधन के बारे में गहराई से देखने के लिए, फ़ायरफ़ॉक्स पर यह देखना दिलचस्प है: स्मृति।उदाहरण के लिए मैंने देखा कि जब विंडो सक्रिय है, फ़ायरफ़ॉक्स छवियों को असम्पीडित करता है (छवियों -> असम्पीडित-ढेर ऊपर जाता है), जबकि कच्चे (छवियों -> कच्चे) हमेशा स्थिर होते हैं (लोड की गई छवियों की मात्रा के सापेक्ष)। मेमोरी मैनेजमेंट के बारे में यहां एक अच्छी चर्चा है: http://jeff.ecchi.ca/blog/2010/09/19/free-my-memory

+0

सुपर, मेरे पास बिल्कुल आपके जैसा ही मुद्दा है - लेकिन 5 साल बाद :) विस्तृत सब कुछ टिप्पणी करने के आपके प्रयास के लिए धन्यवाद। मैं बेहतर मांग करूँगा कि सभी चित्रों को स्वचालित रूप से मांग पर न करें। धन्यवाद! –

उत्तर

7
window.URL.revokeObjectURL() के साथ

आप केवल [ब्लॉब] या [फ़ाइल] वस्तु प्राप्त कर सकते हैं। आप स्मृति से हटाने को मजबूर नहीं कर सकते हैं।

नोट। ब्राउज़र को अंतिम रूप दिया नहीं गया है और वे इन सुविधाओं से रिसाव कर सकते हैं। यदि आप एनीमेशन को लागू करते हैं, तो आपको अपने जोखिम पर समझना होगा।

+7

यह अच्छा होगा अगर कोई इस उत्तर को समझता है तो उसे फिर से लिखना होगा। बहुत अस्पष्ट लगता है। – bennlich

+0

@bennlich मैंने अपना प्रश्न संपादित किया है, इस उत्तर की मेरी समझ दे रहा है + कुछ अतिरिक्त विवरण। – Seb

2

यह कोई जवाब नहीं है, लेकिन मैं बस इतना कहना चाहता हूं कि, जहां तक ​​मैं कह सकता हूं, यह अभी भी क्रोम (35) के नवीनतम संस्करण में एक मुद्दा है।

http://ecobyte.com/tmp/chromecrash-1a.html

आप अपने कंप्यूटर पर उच्च रिज़ॉल्यूशन वाली फ़ोटो की एक बड़ी संख्या (जैसे कि, 600) का चयन करें और उन्हें उस पृष्ठ पर बॉक्स में छोड़ है, यह दुर्घटना होगा: मैं एक परीक्षण पृष्ठ है कि समस्या को उजागर करता है बनाया क्रोम (विंडोज 7 और मैक ओएस एक्स 10.8.5 पर कोशिश की)।

आप स्रोत को देखें, तो आप ऑप्स के उस क्रम देख सकते है:

  1. createObjectURL
  2. लोड img (! डोम में शामिल न करें)
  3. revokeObjectURL रेफरी को मुक्त करने के
  4. img रेफरी खोना
  5. दोहराएँ अगले के लिए सभी कदम छवि गिरा

ऐसा लगता है कि किसी एक पल में केवल एक ही छवि मेमोरी/संदर्भित होनी चाहिए, लेकिन आखिरकार यह क्रोम को क्रैश कर देता है।

संबंधित मुद्दे