JavaScript

function uploadFile() {
    const fileInput = document.getElementById('file1');
   

    const file = fileInput.files[0];
   
    

    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'index.php', true);
    
    xhr.upload.onprogress = function (event) {
        if (event.lengthComputable) {
            const percentComplete = (event.loaded / event.total) * 100;
            const progress = document.getElementById('progress');
            progress.style.width = percentComplete + '%';
            progress.textContent = Math.round(percentComplete) + '%';
        }
    };

    xhr.onload = function () {
        if (xhr.status === 200) {
            alert('File uploaded successfully.');
        } else {
            alert('Error uploading file.');
        }
    };

    const formData = new FormData();
    formData.append('file1', file);
    xhr.send(formData);
}

#progress-bar {
            width: 100%;
            background-color: #f3f3f3;
        }
        #progress {
            width: 0%;
            height: 30px;
            background-color: #4caf50;
            text-align: center;
            line-height: 30px;
            color: white;
        }

function uploadFile() {
    const fileInput = document.getElementById('file1');
    const fileInput2 = document.getElementById('file2');

    const file = fileInput.files[0];
    const file2 = fileInput2.files[1];
    

    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/index.php', true);
    
    xhr.upload.onprogress = function (event) {
        if (event.lengthComputable) {
            const percentComplete = (event.loaded / event.total) * 100;
            const progress = document.getElementById('progress');
            progress.style.width = percentComplete + '%';
            progress.textContent = Math.round(percentComplete) + '%';
        }
    };

    xhr.onload = function () {
        if (xhr.status === 200) {
            alert('File uploaded successfully.');
        } else {
            alert('Error uploading file.');
        }
    };

    const formData = new FormData();
    formData.append('file1,file2', file);
    xhr.send(formData);
}

<pre> <form id="uploader" action="<?=$this->vars['action']?>" method="post" enctype="multipart/form-data">


        <div class="card text-center">
            <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#fileUpload" role="tab"><?=$this->vars['lang']['DOWNLOAD_F'] ?? '{lang.DOWNLOAD_F}'?></a>
                    </li>
                </ul>
            </div>
            <div class="card-body tab-content">

                <?php if($this->vars['config']['safe_code']){ ?>
                    <!-- verification code -->
                    <div class="safe_code card">
                        <div class="card-body">
                            <h4 class="card-title"><?=$this->vars['lang']['VERTY_CODE'] ?? '{lang.VERTY_CODE}'?></h4>
                            <h6 class="card-subtitle mb-2 text-muted"><?=$this->vars['lang']['NOTE_CODE'] ?? '{lang.NOTE_CODE}'?></h6>
                            <p class="card-text">
                                <img style="vertical-align:middle;" id="kleeja_img_captcha" src="<?=$this->vars['captcha_file_path']?>" alt="<?=$this->vars['lang']['REFRESH_CAPTCHA'] ?? '{lang.REFRESH_CAPTCHA}'?>" title="<?=$this->vars['lang']['REFRESH_CAPTCHA'] ?? '{lang.REFRESH_CAPTCHA}'?>" onclick="javascript:update_kleeja_captcha('<?=$this->vars['captcha_file_path']?>', 'kleeja_code_answer');" />
                                <input type="text" name="kleeja_code_answer" id="kleeja_code_answer" />
                            </p>
                        </div>
                    </div>
                <?php } ?>


                <!-- files upload  -->
                <div class="tab-pane active" id="fileUpload" role="tabpanel">

                  <?php foreach($this->vars["FILES_NUM_LOOP"] as $key=>$value){ ?>

                    <div class="input-group mb-2" style="" id="file-block-<?=$value['i']?>" onclick="document.getElementById('file<?=$value['i']?>').click();">
                        
                            <div class="btn btn-primary file-button-browse">
                                <img src="<?=$this->vars['STYLE_PATH']?>images/folder.png" width="20" height="20">
                                <?=$this->vars['lang']['OPEN'] ?? '{lang.OPEN}'?>
                            </div>
                        
                        <input type="file" class="example" name="file_<?=$value['i']?>_" id="file<?=$value['i']?>" data-number="<?=$value['i']?>" style="display:none" >
                        <input type="text"  id="file-text<?=$value['i']?>" disabled="disabled" placeholder="<?=$this->vars['lang']['NO_FILE_SELECTED'] ?? '{lang.NO_FILE_SELECTED}'?>" class="form-control">
                    </div>

                    <?php 
                
               
                
                } ?>

                    <div>
                        <br>
                        <div class="agree text-muted"><small><?=$this->vars['terms_msg']?></small></div>
                        <input type="submit" id="submitr" onclick="uploadFile()" name="submitr" value="<?=$this->vars['lang']['DOWNLOAD_F'] ?? '{lang.DOWNLOAD_F}'?>" class="btn btn-outline-primary">
                    </div>

                </div>
            </div>
        </div>

       
        <script src="progressbar/progress.js"></script>



    </form>

It is taking around 3-4 seconds to load 500 records which is very slow as it is hampering my app performance.

var source = { datatype: "json", 
              datafields: [ { name: "Rid", type: "int" }, 
                            { name: "ParentRid", type: "int" }, 
                            { name: "Name", type: "string" }, 
                            { name: "Text", type: "string" } ], 
              id        : "Rid", 
              localdata : dataSource, 
              async: true, 
              hasThreeStates: false };

var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();

   var records = dataAdapter.getRecordsHierarchy("Rid", "ParentRid", "items", [{ name: "Text", map: "label" }, { name: "Rid", map: "value" }, { name: "Name", map: "Name" }]);

    $("#jqxtree").jqxTree({ checkboxes: true, source: records, width: '100%', height: 220 });


I want to load 'JqxTree' control in such a way that other things won't wait for it to load. Is there any way in the jQuery to load 'JqxTree' control in the background?

Or something we can do which won't affect performance of whole application