What is the difference between "Source" and "Generated Source"?_问答_开发者

What is the difference between "Source" and "Generated Source"?

开发者 https://www.devze.com 2023-01-05 17:04 出处：网络

What is the difference between \"Source\" and \"Generated 开发者_开发知识库Source\" in Firefox?

What is the difference between "Source" and "Generated 开发者_开发知识库Source" in Firefox?

Please explain with example.

Edit: 3 July

Which source "Search engine" uses, Generated or before generated?

Source will show the source that the page was loaded with (served by the server).

Generated source will draw 'source code' from the current DOM elements, and therefore includes elements dynamically created by JavaScript.

For example, source would show:

<script>
  window.onload = function(){
    document.getElementById('test').innerHTML = 'Generated Content';
  }
</script>
<html>
  <div id='test'>Source</div>
</html>

and Generated Source would 'draw' the source at the time you click 'View Generated Source', after which the div's contents have been changed, and you would see:

<script>
  window.onload = function(){
    document.getElementById('test').innerHTML = 'Generated Content';
  }
</script>
<html>
  <div id='test'>Generated Content</div> <!-- Note the difference here -->
</html>

View source will show the source that was served by the server.

View generated source will show the source code of what's actually being shown — that includes what JavaScript has changed, etc.

It's really pretty simple.

Source:

<body>
    <script>document.write("hello, world");</script>
</body>

Generated source:

<body>
    <script>document.write("hello, world");</script>
    hello, world
</body>

More verbosely: "source" is what arrives at the browser in response to the page request. "Generated source" is what the browser has after all the javascript fires.

The term "Generated Source" is a misnomer, since what you're seeing isn't "source" at all. "Source" is the HTML sent to the browser. "Generated Source" is the serialization of the current state of the object model resulting from the parsing of the source plus subsequent changes to that object model due to the application of script. The other answers have discussed javascript, but the effect of the parser should not be discounted.

Consider this source:

<title>My Test Example</title>
<table>
  <tr>
    <td>Hello</td>
    <div>There</div>
</table>

The generated source (after adding some whitespace for clarity) is:

<html>
    <head>
         <title>My Test Example</title>
    </head>
    <body>
         <div>There</div>
         <table>
              <tbody>
                   <tr>
                         <td>Hello</td>
                   </tr>
              </tbody>
         </table>
    </body>
</html>

See how html, head, body and tbody opening and closing tags have been added by the parser, likewise the closing tr tag has been added. In addition, the div has been moved to before the table.

'view source' shows you the actual code in your file, as if you've opened the file in a text-editor.

'view generated source' shows you how the browser renders it on screen, after all the server side script (Javascript, PHP etc.) has been executed.

so if you're index.html had an empty div and an image.jpg was 'AJAXed' into this div using Javascript, then 'view source' will show you