Comparing DOM Manipulation and Templating

Currently in the process of enhancing the performance of my HTML5 phonegap application, I am faced with the challenge of efficiently managing a <ul> element that is frequently updated.

For the initial injection of database data, I am utilizing DocumentFragments, and then using jQuery's prepend() and remove() functions for handling it.

I have been exploring templates, specifically EJS, and I'm curious if integrating it would provide any performance benefits.

If there are advantages, what are they? And if not, what are the reasons against implementing it?

Any additional tips on optimizing DOM manipulation for better performance would be greatly appreciated. Thank you.

javascriptperformancetemplatesdomcordova

Answer №1

If you want to improve performance on your website, simply using templates might not be enough unless you also cache them.

Regardless of whether you use templates or not, data must still be processed in order to generate the HTML.

Templates can streamline the process of generating HTML, making it easier to read and reuse code.

I'd like to expand on this:

  1. Caching your template can significantly boost performance - check out this JSPerf test
  2. Minimize reflow by avoiding unnecessary regeneration of the render tree
  3. Avoid adding styles directly; instead, use CSS classes
  4. There are countless so-called "best practices" out there

Answer №2

I enjoy using JavaScript template engines.

However, it is important to be cautious when rendering HTML through JavaScript code.

The primary issue is that search engines are unable to interpret them.

Another concern is performance; the most efficient way to render HTML is on the server-side, as demonstrated by Twitter in this post. Considering that website speed heavily relies on client environment, not all users have high-end machines to ensure optimal viewing experience.

In my opinion, emulating the architecture of Twitter.com would be beneficial. Their approach combines server-side and client-side rendering - initially rendered by the server and subsequent requests handled by JavaScript via AJAX.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for avoiding a button reverting to its original state upon page refresh

I have a button with the ID #first that, when clicked, is replaced by another button with the ID #second. However, if I refresh the page after clicking on the second button, it goes back to displaying the first button. Is there a way to make sure that th ...

javascriptjqueryhtmlrefresh

`End session for inactive user after next authentication`

I am facing a challenge with managing inactive user sessions in my app. I tried setting the maxAge of ...nextauth to one minute and the refetch interval to 20s for SessionProvider, but encountered an issue where the session expiration on the browser cook ...

javascriptreactjsnext.jssession-cookiesnext-auth

Ways to extract information from a text

I have a massive string, divided into two parts that follow this pattern: {\"Query\":\"blabla"\",\"Subject\":\"gagaga"}", {\"Query\":\"lalala"\",\"Subject\":\"rarara&bso ...

javascriptstring

Error message in Typescript: "Property cannot be assigned to because it is immutable, despite not being designated as read-only"

