1. CSS和JS在网页中的放置顺序是怎样的？
- 理论上来说，CSS和JS的放置位置并没有严格要求，不过因为浏览器的工作方式原因，出于高性能考虑，通常，CSS放在html文档的head标签中，JS放在文档的</body>标签之前。
- 原因：浏览器会按照从上到下的顺序解析文档内容，而且默认在解析到javascript代码时，其他文档无法加载或显示，只有等待javascript代码下载并执行完毕才能显示文档。这样就造成一些问题：
- 如果将JS代码放在head元素中，在浏览器加载JS代码时，文档内容不会显示，会等待浏览器加载JS代码完成才能显示；
- 如果放在文档中随便一个位置，那么有可能JS代码比文档提前执行，而一般用户希望文档全部加载完成才执行JS。
2. 解释白屏和FOUC
-
白屏：由于DOM的存在，以及JS语言作为脚本语言的特点，当把CSS或JS文件放在html文档不同位置时，可能会出现一些问题，白屏问题就是其中一种。
- CSS：CSS和HTML文档能够并发同步加载，但是当把CSS文件放在底部时，部分浏览器会出现白屏，所以正常情况CSS要放在head标签中；而如果使用@import引入CSS文件，那么即使放在head标签中也可能会出现白屏。
- JS：JS作为脚本语言，在浏览器解析到JS时会加载JS，同时禁止HTML文档的下载和显示，即如果不做属性处理，正常情况下JS会影响文档的显示出现白屏问题，所以建议将JS放在文档</body>标签之上。
- FOUC(Flash Of Unstyled Content)：无样式文本闪烁，顾名思义，当把CSS样式表放在文档的不同部位时，会有不同显示效果，如果放在文档底部，在加载完文档之后才应用样式，每一层DOM都会加载，故而发生文档闪烁。其中常见于IE浏览器，而这种CSS放在底部的情况，Firefox浏览器会一直闪烁。
3. async和defer的作用是什么？有什么区别
async和defer是<script>标签的两个属性，用于指定脚本文件的加载方式。正常情况下，浏览器从上到下解析HTML文件，当解析到<script>标签的时候会立即下载脚本并执行，只有当加载执行脚本之后浏览器才能继续解析<script>标签之后的文档内容，而async和defer属性就是改变这种加载方式的作用。
-
async：表示应该立即下载脚本，不影响页面其他操作诸如其他脚本的下载，
async属性会使加载和渲染文档元素的过程和JS脚本加载和执行并行进行（即异步）。只对外部脚本文件有效。 - defer：表示脚本可以延迟到文档完全被解析之后再执行。只对外部脚本文件有效，IE7及更早版本对嵌入脚本也支持这个属性。
-
区别：
- async：不保证按照指定顺序执行JS脚本，第二个JS可能会比第一个JS文件先执行。所以多个JS文件若设置此属性应避免依赖。
<<script src="script-1.js"></script>
<<script src="script-2.js"></script>
- defer：脚本延迟到文档完全解析渲染后按照顺序执行。
4. 简述网页的渲染机制
- 解析HTML标签，构建DOM树
- 解析CSS文件，构建CSSOM渲染树
- DOM树和CSSOM树组合，形成渲染树（render tree）
-
Render树构建好了之后，将会执行布局过程，它将确定每个节点在屏幕上的确切坐标。再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。即在渲染树的基础上进行布局, 计算每个节点的几何结构把每个节点绘制到屏幕上 (painting)
网页渲染机制
5. JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?
Javascript定义了5种简单数据类型，1种复杂数据类型
- 简单数据类型：
- undefined：未定义或不存在；
<script>
var test1;
alert(test1);
alert(test2);
</script>
代码中声明了test1变量，但并未初始化，而未声明test2，效果如下：
undefined
只显示一次undefined，不同浏览器处理方式不同，有些不会无视而是显示错误。这就说明了：未初始化的声明变量值为undefined，未声明变量没有值，会显示错误，但是有一个现象如下：
<script>
var test1;
alert(typeof test1);
alert(typeof test2);
</script>
对未声明变量使用typeof操作时，会显示类型为undefined：
typeof对未声明变量的操作
这也就是undefined的含义：未定义或不存在。
- null：空对象指针，虽然是单独的数据类型，但是用typeof操作时，显示其为对象类型：
<script>
alert(typeof null);
</script>
-
boolean：布尔值，即true或false；两者就是布尔值，和0或1不是一回事。对于平时的0对应false，1对应true那是用转型函数boolean()实现的：
- number：
- 整数：十进制，八进制（0开头），十六进制（0x开头）；
- 浮点数：带小数点的数，对于极值用科学计数法表示，例如var floatnum = 3e-17，默认情况带有6个0的浮点数会自动转换为e表示法；0.1+0.2=0.30000000000000004这是由于IEEE754浮点计算通病所致，所以不能用浮点数进行条件测试；
- NaN（not a number）：意为非数值，但是其类型本身就是数值；
<script>
alert(0 / 0);
alert(2 / 0);
alert(-2 / 0);
</script>
alert(0 / 0)
alert(2 / 0)
alert(-2 / 0)
可以看出和数学中的概念是如出一辙的；
NaN不等于本身：
<script>
if(NaN == NaN) {
alert("NaN等于本身");
} else {
alert("NaN不等于本身");
}
</script>
NaN不等于本身
NaN的任何操作都返回NaN：
<script>
alert(NaN / 10);
</script>
NaN任何操作都返回NaN
ifNaN()函数：意为是否不是数值，除了NaN本身和不带数字的字符串是true，其他都是false，因为函数会自动将数据类型转型为number并判断是否不是数值。
- string：字符串类型，一旦创建值就不变，要改变其所在变量值，需要先销毁字符串然后填充新字符串；
-
object：对象类型，较为复杂，意为一组数据和功能的集合，包含属性和方法。
还有诸多的知识，但是属于细节，在此不再赘述，采用思维导图进行整理如下：
数据类型
链接：http://pan.baidu.com/s/1nuED7qp 密码：1oom
6. NaN、undefined、null分别代表什么?
在上面的数据类型介绍中已经详细介绍，在此简单再回顾下：
- NaN：意为非数值，不等于任何值包括其本身；
-
undefined：意为未定义或不存在，当代码并没有返回值时，会显示
undefined，而不是错误； -
null：是空对象指针，一种简单数据类型，但是用
typeof操作时显示其为object类型；这是一个历史遗留问题。在 JavaScript 最初的实现中，JavaScript 中的值是由一个表示类型的标签和实际数据值表示的。对象的类型标签是0。由于null代表的是空指针(大多数平台下值为0x00)，因此，null的类型标签也成为了0，typeof null就错误的返回了object. -
另外，null、undefined是等于自身的。null==undefined，但不严格相等：
null == undefined
7. typeof和instanceof的作用和区别?
typeof是检测给定数据的数据类型，而instanceof检测给定数据的对象类型。
JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空，或者是什么类型的。但它们之间还是有区别的：
- typeof：是一个一元运算符，放在运算数之前，运算数可以是任何类型。它会返回一个字符串显示数据类型；
-
instanceof：是一个二元运算符，用于判断某个变量是否为对象的实例：
instanceof
可以看出，数组a进行instanceof操作时，不仅会显示为Array的实例，同时也是Object的实例，因为Array是Object的子集。
谈到 instanceof 我们要多插入一个问题，就是 function 的 arguments，我们大家也许都认为 arguments 是一个 Array，但如果使用 instaceof 去测试会发现 arguments 不是一个 Array 对象，尽管看起来很像。
<script>
var a = new Array();
if(a instanceof Object) {
alert(true);
} else {
alert(false);
}
if(window instanceof Object) {
alert(true);
} else {
alert(false);
}
alert(typeof window);
</script>
返回结果
代码有3个弹窗，分别是true，true，object，并且在IE11测试下效果相同，说明，instanceof在新版主流浏览器中，即是指ES的对象类型，也是指DOM的对象模型。
代码：
1. 完成如下代码判断一个变量是否是数字、字符串、布尔、函数 （难度*）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task16-1</title>
</head>
<body>
<script>
function isNumber(el){
if(typeof el == "number") {
return true;
} else {
return false;
} // todo ...
}
function isString(el){
if(typeof el == "string") {
return true;
} else {
return false;
}//todo ...
}
function isBoolean(el){
if(typeof el == "boolean") {
return true;
} else {
return false;
}//todo ...
}
function isFunction(el){
if(typeof el == "function") {
return true;
} else {
return false;
}//todo ...
}
var a = 2,
b = "jirengu",
c = false;
alert( isNumber(a) ); //true
alert( isString(a) ); //false
alert( isString(b) ); //true
alert( isBoolean(c) ); //true
alert( isFunction(a)); //false
alert( isFunction( isNumber ) ); //true
</script>
</body>
</html>
2. 以下代码的输出结果是?（难度**）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task16-2</title>
</head>
<body>
<script>
console.log(1+1);
console.log("2"+"4");
console.log(2+"4");
console.log(+new Date()); // 1971年至今的毫秒数
console.log(+"4");
</script>
</body>
</html>
代码2
3. 以下代码的输出结果是? （难度***）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task16-3</title>
</head>
<body>
<script>
var a = 1;
console.log(a+++a);
console.log(typeof a+2); // typeof先执行，+连接前后运算数
</script>
</body>
</html>
代码3
4. 遍历数组，把数组里的打印数组每一项的平方 （难度**）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task16-4</title>
</head>
<body>
<script>
var arr = [3,4,5];
for(var i = 0; i < arr.length; i++) {
console.log(arr[i] * arr[i]);
}
</script>
</body>
</html>
代码4
5. 遍历 JSON, 打印里面的值 （难度**）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task16-5</title>
</head>
<body>
<script>
var obj = {
name: 'hunger',
sex: 'male',
age: 28
}
for(var a in obj) {
console.log(a + ":" + obj[a])
}//todo ...
// 输出 name: hunger, sex: male, age:28
</script>
</body>
</html>
代码5
6. 下面代码的输出是? 为什么 （难度***）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task16-6</title>
</head>
<body>
<script>
console.log(a); //undefined，变量提升
var a = 1;
console.log(a); //1
console.log(b); //错误，未声明变量
</script>
</body>
</html>
代码6
原因：在JS脚本中，在本身作用域内的变量会提升到代码最上方，但是其值不会跟随提升，所以第一个显示undefined意为“未定义”，而代码中未声明b，所以显示错误。
本文版权归本人和饥人谷所有，转载请注明来源，谢谢
