I can't see the data which is on web page in source code, but I can see via inspect element

Question

I'm scratching my head from yesterday trying to find about this.

When I navigate to account settings page and view source code, there's literally no user specific data like name, email, gender etc, but when I check via inspect element its there. Same happens with other web pages like order history etc.

I'm assuming the data is being generated dynamically (Am I right?)

I have two questions about this.

• How do developers do this?
• What's the purpose of doing this? Since developers take the extra pain of generating data dynamically this must be solving an issue otherwise why would they do this?

Answer 1

By generating the new page dynamically, developers can improve the user experience. For example, if you had a separate html file for your settings page, the user would have to make a call to your server to receive that file and see the page (maybe 1/3 of a second). However, if the developer dynamically generates new pages using javascript or some framework, everything is stored locally on the user's machine meaning that the page loads significantly quicker (~1/500 of a second).

Hope this helps.