What is the process behind Twitter's ability to quickly show my profile?

Scenario

I was intrigued by the different loading times of Twitter's profile page based on how it is accessed:

  1. Clicking the profile link in the menu results in a 4-second load time with DOM and latest tweets loaded.
  2. Using the keyboard shortcut GP or the link on the left instantly displays the page.

Observations

  • I noticed that for instant display using GP, the profile must have been recently viewed.
  • Refreshing the browser requires the profile to be displayed again for instant page access using GP.

Research

Initially, I thought Twitter might use serverside session variables, but I found evidence of localStorage in their source code. Despite my unfamiliarity with DOM storage, the JavaScript used by Twitter remains indecipherable to me, leaving me unsure if they store profiles with localStorage.

Inquiry

Does anyone have any theories, information, or resources regarding Twitter's usage of DOM storage or session storage?

javascriptajaxsessiontwitterlocal-storage

Answer №1

This question piqued my curiosity, leading me to venture into the realm of Twitter and conduct my own investigation.

Upon clicking on my profile name, I noticed that the link was utilizing AJAX technology. As a result, I observed my timeline being fetched. Interestingly, the page had already been pre-loaded with my information.

By clicking on the link located on the left side or using the keyboard shortcut GP, you essentially reveal the content that has already been loaded (hidden or stored in a JavaScript object within memory). This action displays your profile information that was previously downloaded, while simultaneously fetching the feed data via AJAX (in JSON format).

The URL displayed in the address bar transitions from https://twitter.com/#!/ to https://twitter.com/#!/wraldpyk (specifically in my scenario).

If you access your profile through the menu at the top right, you will be directed to https://twitter.com/wraldpyk. Reloading this page initiates a complete download process for all the necessary elements. It is worth noting that you will be redirected to https://twitter.com/#!/wraldpyk, witnessing the download progress of your timeline as indicated by images and feeds loading in tools like FireBug.

Based on my observations, it appears that no local storage mechanism (aside from typical usage within JavaScript) is employed in this process. Instead, all relevant data is consistently obtained during each new page visit.

A similar phenomenon occurs when inputting the shortcut key gh while viewing your profile. (This behavior applies across all available shortcuts).

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

Refreshing dynamically added rows through ajax updates

I'm struggling to clearly articulate my problem. Currently, I have a function that retrieves values from a database using ajax and then dynamically adds each result as a row in a table. This allows users to edit or delete any row as needed. I'm ...

javascriptphpjqueryhtmlajax

JavaScript and the Firefox Scratchpad platform

Currently, I am utilizing the MDN guide for learning JavaScript and experimenting with examples using scratchpad. Here's a scenario: console.log('The value of b is ' + b); var b; Why does the console log display "The value of b is -1"? I ...

javascriptscratchpad

Ways to receive a response using Jquery Ajax

How can I receive the response result from an ajax request when clicking a button labeled "Accept" to send to the server? Your assistance is greatly appreciated. An error message appears showing 419 POST http://localhost:8000/posts/list_post_ajax 419 (unk ...

ajaxlaravelresponse

Obtaining an XML element within an XSLT transformation

I need to retrieve the value of an XML element within XSL. Although my JavaScript is able to select one XML document, there are elements in other documents that I also require. I am uncertain if this task is feasible or if my syntax is incorrect. This is ...

javascriptxmlxslt

Encountered a $resource configuration issue while making a request to the SharePoint REST service with Angular

In an old sample app without angularJS, a rest service is called in the following way: This app does not use angularJS. var listName = "Events"; // the url to use for the REST call. var url = SPAppWebUrl + "/_api/SP.AppContextSite(@target ...

javascriptangularjsrestsharepoint

Sending data using Ajax to the server-side code in ASP.NET

Struggling to successfully pass a series of values through Ajax to a code-behind method in order to insert the data into a database table. However, encountering issues where string variables are being received as empty strings and int variables as 0. The ...

javascriptc#jqueryasp.netajax

The function cannot be called on params.getValue()

I am facing an issue while trying to retrieve the value of a specific row's column ID. The goal is to change the URL by appending the retrieved ID when clicking on an icon. However, I encountered an error stating TypeError: params.getValue is not a fu ...

