任务16-js入门

1、CSS和JS在网页中的放置顺序是怎样的？

CSS：通常，将CSS写成一个单独的CSS文件，然后通过link引入进来，放在head标签中，此外，通过单独的一个CSS文件便于维护。

javascript：一般放在body标签内的最后，通常会优先选择显示内容，因为javascript是脚本语言，在遇到script标签的时候会解析脚本，由此带来会延迟DOM树的构建以及后面的渲染，所以屏幕可能会呈现短时间的白屏，影响用户体验，所以通常把script标签放在最后。

2、解释白屏和FOUC

白屏：

1.如果JS放置head中，在加载js文件的过程中，会导致一些时间的白屏，因为会先停止DOM树和CSSOM的构建，会导致白屏

2.使用了@import标签，搜索了一下，放置style标签中，引入了一个CSS文件，导致加载另外一个CSS文件，所以会导致白屏。

3.如果把CSS样式放在底部，对于IE浏览器，在某些场景下（新窗口打开，刷新等）页面会等到html和css加载完成后再进行渲染，造成页面内容不会逐步展现。
总之，CSS和Html建立DOM树的过程时间太长，就会导致白屏。

FOUC：

在 Firefox 浏览器中，渲染不会等待 CSS 完全加载后才开始，因此如果 CSS 文件没有放在页面开始，就会出现先加载了无样式的页面，在 CSS 出现后又刷新为有样式的页面，因此而出现的就是FOUC (Flash of Unstyled Content，无样式内容闪烁)现象。

此外，如果把样式放在底部，对于IE浏览器，在某些场景下（点击链接，输入URL，使用标签进入等），会出现FOUC现象（逐步加载无样式内容，等CSS加载后页面突然展现样式），对于FireFox会一直表现出FOUC。

3、async和defer的作用是什么？有什么区别

当浏览器碰到 script 脚本的时候：

<script src="script.js"></script>
没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
<script async src="script.js"></script>
有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
<script defer src="myscript.js"></script>
有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
然后从实用角度来说呢，首先把所有脚本都丢到 </body> 之前是最佳实践，因为对于旧浏览器来说这是唯一的优化选择，此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析。

4、简述网页的渲染机制?

1.解析HTML标签，构建DOM树，在此过程中，会遍历标签中的元素，直到没有为止，才会进行下个HTML标签的解析。

2.解析CSS样式，构建CSSOM树。

3.将DOM树和CSSOM树结合起来，构建渲染树。

4.在渲染树的基础上进行布局，计算每个节点的几何结构

5.把每个节点绘制到屏幕上，完成渲染