Flickering Issue while binding data to Knockout View

Question

I am developing an chat application with KO. While binding the chat conversation, the browser is hanging till binding and the favicon, browser Refresh and cursor buttons are blinking for every message binding.

I've tried like making visible false by default and making visible after binding. But it didn't worked for me.

Here is the KO code for binding the messages

ko.utils.arrayForEach(data, function (item) {
                    var msgobj = new ViewMessagesObject();
                    msgobj.Chattype(item.Chattype);
                    msgobj.contactname(item.contactname);
                    msgobj.contactnum(item.contactnum);
                    msgobj.contactpic(item.contactpic);
                    msgobj.deliverydate(item.deliverydate);
                    msgobj.file(item.file);
                    msgobj.frompic(item.frompic);
                    msgobj.is_delivered(item.is_delivered);
                    msgobj.is_read(item.is_read);
                    msgobj.loader(item.loader);
                    msgobj.message(item.message);
                    msgobj.messageid(item.messageid);
                    msgobj.messgetype(item.messgetype);
                    msgobj.Pic(item.Pic);
                    msgobj.readdate(item.readdate);
                    msgobj.sentdate(item.sentdate);
                    msgobj.sentstatus(item.sentstatus);
                    msgobj.toname(item.toname);
                    msgobj.topic(item.topic);
                    msgobj.uploadopacity(item.uploadopacity);

                    self.DisplayMessageCollection.push(msgobj);
}

How can I stop these flickering issue while binding.

I've attached a video that shows the flicker of favicon and refresh button, so that you can understand my problem clearly.

Thanks in Advance..

Video Demonstrating My Problem

Does every message property need to be an observable? I.e. if the message does not change, you can just `self.DisplayMessageCollection.push(item);` — 7zark7, Aug 21 '15 at 06:20
we've tried direct push for every item, pushAll at once. but nothing's working except this :( — RealSteel, Aug 21 '15 at 06:25
can you try pushing initially everything into js array later call `valueHasMuated` on it like my answer here http://stackoverflow.com/questions/9709374/knockout-js-incredibly-slow-under-semi-large-datasets/27252722#27252722 . cheers — super cool, Aug 21 '15 at 06:47
Hello Sunil, we've tried this. but even then the issue still occurs. actually the flickering issue lies with the binding data to UI, but not the data pushing to array. — RealSteel, Aug 21 '15 at 09:07
yes flickering happens when binding to UI correct ! . but if you do the above way flickering wont come on each push as you are applying valueHasMuated at the end . i am unable to see the video link (access issue) once i come to see it i can see what exactly going on .. — super cool, Aug 21 '15 at 09:24
Hello Sunil, Actually if you can see the video you will understand it clearly. Actually everytime we need to clear the whole array and bind new data to that array. we are not appending some new content to the old array. I think your solution works in the second case. please check the video when ever possible and try to find the solution :) — RealSteel, Aug 21 '15 at 09:55
oops i see it now i never seen one todate. flickering issue is definitely nothing to do with ko binding . for testing please remove fancy css class you using and try the same on plane html it should work without flickering . — super cool, Aug 21 '15 at 14:05

score 1 · Answer 1 · edited May 23 '17 at 11:51

The video you have posted shows the reload button next to the address bar in chrome spinning and the favicon flickering.

The symptoms you describe happen when changing window.location in some way.

This happens when:

navigating to a url
an iframe is injected into the DOM
the src attribute of an iframe changes
certain properties on window.location object change

This is by no means an exhaustive list of what can cause the refresh button to spin in the chrome browser but the code in your answer is not the cause; this is not a knockout related issue at all.

Some possible causes to this issue:

You have some code not posted in your original question that does stuff with iframes. Is your chat application possibly using the forever frame technique?
You have a chrome plugin that uses iframes

I hope this points you in the right direction to solve the issue.

Flickering Issue while binding data to Knockout View

1 Answers1