进阶任务1

css和js在网页中的放置顺序是怎样的?

  • 对于css:应该放在标签中,放在其他位置可能出现白屏或者-FOUC
  • 对于js:JS一般放置在标签之前,这是为了提高页面渲染的速度效率。

解释白屏和FOUC

进阶任务1_第1张图片
image.png

async和defer的作用是什么?有什么区别

进阶任务1_第2张图片
image.png

简述网页的渲染机制

通常分为以下几步

  • 解析HTML标签,构建DOM树
  • 解析CSS标签,构建CSSOM树
  • 把DOM和CSSOM结合成渲染树(render tree)
  • 在渲染树的基础上进行布局,计算每个节点的几何结构
  • 把每个节点绘制到屏幕上(painting)
    但是不同浏览器的渲染机制顺序不一样,对于常见的webkit内核的浏览器,它的渲染机制顺序如下图所示
进阶任务1_第3张图片
image.png

对于Mozilla的Gecko渲染引擎主流如下图所示

进阶任务1_第4张图片
image.png

你可能感兴趣的:(进阶任务1)