The loop within a loop is causing excessive lag and is on the verge of crashing the

Question

The loop within a loop is causing excessive lag and is on the verge of crashing the

I need help with optimizing the performance of my app that retrieves json data. The json file contains nearly one thousand words structured like this:

{"THEMES":{"THEME1":["ITEM1","ITEM2","ITEM3"],"THEME2":["ITEM1",...]...}}

The size of the file is around 25kb. In a specific part of my application, I have to match each ITEM with its corresponding THEME in order to display a selected item related to a word using angular ng-repeat. Below is the section of my angular code that handles this functionality:

<div class="well">
    <div class="input-group" bindonce ng-repeat="word_in_list in words_list">
        <div class="form-group">
            <select>
                <option ng-selected="word_in_list.select == theme" ng-repeat="theme in themes" value="{{theme}}">{{theme}}</option>
            </select>
        </div>
        <div class="form-group">
            <input type="text" class="form-control" placeholder="{{word_in_list.input}}">
              <span class="input-group-addon">
                <input type="checkbox" ng-click="listControlWord($event, word_in_list.input, word_in_list.select)">
              </span>
        </div>
    </div>
</div>

The crucial part lies here:

$http.get('json/word_bank.json')
    .success(function (result) {
        $scope.themes = Object.keys(result.THEMES);
        for (var i = 0, z = $scope.themes.length; i < z; i++) {
            for (var j = 0; j < result.THEMES[$scope.themes[i]].length; j++) {
                $scope.words_list.push({select: $scope.themes[i], input: result.THEMES[$scope.themes[i]][j]});
            }
        }
    });

The problem is that browser rendering takes too long, sometimes crashing the browser due to the excessive time taken. Despite the loops functioning correctly and data retrieval being successful, the slow rendering speed is not acceptable. What can I do to optimize these loops?

javascript json angularjs

Answer 1

Answer №1

Your algorithm seems to have a time complexity of O(N^2), and unless you incorporate domain-specific heuristics, there may not be a way to improve it significantly. However, looking at the problem from a different angle, it appears that you are essentially concatenating arrays.

For a performance test related to your task, you can refer to the provided link.

Although leveraging apply for maximum efficiency might not be feasible in this case, you could combine various techniques. By concatenating all arrays and maintaining metadata about how indexes in the concatenated array correspond to specific "keys," you might reduce the complexity to O(N).

One possible solution could be...

<!doctype html>
<html lang="en">
    <head>
        <title>Test</title>
        <script src="d3.js" charset="utf-8"></script>
    </head>

    <body>
        <div id="divPerfTest"></div>

        <script>
            var result = {"THEMES":{"THEME1": ["ITEM1","ITEM2","ITEM3"],"THEME2":["ITEM1","ITEM2"]}};
            var keys = Object.keys(result.THEMES),
                master = [],
                masterBreaks = [],
                themeNames = [],
                word_list = [],
                theme, idx, key,
                breakIdx = 0,
                breakOffset = 0,
                outStr = "";


            for(idx = 0; idx < keys.length; idx++) {
                key = keys[idx];
                theme = result.THEMES[key];
                master = master.concat(theme);
                masterBreaks.push(theme.length);
                themeNames.push(key);
            }

            masterBreaks.push(master.length); // need the last break to exceed last index

            for (idx = 0; idx < master.length; idx++) {
                if (idx >= masterBreaks[breakIdx] + breakOffset) {
                    breakOffset += masterBreaks[breakIdx++];
                }

                word_list.push({
                    select: themeNames[breakIdx],
                    input: master[idx]
                });
            }

            for(idx=0; idx<word_list.length; idx++) {
                outStr += "[ " + idx.toString() + " ] Select: " + word_list[idx].select + ", Input: " + word_list[idx].input + "<br/>";
            }

            document.querySelector("#divPerfTest").innerHTML = outStr;
        </script>
</body>
</html>

Alternatively, consider revisiting your data schema. Instead of using variable names to represent different themes, is there a way to reorganize or manipulate the data so that each object includes a theme name attribute along with its corresponding list of items? This way, you maintain a list of these objects...

