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

• 一般情况下CSS被放置在head里面，因为渲染页面的话，CSS和html页面的内容是同时加载的.
• JS被放置在body内容之后加载，因为JS的加载会阻止加载其他的内容.

2.解释白屏和FOUC.

• 不同的浏览器对于CSS和HTML的处理方式不一样，有的是等待CSS加载完成之后，对HTML元素进行渲染和展示。此时容易出现白屏问题
• 有的是先对HTML元素进行展示，然后等待CSS加载完成后重新对样式进行修改。此时容易出现FOUC无样式内容闪烁
• 如果把CSS样式放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现，如果使用 @import标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏。
• 如果把CSS样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现FOUC现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于Firefox会一直表现FOUC 。
• 如果把js文件放在头部，脚本会阻塞后面内容的呈现，脚本会阻塞其后组件的下载，出现白屏问题。

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

1. 默认引用 script:<script type="text/javascript" src="x.min.js"></script>
   当浏览器遇到 script 标签时，文档的解析将停止，并立即下载并执行脚本，脚本执行完毕后将继续解析文档。
2. async模式 <script type="text/javascript" src="x.min.js" async="async"></script>
   当浏览器遇到 script 标签时，文档的解析不会停止，其他线程将下载脚本，脚本下载完成后开始执行脚本，脚本执行的过程中文档将停止解析，直到脚本执行完毕。
   3.defer模式 <script type="text/javascript" src="x.min.js" defer="defer"></script>
   　　当浏览器遇到 script 标签时，文档的解析不会停止，其他线程将下载脚本，待到文档解析完成，脚本才会执行。
   区别:所以async和defer的最主要的区别就是async是异步下载并立即执行，然后文档继续解析，defer是异步加载后解析文档，然后再执行脚本.

5.简述网页的渲染机制。

Paste_Image.png

1）浏览器会解析三个东西：
一个是HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。
CSS，解析CSS会产生CSS规则树。
Javascript，脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree.

2）解析完成后，浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。注意：
Rendering Tree 渲染树并不等同于DOM树，因为一些像Header或display:none的东西就没必要放在渲染树中了。
CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element。也就是DOM结点。也就是所谓的Frame。
然后，计算每个Frame（也就是每个Element）的位置，这又叫layout和reflow过程。
1）浏览器会解析三个东西：
一个是HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。
CSS，解析CSS会产生CSS规则树。
Javascript，脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree.

2）解析完成后，浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。注意：
Rendering Tree 渲染树并不等同于DOM树，因为一些像Header或display:none的东西就没必要放在渲染树中了。
CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element。也就是DOM结点。也就是所谓的Frame。
然后，计算每个Frame（也就是每个Element）的位置，这又叫layout和reflow过程。

3）最后通过调用操作系统Native GUI的API绘制。

5.JavaScript 定义了几种数据类型?哪些是简单类型?哪些是复杂类型?
数据类型包含,一共有5种简单类型和1种复杂类型
undefined （简单）
null （简单）
boolean （简单）
number （简单）
string （简单）
object（复杂）
6.NaN、undefined、null分别代表什么?
NaN:not a number 是一个特殊的数值。
undefined:var 声明变量，但是没有对其加以赋值的时候，变量的值是。undefined。
null:表示一个空对象指针。
7.typeof和instanceof的作用和区别?
instanceof和typeof都能用来判断一个变量是否为空或是什么类型的变量
在变量和值上调用typeof，将返回一个字符串，这个字符串标示了这个变量或值的类型。如果这个变量或值是一个引用类型将会返回"object"。

代码题

1.完成如下代码判断一个变量是否是数字、字符串、布尔、函数 （难度）

Paste_Image.png

Paste_Image.png

3.以下代码的输出结果是? （难度***）

Paste_Image.png

4.遍历数组，把数组里的打印数组每一项的平方 （难度**）

Paste_Image.png

5.遍历 JSON, 打印里面的值

Paste_Image.png

6.下面代码的输出是? 为什么

Paste_Image.png