页面优化--css、js渲染及阻塞

142 阅读1分钟

css:

link

  • 1、link进来的样式,是由css解析器去解析,并且是同步解析;
  • 2、css解析器会阻塞页面的渲染(利用他可以避免闪屏);
  • 3、阻塞后面js语句的执行;
  • 4、不阻塞dom解析
  • 5、阻塞浏览器渲染

style

  • 1、style标签中的样式,是由html解析器进行解析;
  • 2、浏览器加载资源是异步的;
  • 3、页面style标签写的内部样式是异步解析的;
  • 4、不阻塞dom解析
  • 5、不阻塞浏览器渲染

js:

  • 1、阻塞后面js语句的执行;
  • 2、阻塞dom解析
  • 3、阻塞浏览器渲染

scc和js都不会阻塞浏览器加载资源

image.png