1.CSS和JS在网页中的放置顺序是怎样的？为什么会出现白屏和FOUC？
在写HTML代码时，我们都是将CSS文件的引入位置放在头部（<head>标签内部），将js文件的引入位置放在底部（</body>前面）。
出现白屏的原因：
CSS：未将CSS置于首部，浏览器加载页面过程中，首先加载了html内容，此时还未加载CSS，需将CSS完全加载完成，页面才会显示出来（白屏现象）。
另一种浏览器的加载方式是先对页面内容进行展示，然后再加载CSS修改页面样式（FOUC: flash of unstyled )。 若是使用@import ，即使把此样式放在顶部，也可能会出现白屏。
JS： 由于JS的特性，如果把JS放在页面顶部，在JS未加载完成之时，脚本就会阻塞后面组件的加载，从而出现白屏问题。
2.加载异步：async和defer的作用是什么？有什么区别
如果在某些场景下，需要将JS不置于页面底部，此时就要使用 async或defer 来做异步处理。
<script defer src="script.js"></script>
<script async src="script.js"></script>
defer: 加载JS与页面并行进行，但是要在页面元素解析完成之后，defer才会被执行。
async:加载JS与页面并行进行，对页面的渲染也会并行进行。
3.简述网页的渲染机制
1、Create/Update DOM And request css/image/js：浏览器请求到HTML代码后，在生成DOM的最开始阶段（应该是 Bytes → characters 后），并行发起css、图片、js的请求，无论他们是否在HEAD里。
2、Create/Update Render CSSOM：CSS文件下载完成，开始构建CSSOM
3、Create/Update Render Tree：所有CSS文件下载完成，CSSOM构建结束后，和 DOM �一起生成 Render Tree。
4、Layout：有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为Layout，顾名思义就是计算出每个节点在屏幕中的位置。
5、Painting：Layout后，浏览器已经知道了哪些节点要显示（which nodes are visible）、每个节点的CSS属性是什么（their computed styles）、每个节点在屏幕中的位置是哪里（geometry）。就进入了最后一步：Painting，按照算出来的规则，通过显卡，把内容画到屏幕上。
浏览器渲染页面顺序.jpg
4.JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?NaN、undefined、null分别代表什么?
简单类型：
<li>数字 number
<li>字符串 string
<li>布尔 boolean
<li>数组 （数组也是对象）
<li>未定义 undefined
复杂类型：
<li>对象 object
NaN:
Number.NaN 是一个特殊值，说明某些算术运算（如求负数的平方根）的结果不是数字。
JavaScript 以 NaN 的形式输出 Number.NaN。NaN 与其他数值进行比较的结果总是不相等的，包括它自身在内。因此，不能与 Number.NaN 比较来检测一个值是不是数字，而只能调用 isNaN() 来比较。
undefined:
表示未赋值，比如说 var = a 占据了空间，却未对 a 赋值。
null：
表示一个不存在的元素，空指针。
5.typeof和instanceof的作用和区别?
typeof:
作用是查看元素类型。它返回值是一个字符串，该字符串说明运算数的类型。typeof 一般只能返回如下几个结果：
返回值：
数字：number
字符串：string
布尔：boolean
函数：function
undefined: function
其他值全部为 object
例：
通过typeof来获取一个变量的类型
通过typeof来获取一个变量素是否存在
instanceof:
判断一个变量的类型常常会用 typeof 运算符，在使用 typeof 运算符时采用引用类型存储值会出现一个问题，无论引用的是什么类型的对象，它都返回 “object”。这就需要用到instanceof来检测某个对象是不是另一个对象的实例。
instanceof用于判断一个变量是否某个对象的实例,其返回值是布尔类型。
例：
a instanceof b?console.log"true"):conlose.log("false"); //a是b的实例？真:假
代码题：
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.以下代码的输出结果是?
console.log(1+1); //2
console.log("2"+"4");//24
console.log(2+"4");//24
console.log(+new Date());//1470630425859
console.log(+"4");//4
3.以下代码的输出结果是?
var a = 1;
a+++a;//3
typeof a+2;//number2
4.遍历数组，把数组里的打印数组每一项的平方
```var arr = [3,4,5]```
5.遍历 JSON, 打印里面的值 （难度**）
var obj = {
name: 'hunger', sex: 'male', age: 28
}
//todo ...
// 输出 name: hunger, sex: male, age:28```
6.下面代码的输出是? 为什么
console.log(a);//1，js变量提升
var a = 1;// 1
console.log(a); // 1, 通过var a = 1;进行声明并赋值，调用a后，得到 1
console.log(b);//b is not defined,未对 b 进行声明。
<li>关于变量提升：
var v='Hello World';
(function(){
alert(v);
})() // 输出 Hello World
但是：
var v='Hello World';
(function(){
alert(v);
var v='I love you';
})() ```
却会输出 undefined
其原因是作用域的问题，变量提升，就是把变量提升提到函数的top的地方。变量提升 只是提升变量的声明，并不会把赋值也提升上来。
其实只是：
var v='Hello World';
(function(){
var v;
alert(v);
v='I love you';
})() ```
本文版权归本人和饥人谷所有，转载请注明来源。
网友评论