初识JS
2016-08-16 本文已影响0人
小周师傅
1.CSS和JS在网页中的放置顺序是怎样的？
- CSS
引用外部样式表时，使用<link>标签，将样式放在<head>标签中；直接在html中使用样式时，在<head>标签中添加<style>标签，将样式写在<style>标签中。 - JS
如果在<head>里有javascript文件，那么必须是先要把这些文件都下载，解析，然后执行之后，程序才会继续往下走。这样势必会影响速度，阻塞其他资源的加载，影响页面速度，所以一般将JS的内容放在<body>标签的末尾，写在<script>标签中；但如果是希望DOM还没加载而要先加载的js会放置在<head>中,有些加了defer、async的<script>也会放在<head>中。
2.解释白屏和FOUC
- 不同浏览器对于CSS和HTML的处理方式不同，一些浏览器如chrome，它的加载和渲染机制是等css全部加载解析完成后再渲染展示整个页面，这个等待的时间就造成了白屏，而另一些浏览器如Firefox，它在css没有加载前先展示页面，等css加载后在重绘一次，这就造成了FOUC（(Flash of Unstyled Content）,即无样式闪烁。
- 如果把css样式放在底部，对于IE浏览器，在某些场景下（新窗口打开、刷新等）会出现白屏；同样对于IE浏览器，如果把css样式放在底部，在某些场景下（点击链接，输入URL，使用书签进入等），会出现FOUC现象；对于Firefox，会一直表现出FOUC
- 如果把JS文件放在头部，脚本会阻塞后面内容的呈现，出现白屏。
3.async和defer的作用是什么？有什么区别
<script defer src="script.js"></script>
<script async src="script.js"></script>
如图，蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的；绿色线代表 HTML 解析。
-
defer和async是脚本异步加载的两种方式，加载后续文档元素的过程和script.js的加载并行进行（异步），不因为脚本的加载阻塞页面其他元素的加载。【async和defer均只适用在外部js文本，不支持嵌入式脚本】
-
async：告诉浏览器立刻下载其指定的JS，很有可能不是按照原来的顺序来执行，如果JS前后有依赖关系，就会报错
-
defer：script.js的执行要在所有元素解析完成之后，DOMContentLoaded事件触发之前完成，也就是说defer会按照加载顺序执行脚本
4.简述网页的渲染机制
1.解析HTML标签，构建为DOM树
2.解析CSS文件，构建为CSSOM树
3.构建render树，render树由DOM树与CSSOM树组合而成
4.布局render树，确定每个节点在屏幕上的确切坐标
5.绘制，遍历render树，使用UI后端层绘制每个节点
更多参考见浏览器内部工作原理
5.JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?
- 简单类型：
1.数字 number
2.字符串 string
3.布尔 boolean
4.未定义 undefined
5.空 null - 复杂类型：
1.对象 object
2.数组 array
3.函数 function
6.NaN、undefined、null分别代表什么?
- NaN：Not a Number，代表非数字值的特殊值，用来指示某个值不是数字（如求负数的平方根）。方法
parseInt（）和parseFloat()在不能解析指定的字符串就返回这个值。
要注意的是，NaN与其他数值进行比较的结果总是不相等的，包括它自身在内，所以要使用isNaN（）来判断一个值知否是数字
NaN == NaN; //false
NaN===NaN;//false
- undefined：表示“缺少值”，就是此处应该有一个值，但是还没有定义
(1).变量被声明了，但没有赋值，就等于undefined
(2).调用函数时，应该提供的参数没有提供，该参数等于undefined
(3).对象没有赋值的属性，该属性为undefined
var i;
i // undefinedfunction
f(x){console.log(x)}
f() // undefined
var o = new Object();
o.p // undefined
var x = f();
x // undefined
- null：一个空对象指针，表示“没有对象”，即该处不应该有值
(1).作为函数参数，表示该函数的参数不是对象
(2).作为原型链的终点
7.typeof和instanceof的作用和区别?
由于ECMAScript是松散型的，因而需要一种方式来检测给定变量的数据类型。
- typeof：返回一个值的数据类型，可以是数字
number，字符串string，布尔值boolean，函数function，对象object,方法typeof中无论引用什么类型的对象，都只会返回object - instanceof:只有true和false两个输出结果，可以进一步判断引用类型是什么类型
代码
1.完成如下代码判断一个变量是否是数字、字符串、布尔、函数 （难度*）ps: 做完后可参考 underscore.js 源码中部分实现
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());//1471333192537
console.log(+"4");//4
3.以下代码的输出结果是? （难度***）
var a = 1;
a+++a;//3
typeof a+2;//numer2
4.遍历数组，把数组里的打印数组每一项的平方 （难度**）
var arr = [3,4,5];
for( var i=0;1< arr.length;i++){
console.log(arr[i]*arr[i]);
}
5.遍历 JSON, 打印里面的值 （难度**）
var obj = {
name: 'hunger',
sex: 'male',
age: 28
}
for (var i in obj){
console.log(i+":"+obj[i]);
}
6.下面代码的输出是? 为什么 （难度***）
console.log(a);//undefined,变量声明提升，a已经声明过，会被提到全局作用域的开头
var a = 1;
console.log(a);//1
console.log(b);//报错
本文版权归本人和饥人谷所有，转载请注明来源。
