When does JSON overload become a problem?

Creating a bookmarking site similar to delicious has been my latest project. To ensure an optimized user experience, I have decided to fetch all the bookmarks from the database table and organize them into a JSON object containing essential data such as id, title, url, description, and tags for each bookmark. The JSON object is generated during the initial page load and then dynamically styled and injected using jquery.each.

Without having the ability to test it yet, one question lingers in my mind: What would be the impact on browser performance or any potential issues that could arise if a user were to save an unlimited number of bookmarks, let's say 2000, especially since pagination is not an option for this particular project?

javascript json

Answer №1

Here's a thought that might stir up some debate. Why isn't paging considered as an option? Is there ever a situation where displaying 2k bookmarks all at once is necessary? I highly doubt it.

Not only does showing that much data increase the risk of DDOS attacks (especially if there is a large amount of text involved), but it also puts unnecessary strain on your servers. Just imagine if an attacker were able to access a URL containing megabytes of JSON - your servers would be in serious trouble.

It would be helpful to know more about your UI so we can better understand the data you truly need for optimal functionality.

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

Sequencing numerous promises (managing callbacks)

I am encountering some challenges with promises when it comes to chaining multiple ones. I'm having difficulty distinguishing how to effectively utilize promises and their differences with callbacks. I've noticed that sometimes callbacks are trig ...

javascript angularjs promise angular-promise

The chaotic world of Android WebKit versions 2.x and 3.x

I have been working on an Android app and my goal is to make it compatible with Android versions 2.2 and above. Currently, due to issues with the WebView control, I am restricted to targeting Android 4.0 and higher. The app primarily uses HTML, CSS, Java ...

javascript android jquery html css

When React first fetches data and users move to chat with each other, the state value does not update

Recently, I started learning about React and Node.js as I dive into building a chat application. When a user is clicked for one-on-one chat, I retrieve records from the database using backend Node.js and also incorporate socket.io. In my Chat.js file: imp ...

javascript node.js reactjs socket.io

Creating a new URL using a JSON response in Node.js: A step-by-step guide

I am facing a query regarding the following code: The issue at hand is: How can I pass each line from response promiseGetCitiesData to promiseGetInformationDataPerCity. Is it possible to achieve this in a single async.each function? Currently, I have ...

javascript node.js mongodb parsing promise

Discover the ins and outs of the "DOM" within a string, treating it as HTML in AngularJS

Looking to extract data from a legal HTML string based on tags and attributes, but want to avoid using jQuery in favor of Angular. Are there built-in functions in Angular for this task? ...

javascript html angularjs

Exploring AngularJS for real-time updates from a persistent database

Hello, I'm new to Angular and currently working on an app that requires frequent polling of a URL every second. The retrieved data needs to be stored persistently for access across multiple views and controllers. To handle this, I've placed the ...

javascript angularjs http polling

Struggling to retrieve information using the filter() method in MongoDB

I am currently attempting to retrieve the tasks assigned to a specific user using this setup router.get('/all', auth, async (req, res) => { try { const assignments_raw = await Assignment.find({listP: listP.indexOf(req.user.userId)}) ...

javascript node.js reactjs mongodb mern

Accessing a variable from one function within another function in Vue

How can I access and utilize the ctx variable from the initGrid() function in the drawGrid() function? Despite trying to use "this," it seems that the variable cannot be accessed within the drawGrid() function. <script> export default { data: ( ...

javascript vue.js canvas vuejs2 vue-component

extracting content using cheerio

I need help extracting specific information from this HTML and storing it in an object. I only want to extract Jung Ho Kang and 5, excluding any text within the (R) and SS tags. <td id="lineup-table-top"> <b class="text-muted pad-left-10">5& ...

javascript node.js cheerio

Calling gtag("event") from an API route in NextJS

Is there a way to log an event on Google Analytics when an API route is accessed? Currently, my gtag implementation looks like this: export const logEvent = ({ action, category, label, value }: LogEventProps) => { (window as any).gtag("event&quo ...

javascript typescript server next.js gtag.js

Unusual predicament encountered while using Flow type validation

I've encountered a puzzling situation in my React app while trying to integrate Flow's typechecking. I'm struggling to make everything work smoothly. Here is the relevant code snippet: // @flow export const UPDATE_SESSION_PROP: string = &ap ...

javascript reactjs flowtype

Chrome App Experiencing Issues with DOM Loading

I am working on converting a simple HTML5 Snake game that utilizes canvas into a Chrome App. Below is the snippet of my original HTML file: <!DOCTYPE html> <html> <head> <title>Snake</title> <link rel=" ...

javascript google-chrome canvas google-chrome-devtools google-chrome-app

Show information from a JSON array in Laravel

How do I access the pricing information for "IN" currency from the JSON array below in Laravel? { "result": "success", "currency": { "id": "1", "code": "INR", "prefix": " \u20b9", "suffix": "INR", "format": "1", "rate": "1.0 ...

json laravel laravel-5 laravel-5.3

I am looking to display the pop-up exclusively when the page is clicked, but unfortunately it is also appearing when the Menu is clicked

I've been working on this code and trying to make some modifications, but I just can't seem to find the right solution for my issue  <main> <p> Click on the menu button located in the top right ...

javascript html jquery

Updating a JavaScript global variable within a click event function: A quick guide

I am currently using Javascript and jQuery to retrieve the mouse coordinates of a click event for use in other Javascript functions. The issue I am facing is that global variables set within an event function do not update outside the function, unlike glob ...

javascript global-variables jquery mouseclick-event

Retrieve list of values using Vert.x Json decode function

Is there a way to convert a json string into a List<Foo> object using vert.x? I've found that you can easily convert a string into an object by using Json.decodeValue(data, Foo.class);, but I'm struggling to do the same for lists. Current ...

java json list decode vert.x

Refresh the information displayed in the open Google Maps Infowindow

Experimenting with extracting JSON data from a bus tracker website and integrating it into my own version using Google Maps. Although not as visually appealing, I'm struggling to update an infowindow while it remains open. Despite finding some example ...

javascript json google-maps infowindow

Using NextJs to create a permanent redirect from the www version of a site to the non

I have developed a website using Nextjs (version 12.1.4). To enhance the SEO of my site, I want to create a permanent redirect from the www version to the non-www version. Typically, this can be achieved easily using nginx or an .htaccess file with apache. ...

javascript node.js reactjs next.js digital-ocean

When running the test, the message "Unable to resolve all parameters for BackendService" is displayed

Upon executing the ng test command, the following error was displayed. This is my service specification: describe('BackendService', () => { beforeEach(() => { TestBed.configureTestingModule({ providers: [ { p ...

javascript angular typescript

The 'npm start' command is failing to recognize the changes made to the

I am embarking on a new node application journey, starting with the package.json below, which is quite basic. { "name": "mynewnodeventure", "version": "1.0.1", "description": "Exploring node", "main": "index.js", "start": "node server. ...

javascript node.js json

JavaScripter Q&A