Why tail long file crash chrome?
My goal is to show a log file in real time. I'm doing it through a websocket, but when the paragraph ('p') of the html starts to be big (450 lines), Chrome starts lagging and crashing.
The implementation is this:
var paragraph = document.getElementById('idLog');
stompClient.subscribe('/suscribers/tomcatlog', function (data) {
var lineLog = JSON.parse(data.body);
if (lineLog.line !== null) {
paragraph.innerHTML += lineLog.line;
paragraph.appendChild(document.createElement("br"));
var elem = document.getElementById('main');
elem.scrollTop = elem.scrollHeight;
}
});
Why is this happening?
javascript html tail apache-tailer
edited Nov 21 '18 at 9:59
Peter B
13.4k52045
asked Nov 21 '18 at 9:31
pjgarcipjgarci
325
add a comment |
My goal is to show a log file in real time. I'm doing it through a websocket, but when the paragraph ('p') of the html starts to be big (450 lines), Chrome starts lagging and crashing.
The implementation is this:
var paragraph = document.getElementById('idLog');
stompClient.subscribe('/suscribers/tomcatlog', function (data) {
var lineLog = JSON.parse(data.body);
if (lineLog.line !== null) {
paragraph.innerHTML += lineLog.line;
paragraph.appendChild(document.createElement("br"));
var elem = document.getElementById('main');
elem.scrollTop = elem.scrollHeight;
}
});
Why is this happening?
javascript html tail apache-tailer
edited Nov 21 '18 at 9:59
Peter B
13.4k52045
asked Nov 21 '18 at 9:31
pjgarcipjgarci
325
2
I am not entirely sure on the exact cause of the issue here but why not just get a line, make it into a DOM element and append it to a list of others, instead of doing+=which is a heavy operation.
– VLAZ
Nov 21 '18 at 9:37
add a comment |
My goal is to show a log file in real time. I'm doing it through a websocket, but when the paragraph ('p') of the html starts to be big (450 lines), Chrome starts lagging and crashing.
The implementation is this:
var paragraph = document.getElementById('idLog');
stompClient.subscribe('/suscribers/tomcatlog', function (data) {
var lineLog = JSON.parse(data.body);
if (lineLog.line !== null) {
paragraph.innerHTML += lineLog.line;
paragraph.appendChild(document.createElement("br"));
var elem = document.getElementById('main');
elem.scrollTop = elem.scrollHeight;
}
});
Why is this happening?
javascript html tail apache-tailer
edited Nov 21 '18 at 9:59
Peter B
13.4k52045
asked Nov 21 '18 at 9:31
pjgarcipjgarci
325
My goal is to show a log file in real time. I'm doing it through a websocket, but when the paragraph ('p') of the html starts to be big (450 lines), Chrome starts lagging and crashing.
The implementation is this:
var paragraph = document.getElementById('idLog');
stompClient.subscribe('/suscribers/tomcatlog', function (data) {
var lineLog = JSON.parse(data.body);
if (lineLog.line !== null) {
paragraph.innerHTML += lineLog.line;
paragraph.appendChild(document.createElement("br"));
var elem = document.getElementById('main');
elem.scrollTop = elem.scrollHeight;
}
});
Why is this happening?
javascript html tail apache-tailer
javascript html tail apache-tailer
edited Nov 21 '18 at 9:59
Peter B
13.4k52045
asked Nov 21 '18 at 9:31
pjgarcipjgarci
325
edited Nov 21 '18 at 9:59
Peter B
13.4k52045
asked Nov 21 '18 at 9:31
pjgarcipjgarci
325
edited Nov 21 '18 at 9:59
Peter B
13.4k52045
edited Nov 21 '18 at 9:59
Peter B
13.4k52045
edited Nov 21 '18 at 9:59
Peter B
13.4k52045
13.4k52045
asked Nov 21 '18 at 9:31
pjgarcipjgarci
325
asked Nov 21 '18 at 9:31
pjgarcipjgarci
325
asked Nov 21 '18 at 9:31
pjgarcipjgarci
325
325
2
I am not entirely sure on the exact cause of the issue here but why not just get a line, make it into a DOM element and append it to a list of others, instead of doing+=which is a heavy operation.
– VLAZ
Nov 21 '18 at 9:37
add a comment |
2
I am not entirely sure on the exact cause of the issue here but why not just get a line, make it into a DOM element and append it to a list of others, instead of doing+=which is a heavy operation.
– VLAZ
Nov 21 '18 at 9:37
2
2
I am not entirely sure on the exact cause of the issue here but why not just get a line, make it into a DOM element and append it to a list of others, instead of doing
+= which is a heavy operation.– VLAZ
Nov 21 '18 at 9:37
I am not entirely sure on the exact cause of the issue here but why not just get a line, make it into a DOM element and append it to a list of others, instead of doing
+= which is a heavy operation.– VLAZ
Nov 21 '18 at 9:37
add a comment |
1 Answer
1
active
oldest
votes
Doing string manipulations using += with ever growing strings is notoriously slow. Each time the entire string has to be copied into a new one, with the new characters appended.
On top of that the ever growing string has to be parsed over and over again - after all we are running in a browser.
Instead you should create a Text Node and append it directly to the parent element, like this:
if (lineLog.line !== null) {
paragraph.appendChild(document.createTextNode(lineLog.line));
paragraph.appendChild(document.createElement("br"));
// ...
}
answered Nov 21 '18 at 9:58
Peter BPeter B
13.4k52045
I've changed the way to implement it as you say and it seems to work correctly. About 15 thousand log lines written correctly and no lagging in browser. Thank you very much for your help.
– pjgarci
Nov 21 '18 at 10:25
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53408947%2fwhy-tail-long-file-crash-chrome%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Doing string manipulations using += with ever growing strings is notoriously slow. Each time the entire string has to be copied into a new one, with the new characters appended.
On top of that the ever growing string has to be parsed over and over again - after all we are running in a browser.
Instead you should create a Text Node and append it directly to the parent element, like this:
if (lineLog.line !== null) {
paragraph.appendChild(document.createTextNode(lineLog.line));
paragraph.appendChild(document.createElement("br"));
// ...
}
answered Nov 21 '18 at 9:58
Peter BPeter B
13.4k52045
I've changed the way to implement it as you say and it seems to work correctly. About 15 thousand log lines written correctly and no lagging in browser. Thank you very much for your help.
– pjgarci
Nov 21 '18 at 10:25
add a comment |
Doing string manipulations using += with ever growing strings is notoriously slow. Each time the entire string has to be copied into a new one, with the new characters appended.
On top of that the ever growing string has to be parsed over and over again - after all we are running in a browser.
Instead you should create a Text Node and append it directly to the parent element, like this:
if (lineLog.line !== null) {
paragraph.appendChild(document.createTextNode(lineLog.line));
paragraph.appendChild(document.createElement("br"));
// ...
}
answered Nov 21 '18 at 9:58
Peter BPeter B
13.4k52045
I've changed the way to implement it as you say and it seems to work correctly. About 15 thousand log lines written correctly and no lagging in browser. Thank you very much for your help.
– pjgarci
Nov 21 '18 at 10:25
add a comment |
Doing string manipulations using += with ever growing strings is notoriously slow. Each time the entire string has to be copied into a new one, with the new characters appended.
On top of that the ever growing string has to be parsed over and over again - after all we are running in a browser.
Instead you should create a Text Node and append it directly to the parent element, like this:
if (lineLog.line !== null) {
paragraph.appendChild(document.createTextNode(lineLog.line));
paragraph.appendChild(document.createElement("br"));
// ...
}
answered Nov 21 '18 at 9:58
Peter BPeter B
13.4k52045
Doing string manipulations using += with ever growing strings is notoriously slow. Each time the entire string has to be copied into a new one, with the new characters appended.
On top of that the ever growing string has to be parsed over and over again - after all we are running in a browser.
Instead you should create a Text Node and append it directly to the parent element, like this:
if (lineLog.line !== null) {
paragraph.appendChild(document.createTextNode(lineLog.line));
paragraph.appendChild(document.createElement("br"));
// ...
}
answered Nov 21 '18 at 9:58
Peter BPeter B
13.4k52045
answered Nov 21 '18 at 9:58
Peter BPeter B
13.4k52045
answered Nov 21 '18 at 9:58
Peter BPeter B
13.4k52045
answered Nov 21 '18 at 9:58
Peter BPeter B
13.4k52045
13.4k52045
I've changed the way to implement it as you say and it seems to work correctly. About 15 thousand log lines written correctly and no lagging in browser. Thank you very much for your help.
– pjgarci
Nov 21 '18 at 10:25
add a comment |
I've changed the way to implement it as you say and it seems to work correctly. About 15 thousand log lines written correctly and no lagging in browser. Thank you very much for your help.
– pjgarci
Nov 21 '18 at 10:25
I've changed the way to implement it as you say and it seems to work correctly. About 15 thousand log lines written correctly and no lagging in browser. Thank you very much for your help.
– pjgarci
Nov 21 '18 at 10:25
I've changed the way to implement it as you say and it seems to work correctly. About 15 thousand log lines written correctly and no lagging in browser. Thank you very much for your help.
– pjgarci
Nov 21 '18 at 10:25
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53408947%2fwhy-tail-long-file-crash-chrome%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
I am not entirely sure on the exact cause of the issue here but why not just get a line, make it into a DOM element and append it to a list of others, instead of doing
+=which is a heavy operation.– VLAZ
Nov 21 '18 at 9:37