What are the differences between backend rendering html and front-end template rendering html and jquery html? -

The backend rendering html front-end angular and backbone template engine are directly rendered using jquery html, append, and other methods. What are the differences in implementation process and efficiency? Backend rendering html
Frontend angular and backbone template engine Rendering
Directly use jquery's html, append, and other methods
What are the differences between the implementation process and efficiency? Reply content: laxatives ......
Big question ......
What should I do if I am lazy ......

Just a few words.

1. backend Rendering
Implementation: backend string matching ...... (Theoretically, the backend template is also a string)
Benefit: the templates are unified at the backend. The front-end (relatively) saves time and does not occupy client computing resources (parsing templates). As long as the structure is not changed, it is enough to modify the backend of the text.
Disadvantages: it takes up (partial or partial) computing resources on the server, and the amount of data produced by response is slightly larger. The interaction and style of the front-end template must be modified along with the linkage.

2. Front-end Template
Implementation: Let's look at this ...... How does the template engine work and performance? -Front-end development, but not limited to regular expression replacement. Scan token to generate a syntax tree, splice the syntax tree, or use a DOM template to process the syntax tree, the trick is too much.
Benefit: it does not occupy server computing resources (parsing templates). templates are on the front-end (most likely only on the front-end). You can modify the structure, change the interaction, and click the front-end. You don't have to bother the backend to tune the game.
Disadvantage: it occupies (some, a few) client computing resources (parsing templates ). There are more front-end code. After all, does the template code be included. Is the script slow down for the first time (see if you care about it, after all, it can be 304 or CDN ). This may cause two templates. the backend always needs to spit out the first screen and let the user see it first. Isn't this part of the page template spelled out by the backend.

3. jquery html, append, and other methods (including browser native DOM APIs)
Implementation :...... That's not enough. Isn't it just directly inserting content or DOM nodes. Unless the backend directly spams the assembled page, it does not matter whether the backend uses the html string or template data through the interface. Why not all these tools should be used in the whole page.
Benefits: (probably) flexible ...... In addition to the pages directly spoken by the backend, this method has the highest execution efficiency ......
Disadvantages: It's really annoying to spell various strings and DOM nodes ...... To put it simply
The backend rendering html is called VomitOr Spray,Robots can see the complete presentation source code
Front-end template rendering html is called Fill in,Robots cannot see the complete rendering source code. If the backend personnel are not competent or have insufficient knowledge about the front end, use backend rendering as little as possible;

If the front-end personnel are not competent or the front-end data interaction is not complex, use as few front-end templates as possible;

If the project is not very large and you want to implement it quickly, use jquery. The question is too big. answer a few questions.
All rendering final browsing is an html page + js. The difference is that many of the backend rendering will generate some redundant junk code (usually at present ), no one mentioned SEO In front-end control. I think these technologies mentioned by the subject can be divided into two categories. The basis for classification is the browser. What have you done?


When HTML is rendered at the backend, the browser will directly receive the final HTML stringThe calculation here is completed by parsing the template files stored on the server. In this case, the browser only performs HTML parsing, and the image represented by HTML is displayed to the user on the display through the system call to manipulate the display content provided by the operating system.

Frontend rendering means that the browser will get some Information, These InformationIt may be a template file for angularjs, JSON, and other data exchange formats, or even a direct legal HTML string. These forms are not important. What's important is InformationOrganizing and arranging the final readable HTML string is completed by the browser and displayed after the HTML string is formed.


I think the term "template" cannot be used to differentiate the nature of these technologies. templates are just a syntax provided to programs for parsing. In other words, the template is used Data (variable)To the actual Visual Representation (HTML code)A type of work Implementation MeansAnd this method has applications on both the frontend and backend.

The following are my own ideas:
In terms of performance, I think that the backend rendering will eventually be rendered by the front end, because the backend rendering will concentrate all the HTML generation on one server, frontend rendering distributes this part of work to various terminals.

In addition, for development, this can avoid too many backend developers writing HTML code. the backend developers only need to agree on the data format with the front-end developers, and the backend only needs to generate the data, it can be packaged in the Data Exchange Format and sent out again, which makes the division of labor between developers clearer. In fact, I think there may be two scenarios:

① The page is a PHP file, which is composed AndTags are nested in a mix, such as WordPress templates. In this case, the front-end resources are parsed when they are loaded on the server. This method is a great pressure on the backend;

② The page does not have any backend code nesting, and the data is requested using ajax or websocket. In this case, the front and back ends are completely separated. The html structure can also be divided into template and dynamic DOM operations. The template principle is mainly replaced by regular expression matching. Assume that the html structure does not change much throughout the interaction process, the template is more efficient. If you need to update the html structure frequently and dynamically, you must operate the DOM, such as append (), html (), remove (), and empty (), this method is flexible, but DOM lookup is costly, especially if the performance on the Mobile End is reduced.