浏览器渲染过程

渲染过程

1. 解析HTML生成DOM树


2. 构建CSSOM树-无论是内联式，外联式，嵌入式引入的CSS样式都会被解析成CSSOM树，


3. 根据DOM树与CSSOM树生成另外一颗用于渲染的树-渲染树（Render tree）


4. Render树 布局-确定渲染树节点在屏幕上的显示位置


5. Render树 绘制-遍历渲染树并用UI后端层将每一个节点绘制出来

• HTML 的解析与 CSS的解析可以同步进行,


• HTML 的解析与 CSS的解析可能被js引擎线程所阻塞

解析html时 js css执行过程

• js脚本

  
  
  
  
  • js可能改变DOM树，
  
  
  • js会阻塞文档的解析，直到脚本执行完。开发者可以将脚本标识为defer，以使其不阻塞文档解析。html5增加了标记脚本为异步的选项，以使脚本的解析执行使用另一个线程
  
  
  
  



• css样式表

  
  
  
  
  • 样式表不改变DOM树，因此不需要阻塞文档
  
  
  • css样式表可能阻塞js
  
  
  • js脚本可能在文档的解析过程中请求样式信息，如果css样式还没有加载和解析，脚本将得到错误的值。
    
    
    
    • Firefox在存在样式表还在加载和解析时阻塞所有的脚本
    
    
    • Chrome只当脚本试图访问某些可能被未加载的样式表所影响的特定样式属性时才阻塞这些脚本。
    
    
    
    
  
  
  
  



• css加载或解析会堵塞dom的渲染但不堵塞dom的解析

  
  



• js加载或执行会堵塞dom的解析和渲染（由于Javascript有可能会更改DOM Tree和Render Tree，因此同时被阻塞）

  
  



• css加载或解析会阻塞后面js语句的执行

  
  

https://www.cnblogs.com/huanxiongs02/p/15515458.html

https://blog.csdn.net/c11073138/article/details/79856797