在动态html中渲染外部，内部，内联css样式之间的区别

Question

有关于浏览器内部works如何的文章。在“动态页面”下，有关于如何使用javascript将动态css应用于网页的说明。

  

由于JavaScript或因触发部分渲染过程的用户交互，页面可能会发生变化：

  

（来源：   https://developer.mozilla.org/en/Introduction_to_Layout_in_Mozilla）

     

  

• 如果添加或删除DOM元素，浏览器的典型响应是遵循前面描述的渲染过程   连续订单

  

• 如果元素上的Style属性发生更改，则需要重新计算元素的样式，重新绘制并重新绘制页面

       
    
  • 浏览器可以通过排队样式重新计算来优化这一点
    
  • 但是，脚本经常会回读他们刚才所做的更改，这需要刷新重新样式队列
    
  • 为了获得更好的性能，请将样式更改为批处理，然后批量读取它们，以便更少地刷新队列
    
  

• 某些款式更改更便宜：

       
    

  • 更改尺寸/位置不需要重新计算样式，只需重新流动和重新绘制

    

  • 颜色变化不需要重新流动，只需重新绘制

    

  • 滚动也不需要重新计算，但只是重新绘制这通常是逐步完成的，甚至可能不会   需要完全重新绘制（但固定的背景图像会像   需要完全重新粉刷）。所以通过滚动来移动元素   以编程方式可以比通过修改移动元素更快   他们的风格属性

    
  

• Re-Flow - 由于位置或大小的变化 - 通常是递归的（从根到叶子）

       
    

  • 子项中的某些属性更改可以触发整个祖先一直到根的更改。示例：高度更改

    

  • 父级中的某些属性更改可以触发所有后代中的更改，直至叶子。示例：宽度更改

    

  • 浏览器可以检测到只有树的一部分可能会发生变化并仅在该子树上重新流动

    
  

但是我不明白当使用javascript动态应用时，相同的程序顺序是否适用于所有类型的css样式更改（外部，内部和内联）？或者它有些不同？如果不同，渲染过程的哪些部分将应用于外部？内部？和内联？

Answer 1

如果您使用外部css，则流程将与链接中显示的相同。否则，如果您使用内部或内联css，最终CSS只在HTML页面中，因此它将在HTML的第一步加载。

但是不建议在内联或内部添加样式，因为它也需要花费很多时间来显示您的基本页面。

Answer 2

是。大多数情况下，程序都是相同的。但请记住，只有已更新元素的样式才会重新绘制。您不一定要重新绘制整个页面，只需重新绘制已更改的区域。

将样式与标记分开是一种很好的做法。 HTML应该作为页面结构存在于其文件中，然后CSS应该存在于其文件中，以便在外部资源中保持对设计的控制，以便于编辑。脚本也是如此。