问答部分

一、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;
                }
            }

• demo地址

---

二、以下代码的输出结果是?

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

变量提升

版权声明：本教程版权归邓攀和饥人谷所有，转载须说明来源！！！！