Wouldn't it be good to refactorize the repetitive part with JavaScript when writing HTML?

Asked 2 years ago, Updated 2 years ago, 36 views

Web page has been created in HTML.

Because the page structure is simple, there are many repetitive structures, so the regular repetitive parts are written to be repeated with javascript or jquery. For example,

vartext_box="<div>"Content of the box</div>"  
for(i=0; i<10; i++){
    $("#test_id").append(text_box)
}

To give you a rough feeling, there is a section where the contents of the box are repeated 10 times in this way, so I organized it like this. However, when it is loaded on the web, javascript or jquery may not work depending on the user's network status, so it is right to fill out all the text_box values 10 times as they are and manage them. I used the for statement for convenience, but do web designers actually work as conservatively as possible like that?

html javascript css jquery

2022-09-22 18:04

1 Answers

The code is meaningful, assuming that there is no significant performance degradation, no problem with page behavior, and that JavaScript makes it easier to manage.

But if you don't feel that the page is performing well, it's better not to do so.

It depends on the situation, but the way to make DOM Element with JavaScript is There is the opposite of the goal of refactoring.

First of all, we need to think about whether the code is necessary.

If you were accessing each HTML template that was repeated in JavaScript even in the existing code and needed to manipulate it... I won't stop you. It's not a bad choice for administrative convenience, for neat code.

But if the HTML that you're trying to expose in the first place is static, Reducing the HTML access and manipulation of JavaScript itself is advantageous in terms of page rendering performance.

When JavaScript creates elements and reflects them in the actual DOM tree, the browser must render the page again. This is one of the big rendering loads and it is important to reduce it as much as possible. (This process is called reflow, layout, etc.))

It also affects JavaScript execution. If the complexity of the elements that need to be created is very high, While creating and reflecting it in the DOM tree, the execution of JavaScript will be blocked (single thread + forced layout synchronization), This results in a later delay in the timing of JavaScript to be executed.

If certain HTML templates are repeated, it is better to create HTML from the server. If not, just use HTML that repeats.

In any case, it is advantageous for clients (web browsers) to accept and write HTML that has already been created in terms of page rendering, and it is not recommended that HTML elements be accessed, created, or modified through JavaScript.

So it's not something that's appropriate to say, "Conservative, no." However, based on the performance of the page, it is "not good enough" to create it with JavaScript.

And depending on the state of the network, javascript/jquery doesn't work, so it's somewhat right that we have to write them all, but that's not the point. If you're worried about the state of your networking with a separate JavaScript file, You can write JavaScript inside the HTML script tag. It is hard to be the basis for not creating/managing DOM with JavaScript. We need to look at it in terms of performance.


2022-09-22 18:04

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.