在动态html中呈现外部，内部，内联CSS样式之间的区别

Question

There is article about how browsers internal works . Under the 'Dynamic Pages' there is explanation of how dynamic css applied to web page using javascript.

Pages can change because of JavaScript or because of user interaction which triggers parts of the rendering process:

(Source: https://developer.mozilla.org/en/Introduction_to_Layout_in_Mozilla )

• If DOM elements are added or removed, the typical response of the browser is to follow the rendering process described earlier in almost serial order

• If the Style attribute on an element is changed, the style for the element needs to be recomputed, the page re-flown and re-painted

  • Browsers may optimize this by batching style re-computes by queuing them
  • However, scripts often read back changes that they have just made which requires the re-styling queue to be flushed
  • For better performance, make style changes as a batch and then read them in a batch so that the queue is flushed less frequently

• Some style changes are cheaper:

  • Changing size / location would not require style re-compute but only re-flowing and re-painting

  • Color change does not require re-flowing, but only re-painting

  • Scrolling also does not require re-computation, but only re-painting this is typically done incrementally and may not even require full repainting (but things like fixed background images would necessitate full repainting). So moving elements by scrolling programmatically can be faster than moving elements by modifying their style attribute

• Re-Flow - because of position or size changes - is typically recursive (root to leafs)

  • Some attribute changes in a child can trigger changes in the entire ancestry all the way up to the root. Example: Height changes

  • Some attribute changes in a parent can trigger changes in all the descendants right down to leaves. Example: Width changes

  • Browsers can detect that only a section of the tree may change and do re-flow only on that sub-tree

However I did not understand does same order of procedure applies (external, internal and inline) to all type of css styles changes when it is dynamically applied using javascript? Or it is some how different? If it is different which parts of the rendering process will be applied to external? internal? and inline?

Answer 1

if you use external css then flow would be the same as shown in your link. Otherwise if you use internal or inline css, ultimately CSS is in HTML page only so it would load in first step of HTML.

However it is not recommended to add styles inline or internal as it would take so much time to show your basic page too.

Answer 2

Yes. The procedure would be the same for the most part. but remember, only the styles on elements that have been updated will be repainted. You wouldn't necessarily have to repaint the entire page, only the areas that have changed.

It is always a nice practice to keep the styles separate from the mark-up. The HTML should live within it's file as the structure of the page, then the CSS should live within it's file(s) to maintain the control of the design in an external resource for easier editing. The same is true for scripting as well.