CSS和JS在网页中的放置顺序是怎样的？
- CSS一般放置于网页开头，head标签内。
- JS一般放置于网页最后，body标签底部。
原因如下： - 脚本会阻塞后面内容的呈现
- 脚本会阻塞其后组件的下载
- 对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件). 但在加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载. 所以把 JavaScript 放入页面顶部也会导致 白屏现象.
解释白屏和FOUC
- 白屏
- 如果把样式放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现。(等CSS样式加载完毕之后,对内容再进行展示渲染，即会导致白屏幕出现)
- 如果使用 @import 标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏。
- 把 JavaScript 放入页面顶部也会导致白屏现象.
- FOUC
- 如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于 Firefox 会一直表现出 FOUC .
async和defer的作用是什么？有什么区别
-
<script src="script.js"></script>
没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。 -
<script async src="script.js"></script>
有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。 - async:不保证顺序
-
<script defer src="script.js"></script>
有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。 - defer:脚本延迟到文档解析和显示后执行，有顺序
简述网页的渲染机制
- 解析 HTML 标签, 构建 DOM 树
- 解析 CSS 标签, 构建 CSSOM 树
- 把 DOM 和 CSSOM 组合成 渲染树 (render tree)
- 在渲染树的基础上进行布局, 计算每个节点的几何结构
-
把每个节点绘制到屏幕上 (painting)
JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?
- 数值（number）：整数和小数（比如1和3.14）简单类型
- 字符串（string）：字符组成的文本（比如"Hello World"）简单类型
- 布尔值（boolean）：true（真）和false（假）两个特定值简单类型
- undefined：表示“未定义”或不存在，即此处目前没有任何值
- null：表示空缺，即此处应该有一个值，但目前为空
- 对象（object）：各种值组成的集合(复杂类型)
NaN、undefined、null分别代表什么?
- NaN含义是Not a Number，表示非数字，NaN和任何值都不相等，包括自己
- null表示空值，即该处的值现在为空。典型用法是：
- 作为函数的参数，表示该函数的参数是一个没有任何内容的对象。
- 作为对象原型链的终点。
- undefined表示不存在值，就是此处目前不存在任何值。典型用法是：
- 变量被声明了，但没有赋值时，就等于undefined。
- 调用函数时，应该提供的参数没有提供，该参数等于undefined。
- 对象没有赋值的属性，该属性的值为undefine
- 函数没有返回值时，默认返回undefined。
typeof和instanceof的作用和区别?
-
typeof运算符可以返回一个值的数据类型
-
原始类型
数值、字符串、布尔值分别返回number、string、boolean。
typeof 123 // "number"
typeof '123' // "string"
typeof false // "boolean" -
函数
函数返回function。
function f() {}
typeof f
// "function" -
undefined
undefined返回undefined。
typeof undefined
// "undefined" -
其他
除此以外，其他情况都返回object。
typeof window // "object"
typeof {} // "object"
typeof [] // "object"
typeof null // "object"
空数组（[]）的类型也是object，这表示在JavaScript内部，数组本质上只是一种特殊的对象。另外，null的类型也是object，这是由于历史原因造成的，为了兼容以前的代码，后来就没法修改了，并不是说null就属于对象，本质上null是一个类似于undefined的特殊值。 -
instanceof
instanceof返回的值是布尔型boolean，用于判断一个对象是不是某一个类型的实例。如判断为数组(array)还是对象(object)
var o = {};
var a = [];o instanceof Array // false a instanceof Array // true
代码
- 完成如下代码判断一个变量是否是数字、字符串、布尔、函数
function isNumber(el){
}
function isString(el){
}
function isBoolean(el){
}
function isFunction(el){
}
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
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
function isNumber(el){
return (typeof el == 'number');
}
function isString(el){
return (typeof el == 'string');
}
function isBoolean(el){
return (typeof el == 'boolean');
}
function isFunction(el){
return (typeof el == 'function');
}
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
</script>
</body>
</html> - 以下代码的输出结果是?
console.log(1+1); //2 在两个操作数都是数字的时候，会做加法运算
console.log("2"+"4"); //"24" 两个参数都是字符串或在有一个参数是字符串的情况下会把另外一个参数转换为字符串做字符串拼接
console.log(2+"4"); // "24" 同上
console.log(+new Date());//从'1970/01/01 00:00:00'为起点，开始叠加的毫秒数。
console.log(+"4"); //4 在只有一个字符串参数的时候会尝试将其转换为数字
-
以下代码的输出结果是?
var a = 1;
a+++a; //即(a++)+a,为1+2=3typeof a+2;即为(typeof a)+2 即number+2=number2 -
遍历数组，把数组里的打印数组每一项的平方 （难度*）
var arr = [3,4,5]
// todo..
// 输出 9, 16, 25
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
var arr = [3,4,5];
function writeArr(arr){
for(var i=0; i<arr.length;i++){
document.write(arr[i]arr[i])
}
}
writeArr(arr);
</script>
</body>
</html> -
遍历 JSON, 打印里面的值
var obj = {
name: 'hunger',
sex: 'male',
age: 28
}
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
var obj = {
name: 'hunger',
sex: 'male',
age: 28
}
function writeObj(obj){
for(var key in obj){
document.write(key+":"+obj[key]+";")
}
}
writeObj(obj);
</script>
</body>
</html> -
下面代码的输出是? 为什么
console.log(a);//使用了变量提升，会将var a;自动调至最前面执行，但是此时a并未赋值。
var a = 1;
console.log(a);
console.log(b);//未声明变量
undefined,1，b is not defined
本文版权归本人和饥人谷所有，转载请注明来源。
网友评论