问答题
-
CSS和JS在网页中的放置顺序是怎样的？
答：
css：通过link标签将样式表放在<head>中。
js：放在<body>中尾部。如果放置在<head>中那么会导致页面延迟，因为浏览器必须等到js代码都被执行完成以后才开始呈现页面内容。 -
解释白屏和FOUC
答：
白屏与无样式内容闪烁(FOUC)是因为不同浏览器加载与显示页面的机制不同而造成的。
当把css样式放在底部或者使用@import方式引入样式时，一些浏览器例如chrome,他的加载和渲染机制是等css全部加载解析完后再渲染展示页面,而这个等待的时间就为白屏。另一些浏览器例如Firefox,他会在css未加载前先展现页面,等css加载后再重绘一次,这就造成了FOUC (无样式内容闪烁)。所以为了避免这些问题,最好使用LINK标签将样式表放在文档的HEAD中。 -
async和defer的作用是什么？有什么区别
答：
async和defer的作用是实现异步加载。-
<script src="script.js"></script>没有async和defer浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。 -
<script async src="script.js"></script>async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。 -
<script defer src="myscript.js"></script>defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
-
-
简述网页的渲染机制
答：- 解析 HTML 标签, 构建 DOM 树
- 解析 CSS 标签, 构建 CSSOM 树
- 把 DOM 和 CSSOM 组合成 渲染树 (render tree)
- 在渲染树的基础上进行布局, 计算每个节点的几何结构
-
把每个节点绘制到屏幕上 (painting)
Paste_Image.png
-
JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?
答：
六种数据类型：- 数值（number）：整数和小数（比如1和3.14）
- 字符串（string）：字符组成的文本（比如"Hello World"）
- 布尔值（boolean）：true（真）和false（假）两个特定值
- undefined：表示“未定义”或不存在，即此处目前没有任何值
- null：表示空缺，即此处应该有一个值，但目前为空
- 对象（object）：各种值组成的集合。
简单类型：Number,String,boolean,undefined,null。
复杂类型：object。
对象又分为三个子类型：狭义的对象（object）、数组（array）、函数（function）。 -
NaN、undefined、null分别代表什么?
答：
NaN：NaN含义是Not a Number，表示非数字，NaN和任何值都不相等，包括自己。
NaN == NaN; //false
null与undefined都可以表示“没有”
typeof undefined 返回"undefined"
typeof null 返回"object"
-
typeof和instanceof的作用和区别?
答：
typeof运算符可以返回一个值的数据类型。
abc 返回String
123 返回Number
true 返回boolean
函数 返回function
undefined返回undefined
[-] 返回object
{} 返回object
null 返回object
instanceof可以识别某个变量是否是某个对象的实例。返回true/false
#代码题
1. 完成如下代码判断一个变量是否是数字、字符串、布尔、函数 （难度*）
ps: 做完后可参考 underscore.js 源码中部分实现。
```
function isNumber(el){
// todo ...
return typeof(el) === 'number';
}
function isString(el){
//todo ...
return typeof(el) === 'string';
}
function isBoolean(el){
//todo ...
return typeof(el) === 'boolean';
}
function isFunction(el){
//todo ...
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
```
2. 以下代码的输出结果是?（难度**）
```
console.log(1+1); //结果：2 加法运算
console.log("2"+"4"); //结果："24" 字符串拼接
console.log(2+"4"); //结果："24" 任何与字符串相加都会变成字符串，数字转换成字符串然后进行拼接
console.log(+new Date());//结果：当前时间的时间戳。
console.log(+"4");//结果：4 字符串4转换成数字4
```
3. 以下代码的输出结果是? （难度***）
```
var a = 1;
a+++a;//a++优先级最高，所以是（a++）+a
//a++结果为1，然后a+1==2.所以1+2=3
typeof a+2;//typeof a优先计算，结果："number"，然后与2相加，结果为字符串"number2"
```
4. 遍历数组，把数组里的打印数组每一项的平方 （难度**）
```
var arr = [3,4,5]
for(var i=0; i<arr.length; i++){
console.log(arr[i]*arr[i])；
}
// 输出 9, 16, 25
```
5. 遍历 JSON, 打印里面的值 （难度**）
```
var obj = {
name: 'hunger',
sex: 'male',
age: 28
}
for(var i in obj){
console.log(i+":"+obj[i]);
}
// 输出 name: hunger, sex: male, age:28
```
6. 下面代码的输出是? 为什么 （难度***）
```
console.log(a);// undefined，由于变量提升，var a 在代码头部，所以a是一个已声明未赋值的量。
var a = 1;
console.log(a);1，由于变量a已经被赋值1，所以输出1
console.log(b);由于没有声明变量b，所以会报错。
```
网友评论