Dynamically display large amounts of text by partially displaying data in a text field

Question

Purpose:

Optimize your web page, which should display a large amount of text data (25mb +) in textareaor editable content div, without losing too much performance.

Currently, downloading a 10 MB file takes about 3 seconds in Chrome. I would like it to be 1 second longer.

---

Ideas and attempts:

I download local text files from the user's computer with the help <input type="file">and have no problem loading large files directly into memory. However, as soon as I try to display this text data in a text field, I naturally ran into performance problems.

I have spell checking, automatic capitalization, and automatic shutdown of all disconnected ones, and this certainly helped, however I would like to minimize the number of lags when trying to render large files (files larger than 10 MB, a maximum of 100 MB would be ideal),

<textarea autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">

One of my ideas was to show only 100 lines before and 100 lines after the current line, and when users scroll through the text field, I would simply disable what data is displayed. I can swap a few hundred lines without noticeable delay, but hundreds of thousands block the entire page.

I also looked at projects like CodeMirror , which is used in some javascript-based text editors and chrome dev tools. However, a quick test showed similar performance problems with the initial loading of large amounts of text.

Another idea was to use highlight.js to display dom text elements, but I also noticed a large number of large ones when dealing with thousands of DOM elements.

This site seems to solve a similar example by dynamically creating and displaying dom elements, rather than trying to display everything at once.

, , , , DOM. DOM 40-50k ( ), .

, , : (1) (2) . .

, , .

, -, - , , .

- , , , . , FileReader .

-, , NDA.

: Ubuntu 16.04 LAPP Stack Laravel 5.4, NodeJS. jQuery .

---

():

Lazy Loading - 300 "chunks" , . . - , "", , DOM.

Pseduo:

c_chunk = scrollpos / scrollheight * totalChunks;
chunk_block = chunk[c_chunk--] + chunk[c_chunk] + chunk[c_chunk++];
my_textarea.val(chunk_block);

?

.

Answer 1

, :

, , , , Ace . .

• API, .
• , Ace hands down Code Mirror . (500 000 , github , Ace 4 .
• , Ace , . 10 !
• , Code Mirror, WebGL, .

, , ? , , . src-min, script.

javascript :

<script src="/ace/ace.js" type="text/javascript" charset="utf-8"></script>

id="editor". div:

<div id="editor">Any text you want to have auto displayed</div>

javascript:

var editor = ace.edit("editor");
editor.setTheme("ace/theme/chrome");
editor.session.setMode("ace/mode/javascript");
editor.$blockScrolling = Infinity;

, /// .. , Ace kitchen sink page .

, - :

:

// Add event listener to the file input
// Note: This will not fire twice if the user opens File A, then re-opens file A
// To detect re-opening a file you will need to clear the input
// after the file is read so that it "changes" upon re-opening
document.getElementById('open-file').addEventListener('change', handleFileOpen, false);

// First we create the function handler that fires when our input is changed
function handleFileOpen(e) {
    var file = e.target.files[0]; // Get first file selected

    // Load file using file reader function
    loadFile(file);
}

function loadFile(file) {    
    // Create file reader and relevant Ace code
    var reader = new FileReader();
    reader.onload = function(e) {
        // Get text contents of file
        var data = e.target.result;

        // Update Ace Editor with loaded data
        editor.setValue(data, -1);
    };

    // Now that we defined the function we want to run, read the file
    reader.readAsText(file);
}

-1 setValue() , () - 1 .

, , . , , , , .

2 , + highlightjs, , , , Ace . !

" ": https://ace.c9.io/#nav=howto
API ( ): https://ace.c9.io/#nav=api