前端基础（问答11）

2016-07-07 本文已影响32人郑哲明

keywords: 白屏、FOUC、asyns、defer、渲染机制、JavaScript数据类型、。

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

css一般放在head标签内，并用link引入；
js一般放在body底部。

css和JS放置顺序

参考：
高性能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执行前保持空白，即白屏。

script顺序的影响.gif

将样式表放在文档底部，页面会白屏或FOUC（根据浏览器的处理方式的不同，二者选一）。

FOUC：

样式表被放在了文档底部，当页面逐步加载时，文字首先显示，然后是图片。最后，在样式表正确地下载并解析之后，已经呈现的文字和图片要用新的样式重新绘制，这就是“无样式内容闪烁”。截至目前，firefox和ie都会出现这种现象，chrome不会。

无样式闪烁.gif

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

前端基础（问答11）

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

解释白屏和FOUC

白屏：

FOUC：

async和defer的作用是什么？有什么区别?

简述网页的渲染机制

JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?

NaN、undefined、null分别代表什么?

typeof和instanceof的作用和区别?

代码

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

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

以下代码的输出结果是?

遍历数组，把数组里的打印数组每一项的平方

遍历 JSON, 打印里面的值（难度**）

下面代码的输出是? 为什么（难度***）

猜你喜欢

热点阅读

前端基础（问答11）

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

解释白屏和FOUC

白屏：

FOUC：

async和defer的作用是什么？有什么区别?

简述网页的渲染机制

JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?

NaN、undefined、null分别代表什么?

typeof和instanceof的作用和区别?

代码

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

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

以下代码的输出结果是?

遍历数组，把数组里的打印数组每一项的平方

遍历 JSON, 打印里面的值 （难度**）

下面代码的输出是? 为什么 （难度***）

猜你喜欢

热点阅读

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

遍历 JSON, 打印里面的值（难度**）

下面代码的输出是? 为什么（难度***）