浏览器页面渲染机制

1 解析 html 标签 构建dom树
2 解析css:

  • css脚本有两种引入方式 link 标签方式和@import方式。
  • link在引入css时,会在页面加载的同时进行加载,而@import则需要在页面加载完成之后才加载。
  • link是XHTML标签无兼容性问题,@import在低版本浏览器中不支持
  • link还支持js控制dom的方式改变样式,@import不支持。

3 在渲染树的基础上进行布局,计算每个节点的几何结构。
4 把节点绘制到屏幕上。

在html中css的引入一般放在header标签中,而js的引入放在body中代码的底部,相对于html与css js脚本的加载和执行是阻塞的,会影响页面的加载速度

script标签中有sync和defer两个属性,它们都能起到使js脚本异步加载的作用,但两者之间还有一定的区别:

  • sync表示页面加载过程中不影响js脚本的加载与执行(加载执行都是异步);
  • defer表示js脚本异步加载,但是需要等到页面加载完成之后才能执行(与放在body中代码之后作用相同)

推荐阅读更多精彩内容