前端面试题 + 面试翻车原因分析

素颜马尾好姑娘i 2023-06-27 12:43 16阅读 0赞

### 文章目录 ###

*   *  首先，直接来一套面试题冷静一下
     *   *  笔试题目
         *  之后自己Google，百度，知乎 得到的答案
         *  1、怎么实现居中效果？ \[分值：6\]
         *  2、请描述一下cookies，sessionStorage和localStorage的区别？ \[分值：6\]
         *  3、简单的描述下盒子模型。 \[分值：6\]
         *  4、HTTP协议中常用的报文头 \[分值：6\]
         *  5、前端页面由哪三层构成，分别是什么？作用是什么？ \[分值：6\]
         *  6、谈谈你对渐进增强和优雅降级的理解和它们的不同之处。 \[分值：6\]
         *  7、解释一下 JavaScript中的“变量提升”。 \[分值：6\]
         *  8、描述下JavaScript 中的 “事件冒泡” 和 “事件捕获”。 \[分值：6\]
         *  9、JavaScript 中 的call 和apply 有什么异同之处？ \[分值：6\]
         *  10、JavaScript 中 for 循环 与forEach 里面return 的区别 \[分值：6\]
         *  11、JavaScript中 深拷贝和浅拷贝的区别，如何实现数组深拷贝？ \[分值：6\]
         *  12、常见的内存泄漏原因有哪些，如何解决？ \[分值：6\]
         *  13、请简单描述下Vue与React的区别 \[分值：6\]
         *  14、谈谈AJAX的缓存机制,如何禁止缓存 \[分值：6\]
         *  15、 常用的设计模式有哪些，如何实现单例模式 \[分值：6\]
     *  总结：

## 首先，直接来一套面试题冷静一下 ##

### 笔试题目 ###

1、怎么实现居中效果？ \[分值：6\]  
您的回答： （简答题需要人工评分）

2、请描述一下cookies，sessionStorage和localStorage的区别？ \[分值：6\]  
您的回答： （简答题需要人工评分）

3、简单的描述下盒子模型。 \[分值：6\]  
您的回答：（简答题需要人工评分）

4、HTTP协议中常用的报文头 \[分值：6\]  
您的回答： （简答题需要人工评分）

5、前端页面由哪三层构成，分别是什么？作用是什么？ \[分值：6\]  
您的回答： （简答题需要人工评分）

6、谈谈你对渐进增强和优雅降级的理解和它们的不同之处。 \[分值：6\]  
您的回答：（简答题需要人工评分）

7、解释一下 JavaScript中的“变量提升”。 \[分值：6\]  
您的回答： （简答题需要人工评分）

8、描述下JavaScript 中的 “事件冒泡” 和 “事件捕获”。 \[分值：6\]  
您的回答：(空) （简答题需要人工评分）

9、JavaScript 中 的call 和apply 有什么异同之处？ \[分值：6\]  
您的回答： （简答题需要人工评分）

10、JavaScript 中 for 循环 与forEach 里面return 的区别 \[分值：6\]  
您的回答：(空) （简答题需要人工评分）

11、JavaScript中 深拷贝和浅拷贝的区别，如何实现数组深拷贝？ \[分值：6\]  
您的回答： （简答题需要人工评分）

12、常见的内存泄漏原因有哪些，如何解决？ \[分值：6\]  
您的回答： （简答题需要人工评分）

13、请简单描述下Vue与React的区别 \[分值：6\]  
您的回答：（简答题需要人工评分）

14、谈谈AJAX的缓存机制,如何禁止缓存 \[分值：6\]  
您的回答：(空) （简答题需要人工评分）

15、 常用的设计模式有哪些，如何实现单例模式 \[分值：6\]  
您的回答：(空) （简答题需要人工评分）

### 之后自己Google，百度，知乎 得到的答案 ###

### 1、怎么实现居中效果？ \[分值：6\] ###

您的回答：1、定位居中（father:position:relative, children:position:fixed）  
2、负边距居中（margin-top，margin-left）  
3、display:flex, align-items:center （简答题需要人工评分）

### 2、请描述一下cookies，sessionStorage和localStorage的区别？ \[分值：6\] ###

