1.CSS和JS在网页中的放置顺序是怎样的？
将CSS link标签放在html文档靠前位置。JS代码放在html文档底部，body结束标签前
2.解释白屏和FOUC
(1)当js文件放在文本的顶部会造成以下两种情况
? ? ?1.1脚本会阻塞后面内容的呈现
? ? ?1.2脚本会阻塞其后组件的下载
(2)白屏
2.1在 Google Chrome 浏览器中，渲染会等到CSS加载完成后才开始。如果 CSS 文件没有放在页面头部，而是中间的位置，那么在加载 CSS 文件之前的时间段内，页面会呈现出白屏现象。
2.2如果使用@import标签，即使 CSS 放入link标签中，并且放在头部,也可能出现白屏现象。
2.3如果 JS 文件放到文件开始，也会因为等待加载和执行 JS 文件而导致后面的文档元素加载被阻断，页面呈现白屏。
(3)FOUC(Flash of Unstyled Content，无样式内容闪烁)现象。
3.1所谓的无样式闪烁（IE、firefox都有）是浏览器边加载边执行，逐步加载无样式的内容,等CSS加载后页面突然展现样式。
3.2FOUC现象主要体现在firefox浏览器下，firefox为了增强用户体验，选择在加载样式的同时绘制树，导致用户在加载页面的同时会看到渲染绘制的过程，也就出现了FOUC现象。
3.async和defer的作用是什么？有什么区别
（1）一般情况可不加上async/defer，若加上如这样<script async/defer src=""></script>
（2）假设一定想把js文件放顶部，就得加上defer和async来异步加载
（3）如果不加[async]和[defer],浏览器读到script里的脚本就马上加载并且执行，不会去等后续渲染元素
（4）<script async></script>js加载并执行与渲染后续文档并发执行（异步），当时不保证顺序
（5）<script defer></script>js加载后暂不执行，脚本延迟到文档解析和显示后才执行，有顺序之分
4.简述网页的渲染机制
步骤一：解析HTML，构建DOM树
步骤二：解析CSS，构建CSSOM树
步骤三：把DOM、CSSOM组合成渲染树（render tree）
步骤四：在渲染树基础上进行布局，把每一个节点绘制到屏幕上。
5.JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?
简单类型：Null、undefined、Boolean、Number、String ? ? ?复杂类型：Object
Null：空指针，也就是不存在的东西
undefined：表示变量只是被声明，没有被初始化，有指针，但是不指向任何空间
Boolean：布尔值，只有true和false之分
Number：数字 var a=1，b=0.2，c=1e10
String：Unicode 字符组成的序列，俗称字符串，可以用单引号或者双引号表示。?? 字符串有一些转义字符。? var str =“ ”
Object对象 ：对象是 JavaScript 的核心概念
复杂类型又分为：? function 函数 ? ? ? Array 数组 ? ? ?Data日期
6.NaN、undefined、null分别代表什么?
（1）NaN表示JS的特殊值，表示“非数字”（Not a Nember）； NaN不是一种独立的数据类型；
? ? ? ? NaN === NaN //false
（2）undefined本身自成一个数据类型。表示“缺少值”，就是此处应该有一个值，但是还没有定义。
? ? ? ?2.1声明变量后，如果没有给变量赋值，那么变量值等于undefined。
? ? ? ?2.2调用函数时，如果没有给函数提供应有的参数，那么参数值默认为undefined。
? ? ? ?2.3对象的属性没有进行赋值，那么该属性的值为undefined。
? ? ? ?2.4函数没有返回值时，默认返回undefined。
（3）null本身也自成一个数据类型。表示“没有对象”，即该处不应该有值。
7.typeof和instanceof的作用和区别?
(1)typeof是检测简单类型及function检测，但是遇到null无效，null还是要用===? ? ? ? typeof（1）//Number? ? ???
typeof（“str”）//string? ? ? ? ? ? ? ? ?
typeof（true）//boolean?
typeof（[1,2]）//Object? ?
?typeof (new Object()) //Object? ? ? ?
?typeof (null)? //Object
(2)instanceof 常用作判断对象类型 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
obj(对象)? instanceof? Object(构造系) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
instanceof运算符返回一个布尔值，表示指定对象是否为某个构造函数的实例。
eg：[1,2] instanceof Array === true ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
eg: new Object() instanceof Array === false
8.代码
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;
console.log( isNumber(a) );? //true
console.log( isString(a) );? //false
console.log( isString(b) );? //true
console.log( isBoolean(c) ); //true
console.log( isFunction(a)); //false
console.log( isFunction( isNumber ) ); //true
2.以下代码的输出结果是?（难度**）
console.log(1+1);? //2 ? 两个数相加，输出数值
console.log("2"+"4");//24 ?字符串相加等同于拼接，输出字符
console.log(2+"4");//24 ?一个数字和字符串相加等同于拼接字符串，输出字符
console.log(+newDate());//1474442366638距离1997年1月1日的毫秒数
console.log(+"4");//4 ? ? ?4"转化为数值，最后结果为数值
3.以下代码的输出结果是? （难度***）
var a = 1;
console.log(a+++a）;//2
typeofa+2; //number+2
分析：在a+++a表达式当中，后置递增的优先级最高。所以相当于(a++)+a。a一开始赋值为1，a++表示先赋值再自增，所以a++的计算结果为1，且此时a等于2。所以a+++a表达式的计算结果为3。
分析：而typeof a+2中，typeof在js中的优先级比“+”高，所以它会先计算typeof a，得到的输出是字符串"number"。然后是一个字符串加上一个数字，会把数字转换成字符串。所以得到的输出为"number2"的字符串
4.遍历数组，把数组里的打印数组每一项的平方 （难度**）
5,遍历 JSON, 打印里面的值 （难度**）
varobj = { name:'hunger', ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
?sex:'male', ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
age:28} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? //todo ...// 输出 name: hunger, sex: male, age:28
6.下面代码的输出是? 为什么 （难度***）
console.log(a); //undefined ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
?var ?a =1; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
console.log(a);//1 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
console.log(b);//is not defined
分析：过程如下
?var a ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
console.log(a) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
?a=1 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
consolo.log(a) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
?console.log(b)
由于变量会提升，但还赋值，所以第一个输出为undefined
第二个则会显示为1
第三个由于没有声明变量b，所以会报错
