问答
1.CSS和JS在网页中的放置顺序是怎样的？
一般把css放在<head>标签内，<title>标签的后面；js放在<body>标签的尾部。这样做可以避免白屏和FOUC出现。
2.解释白屏和FOUC
- 白屏：1、对于有些浏览器，浏览器先把样式加载完全，才渲染页面，展示页面的内容。对于这样的浏览器，把
<link href='xxx" rel= "stylesheet" type="text/css>标签放在<body>尾部时，页面从上到下开始加载。如果<body>前面部分的内容很复杂，很长，需要加载一段时间，然后外联的css加载还需要一段时间，这样在等待页面加载的过程中，页面上没有内容显示，页面会出现白屏。
2、把js文件放在页面头部，也会导致页面出现白屏。页面从上到下加载。js文件是不能并行加载（即同一时间只能加载这一个js文件，其它的js文件、样式等都不能加载）的，而且加载后立即执行。js执行时，页面可能还没有表现出样式，出现白屏。 - FOUC：是Flash of Unstyled Content的缩写，译为无样式闪烁。对于有些浏览器是先把内容显示出来，再用外部css文件改变内容的样式。这时如果把css文件放在页面尾部，则页面先显示初始内容，然后加载css，一边加载一边改变页面的样式，页面的背景、字体等可能会有较大变化，页面会出现无样式闪烁。
举例：
如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于 Firefox 会一直表现出 FOUC .
3.async和defer的作用是什么？有什么区别
js文件在被加载时，有加载后立即执行的特点。“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。这样把js放在页面头部，会出现白屏。
可以在写入js文件时加上async或者defer避免这种情况。
<script async src="script.js"></script>
表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。但这种方法只对外部脚本文件生效。
<script defer src="script.js"></script>
表示脚本可以延迟到文档完全被解析和显示之后再执行。有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。只对外部脚本文件有效。 IE7 及更早版本对嵌入脚本也支持这个属性。
区别：
- defer:脚本延迟到文档解析和显示后执行，有顺序。
- async:不保证顺序，如果
<script async src="example1.js"></script>
<script async src="example2.js"></script>
两个脚本都设置async,第二个脚本也可能在第一个脚本之前执行。
4.简述网页的渲染机制
1.解析 HTML 标签, 构建 DOM 树
2.解析 CSS 标签, 构建 CSSOM 树
3.把 DOM 和 CSSOM 组合成 渲染树 (render tree)
4.在渲染树的基础上进行布局, 计算每个节点的几何结构把每个节点绘制到屏幕上 (painting)
图示
1.参考 课件
2.参考浏览器的渲染原理简介
5.JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?
number，undefined，blooean,string,null,object六种数据类型。
简单类型：
| 名称 | 介绍 |
|---|---|
| number | 数值类型，包括整数和小数，比如4,3.3。 |
| boolean | 布尔型，有两个值true和false。 |
| string | 字符串型，放在引号中，比如"abc"。 |
| null | 表示空缺，即此处应该有一个值，但目前为空。 |
| undefined | 表示“未定义”或不存在，即此处目前没有任何值。 |
复杂类型：object，对象，各种值组成的集合。包括数组，函数，狭义的对象。
6.NaN、undefined、null分别代表什么?
1.NaN代表not a number,非数字。不等于任何数包括它自身。
当数字运算没有意义或者不合法时可以得到NaN。
举例:
结果是NaN的值
-
NaN不等于任何值，包括它本身。
- 任何涉及NaN的运算都会返回NaN。
2.undefined表示“未定义”或不存在，即此处目前没有任何值。
典型用法是：
（1）变量被声明了，但没有赋值时，就等于undefined。
（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。
3.null表示空缺， 表示一个值被定义了，定义为“空值”。
典型用法是：
（1） 作为函数的参数，表示该函数的参数不是对象。
（2） 作为对象原型链的终点。
null还有一个特点typeof null的值是object。
这是一个历史遗留问题。在 JavaScript 最初的实现中，JavaScript 中的值是由一个表示类型的标签和实际数据值表示的。对象的类型标签是0。由于 null代表的是空指针(大多数平台下值为0x00)，因此，null的类型标签也成为了0，typeof null
就错误的返回了"object". -
NaN,null和undefined的相似点：
都可以当做false处理函数。
- null和undefined还相等。
null、undefined
可以看出，null、undefined是等于自身的。null==undefined，但不严格相等。
7.typeof和instanceof的作用和区别?
typeof和instanceof都可以判断数据类型。
区别在于：
typeof对于简单类型数值、字符串、布尔值分别返回number、string、boolean；undefined返回undefined。null返回object。
对于object（对象），除了函数返回function外，其它返回object。
对于数组、其它狭义的对象，可以用instanceof区分开。instanceof用来判断某个变量是否是某个对象的实例。
instanceof用来检测对象的类型(也可叫做引用类型。包含Object、Array、Date、RegExp、Function、基本包装类型(含Boolean、Number、String))。
numberValue是number基础数据类型，不属于任何引用类型。
numberObject是object基础数据类型，属于Number引用类型(所有引用类型都从Object引用类型继承而来)。
代码题
1.完成如下代码判断一个变量是否是数字、字符串、布尔、函数 （难度*）
ps: 做完后可参考 underscore.js 源码中部分实现
function isNumber(el){
// todo ...
}
function isString(el){
//todo ...
}
function isBoolean(el){
//todo ...
}
function isFunction(el){
//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
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>任务16-1</title>
</head>
<body>
<script>
function isNumber(el){
return (typeof el == 'number');// todo ...
}
function isString(el){
return (typeof el == 'string');//todo ...
}
function isBoolean(el){
return (typeof el == 'boolean');//todo ...
}
function isFunction(el){
return (typeof el == 'function'); //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.以下代码的输出结果是?（难度**）
console.log(1+1);//2
console.log("2"+"4");//24
console.log(2+"4"); //24
console.log(+new Date());//从1971年到现在的毫秒数。
console.log(+"4");//4
3.以下代码的输出结果是? （难度***）
var a = 1;
a+++a;
typeof a+2;//number2
4. 遍历数组，把数组里的打印数组每一项的平方 （难度**）
var arr = [3,4,5]
// todo..// 输出 9, 16, 25
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var arr=[3,4,5];
for(var i=0; i<arr.length;i++)
document.write(arr[i]*arr[i]+" ");
</script>
</body>
</html>
5.遍历 JSON, 打印里面的值 （难度**）
var obj = { name: 'hunger', sex: 'male', age: 28}
//todo ...
// 输出 name: hunger, sex: male, age:28
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var obj = {
name: 'hunger',
sex: 'male',
age: 28
}
//todo ...
// 输出 name: hunger, sex: male, age:28
for(var a in obj){
document.write(a+':'+obj.name+" ");
}
</script>
</body>
</html>
6.下面代码的输出是? 为什么 （难度***）
console.log(a);//undefined,变量提升。
var a = 1;
console.log(a);//1
console.log(b);//没被定义
JavaScript引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升。
a在第二句代码var a=1中被声明，变量a被提升到代码的头部，所以第一句中a变为已定义但未声明的变量,console.log(a);输出是undefined。
本文版权归本人和饥人谷所有，转载请注明出处
网友评论