您的回答：（1）存储大小；  
cookie 数据大小不能超过4k， 其余的两个虽然也有大小限制，但是比cookie 大得多  
（2）有效时间；  
localStorage 存储持久数据，除非主动删除数据，否则数据不会轻易丢失  
sessionStorage 数据在浏览器关闭后消失  
cookie 有过期时间  
（3）data与服务器的交互方式  
cookie 会自动传递数据到服务器，服务器也可以写cookie  
其余两个只保存在本地，不会自动发送数据 （简答题需要人工评分）

### 3、简单的描述下盒子模型。 \[分值：6\] ###

您的回答：所有页面中的元素都可以看成是一个盒子，并且占据着一定的页面空间。一个页面由很多这样的盒子组成，这些盒子之间会相互影响。  
盒子模型是由content、padding、margin、border这四个属性组成的。其中还有width和height进行辅助描述 （简答题需要人工评分）

### 4、HTTP协议中常用的报文头 \[分值：6\] ###

您的回答：报文头的属性有：

Accept  
请求报文可通过一个“accept”报文头属性告诉服务端 客户端接收什么类型的响应。  
如下报文头相当于告诉服务端，它能接收的响应类型为纯文本数据。  
Accept属性的值可以为一个或多个MIME类型的值（描述消息内容类型的因特网标准，消息能包含文本、图像、音频视频以及其他应用程序专用的数据）

Accept：text/plain  
cookie  
客户端的cookie就是通过这个报文头属性传给服务器  
Cookie: $Version=1; Skin=new;jsessionid=5F4771183629C9834F8382E23  
服务端是怎么知道客户端的多个请求是隶属于一个Session呢？注意到后台的那个jsessionid = 5F4771183629C9834F8382E23木有？原来就是通过HTTP请求报文头的Cookie属性的jsessionid的值关联起来的！（当然也可以 通过重写URL的方式将会话ID附带在每个URL的后面哦）。

referer  
表示这个请求时从哪个URL过来的，假如你通过Google搜索出一个商家的广告页面，你对这个页面广告感兴趣，鼠标一点发送这个请求报文到商家的网站，这个请求报文的referer报文头属性值就是http://www.google.com

cache-control  
对缓存进行控制，如一个请求希望响应返回的内容在客户端要被缓存一年，或不希望被缓存就可以通过这个报文头达到目的 （简答题需要人工评分）  
**丢分原因：** 对HTTP不熟悉，然后写的面试题不多，脑子一乱就乱写了。  
**解决方案：** 找到一本叫做《图解HTTP》的书，准备将它干掉

### 5、前端页面由哪三层构成，分别是什么？作用是什么？ \[分值：6\] ###

您的回答：结构层、表式层、行为层  
HTML、CSS、JavaScript  
使用HTML去搭建文档的结构、CSS搭载表现效果、JavaScript实现行为 （简答题需要人工评分）

### 6、谈谈你对渐进增强和优雅降级的理解和它们的不同之处。 \[分值：6\] ###

您的回答：渐进增加，可以理解为向上兼容版本，针对较低版本的浏览器来构建页面，保证所有基本功能点都能实现。再根据高版本追加功能  
优雅降级，可以理解为向下兼容版本，先针对高版本实现功能，再对低版本进行兼容补充  
区别：一个是慢慢加，一个是慢慢减 （简答题需要人工评分）

### 7、解释一下 JavaScript中的“变量提升”。 \[分值：6\] ###

您的回答：在JavaScript中，函数、变量的声明都会被提升（hoisting）到该函数或变量所在的scope的顶部。即——JavaScript的变量提升。

javascript中一个名字(name)以四种方式进入作用域(scope)，其优先级顺序如下：

语言内置：所有的作用域中都有 this 和 arguments 关键字;  
形式参数：函数的参数在函数作用域中都是有效的;  
函数声明：形如function foo() \{\};  
变量声明：形如var bar;  
名字声明的优先级如上所示。也就是说如果一个变量的名字与函数的名字相同，那么函数的名字会覆盖变量的名字，无论其在代码中的顺序如何。但名字的初始化却是按其在代码中书写的顺序进行的，不受以上优先级的影响。（简答题需要人工评分）  
**丢分原因：** 没来得及写，害。等自己水完几道乱七八糟的题的时候，已经没时间写了。而且自己对这部分概念也并不是特别的熟悉。  
**解决方案：** 重新复习一遍JavaScript基础，然后再深入学习一下JavaScript高级

