JS语法

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

答：CSS一般放在中，而JS一般放置在最下面。

2.解释白屏和FOUC

答

• 白屏：如果把样式放在底部，对于某些场景的IE浏览器下，页面会出现白屏，而不是内容逐步呈现，如果使用@import标签也会白屏。当把JS文件放在顶部，因为JS脚本加载时会阻止后面内容的呈现以及其组件的下载，所以也会发生白屏。
• FOUC（无样式内容闪烁）：如果把CSS样式放在底部，对于某些场景下的IE浏览器，会出现FOUC（先逐步加载HTML内容，等CSS加载完成时突然出现样式）对于Firefox浏览器则会一直发生FOUC。

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

答:

• 没有async和defer的时候，浏览器会立即加载执行指定脚本，立即的意思是渲染该script标签之下的文档元素前，就是不等待后续载入的文档元素，读到就加载并执行。
• 有async时，加载和渲染后续文档时候的过程将和script.js的加载与执行过程一起进行（异步）。
• 有defer，加载后续文档元素的过程将与script.js的加载同时进行，但是script.js的执行只要在所有元素解析完成之后，DOMContentLoaded事件触发之前完成。
• 区别：async不保证顺序。defer脚本延迟到文档解析和显示后执行，有顺序。

4.简述网页的渲染机制

答：第一步：浏览器在接收到服务器返回的页面信息后，遇到解析html标签构建DOM树，遇见解析CSS标签构建CSSOM树

• DOM：Document Object Model，浏览器将HTML解析成树形的数据结构，简称DOM。
• CSSOM:CSS Object Model,浏览器将CSS代码解析成树形的数据结构。
• DOM树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建完成好后才会去构建当前节点下的下一个兄弟节点。

第二步：DOM与CSSOM合成后生成Render Tree，如上图
Render Tree和DOM一样，以多叉树的形式保存了每个节点的本身属性和CSS属性，以及其子节点。
第三步：有了Render Tree之后，浏览器知道了网页中有哪些节点，以及各个节点的CSS定义和从属关系，下一步我们称之为layout就是计算出每个节点在屏幕中的位置。
第四步：浏览器已经知道了哪些节点要显示、每个节点的CSS属性是什么，每个节点的位置在哪里，然后painting按照算出来的规则，把内容画到了屏幕上。

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

答：

• 字符串：是存储字符的变量例如：abcd。
• 数值：整数和小数。
• 布尔值：只有ture跟false两个特定值。
• null：表示空缺，此处应有一个值但现在为空。
• underfined：表示未定义不存在，此处没有任何值。
• 对象object：各种值组成的集合。
  简单类型：字符串、布尔值、数值、null、underfined。
  复杂类型：对象。

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

答：NaN：表示not a number，表示非数字，它与任何数值都不相等，包括他自己。
null：此处应该有一个值，但是目前为空，会自动转化为“0”，如果一个变量将用来保存对象，那应该保存为nall。
underfined：如果一个变量给它声明了但是没有赋值，那这个变量的值就是underfined，转化为NaN

7.typeof和instanceof的作用和区别?

答：tapeof和instanceof的作用都是用来判断一个变量是否为空，或者是什么类型。他们的区别主要有：

• typeof是一个一元运算，放在一个运算数之前，运算数可以是任何类型。它的返回值是一个字符串，该字符串说明运算数的类型typeof 一般只能返回如下几个结果：number,boolean,string,function,object,undefined。typeof返回的值都是object，而且具有局限性。
• instanceof是一个二元运算，用于判断一个变量是否某个对象的实例，返回值是一个布尔值。

代码：
1

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

地址
2

console.log(1+1);//输出：2
console.log("2" + "4");//输出：24
console.log(2 + "4");//输出：24
console.log(+new Date());//输出：1471341539756 
console.log(+"4");//输出：4

3

var a = 1;
a+++a;//3
typeof a+2;//number2

4

搜狗截图16年08月16日1959_1.png

5

var obj = {
name : 'hunger',
sex : 'male',
age : 28
}````

![搜狗截图16年08月17日1314_2.png](http://upload-images.jianshu.io/upload_images/2487339-74c2d312f7e93e66.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
6

console.log(a);
var a = 1;
console.log(a);
console.log(b);

输出什么 为什么？


![搜狗截图16年08月17日1325_5.png](http://upload-images.jianshu.io/upload_images/2487339-96e0be207d89d7d9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
提升变量必须声明变量，a声明了所以输出1，b没有被声明所以报错。

**本文版权归本人和饥人谷所有，转载请注明来源。**