任务16-JS 语法

2016-09-21  本文已影响0人  小木子2016

问答:

1. CSS和JS在网页中的放置顺序是怎样的？

CSS一般放置在的<head>标签中。网页渲染时，先解析HTML标签，构建DOM树，再解析CSS标签，构建CSSOM树，然后把DOM和CSSOM组合成渲染树。如果把CSS放置在底部，那么页面加载的时候可能会出现白屏或者无样式内容闪烁（FOUC）。
JS一般放置body标签的最后面。JS会阻塞加载的，如果放在前面，会影响页面加载的速度，如果JS文件比较大，算法也比较复杂的话，影响更大。

2. 解释白屏和FOUC

白屏和无样式内容闪烁（FOUC）是由于不用浏览器加载显示页面的机制不同造成的。当把CSS样式放在底部或者使用@import方式引入样式时，一些浏览器例如chrome，它的加载和渲染机制是等CSS全部加载解析完成后再渲染展示页面，而这个等待的时间就是白屏。另外一些浏览器，如Firefox，它会在CSS未加载前展示页面，等CSS加载后再重新绘一次，这就造成了FOUC（无样式内容闪烁）。如果把JS文件放在头部，脚本会阻塞后面内容的展示和其后组件的下载，也会导致白屏现象。

3. async和defer的作用是什么？有什么区别。

当浏览器遇到script脚本的时候：

蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的；绿色线代表 HTML 解析。
此图告诉我们以下几个要点：
a. defer 和 async 在网络读取（下载）这块儿是一样的，都是异步的（相较于 HTML 解析）
b. 它俩的差别在于脚本下载完之后何时执行，显然defer 是最接近我们对于应用脚本加载和执行的要求的
c. 关于 defer，此图未尽之处在于它是按照加载顺序执行脚本的，这一点要善加利用
d. async 则是一个乱序执行的主，反正对它来说脚本的加载和执行是紧紧挨着的，所以不管你声明的顺序如何，只要它加载完了就会立刻执行
e. 仔细想想，async 对于应用脚本的用处不大，因为它完全不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的，最典型的例子：Google Analytics

4. 简述网页的渲染机制?

DOM 和 CSSOM 合并后生成 Render Tree

5. JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?

JavaScript语言的每一个值，都属于某一种数据类型。JavaScript的数据类型，共有六种：

6. NaN、undefined、null分别代表什么?

7. typeof和instanceof的作用和区别?

代码：

1. 完成如下代码判断一个变量是否是数字、字符串、布尔、函数 （难度*）

<pre>
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

</pre>

2. 以下代码的输出结果是?（难度**）

<pre>
console.log(1+1); //2，两个数相加，输出数值；
console.log("2"+"4"); //24，两个字符串相加，输出字符串；
console.log(2+"4"); //24，一个数值和一个字符串相加，输出字符串；
console.log(+new Date());//1474425015234，用new Date()参与计算会自动转换成从1970.1.1到现在的时间的毫秒数；
console.log(+"4");//4，只有一个字符串，会试着将其转换成数字；
</pre>

3. 以下代码的输出结果是? （难度***）

<pre>
var a = 1;
a+++a;//3；a++的运算级高，即（a++）+a；

typeof a+2;//number2；typeof的运算级，先得出typeof a结果是number，再+2，完成一个字符串的拼接；
</pre>

4. 遍历数组，把数组里的打印数组每一项的平方 （难度**）

<pre>
var arr = [3,4,5]
for(var i = 0; i < arr.length; i++){
console.log(arr[i]*arr[i]);
}// 输出 9, 16, 25
</pre>

5. 遍历 JSON, 打印里面的值 （难度**）

<pre>

var obj = {
name: 'hunger',
sex: 'male',
age: 28
}
for (var i in obj) {
console.log(i + '：' +obj[i]);
}// 输出 name: hunger, sex: male, age:28
</pre>

6. 下面代码的输出是? 为什么 （难度***）

<pre>
console.log(a);//undefined;变量a已经被声明，但是由于变量提升，其值是初始值undefined
var a = 1;//1；a被赋值为1；
console.log(a);//1;a在此之前已经被赋值为1；
console.log(b);//报错；变量b没有被定义；
</pre>

本文版权归本人及饥人谷所有，转载请注明出处

上一篇下一篇

猜你喜欢

热点阅读