javascript - Performance: jQuery load function vs rendering HTML from zero using jQuery

Question

I'm creating a chrome extension to make a time schedule table.

I have two HTML pages:

• popup html page where where schedule appears
• options html page where user can configure the schedule details (no. hours, time periods, days to show, etc..).

At the beginning, I was going to simply save all schedule settings as a json in local storage and dynamically render the table based on it using jQuery each time user checks the schedule..

// When user saves settings, store options to localStorage 
localStorage["preferences"] = JSON.stringify(preferences)

// then later use it to render the table using jQuery
savedPreferences = JSON.parse(localStorage["preferences"]);
$("ScheduleDiv").html("<table id="Schedule"></table>)
for (i = 0; i < savedPreferences.timePeriods ; i++){
$("#Schedule").insertRow(0) ...
// and so on

but then I thought, what if I just dynamically render the table into HTML file for one time, and then each time user opens the popup it will load the saved file:

jQuery $("#ScheduleDiv).load('SavedSchedule.html)

instead of creating the table from zero each time? 1- Is this possible for a chrome extension? 2- Is it better from a performance perspective to load an external file each time?

Thank you

question from:https://stackoverflow.com/questions/65649651/performance-jquery-load-function-vs-rendering-html-from-zero-using-jquery

Answer 1

Waitting for answers