JS基础问题

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

一般我们把CSS放在head头部标签中，把JS代码放在body代码的尾部。




  
  JS基础

解释白屏和FOUC

白屏：如果把CSS样式放在底部，在某些场景下（新窗口打开、刷新等）页面会出现白屏，而不是内容逐步展现，如果使用@import标签，即时CSS放入link，并且放在头部，也可能出现白屏现象。
脚步会阻塞后面内容的展现
脚本会阻塞其后组建的下载
对于图片和CSS，在加载时会并发加载（如一个域名下同时加载两个文件），但在加载JS时，会禁用并发，并且阻止其它内容的下载，所以把JS放到页面的顶部也会出现白屏的现象。
FOUC(Flash of Unstyled Content)无样式内容闪烁：如果把CSS样式放在底部，对于IE浏览器，在某些场景下（点击链接，输入URL，使用书签进入等），就会出现FOUC现象（逐步加载无样式的内容，等CSS加载后页面突然展现样式），对于Firefox会一直出现FOUC现象。

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

没有async和defer，在浏览器加载中会立即加载执行当前的脚本，并阻塞浏览器渲染script标签之下的文档元素，而有了async和defer可以使浏览器加载渲染后续文档的过程和JS脚本的加载与执行并行进行，也就是加载异步。

两者的区别：主要是脚本下载完成之后何时执行，defer会按照加载顺序脚本延迟到文档解析显示后执行，而async不管你声明的顺序如何，只要他加载完了就会立刻执行，并不会按照顺序。
一般来说defer更符合我们的使用场景。

网页的渲染机制

解析 HTML 标签, 构建 DOM 树
解析 CSS 标签, 构建 CSSOM 树
根据 DOM 和 CSSOM 组合成渲染树 (render tree)进行基础布局
计算每个节点的几何结构
把每个节点绘制到屏幕上呈现给用户

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

Null ：是空指针
Underfined ：有指针但未指向任何空间
Boolean ：布尔值，真假（true,false)
Number ：数字类型。
String ：字符串类型，单引号或双引号表示。
Object ：对象，JS核心概念，最重要的数据类型。（一切皆为对象）

前5种为简单类型，Object为复杂类型。

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

NaN：含义是Not a number，表示非数字，与任何值都不相等，包括他自己，（一种不等于任何值的数字类型）
underfined：是Underfined唯一的值，表示变量只是被声明，但是没有初始化，代表有这个指针，但是此指针没有指向任何空间
null：Null唯一的值，表示空指针，也就是不存在的东西

typeof和instanceof的作用和区别?

typeof的作用,可以判断返回一个值的数据类型，放在运算数的前面，运算数可以是任何类型。

function a(){}
a(){}
typeof a
"function"      //运算数为函数返回function
typeof 123421
"number"
typeof "32423423423"
"string"
typeof true
"boolean" 
typeof undefined
"undefined"  //利用这一点检查未定义变量
typeof window
"object"         //其他全部返回object

instanceof 用于判断一个变量是否某个对象的实例，因为typeof遇到null,数组,对象时都会返回object类型，所以当我们要判断一个对象是否是数组时，或者判断某个变量是否是某个对象的实例则要选择使用instanceof

代码问题

1.如下代码判断一个变量是否是数字、字符串、布尔、函数

function isNumber(el){ 
 if ((typeof el)==="Number"){
   return true;
   }  else { 
return false
  };
}

function isString(el){ 
  if ((typeof el)==="String"){
   return true;
   }  else { 
return false
  };
}

function isBoolean(el){
 if ((typeof el)==="Boolean"){
   return true;
   }  else { 
return false
  };
}

function isFunction(el){
  if ((typeof el)==="Function"){
   return true;
   }  else { 
return false
  };
}

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.以下代码的输出结果是?

我是图

3.以下代码的输出结果是?

var a = 1;
a+++a;
typeof a+2;

结果为number2，(typeof优先级相当高，所以优先计算typeof a结果为number,带上2所以为number2）

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

var arr = [3,4,5]
// todo..
// 输出 9, 16, 25

代码如下：

我是图

5.遍历 JSON, 打印里面的值

var obj = { name: 'hunger', sex: 'male', age: 28}
//todo ...
// 输出 name: hunger, sex: male, age:28

代码如图：（此处有参考）

我是图

6.下面代码的输出是? 为什么

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

第一个console.log(a);输出为underfined,因为JS会全局变量提升，a只有声明没有赋值。
第二个console.log(a);输出为1,因为它在var a =1;之后，1赋值到a身上。
第三个console.log(b);输出会报错，因为b未声明未赋值。

本博客版权归羞涩的涩和饥人谷所有，转载请注明出处