{ THEMES: [
    { id: "THEME1",
      data: ["ITEM1", "ITEM2"] },
    { id: "THEME2",
      data: ["ITEM1", "ITEM2", "ITEM3"] }
}

Answer 2

Your algorithm seems to have a time complexity of O(N^2), and unless you incorporate domain-specific heuristics, there may not be a way to improve it significantly. However, looking at the problem from a different angle, it appears that you are essentially concatenating arrays.

For a performance test related to your task, you can refer to the provided link.

Although leveraging apply for maximum efficiency might not be feasible in this case, you could combine various techniques. By concatenating all arrays and maintaining metadata about how indexes in the concatenated array correspond to specific "keys," you might reduce the complexity to O(N).

One possible solution could be...

<!doctype html>
<html lang="en">
    <head>
        <title>Test</title>
        <script src="d3.js" charset="utf-8"></script>
    </head>

    <body>
        <div id="divPerfTest"></div>

        <script>
            var result = {"THEMES":{"THEME1": ["ITEM1","ITEM2","ITEM3"],"THEME2":["ITEM1","ITEM2"]}};
            var keys = Object.keys(result.THEMES),
                master = [],
                masterBreaks = [],
                themeNames = [],
                word_list = [],
                theme, idx, key,
                breakIdx = 0,
                breakOffset = 0,
                outStr = "";


            for(idx = 0; idx < keys.length; idx++) {
                key = keys[idx];
                theme = result.THEMES[key];
                master = master.concat(theme);
                masterBreaks.push(theme.length);
                themeNames.push(key);
            }

            masterBreaks.push(master.length); // need the last break to exceed last index

            for (idx = 0; idx < master.length; idx++) {
                if (idx >= masterBreaks[breakIdx] + breakOffset) {
                    breakOffset += masterBreaks[breakIdx++];
                }

                word_list.push({
                    select: themeNames[breakIdx],
                    input: master[idx]
                });
            }

            for(idx=0; idx<word_list.length; idx++) {
                outStr += "[ " + idx.toString() + " ] Select: " + word_list[idx].select + ", Input: " + word_list[idx].input + "<br/>";
            }

            document.querySelector("#divPerfTest").innerHTML = outStr;
        </script>
</body>
</html>

Alternatively, consider revisiting your data schema. Instead of using variable names to represent different themes, is there a way to reorganize or manipulate the data so that each object includes a theme name attribute along with its corresponding list of items? This way, you maintain a list of these objects...

{ THEMES: [
    { id: "THEME1",
      data: ["ITEM1", "ITEM2"] },
    { id: "THEME2",
      data: ["ITEM1", "ITEM2", "ITEM3"] }
}

Answer 3

Answer №2

To enhance efficiency while looping through an array, consider dividing the task into segments and implementing timers to handle each segment separately in iterations rather than all at once.

For more information on how JavaScript timers function, you can visit:

Answer 4

To enhance efficiency while looping through an array, consider dividing the task into segments and implementing timers to handle each segment separately in iterations rather than all at once.

For more information on how JavaScript timers function, you can visit:

Answer 5

Answer №3

After some perseverance, I was able to resolve the pagination problem in my application. The solution I found was from this source: Improving AngularJs Performance for Large Lists

I hope that sharing this helps someone else facing a similar issue. Best regards.

Answer 6

After some perseverance, I was able to resolve the pagination problem in my application. The solution I found was from this source: Improving AngularJs Performance for Large Lists

I hope that sharing this helps someone else facing a similar issue. Best regards.

The loop within a loop is causing excessive lag and is on the verge of crashing the

Answer №1

Answer №2

Answer №3

Similar questions

Tips for transferring information from one php page to another php page via ajax

The Three.js duplication tool replicates all mesh data from the original volume and its associated child nodes

The functionality of the anchor tag is restricted in both Chrome and Safari browsers

Using jquery to toggle active nav links in Bootstrap

Extract keys enclosed in quotation marks using regular expressions

Understanding the relationship between csv and json array formats, along with the process of converting them into a json array using Node.js

Error encountered with nested v-for in Vue.JS causing null and undefined values to be thrown

Invoking a Vue method within a Laravel blade template

Combining data from various lists to populate a dictionary and generate a JSON file

Angular Select doesn't seem to be updating when the model changes

Ways to output a string array from a JSON object containing additional attributes

Extracting data from JSON response

Troubleshooting the issue of data retrieval failure in asp.net mvc controller using jquery.post()

Is it feasible to package shared modules into individual files using Browserify?

Place the image on the canvas and adjust its shape to a circle

Attaching a click event to an input field

Tips for choosing or unselecting a row within a Table utilizing the Data Grid Mui

Please send the report in a designated JSON format

Ditch the if-else ladder approach and instead, opt for implementing a strategic design

Issue with JSONP success function not being triggered