एंड्रॉइड वेबव्यू देर से प्रतिपादन

Question

मैंने ज्यादातर ऐप जेएस (मूटूल) और एचटीएमएल में लिखा है जो मेरे ऐप में webview में लोड किया गया है।

.nodisplay {display:none} 
function showPage1() 
{ 
    $$('.pages').addClass('nodisplay'); 
    $('page1').removeClass('nodisplay'); 
} 

एंड्रॉयड 4 (Xperia arc और गैलेक्सी नोट 2) में मैं एक अजीब देखें:

यह सिर्फ एक html फ़ाइल जो जोड़ने या nodisplay वर्ग को हटाने के द्वारा दिखाने या भागों पेज के (तत्व) को छिपाने है देर से प्रतिपादन, लेकिन मुझे नहीं पता कि पुराने संस्करण कैसे व्यवहार करते हैं। जब मैं एक तत्व छुपाता हूं और दूसरा दिखाता हूं, तो यह पहले सही दिखाई देता है लेकिन पुराने तत्वों के कुछ हिस्सों को स्क्रॉल करने के दौरान मिलीसेकंड के लिए दिखाई देता है और तुरंत गायब हो जाता है। ऐसा लगता है कि गैर दृश्य क्षेत्र को प्रस्तुत करने के लिए पल ड्राइंग के लिए स्थगित कर दिया गया है।

और कभी-कभी छिपाने और दिखाने के दौरान यह अजीब झपकी भी करता है।

पीसी पर क्रोम में इसे कोई समस्या नहीं है। यहां तक ​​कि एवीडी में यह बिना किसी ब्लिंक के बहुत तेज काम करता है।

मुझे नहीं पता कि यह एंड्रॉइड की समस्या है और यदि इसे दूर करने का कोई तरीका है ?!

मैंने android:hardwareAccelerated="false"|"true" की कोशिश की, कोई प्रभाव नहीं। और ws.enableSmoothTransition() जो समस्या को हल नहीं करता है।

Answer 1

अजय उत्तर ने मुझे किसी अन्य प्रोजेक्ट में उपयोग की जाने वाली चीज़ का संकेत दिया ताकि मैं WebView पृष्ठभूमि पारदर्शी बना सकूं। अभी तक मुझे नहीं पता था कि कोड हार्डवेयर त्वरण बंद कर देता है। मैंने इस परियोजना में कोड की शांति का परीक्षण किया और अब देर से प्रतिपादन नहीं किया गया है। हालांकि पृष्ठ को स्क्रॉल करना उतना आसान नहीं है जितना पहले लेकिन यह देर से प्रतिपादन से बेहतर है।

यह यह सब ठीक करने के लिए कोड है:

if (Build.VERSION.SDK_INT >= 11) wv.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null); 

वैसे, यह android:hardwareAccelerated="false" को परिभाषित करने webview को प्रभावित नहीं करता की तरह है!

Answer 2

.nodisplay {height:0; display:none; }

यहाँ काम किया ...

Answer 3

यहाँ है मेरी "फिक्स अपने एक ढेर जवाब (प्रथम संस्करण) में वेबव्यू एप्लिकेशन":

प्रदर्शन

के लिए संदर्भ रखें प्रदर्शन में सुधार करने के लिए जेएस में आपके पेज तत्व। प्रत्येक बार जब आप पृष्ठ बदलते हैं तो $('.page1') को डोम को पार्स करना होगा और यह केवल एक बार होना चाहिए। यह $('.pages') के लिए भी जाता है - इसे & स्कैन करना कई तत्वों पर संचालन करना है। इसके बजाय मैं सुझाव देता हूं कि आप एक सक्रिय पृष्ठ संदर्भ रखें। शायद इसे इस तरह कुछ दिखना चाहिए:

function showPage(page) { // receive active page; page is the jQuery ref to the next page 
    activePage.addClass('nodisplay'); // activePage is the jQuery ref to the previous page 
    page.removeClass('nodisplay'); // show the page 
} 