Here is the code snippet I am working with: type SetupProps = { defaults: string; } export class Setup extends React.Component<SetupProps, SetupState> { constructor(props: any) { super(props); this.props.defaults = "Whatever ...

javascriptreactjstypescriptreadonly

Fill in a text box with a chosen value from a linked drop-down menu

My database contains two tables: 1 - tbl_category 2 - tbl_shelf_place I am working towards displaying the shelf_code in a textbox based on the selected category_name from a drop-down (book_category) with a value of category_id, instead of using another ...

javascriptphp

Creating a Website that Adapts to Different Browser Sizes: Tips and Tricks

I am currently working on a website that features a video background (mp4 file). However, I noticed that the video appears differently in Chrome, Explorer, and Firefox. In order to ensure compatibility across all browsers, I need to make some adjustments i ...

javascriptjqueryhtml

Enhance the efficiency of time tracking function

I have been using a nodejs module to track the execution time of different parts of my application. // polyfill for window.performance.now var performance = global.performance || {} var performanceNow = performance.now || performance.mozNow ...

javascriptnode.jsperformanceprofilingcode-profiling

Error message in Angular 2, Problem found in inline template while utilizing eval() function

<li *ngFor="let pdfifRecord of pdf.ifRecord;let i=index"> <p>{{eval(pdfifRecord.labelMsg)}}</p> </li> I need to show the output of the eval function. Encountering an error message: Error in inline template c ...

javascriptangulareval

Establishing express routing results in API call returning 404 error indicating resource not found

I need some clarification on how to configure my Express routing using app.use and router. My understanding is that I can create a router and then attach it to a route using app.use() to handle all routing related to that route. Can someone assist me in ...

javascriptapiexpressroutes

Tips for maintaining an active class on parent nav items in NextJS when navigating dynamic routes

In my nextjs-application, I've implemented a Navbar showcasing several navitems: Navbar.tsx: const Navbar = ({ navitems }) => { return ( <div> {navitems?.map((navitem, idx) => ( <NavItem key={idx} navitem={nav ...

javascriptreactjsnext.js

why is my angular listing malfunctioning when I try to compare two fields?

<div ng-controller="SamsungServicesCtrl"> <ion-content> <li class="item item-checkbox" ng-repeat="item in items" > <img src="{{item.icon}}" style="float:left;height:30px;width:30px;padding-right:5px;" & ...

javascriptjqueryangularjs

I am interested in utilizing $axios in conjunction with Vuex constants for my project

My Dream Becoming Reality I frequently use this.$axios, so I attempted to store it in a constant, but unfortunately, it did not work as expected. Despite reading the official documentation, I couldn't grasp the reason behind this issue. Could it be d ...

javascriptvue.jsnuxt.jsvuex

Accessing Google authentication: A guide to programmatically prompting user consent and retrieving the CredentialResponse after successful login

Is there a way to trigger the Prompt for User Consent to open when clicking a custom HTML button instead of the Login iframe button rendered by Google? I am utilizing the Sign In With Google JavaScript API, and while I couldn't find a function to achi ...

javascriptreactjsvue.jsgoogle-signinreact-google-login

Accept only numerical values, addition and subtraction symbols, commas, the F5 key, and various other characters

I want to restrict key strokes to only numbers (including those on the numpad), minus (-) and plus (+) signs, and commas (,). Currently, it types twice when I input a number (e.g. 2 is displayed as 22) and replaces the current value with the new number. F ...

javascriptkeycode

Tips for updating border color when focused with styled-components

How can I change the border color of an input on focus using styled-components and React? Here is the code snippet I am currently using: import React from "react"; import PropTypes from "prop-types"; import styled from "styled-components"; const String ...

javascriptcssreactjsstyled-components

Interact with USB drive using electron to both read and write data

I am currently developing an electron project that involves copying files from a computer to USB drives. I need the ability to transfer files and folders to the destination USB drive, as well as determine the amount of free space on the drive. I have expe ...

javascriptnode.jsnpmelectron

Ways to efficiently transmit pre-designed HTML components from a WebMethod to jQuery

I'm currently working on implementing infinite scrolling on my ASP.NET C# Website. In the past, I used a somewhat cumbersome method involving the ListView Control to achieve lazy scrolling, but I'm looking for a more efficient solution this time. ...

c#javascriptjqueryasp.netsql

Is it possible to modify the inline onkeyup function?

Looking for a solution to change the onkeyup function in a textarea element from 255 characters to 150 characters without directly editing the code? <textarea cols="50" rows="4" id="textbox" onkeyup="limitArea(this, 255, '')"></textarea ...

javascriptjqueryhtml

Is it possible to change cases within a switch statement after one case condition has been satisfied?

I am currently working on implementing a game that involves rolling dice in Javascript/jQuery. The game has different "Phases" that the player must complete one by one without any interference from previous phases. The goal is to smoothly transition betw ...

javascriptjqueryhtml

Utilizing Selenium automation to navigate a website that features a custom jQuery plugin-checkbox functionality

Utilizing Selenium WebDriver along with JavaScript to automate the testing of a website that features a custom jquery plugin named "jcf" (JavaScript Custom Forms) for aesthetically pleasing forms. You can find more information about this plugin here. I am ...

javascriptjqueryhtmlseleniumcheckbox