### 8、描述下JavaScript 中的 “事件冒泡” 和 “事件捕获”。 \[分值：6\] ###

您的回答：事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。

事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。

用图示表示如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70]

1、冒泡事件：

事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。通俗来讲就是，就是当设定了多个div的嵌套时；即建立了父子关系，当父div与子div共同加入了onclick事件时，当触发了子div的onclick事件后，子div进行相应的js操作，但是父div的onclick事件同样会被触发。 (空) （简答题需要人工评分）

2.阻止事件冒泡：

给div3的绑定事件改为。ev.canceBubble=true;

3、事件捕获：

从顶层元素到目标元素或者从目标元素到顶层元素，和事件冒泡是一个相反的过程。事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。

**丢分原因：** 不吹不黑，这个真的不知道。所以还是菜  
**解决方案：** 来这里做笔记

### 9、JavaScript 中 的call 和apply 有什么异同之处？ \[分值：6\] ###

您的回答：

call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象，第二个参数差别就来了：

call 的参数是直接放进去的，第二第三第 n 个参数全都用逗号分隔，直接放到后面 obj.myFun.call(db,‘成都’, … ,‘string’ )。

apply 的所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,\[‘成都’, …, ‘string’ \])。

bind 除了返回是函数以外，它 的参数和 call 一样。

当然，三者的参数不限定是 string 类型，允许是各种类型，包括函数 、 object 等等！（简答题需要人工评分）

