js相关概念

一.CSS和JS在网页中的放置顺序是怎样的？
css放置在head中，js理论上可以放在网页上的任何地方,但是根据实际体验来讲,应该放在body的闭合标签前面。

二.解释白屏和FOUC。
1.白屏就是在IE浏览器里css放置在bodyhtml的标签后面，html的标签过多，加载太慢导致第一时间CSSOM树没有加载完成，然后没有和DOM树组合形成浏览界面变成白屏。
如果使用 @import 标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏。
因为脚本会阻塞后面内容的呈现和其后组件的下载
对于图片和CSS，在加载时会并发加载（如一个域名下同时加载两个文件）。但在加载JavaScript 时，会禁用并发，并且阻止其他内容的下载。所以把JavaScript放入页面顶部也会导致白屏现象。
2.FOUC是指firefox浏览器的渲染逻辑和chrome不太一样，一开始chrome是等待DOM树和CSSOM树渲染好一起形成页面结构才出来，而firefox每加载一次dom树就会重绘一次页面样式一直到所有内容完成为止，所以一般我们用link把css放在header内.

三.async和defer的作用是什么？有什么区别?
async和defer用于在不阻塞页面文档解析的前提下，控制脚本的下载和执行。
defer：用于开启新的线程下载脚本文件，并使脚本在文档解析完成后执行。
async：HTML5新增属性，用于异步下载脚本文件，下载完毕立即解释执行代码。

QQ截图20170420101759.jpg

2.两者的区别在于脚本加载完成之后何时执行，可以看出defer更符合大多数场景对应用脚本加载和执行的要求；

3.如果存在多个有defer属性的脚本，那么它们是按照加载顺序执行脚本的；而对于async，它的加载和执行是紧紧挨着的，无论声明顺序如何，只要加载完成就立刻执行，它对于应用脚本用处不大，因为它完全不考虑依赖。

四.简述网页的渲染机制.
1.解析html标签，构建DOM树
2.解析CSS标签，构建CSSOM标签
3.将DOM和CSSOM树结合形成渲染树
4.在渲染树的基础上进行布局，计算每个节点的几何结构。
5.把每个节点绘制到屏幕上