आपको अपना पूरा ऐप स्कैन करना चाहिए और इस तरह की समस्याओं को ठीक करना चाहिए। वे एक बड़े सौदे की तरह प्रतीत नहीं हो सकते हैं लेकिन मुझे पूरा भरोसा है कि वे मोबाइल ओएस में अंतर डाल सकते हैं जहां संसाधन सीमित हैं।

डोम प्रबंधन

आप पहले से ही नहीं हैं, तो आप निश्चित रूप से टेम्पलेट का उपयोग करना चाहिए। आपके ऐप को प्रबंधित करने में सहायता के अलावा, टेम्पलेट्स को डीओएम को जितना संभव हो उतना हल्का वजन रखने में मदद करता है: 100 पेज तत्व होने के बजाय आप 0 से शुरू कर सकते हैं और आवश्यकता होने पर उन्हें फ्लाई पर बना सकते हैं। अधिकतम प्रदर्शन प्राप्त करने के लिए सुनिश्चित करें कि आप प्रत्येक टेम्पलेट को केवल एक बार प्रस्तुत करते हैं - यह जांचने से पहले कि पृष्ठ पहले से ही डोम में मौजूद है या नहीं। यह देखने के लिए कि यह आपके ऐप को कैसे प्रभावित करता है, बस Google "ब्राउज़र रीफ्लो"।

इस नौकरी के लिए बहुत सारे टूल हैं। आपको वर्तमान सेटअप को ध्यान में रखते हुए आप चुन सकते हैं: http://mootools.net/forge/p/template। यहां कुछ अन्य विकल्प दिए गए हैं: http://mustache.github.com/, http://underscorejs.org/#template, http://api.jquery.com/category/plugins/templates/।

यूआई

भी बहुत महत्वपूर्ण है लेकिन बहुत विशाल। कुछ बातें ध्यान में रखना:

• , हल्के अर्थ और मान्य मार्कअप
• js केवल डेटा & राज्य का प्रबंधन करना चाहिए। एनिमेशन और डोम अपडेट आपको धीमा कर देंगे। Css3 अनुकूल वातावरण का उपयोग करें
• छवियों को अनुकूलित करें और उन्हें केवल दृश्यों के रूप में उपयोग करने का प्रयास करें। यदि आप इससे बच नहीं सकते हैं, तो sprites हमेशा एक अच्छा विचार है।

डिबगिंग दर्द हो सकता है। मैंने बहुत उपयोगी पाया: http://people.apache.org/~pmuellr/weinre/docs/latest/। try ... catch ब्लॉक नियम! लॉगक आउटपुट के साथ मदद करने के लिए कुछ: http://jsharkey.org/blog/2009/04/22/modifying-the-android-logcat-stream-for-full-color-debugging/।

नीचे की रेखा, वेबदृश्य अभी भी एक कठोर वातावरण है और हालांकि हाल ही में यह एक व्यवहार्य विकल्प बन गया है, इसे "इसे सही करने" के लिए बहुत सारे विचार और योजना की आवश्यकता है।

उम्मीद है कि इससे मदद मिलती है।

Answer 4

मुझे वेबकिट के साथ एचटीएमएल के बारे में ज्यादा जानकारी नहीं है। लेकिन मेरे प्रोजेक्ट में से एक को छिपाने और स्क्रॉल प्रभाव दिखाने के साथ एक ही स्क्रॉल समस्याएं थीं। मैंने वेबव्यू के लिए हार्डवेयर त्वरण सक्षम किया है।

शायद आपको try this होना चाहिए।

Answer 5

भी इस कोड का प्रयास करें, यह मुझे बहुत मदद की .. -webkit-transform: translateZ(0); तुम मेरे कोड है, जिसमें यह मुझे मदद की पर एक नजर है सकते हैं .. jquery toggle (show/hide) based on selector

इसके अलावा नीचे दिए गए लिंक पर एक नजर है; http://www.html5rocks.com/en/mobile/optimization-and-performance/