- CSS和JS在网页中的放置顺序是怎样的？
- CSS放置在HTML中的<head>元素内。
- 现代Web应用程序一般把全部JavaScript引用放在<body>元素中的页面内容的后面。
- 解释白屏和FOUC
- 白屏现象：在浏览器中，如果把CSS样式放在HTML的底部，在刷新或打开新窗口的情况下，浏览器会出现白屏效果。使用@import引用CSS样式也会出现此效果(@import引用的CSS会等到页面全部被下载完再被加载。)
- FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式)：
如果使用@import方法或点击链接,输入URL,使用书签进入等，对css进行导入,会导致某些页面在Windows 下的Internet Explorer出现以无样式显示页面内容的瞬间闪烁,
原因：
1，使用import方法导入样式表。
2，将样式表放在页面底部
3，有几个样式表，放在html结构的不同位置。
原理：当样式表晚于结构性html 加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的闪屏现象。 - async和defer的作用是什么？有什么区别
- defer：这个属性的用途是表明脚本在执行时不会影响页面的构造，脚本会被延迟到整个页面都解析完毕后再运行。在<script>元素中设置defer属性表示告诉浏览器立即下载，但延迟执行这个js脚本。
<script defer src="script.js"></script>
- async：这个属性与defer属性相似都只适用于外部脚本，都用于改变处理脚本的行为。async属性告诉浏览器立即下载文件，但async与defer不同在于，标记为async的脚本不保证按照指定它们的先后顺序执行。指定async属性的目的是不让页面等待js脚本的下载和执行，从而异步加载页面的其他内容。建议异步脚本不要在加载期间修改DOM。
<script async src="script.js"></script>
-
简述网页的渲染机制浏览器工作流程
解析DOM 、CSSOM构造成渲染树 浏览器这工作步骤：
加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。
解析：
1 通过解析JS语法、HTML标签、CSS属性，构建DOM树、CSSOM树。
2 解析完成后，浏览器通过DOM树、CSSOM树构造出渲染树。
渲染 ：在渲染树的基础上进行布局, 计算每个节点的几何结构。
绘制 ：通过调用操作系统的API把每个节点绘制在屏幕上。JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?
5种简单数据类型(基本数据类型)：Undefined、Null、Boolean、Number和String。
1种复杂复杂数据类型：Object
NaN、undefined、null分别代表什么?
-
NaN，即非数值(Not a Number)，这个数值用于表示一个本来要返回数值的操作数未返回数值的情况。
特点：
1 任何涉及NaN的操作(例如NaN/10)都会返回NaN。
2 NaN与任何值都不相等，包括NaN本身。
(NaN == NaN);//false
针对NaN的特点，ECMAscript定义了isNaN()函数。这个函数接受一个参数，该参数可以是任何类型，而函数会帮我们确定这个参数是否“不是数值”。isNaN()在接受一个值后，会尝试这个值转换为数值。（字符串"10"或Boolean值会直接转换为数值）。任何不能被转换为数值的值都会导致这个函数返回true。
console.log(isNaN(NaN));//true
console.log(isNaN(10));//false
console.log(isNaN("10"));//false
console.log(isNaN("blue"));//true
console.log(isNaN(true));//false(布尔值可以转换为0和1)
-
Undefined类型只有一个值，即特殊的Undefined。在使用var声明变量但未对其加以初始化时，这个变量的值就是Undefined。例如：
变量未声明
这个例子只声明了变量a，但未对其进行初始化，进行变量a与字面量Undefined的比较。可以等价写成：
声明变量为Undefined
结论：未经初始化的值默认就会取得Undefined值。一般而言，不存在需要声明一个变量为Undefined的情况。字面量Undefined主要目的是用于比较。 -
Null类型是第二个只有一个值的数据类型。null值表示一个空对象指针，所以typeof操作符检测null值会返回“object”的原因。
typeof检测null
如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为null。这样一来只要直接检查null值就可以知道相应的变量是否已经保存了一个对象的引用。
if (a != null) {
//如果变量a定义了一个对象的引用就执行。
}
- typeof和instanceof的作用和区别?
-
typeof操作符是用于检测变量的数据类型。如果是使用构造函数创建的对象则会返回"object"，不过对于数组来说是个例外，无论是否是直接量都会返回"object"
检查数据类型 - instanceof此运算符可以判断一个变量是否是某个对象（类）的实例（检测 constructor.prototype 是否存在于参数 object 的原型链上），返回值是布尔类型的。示例：
var oStringObject = new String("hello world");
console.log(oStringObject instanceof String); // 输出 "true"
参考：JavaScript instanceof 运算符深入剖析、MDN
- 代码
- 完成如下代码判断一个变量是否是数字、字符串、布尔、函数 （难度*）
function isNumber(el){
if (typeof(el) === number) {return "ture";}
else {return "false";}
}
function isString(el){
if (typeof(el) === string) {return "ture";}
else {return "false";}
}
function isBoolean(el){
if (typeof(el) === boolean) {return "ture";}
else {return "false";}
}
function isFunction(el){
if (typeof(el) === function) {return "ture";}
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
- 以下代码的输出结果是?（难度**）
console.log(1+1); //2
console.log("2"+"4"); //24
console.log(2+"4"); //24
console.log(+new Date());//1467739918839
console.log(+"4");//4
- 以下代码的输出结果是? （难度***）
var a = 1;
a+++a;//3
typeof a+2;//number2
- 遍历数组，把数组里的打印数组每一项的平方 （难度**）
var arr = [3,4,5];
for (i = 0; i < arr.length; i++ ) {
console.log(arr[i] * arr[i]);
// 输出 9, 16, 25
}
- 遍历 JSON, 打印里面的值 （难度**）
var obj = {
name: 'hunger',
sex: 'male',
age: 28
}
for (var prop in obj) {
console.log(prop + ":" + obj[prop])
}
// 输出 name: hunger, sex: male, age:28
- 下面代码的输出是? 为什么 （难度***）
javascript变量提升机制。
console.log(a);//undefined 因为下一句var a = 1还没执行，相当于只进行了var a; a没有赋值就console.log(a)
var a = 1;
console.log(a);//1 变量a已经赋值为1
console.log(b);//error 这里的b并没有声明所以出现错误。
console.log(a);//undefined
var a = 1;
等价于下示
var a;
console.log(a);
a = 1;
//当全局变量赋值前被提升到最上面先进行了声明。
//JS在执行前会把所有的变量和函数提前声明
本博客版权归 本人和饥人谷所有，转载需说明来源
