Pre-fetching data using trial.js

Recently, I wrote a small javascript library for monitoring mouse pointer, in this way, we could predict user input, and try to reduce the latency between the user input action and feedback.

Why I created this library? Based on research, when the delay between user input and visual feedback increased to 200ms, user would feel the latency, this is crucial in web application, if browser is frozen 200ms or larger, it turns into bad user experience. Unfortunately, in recent days, a considerable parts of websites still appear this kind of latency, the reason could be different aspects, but we could say most of latencies happened during client-server communications.

There are plenty of reasons could cause slow communication speed, maybe low bandwidth, maybe long distance, hard to tell, unless comprehensive diagnosis. By upgrading physical devices or setting up CDN could significantly reduce the communication latency, but for small company or individual, invest plenty of money into physical devices always not first options, we need a walk-around.

Since the latency is there, and hard to eliminate, we need another way to let our user not feel the latency, what if we call the server and fetch the data before user really request it, then the communication time would be hide from user and highly increase user experience. For example, think about the above scenario:

When user click ‘view detail’ button, browser will request larger content from server, which could raise higher latency, and degrade user experience. With these in mind, we could monitor user pointer, and when pointer enter the red circle, we suppose user gonna click the button, then we sent the request ahead and store the respond data at local, and when user really click the button, we just need to display the local data without any delay.

That is the reason why I wrote this library, with Trial.js, the above example could be easily achieve by:

{distance: 150, cord: 'center'},
function(distance, ele, event){
               //do something ...

distance sets the radius of red circle, and cord sets the center position of red circle related to matched element itself. More examples or usages could be found at here