js基础知识

问答题

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

1. CSS:
2. JS: 放在html后面,之前

2.解释白屏和FOUC

使用 link 标签将样式表放在顶部

白屏问题

如果把样式放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现
如果使用 @import 标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏

FOUC (Flash of Unstyled Content) 无样式内容闪烁

如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于 Firefox 会一直表现出 FOUC .

->对于图片和CSS:在加载时会并发加载(如一个域名下同时加载两个文件). 但在加载 JavaScript时:会禁用并发,并且阻止其他内容的下载. 所以把 JavaScript 放入页面顶部也会导致 白屏 现象.

将JS放在底部

脚本会阻塞后面内容的呈现
脚本会阻塞其后组件的下载

样式放后面: 要么白屏 要么无样式内容闪烁
js 是 一个个的加载的,不会并发加载,js放顶部也会白屏,加载时间长

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

加载异步

defer: 有顺序,脚本延迟到文档解析和显示完后执行
async: 不保证顺序,js加载的时候不影响后面的元素加载

理解: defer 串联 - - - async 并联

4.简述网页的渲染机制

1. 解析html标签,构建DOM树
2. 解析css标签,构建CSSOM树
3. 把DOM和CSSOM组合成渲染树(render tree)
4. 在渲染树的基础上布局,计算每个节点的几何结构
5. 把每个节点绘制展示在屏幕上(painting)
   参考:浏览器的工作原理

读取html -- 加载外部标签样式(浏览器二次请求) --综合解析后在进行绘制展示

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

1. 6种数据类型

• 数值 number :整数和小数
• 字符串 string :字符组成的文本
• 布尔 boolean :true / false 两个特定值
• null :空, 即:此处应该有一个值,但目前为空
• undefined :未定义或不存在, 即:没有任何值
• 对象 object :数组,各种值组成的集合
  > object 又分为:
  > 1. 狭义的对象（object）
  > 2. 数组（array）
  > 3. 函数（function） (处理数据的方法)

2. 简单类型: number & string & boolean
3. 复杂类型: 一切皆对象 object
4. 特殊类型: null & undefined

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

1. NaN: not a number; NaN≠任何值 且:NaN≠NaN
2. undefined: 未定义,空,没有任何值
3. null: 空,此处应该有一个值,但目前为空

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

1. typeof: 返回一个值的数据类型

   typeof 123; // "number"
   typeof "123"; // "string"
   typeof false; // "boolean"
   定义一个函数: function f(){}
   typeof f; // "function"
   typeof undefined; // "undefined"
   除上述以外都返回 object
   typeof window // "object"
   typeof {} // "object"
   typeof [] // "object"
   typeof null // "object"(历史原因,特殊记忆)

2. instanceof :
   由于空数组([])类型为object,null也是object,对象也是object,typeof 无法区分,可用instanceof区分

var a = {};
var b = [];
var c = null;
如下:
a instanceof Array // false
b instanceof Array // true
c instanceof Array // false

代码题

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

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 都是number会做加法运算
 console.log("2"+"4"); //24 都是string会做拼接
 console.log(2+"4"); //24 有一个string和一个number时会将number转为string然后拼接在一起
 console.log(+new Date()); //1473690373645 ,用new Date()参与计算会自动转换为从1970.1.1到现在的时间的毫秒数
 console.log(+"4"); //4 ,在只有一个字符串参数的时候会尝试将其转换为数字
 

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

 var a = 1;
 a+++a;
 3 // a=a+1 +a
 typeof a+2;
 number2 // (typeof 2) +2 ->number2
 

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

 if (arr= [3,4,5]){
 for (k in arr){
 console.log(arr[k]*arr[k]);
 }
 }

9
 16
 25
 

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

 var obj = {
 name: 'hunger',
 sex: 'male',
 age: 28
 }

for (var k in obj){
 console.log(obj[k])
 }
hunger
 male
 28
 

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

 console.log(a); //undefined 变量提升-->js的工作方式是先提取所有声明, 这里先提取 var a ,所以console.log(a)为undefined
 var a = 1;
 console.log(a);// 1 提取声明后逐步进行
 console.log(b);//b is not defined
 

eg:

l16-js-bianliangtishegn.png

★本文章转载须注明出处，版权属作者Q:2361597776和饥人谷所有