ما هي بعض التقنيات لتحسين استجابة واجهة المستخدم؟

Question

في المثال أدناه، هل يمكن لأي شخص أن يقول لي كيفية جعل "استجابة بطيئة عند النقر" بسرعة أكبر دون تعديل إعادة التعديل ()؟ أتساءل عما إذا كانت هناك طريقة لوضع عمليات رخيصة قبل أكثر تكلفة، وتأكد من أن تلك الرخيصة يتم تنفيذها بسرعة.

<div id="draw">slow response when clicked</div>

<div style="overflow: auto; height: 300px; border:solid 1px grey" id="content"></div>

<script language="javascript">

    var clickLink = document.getElementById("draw");
    var contentDiv = document.getElementById("content")

    function appendContent(){
        contentDiv.innerHTML =  contentDiv.innerHTML + "hello ";
    }

    clickLink.onclick = function(){
        clickLink.style.color = "red";
        for (var i = 0; i < 1500; i++){     
            appendContent();    
        }
    };
</script>

Answer 1

يجب أن تكون آلية التعليقات مختلفة عن المدة التي يتعين على المستخدم الانتظار. أقل من 0.1 ثانية ولن يلاحظ المستخدم.

ما بين 1 و 10 ثوان، يمكنك ببساطة عرض رمز مثل GIF المتحركة من نوع ما يشير إلى تطبيقك هو معالجة. يرى http://www.ajaxload.info/ يمكنني استخدام DIV مع معرف "معالجة" وأسلوبها مع Spinner واستخدم رمز JQuery التالي لإظهاره وإخفزاله قبل العملية.

function showProcessing(){
    $("#processing").fadeIn("fast");
}

function hideProcessing(){
    $("#processing").fadeOut("fast");
}

ما بعد 10 ثوان سيكون مثاليا لتوفير تقدير وقت المعالجة.

يرى وقت الاستجابة نظرة عامة لمصدر هذه الأرقام.

يغير التعليمات البرمجية التالية على الفور لون الارتباط باللون الأحمر ويستدعي طريقة إلحاق جزء بسيط في وقت لاحق. يتيح أساسا للمتصفح تنفيذ مؤشر ترابط منفصل قبل التعلق في حلقة. قد تحتاج إلى تعديل المهلة اعتمادا على المتصفح. تحقق من ميكس نيل خيوط في جافا سكريبت 1.7 إذا كنت بحاجة إلى التخلي عن السيطرة بطريقة أكثر عام.

    function startAppend(){
      for     (var i = 0; i < 1500; i++){             
              appendContent();        
      }
    }

    clickLink.onclick = function(){
            clickLink.style.color = "red";
            setTimeout('startAppend()', 10)                
    };

Answer 2

إذا كان ما تريد القيام به هو ببساطة تزويد المستخدم ببعض التعليقات بحيث يعرف أن شيئا ما يحدث، فقد تحاول وضع GIF متحرك - دائرة جملية أو شيء ما، بجوار الزر وتعطيل الزر نفسه، ثم وضع الأمور مرة أخرى إلى طبيعتها بعد إعادة رسم كاملة.

Answer 3

نظرا لأن JavaScript لا تملك دعما جيدا متعددة الصدد، فأنت بحاجة إلى تقسيم عملية دوم الخاصة بك إلى أجزاء أصغر. عادة ما تتم مثل هذه الأشياء عن طريق إجراء عملية طويلة في مؤشر ترابط منفصل.

Answer 4

تحتوي مكتبة واجهة المستخدم Yahoo على الكثير من التعليمات البرمجية والعديد من التعليمات البرمجية والتحكم التي تستخدمها بالفعل تقنيات مثل AJAX لتحسين الاستجابة المتصورة لتطبيق الويب الخاص بك.

باستخدام مكتبة مثل Yahoo!، سوف تجعل S إضافة هذه الوظيفة إلى تطبيقك بشكل أسرع وأقل خطأ عرضة للخطر.

http://developer.yahoo.com/yui/

Answer 5

جرب هذا: أضف فحم يحتوي على رسومات التحميل الخاصة بك افتراضيا، ولكن قم بتعيين CSS لعرضه: لا شيء. بعد ذلك، عند النقر فوق Div # Draw، قم بتعيين عرض رسومات التحميل لمنع ثم قم بسحبك. عند الانتهاء من الرسم، قم بتعيين الشاشة مرة أخرى إلى NONE.