浏览器页面渲染机制

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中代码之后作用相同)
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容