js相关概念总结

1. CSS和JS在网页中的放置顺序是怎样的？
CSS必须是在html之前载入，所以放在head标签里。
JS放在CSS后面，既可以放在head标签里，也可以放在body标签之后

2. 解释白屏和FOUC

• 白屏问题： 如果把样式放在底部，对于IE浏览器，chrome等（css全部加载后再呈现,有可能等待长），在某些场景下(新窗口打开，刷新等)页面会出现白屏，而不是内容逐步展现。使用 @import 标签，即使 CSS 放入 link, 并且放在头部,也可能出现白屏。 对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件)。 但在加载 JavaScript 时，会禁用并发，并且阻止其他内容的下载. 所以把 JavaScript 放入页面顶部也会导致 白屏 现象.
• FOUC： Flash of Unstyled Content "无样式内容闪烁“：有些浏览器是边渲染边呈现，CSS放置body标签底部，会出现加载html结束后才一次性加载css样式，从而导致页面闪烁。
  我们了解当输入网址按回车后浏览器会向服务器发送请求，然后服务器返回页面给浏览器，浏览器边下载页面边解析边渲染。边下载页面边解析边渲染的过程:

1. 边下载边解析就是边下载html边构建DOM Tree;
2. 浏览器以user agent stylesheet(浏览器内置样式)为原料构建CSSOM Tree;
3. DOM Tree+CSSOM Tree构建出Render Tree，然后页面内容渲染出来;
4. 当解析到inline stylesheet 或 internal stylesheet时，马上刷新CSSOM Tree，CSSOM Tree或DOM Tree发生变化时会引起Render Tree变化;
5. 当解析到external stylesheet时就先加载，然后如internal stylesheet那样解析和刷新CSSOM Tree和Render Tree了。
   总结：上述步骤5中由于样式文件存在下载这个延时不确定的阶段，因此网络环境不好或样式资源体积大的情况下我们可以看到样式闪烁明显。

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

• 没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
• 有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
• 有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
• 如果脚本涉及少量DOM操作，则defer属性更优：因为html解析未完成前，可能DOM tree未形成，此时进行DOM操作，可能失败。
  　　如果是多个脚本，则其执行顺序为：
  　　　　a、多个defer脚本，根据HTML5的规定，会按照定义的加载顺序，按序执行；
  　　　　b、多个async脚本，由于加载完成立即执行，所以是乱序；因此其更适合脚本之间无依赖关系的情况。
• 然后从实用角度来说呢，首先把所有脚本都丢到 之前是最佳实践，因为对于旧浏览器来说这是唯一的优化选择，此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析。

4. 简述网页的渲染机制

1. 浏览器将从服务器获取的HTML文档构建成文档对象模型DOM(Document Object Model).

2. 样式将被载入和解析，构成层叠样式表模型CSSOM(CSS Object Model).

3. 在DOM和CSSOM之上，渲染树(rendering tree)将会被创建，代表一系列将被渲染的对象（这在Webkit内核中被称为renderer或者渲染对象render object，在Gecko内核中被称为框架frame）。渲染树映射除了不可见元素（例如或者含有display:none;的标签）外的所有DOM结构。每一段文本字符串都将划分在不同的渲染对象中，每一个渲染对象都包含了它相应的DOM对象以及计算后的样式。换句话讲，渲染树是DOM的直观表示。

4. 渲染树的每个元素包含的内容都是计算过的，它被称之为布局layout.浏览器使用一种流式处理的方法，只需要一次pass绘制操作就可以布局所有的元素（tables需要多次pass绘制，pass表示像素处理和顶点处理）。

5. 最后布局完成，渲染树将转化为屏幕上的实际内容，这一步被称为绘制painting.