How to perform a faster Loop [Addting Title Attribule to massive words]?

Dears,

1/ My current situation

I am building a website on WordPress for learning English which have tooltips for English/Vietnamese explanation of NGSL list. (New General Services List ~ 2,800 core English words).

My current method is to use a Wordpress Plugin at . However, for a page with few hundreds keywords like this the page loaded really slow (10-15s) because each tooltip is actual a post load from custom post on WP. Sometimes my shared host die due to that volume of request (thousands at same time).

My temporary method is to use Wordpress Super Cache to cache my posts (exclude these keywords’s post) and I decide to learn JavaScript to write my own plugin.

2/ My understanding so far

Based on my learning, I found 02 JS library:

Create a list of Word:definition like this

var highLightWords={

“the”:“used to point to something already mentioned”,
“be”:“used to show the identity of a thing”
};

  1. Adding SPAN element for EACH WORD in a POST which included in highlLightWords and ADD CLASS toolTip to call toolTip later and ADD TITLE attribute to show definitions

$( document ).ready(function() {

    for(var key in highLightWords){
//Ading SPAN and Class = WORD       
$(".context").mark([key], {
    "element": "span",
    "accuracy": "exactly",
    "className": key+" toolTip" //Add 1 more CLASS to CALL Tooltip and 1 Class Key to Loop Title below
});       
//End of Adding SPAN loop. START add Title for Tooltips   
 $("."+key).attr({
            "title" : highLightWords[key]
        });
//End of Addinng Title       
    };
});//End of Document READY
  1. Call Tooltip
$( document ).ready(function() {
    Tippy('.toolTip');
});

My approach worked, it can show all of 2,800 words’tooltips very well. My problem, however, is the loading time very low (around 40-60 secs…). For a actual post on Wordpress, the numbers of keywords is only around hundreds or lesser. The loading, however, is still very slow (10-15s).

Do you have any ideas or solutions to help me reduce loading time?

Thank you so much!

My test page is here: My test page is here: http://ioetieuhoc.net/demo/tippy/mark.html

I totally see what you mean about the delay. The memory usage wasn’t great either.

The current approach where you load all tooltips initially probably won’t work well. There are a few things you can try. One thing would be load the tooltip only when the user hovers over a word. The other is to store all of the definitions in a JSON file and download that entire JSON file the first time the user loads the page. That way you can avoid the cost of loading values each time.

Lastly, remove all of the plug-ins and 3rd party libraries for displaying the tooltip. Focus on getting the definition to display in the console really quickly. Once you have gotten the speed up for that case, then you can try a library for displaying a tooltip.

:stuck_out_tongue:

Thank you!

I will try to follow your suggestions:

Br,