2021前端开发面试题及答案---图片（面试题系列持续更新中）（4）

た入场券 2022-09-11 06:10 192阅读 0赞

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp5LiL54aZ54aZ55qG5Li65Yip5p2l5ZWK_size_12_color_FFFFFF_t_70_g_se_x_16]  
参考答案：

## 1.1 js中null和undefined区别？ ##

1. 相同点
    　　if 判断语句中，两者都会被转换为false
    
     
    
    2. 不同点
    Number转换的值不同，Number(null)输出为0, Number(undefined)输出为NaN
    
    null表示一个值被定义了，但是这个值是空值
    作为函数的参数，表示函数的参数不是对象
    
    作为对象原型链的终点 （Object.getPrototypeOf(Object.prototype)）
    
    定义一个值为null是合理的，但定义为undefined不合理（var name = null）　　　　　　
    undefined表示缺少值，即此处应该有值，但是还没有定义
    变量被声明了还没有赋值，就为undefined
    
    调用函数时应该提供的参数还没有提供，该参数就等于undefined
    
    对象没有赋值的属性，该属性的值就等于undefined
    
    函数没有返回值，默认返回undefined

## 1.2 描述new操作符具体干了什么？ ##

题目解析
    
    先看代码
    
    var Func=function(){
    };
    var func=new Func ();
    new共经过了4几个阶段
    
    1、创建一个空对象
    
    varobj=new Object();
    2、设置原型链
    
    obj.__proto__= Func.prototype;
    3、让Func中的this指向obj，并执行Func的函数体。
    
    var result =Func.call(obj);
    4、判断Func的返回值类型：
    
    如果是值类型，返回obj。如果是引用类型，就返回这个引用类型的对象。
    
    if (typeof(result) == "object"){
      func=result;
    }
    else{
        func=obj;;
    }

## 2.js中apply和call的作用和区别是什么？ ##

1、call，apply都属于Function.prototype的一个方法，它是JavaScript引擎内在实现的，因为属于Function.prototype，所以每个Function对象实例(就是每个方法)都有call，apply属性。既然作为方法的属性，那它们的使用就当然是针对方法的了，这两个方法是容易混淆的，因为它们的作用一样，只是使用方式不同。
    
    2、语法：foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments) == this.foo(arg1, arg2, arg3);
    
    3、相同点：两个方法产生的作用是完全一样的。
    
    4、不同点：方法传递的参数不同。

## 3.列举js中的性能优化的方案 ##

包括：  
页面级优化和代码级优化。然后细分  
页面级优化：比如：  
1.减少 HTTP请求数  
2.将外部脚本置底（将脚本内容在页面信息内容加载后再加载）  
3.异步执行 inline脚本(其实原理和上面是一样，保证脚本在页面内容后面加载。)  
4. Lazy Load Javascript（只有在需要加载的时候加载，在一般情况下并不加载信息内容。）  
5. 将 CSS放在 HEAD中  
6. 异步请求 Callback（就是将一些行为样式提取出来，慢慢的加载信息的内容）  
7. 减少不必要的 HTTP跳转  
8. 避免重复的资源请求

代码级优化：比如：

1.  js写法
2.  CSS选择符
3.  HTML
4.  Image压缩  
    参考：  
    [https://www.cnblogs.com/coober/p/8078847.html][https_www.cnblogs.com_coober_p_8078847.html]

## 4.描述前端模块化方案 组件 打包 ##

参考：  
[https://blog.csdn.net/weixin\_33787529/article/details/88794819][https_blog.csdn.net_weixin_33787529_article_details_88794819]

## 5.cookies、sessionStorage和localStorage解释及区别 ##

参考：  
[https://blog.csdn.net/weixin\_42614080/article/details/90706499/][https_blog.csdn.net_weixin_42614080_article_details_90706499]

## 6. 用到的css动画有哪些？ ##

参考：  
[https://www.cnblogs.com/starof/p/4968769.html][https_www.cnblogs.com_starof_p_4968769.html]

## 7.js延迟加载的方式有哪些？ ##

一般有以下几种方式：

defer 属性  
async 属性  
动态创建DOM方式  
使用jQuery的getScript方法  
使用setTimeout延迟方法  
让JS最后加载  
参考：  
[https://blog.csdn.net/meijory/article/details/76389762][https_blog.csdn.net_meijory_article_details_76389762]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp5LiL54aZ54aZ55qG5Li65Yip5p2l5ZWK_size_12_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/268585bdb25a4a90a093c65677c0fced.png
[https_www.cnblogs.com_coober_p_8078847.html]: https://www.cnblogs.com/coober/p/8078847.html
[https_blog.csdn.net_weixin_33787529_article_details_88794819]: https://blog.csdn.net/weixin_33787529/article/details/88794819
[https_blog.csdn.net_weixin_42614080_article_details_90706499]: https://blog.csdn.net/weixin_42614080/article/details/90706499/
[https_www.cnblogs.com_starof_p_4968769.html]: https://www.cnblogs.com/starof/p/4968769.html
[https_blog.csdn.net_meijory_article_details_76389762]: https://blog.csdn.net/meijory/article/details/76389762