keywords: 白屏、FOUC、asyns、defer、渲染机制、JavaScript数据类型、。
-
CSS和JS在网页中的放置顺序是怎样的？
css一般放在head标签内，并用link引入；
js一般放在body底部。
参考：
高性能web站点的14条原则
-
解释白屏和FOUC
如果把样式放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现。（已过时）
如果使用 @import 标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏 。
FOUC (Flash of Unstyled Content) 无样式内容闪烁：如果把样式放在底部,浏览器会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).
白屏：
浏览器会延迟渲染在script标签后的内容，直到script完成下载、解析和执行。但更重要的是，在scripts完成下载和执行前，浏览器会阻塞或限制script之后的html内容的下载，增加round-trip times（简称RTT，指数据在网络上发送并得到回应所用的时间）。
如果把script放在顶部，而css放在底部，页面就会在script执行前保持空白，即白屏。
将样式表放在文档底部，页面会白屏或FOUC（根据浏览器的处理方式的不同，二者选一）。
FOUC：
样式表被放在了文档底部，当页面逐步加载时，文字首先显示，然后是图片。最后，在样式表 正确地下载并解析之后，已经呈现的文字和图片要用新的样式重新绘制，这就是“无样式内容闪烁”。截至目前，firefox和ie都会出现这种现象，chrome不会。
-
async和defer的作用是什么？有什么区别?
<script src="script.js"></script>
没有defer或async，浏览器会立即加载并执行指定的脚本，不会等待后续元素载入。
<script async src="script.js"></script>
使用async，加载和渲染后续文档元素的过程将和script.js的加载和执行并行（异步）。只对外部脚本文件有效。
<script defer src="script.js"></script>
使用defer，加载后续文档元素的过程将和script.js的加载和执行并行（异步），与async不同的是，script.js在所有元素解析完成之后，DOMContentLoaded事件触发之前完成。
-
简述网页的渲染机制
1、 解析 HTML 标签, 构建 DOM 树
2、 解析 CSS 标签, 构建 CSSOM 树
3、 把 DOM 和 CSSOM 组合成 渲染树 (render tree)
4、 在渲染树的基础上进行布局, 计算每个节点的几何结构
5、 把每个节点绘制到屏幕上 (painting)
-
JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?
JavaScript语言的每一个值，都属于某一种数据类型。JavaScript的数据类型，共有六种。（ES6新增了第七种Symbol类型的值）
- 数值（number）：整数和小数（比如1和3.14）
- 字符串（string）：字符组成的文本（比如"Hello World"）
- 布尔值（boolean）：true（真）和false（假）两个特定值
- undefined：表示“未定义”或不存在，即此处目前没有任何值
- null：表示空缺，即此处应该有一个值，但目前为空
- 对象（object）：各种值组成的集合
5种简单类型(基本数据类型)：Undefined、Null、Boolean、Number和String。
1种复杂类型：Object。
-
NaN、undefined、null分别代表什么?
NaN含义是Not a Number，表示非数字，NaN和任何值都不相等，包括自己。
NaN == NaN; //false
null和undefined都可以表示“没有”，在if语句中，它们都会被自动转成false，但它们在用法上存在区别。
null表示空值，即该处的值现在为空。典型用法是：
1、作为函数的参数，表示该函数的参数是一个没有任何内容的对象。
2、作为对象原型链的终点。
undefined表示不存在值，即此处目前不存在任何值。典型用法是：
1、变量被声明了，但没有赋值时，就等于undefined。
2、调用函数时，应该提供的参数没有提供，该参数等于undefined。
3、对象没有赋值的属性，该属性的值为undefined。
4、函数没有返回值时，默认返回undefined。
var i;
i//undefined
function f(x){console.log(x)}
f()//undefined
var o = new Object();
o.p//undefined
var x=f();
x//undefined
-
typeof和instanceof的作用和区别?
typeof运算符可以返回一个值的数据类型，可能有以下结果。
（1）原始类型
数值、字符串、布尔值分别返回number、string、boolean。
typeof 123//'number'
typeof '123'//'string'
typeof false//'boolean'
（2）函数
函数返回function
function f() {}
typeof f
//'function'
（3）undefined
undefined返回undefined
typeof undefined
//'undefined'
利用这一点，typeof可以用来检查一个未被声明的变量而不报错。
（4）其他
除此以外，其他情况都返回object。
typeof windows // 'object'
typeof {} //'object'
typeof [] //'object'
typeof null //'object'
instanceof运算符返回一个布尔值，表示一个对象是否由某个构造函数创建。
var v = new Vehicle();
v instanceof Vehicle // true
instanceof运算符左边是实例对象，右边是构造函数。
在Javascript中，只要是对象，就有对应的构造函数。因此，instanceof运算符可以判断值的类型。与typeof不同的是，instanceof运算符只能用于对象，不适合用于原始类型的值。
var s = 'hello';
s instanceof String //false
var s = new String('hello');
s instanceof String //true
上述代码中，字符串不是String对象的实例（因为字符串不是对象），所以返回false，而字符串对象是String对象的实例，所以返回true。
此外，undefined和null不是对象，所以instanceof 运算符总是返回false。
undefined instanceof Object //false
null instanceof Object //false
如果存在继承关系，也就是说，a是A的实例，而A继承了B，那么instanceof运算符对A和B都返回true。
var a =[];
a instanceof Array // true
a instanceof Object //true
上面代码显示，a是一个数组，所以它是 Array的实例；同时，Array继承Object，所以a也是Object的实例 。
利用instanceof运算符，还可以巧妙解决，调用构造函数时，忘加new命令的问题。
function Fubar (foo, bar) {
if (this instanceof Fubar) {
this._foo = foo;
this._bar = bar;
} else {
return new Fubar(foo, bar);
}
}
上面代码使用instanceof运算符，在函数体内部判断this关键字是否为构造函数Fubar的实例。如果不是，就表明忘了加new命令。
区别：typeof 是判断对象的数据类型，而instanceof是用来验证对象是否是某个函数创建的实例。
参考：
JavaScript标准参考教程
代码
-
完成如下代码判断一个变量是否是数字、字符串、布尔、函数 （难度*）
function isNumber(el){
return typeof el ==='number';
}
function isString(el){
return typeof el ==='string';
}
function isBoolean(el){
return typeof el ==='boolean';
}
function isFunction(el){
return typeof el ==='function';
}
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
-
以下代码的输出结果是?（难度**）
console.log(1+1);
console.log("2"+"4");
console.log(2+"4");
console.log(+new Date());
console.log(+"4");
//2 数值相加
//"24" 字符串拼接
//"24" 数字与字符串相加，数字转换成字符串
//1467877385172 将返回的当前日期、时间转换成毫秒， '1970/01/01 00:00:00' 为起点
//4 字符串4转换成数字4
-
以下代码的输出结果是?
var a = 1;
a+++a; //先执行a++，得到1，再与a相加，得到3
typeof a+2; //typeof a 优先级最高，得到字符串number
//"number2"
-
遍历数组，把数组里的打印数组每一项的平方
var arr = [3,4,5]
for (var i=0 ;i<arr.length;i++) {
console.log(arr[i]*arr[i])
}
// 输出 9, 16, 25
-
遍历 JSON, 打印里面的值 （难度**）
var obj = {
name: 'hunger',
sex: 'male',
age: 28
}
for (var val in obj) {
console.log(val+':'+ obj[val])
}
//todo ...
// 输出 name: hunger, sex: male, age:28
-
下面代码的输出是? 为什么 （难度***）
console.log(a); //undefined
var a = 1; //变量提升
console.log(a); //1
console.log(b); //ReferenceError: b is not defined
