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

Why won't the CSS update in Next.js when the local state variable changes on page load?

I seem to be facing an issue with a variable stored in localStorage that changes when using a toggle button. The color changes correctly upon toggling the button, but upon page refresh, it doesn't display the correct color saved in local storage. Eve ...

javascriptnode.jsreactjsnext.jstailwind-css

The v-for loop seems to only update the last element instead of all of them, which is incorrect

How can I ensure that all 3 page links in the nav are displayed in 3 languages of user choice? Initially, the language change works fine on page load. However, after clicking on a language change link once, only the last link's language changes instea ...

javascriptvue.jsvuejs3nuxt.jsvue-component

Is there a way to use JavaScript or jQuery to automatically convert HTML/CSS files into PDF documents?

While using OS X, I noticed that in Chrome I have the option to Save as PDF in the print window by setting the destination to "Save as PDF". Is this feature available on Windows? Is there a way to easily save to PDF with just one click? How can I access t ...

javascriptjqueryhtmlcsspdf

Is there a way to generate a query dynamically using the ID of an HTML element?

My current task involves working with a basic navigation bar in HTML code, like this: <div class="views"> <b>Views</b> <hr style="background-color:#f0efef;"> <table id="views_table ...

phphtmlajax

The cascading dropdown feature is not displaying the dropdown options

Currently, I am in the process of developing a dependent dropdown feature where users can select a specific shop based on their region (south, north, east, west). To achieve this functionality, I have set up a database with four columns - id, region_id, re ...

phpajaxdrop-down-menu

Having trouble with my Angular subscription - not behaving as I anticipated

I am facing an issue on my shop page where I have a FilterBarComponent as a child component. On initialization, I want it to emit all the categories so that all products are rendered by default. However, on my HomePageComponent, there is a button that allo ...

javascriptangulartypescriptobservable

Creating a script that automatically launches the terminal and executes specific commands

Can anyone help me with creating a file that, when clicked on, opens a command prompt and executes the following commands? cd desktop\discordBOT node . Many thanks in advance! ...

javascriptnode.js

Are you interested in verifying the user's login status on the website using a Chrome extension?

My latest project involves creating a chrome extension using angular for a PHP website. Currently, the extension is working smoothly. It features a button that I would like to have the ability to enable or disable based on whether the user is logged in o ...

angulargoogle-chrome-extensionlocal-storagegoogle-chrome-storage

Apache not properly handling CORS POST requests on Firefox

Having trouble making a CORS POST call from Firefox to my Tomcat server, which offers RESTful services. The server-side return code looks like this: ResponseBuilder rb = Response.ok( JSON.serialize(result)); rb.header("Content-Type", "tex ...

ajaxtomcatcors

Navigate through chosen options by clicking on a button

It's a new day and I'm facing a simple challenge that seems complicated in the morning haze. I need to create a select dropdown with zoom percentage values, along with + and - buttons to navigate through the list. If I have the following setup: ...

javascriptjqueryselectbutton

Enabling individuals to view updates effortlessly

After testing my website, I discovered that users receiving a message or comment need to refresh the page in order to see any alerts or changes. The comments.php?do=comment&id=1 page displays posts with an id of 1 for users to leave comments on. I ut ...

phpjqueryajax

I am currently attempting to create a JavaScript function that searches for the <td> elements within an HTML table. However, the function fails to work properly when there are <th></th> tags included

UPDATE: Scratch that, I managed to solve my issue by creating a separate table for the header to contain all of my <th> tags I am working with an HTML table and I would like to add a search bar to filter through the content since it is quite large. ...

javascripthtmlhtml-table

Extracting and transforming an array into a list with the desired outcome

Looking for a way to flatten the array below into a single line array using Typescript/JavaScript? Student: any = [ { "id": "1", "name": "Jhon", "Marks": { "Math": "90", "English": "80", "Science": "70" } }, { "id": "2", "name": "Peter", "Marks": { "M ...

javascriptangulartypescript

Animation for maximum height with transition from a set value to no maximum height

While experimenting with CSS-transitions, I encountered an unusual issue when adding a transition for max-height from a specific value (e.g. 14px) to none. Surprisingly, there is no animation at all; the hidden elements simply appear and disappear instant ...

javascriptjqueryhtmlcss

Stop the click event from firing on child elements of a parent element that is currently being dragged

Below is the structure of a UL tag in my code: <ul ondrop="drop(event)" ondragover="allowDrop(event)"> <li class="item" draggable="true" ondragstart="dragStart(event)" ondrag="dragging(event)"> <div class="product-infos"> ...

javascriptjqueryhtmlcss

Having trouble removing a DOM element with jQuery?

Hey there, I need your help with a jQuery issue I'm facing. I am currently working on cloning a div element that contains a span with a click event attached to it. The purpose of the click event is to remove the newly cloned section from the DOM. Whil ...

javascriptjqueryhtml

Javascript - Converting a function to run asynchronously

Just starting to work with Node.js for the first time and feeling a bit puzzled by asynchronous functions. I'm getting better at identifying when async is causing issues, but still unsure how to fix them. Here's the code snippet in question: fu ...

javascriptnode.jsasynchronous

Advantages of passing individual variables instead of the entire object from HTML to JavaScript in AngularJS

When it comes to passing the iterating object from HTML to Javascript, there are two approaches that can be taken. The first approach involves passing the iterating object as a whole, while the second approach only passes the required properties of the obj ...

javascripthtmlarraysangularfor-loop

Typescript Routing Issue - This call does not match any overloads

Need assistance with redirecting to a sign-up page upon button click. Currently encountering a 'no overload matches this call' error in TypeScript. Have tried researching the issue online, but it's quite broad, and being new to Typescript ma ...

javascriptreactjstypescriptroutes

Dividing a JSON string and incorporating them into individual tds using AngularJS

Currently, I am working on extracting values from a JSON string by splitting it at the ":" and displaying the two values in separate td tags. function testCtrl($scope) { $scope.response = {"name":["The name field is required."],"param":["Hobby: Coding", " ...

javascriptjsonangularjs