记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. 再将每个节点都绘制到屏幕。