css和js在网页中的放置顺序是怎样的？
- 对于css：应该放在<head>标签中，放在其他位置可能出现白屏或者-FOUC
- 对于js：JS一般放置在</body>标签之前，这是为了提高页面渲染的速度效率。
解释白屏和FOUC
image.png
async和defer的作用是什么？有什么区别
image.png
简述网页的渲染机制
通常分为以下几步
- 解析HTML标签，构建DOM树
- 解析CSS标签，构建CSSOM树
- 把DOM和CSSOM结合成渲染树(render tree)
- 在渲染树的基础上进行布局，计算每个节点的几何结构
- 把每个节点绘制到屏幕上(painting)
但是不同浏览器的渲染机制顺序不一样，对于常见的webkit内核的浏览器，它的渲染机制顺序如下图所示
image.png
对于Mozilla的Gecko渲染引擎主流如下图所示
image.png
网友评论