记12月26日作业

Q1:CSS和JS在网页中的放置顺序是怎样的?

  • CSS在网页中放置在网页的开头~中;
  • js在网页中一般放置在网页结尾,推荐放置在~中,原因是JS脚本会阻塞后面的内容呈现和阻塞其他组件的下载。

Q2:解释白屏和FOUC

  • 白屏:当JS放置在网页开头时,js脚本会阻塞后面内容的呈现,其他文档无法加载;只有在JS代码完全下载执行完毕后才能显示完整的文档内容,从而导致白屏问题的出现。
  • FOUC:因为浏览器的加载机制是先加载HTML文档,再加载CSS的文档内容,最后再整合重新绘制HTML的文档。若是将样式放到底部,那么页面就会出现FOUS现象。(FOUC:页面首先出现无样式的内容,再CSS加载完成后,突然显示样式内容)

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

  • 再没有async和defer时,浏览器会立即加载并执行指定的脚本。sync和defer的作用就是当脚本放置在中让脚本进行异步加载,不会阻止页面的渲染。
  • async:在加载和渲染后续文档元素时将和JS脚本的加载和执行并行进行,每一弍拥有async的JS脚本都会在他加载结束之后立即执行,不等待后续的文档,造成的后果是原先拥有次序的脚本,顺序将被打乱。
  • defer:在加载后续文档元素的过程将和JS脚本文件的加载并行进行,与async不同的是,其加载时的次序并不会被打乱。

Q4:简述网页的渲染机制

  1. 解析HTML标签,简历DOM树;
  2. 解析CSS标签,构建CSSOM树;
  3. 将DOM树和CSSOM树相结合构成render树;
    4.再根据render树进行布局,分别计算每个节点的结构;
  4. 再将每个节点都绘制到屏幕。

你可能感兴趣的:(记12月26日作业)