1. CSS 和 JS 在网页中的放置顺序是怎样的?
CSS部分一般放在<head>内,而JS一般放在<body>的最后。因为对于图片或其他网页内容CSS文件通常会与其并发加载,而加载JS时浏览器会禁用并发加载,这就影响了页面加载速度,故而将JS放在HTML文件后面。
2. 解释白屏和FOUC。
- 当CSS文件或链接放在
<body>
元素最后时,因为浏览器对于HTML文件是自上而下加载解析,这就导致了在CSS文件的加载解析时机被推后,由于解析完成之前浏览器不能完成页面的渲染,在这种情况下会出现白屏现象。同样,由于@import
的加载时机靠后,所以也会出现白屏的问题。 - 同样,当把JS文件放在HTML顶部是,由于JS加载时会禁用并发,所以在JS加载完成之前浏览器无法加载之后的HTML文件,也会导致白屏现象。
- 以上条件在IE浏览器中会出现FOUC(无样式内容闪烁)现象。
3. async
和defer
的作用是什么?有什么区别
正常情况下,浏览器会加载JS文件并立即执行,这就会导致JS命令执行时相应的HTML文件还未渲染完成;
有了async
,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步);
同样,**有了defer
** ,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。
区别在于有defer
的情况下,JS的执行会在所有元素解析完成之后,而有async
的情况下JS的加载执行会和后续文档同时进行。
4. 简述网页的渲染机制
- 打开一张网页时,浏览器首先会根据所提供的URL在服务器端找到并加载相应的文件;
- 加载完成后浏览器会将HTML文件解析成DOM树;
- 将CSS文件解析成CSSOM树;
- 将DOM和CSSOM组合成渲染树(render tree);
- 依据渲染树在屏幕上绘制网页。
5. JavaScript 定义了几种数据类型?哪些是简单类型?哪些是复杂类型?
JavaScript定义了6中数据类型,其中有
- 三种原始类型(primitive type):数值(number),字符串(string),布尔型(boolean);
- 一种复杂类型(complex type):对象(object);
- 还有两个特殊值:undefined和null。
其中对象(object)还可分为3种类型:
- 狭义的对象(object);
- 数组(array);
- 函数(function)。
6.NaN
、undefined
、null
分别代表什么?
-
NaN
,表示一个值是数字类型但不是具体数字; -
undefined
表示此变量未定义或者不存在; -
null
表示此变量存在但值为空。
7.typeof和instanceof的作用和区别?
typeof的返回值是数据类型字符串,以确认一个值的数据类型。而instanceof的返回值是布尔型,以确定某一值是否为指定数据类型。
代码题:
1. 完成如下代码判断一个变量是否是数字、字符串、布尔、函数 (难度*)
function isNumber(el){ // todo ... } function isString(el){ //todo ... } function isBoolean(el){ //todo ... } function isFunction(el){ //todo ... } 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"); //将2转化为字符串"2"后join,输出"24"
console.log(+new Date());//1468139798410(用new Date() 会转换为从1970.1.1开始的毫秒数)
console.log(+"4");//将字符串"4"转化为数值,输出4
3. 以下代码的输出结果是?
var a = 1;
a+++a;
typeof a+2;
第二行语句中,因为```a++```优先级高于```++a```,故第二行语句也可写成```(a++)+a;```
结果为3,
第三行语句中,```typeof a```的优先级高于```a+2```,```typeof a```的返回值为```'number'```,故代码输出结果是```'number2'```。
###4. 遍历数组,把数组里的打印数组每一项的平方
- ```
var arr = [3,4,5]
// todo..
// 输出 9, 16, 25
1.用for循环:
var arr = [3,4,5]; for ( var a = 0; a < arr.length ; a++ ) { console.log(arr[a]*arr[a]); } // 9 // 16 // 25
2.用while循环:
- ```
<script type="text/javascript">
var arr = [3,4,5];
var a = 0;
while (a<3){
console.log(arr[a]*arr[a]);
a++;
}
// 9
// 16
// 25
5.遍历 JSON, 打印里面的值
var obj = { name: 'hunger', sex: 'male', age: 28 } //todo ... // 输出 name: hunger, sex: male, age:28
使用for...in语句:
- ```
var obj = {
name: 'hunger',
sex: 'male',
age: 28
}
for (var a in obj){
console.log(a+':'+obj[a])
}
//name:hunger
//sex:male
//age:28
6. 下面代码的输出是? 为什么
console.log(a);//undefined var a = 1;// console.log(a);//1 console.log(b);//Uncaught ReferenceError: b is not defined(…)
第一条:由于变量提升,故存在变量 ```a ```,但变量 ```a ```未被赋值;
第二条:给 ```a``` 赋值;
第三条:打印 ```a``` 的值;
第四条:没有定义变量 ```b```。
***
该教程版权归本人和饥人谷所有,转载请注明来源。