javascriptreactjsdatagridmern

Using HTML, jQuery, and JSON with an AJAX call to populate two web tables stacked on top of each other

I am encountering an issue with populating two tables using two searches based on user input in mySQL-JSON-AJAX. When the user enters a search term and clicks the corresponding button, data should populate the respective table. The problem arises when clic ...

javascriptjqueryhtmlcsshtml-table

Execute an asynchronous request using Javascript to communicate with a Spring Controller

I've created a JSP page that includes some JavaScript code: function sendData(tableID) { var table = document.getElementById(tableID); var dataArray= new Array(); for (var i = 1;i<table.rows.length; i++){ var row = table. ...

javascriptajaxspring

AJAX POST request encountered a 400 Bad Request Error

One of the tasks in my Spring project is to enable data updating in the database upon clicking a specific button. Currently, I have the following code set up: update.jsp : <div class="searchParentOne"> <div class="noticeBlankTwoButtons ...

javascriptjavajqueryajax

"Adjusting the height of Material UI card content to ensure fixed positioning at the bottom

Currently, I am working on mapping material-ui cards with dynamic content from a JSON object, resulting in varying card heights. I have successfully set a fixed height for each card, but the content is not aligned correctly. You can see the issue in this ...

javascripthtmlcssreactjsmaterial-ui

How can I show tab objects in a Chrome extension?

I'm currently working on developing a new Google Chrome extension that focuses on tab organization. Despite the abundance of similar extensions already available, I am determined to create my own unique solution. One idea I have is to create a popup w ...

javascripthtmlgoogle-chromegoogle-chrome-extension

What is the best method to redirect users who are not logged in from every URL when using PassportJs?

I am currently developing a web application using NodeJS, and I have integrated PassportJS with passport-local-mongoose for authentication. Below is the code snippet I've created for the root route to verify if the user is logged in: app.get('/ ...

javascriptnode.jsmongoosepassport.jspassport-local-mongoose

Error in Typescript: The property 'children' is not included in the type but is necessary in the 'CommonProps' type definition

Encountering this error for the first time, so please bear with me. While working on a project, I opened a file to make a change. However, instead of actually making any changes, I simply formatted the file using Prettier. Immediately after formatting, t ...

javascriptreactjstypescript

Configuring the text box to utilize jQuery's datepicker feature

Currently, I am facing an issue with setting up a datepicker in a dynamic control creation scenario. The control is being created on the fly, causing inconsistencies with the id, which in turn is preventing the datepicker from functioning properly. Here is ...

javascriptjqueryasp.net-mvcbootstrap-4bootstrap-modal

Reduce the amount of code in conditional statements

Is there a way to streamline the following code- <div className="App"> <Checkbox parameter={parameter1} setParameter={setParameter1}></Checkbox> { parameter1.country && parameter1.category ? < ...

javascriptreactjs

Utilizing winston to generate multiple log files with set maximum sizes and daily rotation

Currently, I am utilizing winston for logging with a maximum size and daily rotation. I am interested in having this functionality with one file per API endpoint to define multiple log files. Is there a way to achieve this? Displayed below is my winston ...

javascriptnode.jstypescriptloggingwinston

I am experiencing an issue where my React component fails to update properly when viewed in Safari

Everything seemed to be going smoothly. Functioning perfectly in Chrome, FF, Edge, and even IE 11! The main component holds all the state. I send the bets object to the child component which calculates a count to pass to the grandchild component for displ ...

javascriptreactjs

What is the best way to access a nested promise element in Protractor?

I've recently put together a function in protractor that I'd like to share: function findChildElementByText(parentElement, tagName, textToSearch) { return parentElement.all(by.tagName(tagName)) .then((items) => { items.map( item ...

javascriptseleniumprotractor

Persist the modified contenteditable data into a JSON file by utilizing PHP Ajax

I am currently working on making a webpage content editable using HTML 5 and saving the data in a JSON file for future use. Additionally, I would like to implement AJAX to load only the edited part of the page and have a PHP file modify the JSON file. An ...

phpjqueryajaxjsonhtml