Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is "Page Source" BEFORE or AFTER JavaScript has been rendered?

In Firefox there is a menu item that displays "Page Source": View | Page Source (Ctrl+U). In Internet Explorer there is a similar function.

When you invoke it, it displays a nicely formatted and syntax-highlighted collection of HTML (and JavaScript) code.

What I don't know is whether this HTML (viewable in the Page Source) is the result of pre-processing of the JavaScript (resulting in modification of the original raw HTML) or just raw as received by HTTP GET.

like image 896
PeSmith Avatar asked Mar 14 '11 16:03

PeSmith


People also ask

Which loads first HTML or JavaScript?

The browser loads the html (DOM) at first. The browser starts to load the external resources from top to bottom, line by line. If a <script> is met, the loading will be blocked and wait until the JS file is loaded and executed and then continue.

When a browser executes a JavaScript program What is the browser doing?

The source code is passed through a program called a compiler, which translates it into bytecode that the machine understands and can execute. In contrast, JavaScript has no compilation step. Instead, an interpreter in the browser reads over the JavaScript code, interprets each line, and runs it.

Which line of code will be executed first by the browser?

The server side code is executed first and the output generated by server side is sent back to client where client side code is executed. Show activity on this post. Yes, normally, the whole server processing finished before the page is delivered to the browser. At this moment, JavaScript execution starts.

How does browser load JavaScript?

To execute JavaScript in a browser you have two options — either put it inside a script element anywhere inside an HTML document, or put it inside an external JavaScript file (with a . js extension) and then reference that file inside the HTML document using an empty script element with a src attribute.


4 Answers

The "View Source" code is the code before any JavaScript is applied.

Firefox's Web Dev toolbar will allow you to view the resulting post-JavaScript source code from the View Source > View Generated Source menu option.

like image 53
KatieK Avatar answered Sep 22 '22 17:09

KatieK


Before. The page source is the result of the GET request by the browser sans headers. If you want to view the updated content after scripts and so forth, you'll have to use a tool like Firebug or the Web Development toolbar.

like image 33
Reid Avatar answered Sep 22 '22 17:09

Reid


Unfortunately, it will always display the HTML as the page was before DOM-change by javascript, etc. So the answer is: what you are seeing is "raw as received by HTTP GET".

You can use a tool like Firebug (Firefox & Chrome) to see live dom changes. Or you can make your own function to display the live dom.

like image 3
mattsven Avatar answered Sep 26 '22 17:09

mattsven


It is the source that was returned to the browser by the server, before DOM updates made through javascript.

like image 3
Greg Avatar answered Sep 26 '22 17:09

Greg