问答部分
一、CSS和JS在网页中的放置顺序是怎样的？
- CSS放置在head标签之间，放在JS之前，因为如果把CSS放在后面，可能会出现白屏问题或者FOUC无样式内容闪烁的问题
-
JS放置在body标签闭合之前，防止其阻塞后面内容的呈现和阻塞其后组件的下载
CSS和JS在网页中的放置顺序
二、解释白屏和FOUC？
- 白屏现象
- 当把css样式表放在html底部时和使用@import方式引入css样式时，浏览器（IE）要等到所有内容和样式加载完之后才会解析绘制，而不是内容逐步呈现，在等待的过程中会造成白屏现象
- 当把js放在前面时，js会阻塞后面内容的呈现和其后组件的下载，直到js自身被加载完成之后才会进行其它内容的加载，这时也会造成白屏现象
- FOUC~无样式内容闪烁
- 浏览器加载页面时，其在样式表下载解析之前，内容就已经逐步加载显示，当样式表解析完成后，已经显示的内容就要用新的样式进行绘制，在第二次进行绘制时则会造成闪烁（即绘制了两次）
三、async和defer的作用是什么？有什么区别？
- async~异步脚本，js的加载和执行同页面内容的加载过程同步进行，当有多个异步脚本时执行的先后顺序不定
- defer~延迟脚本，js的加载同页面内容的加载过程同步进行，
但js的执行会在整个页面都解析完毕后再运行，当有多个延迟脚本时其会按照出现的先后顺序执行
四、简述网页的渲染机制？
- 首先，渲染引擎首先通过网络获得所请求文档的内容，通常以8K分块的方式完成
- 渲染引擎在获得内容之后，进行一下步骤
- 解析html以构建DOM树及CSSOM树，将标签转化为内容树中的DOM节点；接着解析外部CSS文件及style标签中的样式信息为CSSOM树
- 构建render树，由DOM树及CSSOM树构建而成
- 布局render树，在render树的基础上进行布局过程，它将确定每个节点在屏幕上的确切坐标
-
绘制render树，遍历render树，并使用UI后端层绘制每个节点
以上过程如下图所示
渲染引擎基本流程
webkit主流程如下图所示
webkit主流程
注意：这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容
更多内容见浏览器内部工作原理
五、JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?
- undefined~使用var声明变量但是并未初始化时，这个变量的值就是undefined
- null~表示一个空对象指针，此处应有值但此时为空
- Boolean~有true和false两个值
- Number~整数和小数
- String~字符串组成的文本
- Object~各种值的组合
- 其中简单类型是：null、undefined、Boolean、Number、String
- 复杂类型是：Object
六、NaN、undefined、null分别代表什么?
- NaN~即非数值（Not a Number）是一个特殊的数值，用于表示一个本来要返回数值的操作数未返回数值的情况；任何涉及NaN的操作都会返回NaN，NaN与任何值都不相等，包括其自己
NaN == NaN; //false
- undefined~指用var声明变量但并未初始化时，这个变量的值就是undefined
var example;
alert(example == undefined); //true
- null~一个空对象指针，此处应有值但此时为空的情况
七、typeof和instanceof的作用和区别?
- typeof~检测给定变量的数据类型，其返回的值有null、boolean、string、number、object、function，但无论引用的是什么类型的对象，它都返回 “object”
var b;
console.log(typeof(b));//undefined
var message = "hello,world";
console.log(typeof(message));//string
var age = 25;
console.log(typeof(age));//number
var o = null;
console.log(typeof(o));//object
var o = [1,2,3,4];
console.log(typeof(o));//object
var o = {name:"tom",age:25};
console.log(typeof(o));//object
- instanceof~判断一个对象是否为某一数据类型，或一个变量是否为一个对象的实例；返回boolean类型，当需要知道是什么类型的引用类型时即可使用instanceof
var arr = [1,2,3];
console.log(arr instanceof Object);//true
var person = {name:"tom",age:25};
console.log(person instanceof Object);//true
代码部分
一、完成如下代码判断一个变量是否是数字、字符串、布尔、函数
- 函数里添加的代码具体如下
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;
}
}
二、以下代码的输出结果是?
console.log(1+1);//输出结果是数值2
console.log("2" + "4");//输出结果是字符串"24"
console.log(2 + "4");//输出结果为字符串"24"
console.log(+new Date());//输出结果为数值1471010594088
console.log(+"4");//输出结果是数值4
三、以下代码的输出结果是?
var a = 1;
a+++a;//先运行a++，这时取a原值1，则a++为1；
再运行1+a，此时a已经自增1,a为2，则最终a+++a为3
typeof a + 2;//先运行typeof 2，此时结果为number；
再运行number + 2，结果为字符串number2
四、遍历数组，把数组里的打印数组每一项的平方
var arr = [3,4,5];
for(i = 0;i < arr.length;i++){
console.log(arr[i]*arr[i]);
}
遍历数组打印数组里每一项的平方
五、遍历 JSON, 打印里面的值
var obj = {
name:"hunger",
sex:"male",
age:28
}
for(var k in obj){
console.log(k + ":" + obj[k]);
}
遍历JSON输出指定值
六、下面代码的输出是? 为什么？
console.log(a);//输出结果为undefined，由于变量提升，
将var a提升到代码头部，然后给变量初始为undefined，之后才逐句执行程序
var a = 1;
console.log(a);//输出结果为数值1
console.log(b);// 输出结果为Uncaught ReferenceError: b is not defined
变量提升
版权声明：本教程版权归邓攀和饥人谷所有，转载须说明来源！！！！