**丢分原因：** 这里错得简直太憨批了，之前就踩过这个坑，还在自己博客里面做过笔记，结果现在还是错了一次。\[https://blog.csdn.net/wuyxinu/article/details/103465920\]  
**解决方案：** 以后多翻笔记。。

### 10、JavaScript 中 for 循环 与forEach 里面return 的区别 \[分值：6\] ###

您的回答：for 使用return 、 break，是跳出了整个循环。  
forEach 使用return只是跳出了当前的循环， 使用break报语法错误。  
for 循环里面 return 可以直接终止 跳出 循环  
forEach 是中断本次循环 直接 下一个循环 forEach想要取到值之后 直接跳出循环 可以用 try catch（简答题需要人工评分）

**丢分原因：** 基础不行，还真的没有注意过这方面的区别  
**解决方案：** 来这里记笔记

### 11、JavaScript中 深拷贝和浅拷贝的区别，如何实现数组深拷贝？ \[分值：6\] ###

您的回答：如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。

浅拷贝：复制一份引用，所有引用对象都指向一份数据，并且都可以修改这份数据。

深拷贝（复杂）：复制变量值，对于非基本类型的变量，则递归至基本类型变量后，再复制。可以使用slice和concat方法。

一维数组深拷贝slice和concat方法

1.  slice()

slice()语法：arrayObj.slice(start,\[end\])；

start：必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1指最后一个元素，-2 指倒数第二个元素，以此类推。

end:可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

返回值:返回一个新的数组，包含从start 到 end （不包括该元素）的arrayObject 中的元素（如果 end 未被规定，那么slice() 方法会选取从 start 到数组结尾的所有元素）。

2.concat()方法

concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

语法：arrayObject.concat(arrayX,arrayX,…,arrayX)

说明：返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。

（简答题需要人工评分）  
**丢分原因：** 很惨，自己是知道这道题的大致答案的，但是就是无法通过自己的语言写出来  
**解决方案：** 还是需要多刷一些面试题

### 12、常见的内存泄漏原因有哪些，如何解决？ \[分值：6\] ###

您的回答：一：什么是内存泄露  
内存泄露是指：内存泄漏也称作"存储渗漏"，用动态存储分配函数动态开辟的空间，在使用完毕后未释放，结果导致一直占据该内存单元。直到程序结束。(其实说白了就是该内存空间使用完毕之后未回收)即所谓内存泄漏。

二：常见的内存泄露造成的原因  
1、单例造成的内存泄漏  
由于单例的静态特性使得其生命周期和应用的生命周期一样长，如果一个对象已经不再需要使用了，而单例对象还持有该对象的引用，就会使得该对象不能被正常回收，从而导致了内存泄漏。  
2、非静态内部类创建静态实例造成的内存泄漏  
3、Handler造成的内存泄漏  
4、线程造成的内存泄漏  
5、资源未关闭造成的内存泄漏  
6、使用ListView时造成的内存泄漏  
7、集合容器中的内存泄露  
8、WebView造成的泄露

三：如何避免内存泄漏？  
1、平常养成良好的代码书写习惯，该销毁的对象要销毁比如destory啊 广播啊 ，涉及到要用到content上下文的优先考虑全局上线文对象。

**丢分原因：** 这个是真的记不清。学的东西太少了  
**解决方案：** 还是需要多刷一些面试题

### 13、请简单描述下Vue与React的区别 \[分值：6\] ###

您的回答：相同点：

1.都支持服务器端渲染
    
    2.都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范
    
    3.数据驱动视图
    
    4.都有支持native的方案,React的React native,Vue的weex
    
    5.都有管理状态，React有redux,Vue有自己的Vuex（自适应vue，量身定做）

不同点：

1.React严格上只针对MVC的view层,Vue则是MVVM模式
    
       2.virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.
    
           而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
    
       3.组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即'all in js';
    
           Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,jd写在同一个文件;
    
       4.数据绑定: vue实现了数据的双向绑定,react数据流动是单向的
    
       5.state对象在react应用中不可变的,需要使用setState方法更新状态;
    
         在vue中,state对象不是必须的,数据由data属性在vue对象中管理； （简答题需要人工评分）

**丢分原因：** 这个是真的记不清。学的东西太少了  
**解决方案：** 还是需要多刷一些面试题

### 14、谈谈AJAX的缓存机制,如何禁止缓存 \[分值：6\] ###

您的回答：  
Ajax的缓存机制和浏览器处理资源时的缓存机制是一样的。

三条简单规则：

只要是URL相同的GET请求，浏览器会使用缓存(当然还要看服务器的Cache-Control/Expires/Last-Modified/ETag头的设置)。  
只要是POST请求，浏览器都不会缓存。  
Https的请求，浏览器不会缓存(绝大数情况如此，但是也有例外，据说FF浏览器是例外)。

补充：

在URL中拼入随机的查询字符串可以使浏览器认为这是一个新的请求，从而不使用缓存。  
在Ajax的请求中设置Http头: If-Modified-Since:0，告诉服务器要新的内容。

解决Ajax缓存问题的方法

解决这个问题最有效的办法是禁止页面缓存，有以下几种处理方法：

1.在ajax发送请求前加上 xmlHttpRequest.setRequestHeader(“Cache-Control”,”no-cache”);

2.在服务端加 header(“Cache-Control: no-cache, must-revalidate”);

3.在ajax发送请求前加上 xmlHttpRequest.setRequestHeader(“If-Modified-Since”,”0″);

（简答题需要人工评分）

**丢分原因：** 没时间写  
**解决方案：** 还是需要多刷一些面试题

### 15、 常用的设计模式有哪些，如何实现单例模式 \[分值：6\] ###

您的回答：  
单例(饱汉模式、饥汉模式)  
1、构造方法私有化，除了自己类中能创建外其他地方都不能创建

2、在自己的类中创建一个单实例（饱汉模式是一出来就创建创建单实例，而饥汉模式需要的时候才创建）

3、提供一个方法获取该实例对象(创建时需要进行方法同步)

工厂模式:Spring IOC就是使用了工厂模式.  
对象的创建交给一个工厂去创建。

代理模式:Spring AOP就是使用的动态代理。

[单例模式的几种实现][Link 1]

（简答题需要人工评分）

**丢分原因：** 没时间写  
**解决方案：** 还是需要多刷一些面试题

## 总结： ##

1、基础知识不够扎实，得多学学。  
2、写题前真的要看清楚有多少道题，害。太惨了，我一开始以为只有十道题。然后慢慢悠悠的。。写了四五道发现进度条好像不太妥，结果才发现有十五道。  
3、需要多刷一些面试题了。不然真的找不到工作了、  
4、多做几个项目可能会好一点吧

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200107201404972.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU=,size_16,color_FFFFFF,t_70
[Link 1]: https://blog.51cto.com/13537308/2161472