HTML5教程

菜鸡Littleegg的前端面经(一)

本文主要是介绍菜鸡Littleegg的前端面经(一),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

菜鸡Littleegg的前端面经(一)

大四,考虑了很久放弃了考研之后呢,本菜鸡就准备找实习了,但是发现都挺难的。

因为学校没有统一的安排,所以得自己去找实习,这里比较推荐boss直聘和实习僧。下面整理一下我的面试经验吧,也算是一个复习。

先是自我介绍,这个还是要好好准备下的,具体我也还是新手,在摸索中。

问题一:你觉得一个前端工程师需要会哪些技能?

答:我觉得首先需要会三件套——HTML、CSS、JavaScript,然后进行进一步深入,了解一些前端的框架,比如jQuery库,Bootstrap框架等,也需要学习主流的MVVM框架,比如vue.js、react.js、angular.js等,然后前端也需要会一些后端知识,因为涉及到向服务器请求数据等等。当然前端也不仅仅局限于这些,这是是我个人目前对此的认识。

算是已经把个人接触到的一些说了,但是整的一个前端还设计更多的方面,可以看一下别人的整理自学前端需要达到什么水平才能去工作?

问题二:知道HTTP有哪些状态码吗?

答:状态码主要分为5种,分别是1—5的开头。1开头表示请求,2开头的表示请求成功,3开头的表示重定向,4开头一般是客户端这边的错误,比如404 Not found。5开头是服务器端的错误,比如内部错误或者负载过重。

把5种状态码都说出来了,觉得应该还不错,但是面试官继续深入下去问,问我有没有了解过100和101,知不知道301和302的区别。呜呜呜,我就记住了302是临时性重定向,另外几个没有特别去记,真的可惜。然后我就说我会再去复习一下,最近也有在看《图解HTTP》。

菜鸟教程网址:HTTP状态码 | 菜鸟教程 (runoob.com)

尽量能够全部了解吧,因为你也不知道面试官会随机抽哪一个,理解了的话,记起来也还行。

问题三:行内元素和块级元素的区别?

这里我就不贴我的回答了,简直不堪入目!主要是把p标签说成了行内元素,救命,应该是span啊,呜呜呜。

下面是两者的概念和不同。


块级元素:块状元素排斥其他元素与其位于同一行,可以设定元素的宽(width)和高(height),块级元素一般是其他元素的容器,可容纳块级元素和行内元素。

常见块级元素有:h1,h2,h3,h4,h5,h6,p,div,dl,dt,hr,ol,ul,li,form,pre,table,td,th;

行内元素:行内元素不可以设置宽(width)和高(height),但可以与其他行内元素位于同一行,行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定,宽度由内容的长度控制。

常见内联元素有:em,strong,span,button,input,label,code,select,img,textarea

两者之间的区别:
1.块级元素占据一整行,内联元素的宽度是其元素内容的宽度,多个内联元素排列会放在同一行里除非放不下,才会挤到新的一行
2.块级元素可以设置宽度width和高度height,而内联元素设置widht和height是无效的
3.块级元素可以包含块级元素和内联元素,而内联元素只能包含文本
4.块级元素可以设置margin和padding属性,行内元素只有margin-left、margin-right、padding-left、padding-right起作用


问题四:了解跨域吗?为什么会产生跨域,如何解决呢?

答:当一个两个页面的协议、主机和端口,三者有任一不相同即会产生跨域。
解决:1、客户端浏览器解除跨域限制2、发送JSONP请求替代XHR请求3、修改服务器端(包括HTTP服务器和应用服务器)

对跨域的解释比较不到位,解决的方法倒是都说了,但是最后的修改服务器端面试官具体问了,但是我没有很好的打出来,还是最主要的漏洞——没有深入了解。


跨域:跨域是是因为浏览器的同源策略限制,是浏览器的一种安全机制,服务端之间是不存在跨域的。

具体建议看下面两篇,我也要去好好学习了~

什么是跨域?跨域解决方法_越努力,越幸运!-CSDN博客

一文搞懂跨域的所有问题,生活从此669~_慕课手记


问题五:说一下json的工作原理。

答:这个我没有具体深入了解过

呜呜呜,本菜鸡真的没深入了解,唉,真惨,现在要去了解了!

JSON: JavaScript Object Notation(JavaScript 对象标记法),是一种存储和交换数据的语法,通过 JavaScript 对象标记法书写的文本。

还是继续附上链接:JSON的基本结构和数据交换原理 - Dulk - 博客园 (cnblogs.com)

问题六:cookie和session的区别。

答:cookie是在本地存储的,session还没有特别接触过。

因为本没有做过很多与服务器相关并进行数据交换的项目,所以真的不好解释,硬背也有风险。最好还是去找项目练手。


区别:

1、数据存储位置:cookie数据存放在客户的浏览器上,session数据放在服务器上。

2、安全性:cookie不是很安全,别人可以分析存放在本地的cookie并进行cookie欺骗,考虑到安全应当使用session。

3、服务器性能:session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能,考虑到减轻服务器性能方面,应当使用cookie。

4、数据大小:单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie。

5、信息重要程度:可以考虑将登陆信息等重要信息存放为session,其他信息如果需要保留,可以放在cookie中。
两者的工作原理和使用可以看这篇文章:cookie和session的详解与区别 - 测试开发喵 - 博客园 (cnblogs.com)


问题七:sessionStorage和localStorage

答:我不清楚这个。

内心os,救命救命,谁来救救我!!!


sessionStorage和localStorage的区别是:1、localStorage没有过期时间;2、sessionStorage针对一个session进行数据存储,生命周期与session相同,当用户关闭浏览器后,数据将被删除。

sessionStorage和localStorage的区别是什么-php教程-PHP中文网


问题八:JavaScript有哪些数据类型?

答:字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、对象(Object)、数组(Array)

少答了几个,一时之间没反应出来。


值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol(ES6)。

引用数据类型:对象(Object)、数组(Array)、函数(Function)。


问题九:说一下什么是事件监听和事件冒泡。

答:事件冒泡就是比如你在一个按钮上点击了一下,他就会一层一层向上冒,父元素也会有这个事件;事件监听就是添加一个Listener,监听在上面的事件比如鼠标点击、滑动,输入等

感觉解释的不够好,语言没组织好,主要是知道这么回事但是说不出来……


事件冒泡:从事件源到顶层对象,即触发元素到window的事件执行顺序

事件捕获:从顶层对象到事件源,即触发元素到window的事件执行顺序

事件监听:调用对象.addEventListener(参数1,参数2,参数3)


问题十:JavaScript中new的工作原理。

答:具体内在我没有深入,只知道是创建了一个对象。

内心os:啊这啊这!!!


  1. 创建一个新对象
  2. 将新对象的_proto_指向构造函数的prototype对象
  3. 将构造函数的作用域赋值给新对象 (也就是this指向新对象)
  4. 执行构造函数中的代码(为这个新对象添加属性)
  5. 返回新的对象

问题十一:深拷贝与浅拷贝的区别。

答:浅拷贝(shallowCopy)只是增加了一个指针指向已存在的内存地址,深拷贝(deepCopy)是增加了一个指针并且申请了一个新的内存,使这个增加的指针指向这个新的内存。

其实我不是这样回答的,但是意思是对的,我是举了一个a=1,b=a的例子,形象一点。这个题目一般都会问到,绕不过去的。

问题十二:JavaScript中事件循环机制是什么?

答:我不清楚

具体可以看这篇文章,我没深入了解过,就被问的挺懵的。

深入理解JavaScript事件循环机制 - ChessZhang - 博客园 (cnblogs.com)

问题十三:如何让一个元素垂直居中?

我回答了两种,一种是设置绝对定位,然后还有margin设置为auto;还有就是一部分正一部分负的,具体其实没记太清,一般用css的时候都用的第一种,所以还是得多学学,捡起来。

这里就不具体整理了,看大佬整理的文章吧:元素垂直居中

问题十四:Vuejs的生命周期

这道题复习过了,能够完整把几个阶段都说出来,也有部分拓展,但是依然可以完善。


beforeCreate:是new Vue()之后触发的第一个钩子,在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。

created:在实例创建完成后发生,当前阶段已经完成了数据观测,也就是可以使用数据,更改数据,在这里更改数据不会触发updated函数。可以做一些初始数据的获取,在当前阶段无法与Dom进行交互,如果非要想,可以通过vm.$nextTick来访问Dom。

beforeMount:发生在挂载之前,在这之前template模板已导入渲染函数编译。而当前阶段虚拟Dom已经创建完成,即将开始渲染。在此时也可以对数据进行更改,不会触发updated。

mounted:在挂载完成后发生,在当前阶段,真实的Dom挂载完毕,数据完成双向绑定,可以访问到Dom节点,使用$refs属性对Dom进行操作。

beforeUpdate:发生在更新之前,也就是响应式数据发生更新,虚拟dom重新渲染之前被触发,你可以在当前阶段进行更改数据,不会造成重渲染。

updated:发生在更新完成之后,当前阶段组件Dom已完成更新。要注意的是避免在此期间更改数据,因为这可能会导致无限循环的更新。

beforeDestroy:发生在实例销毁之前,在当前阶段实例完全可以被使用,我们可以在这时进行善后收尾工作,比如清除计时器。

destroyed:发生在实例销毁之后,这个时候只剩下了dom空壳。组件已被拆解,数据绑定被卸除,监听被移出,子实例也统统被销毁。


问题十五:v-if和v-show的区别?

这里清楚不同,但是依旧没有很好的组织语言,还问出了几个小错,太不应该了。


1.共同点:都能控制元素的显示和隐藏。

2.不同点:实现本质⽅法不同,v-show本质就是通过控制css中的display设置为none,控制隐藏,只会编译⼀次;v-if是动态的向DOM树内添加或者删除DOM元素,若初始值为false,就不会编译了。⽽且v-if不停的销毁和创建⽐较消耗性能。

3.总结:如果要频繁切换某节点,使⽤v-show(切换开销⽐较⼩,初始开销较⼤)。如果不需要频繁切换某节点使⽤v-if(初始渲染开销较⼩,切换开销⽐较⼤)。


下面一些就是拓展题目了,没有标准答案,看个人发挥吧,要注意把自己的项目说清楚一点,最好是有在线的展示会更好。

问题十六:做过哪些项目?

问题十七:你觉得未来的职业规划是怎么样的?

问题十八:你认为怎样才算到达了前端大牛的程度?

问题十九:你觉得阿里的技术强吗?怎么能到达这种技术呢?

问题二十:你觉得你最有成就感的一件事是什么?

问题二十一:你有什么问题想问吗?

说起来后来聊着聊着发现原来面试官原本曾在阿里做过面试官,最后他跟我说是按照阿里的流程来面的,我内心:救救我!!!!

最后我倒还是问了问他这件事情,面试官很耐心的解答了,又问了问工作时间,然后如果我能成功进入贵公司的话会不会有像他这样的大佬带,什么时候有面试结果啥的。本来还想继续聊聊(对大佬的崇拜),但是面试我的时间其实已经超了,本来是预计半个小时,但是中途还穿插了部分面试题之外的(问了问奖项和奖学金的事情),就长了点,哈哈哈哈哈。

感觉面试官很不错,我又学到了很多!

这篇关于菜鸡Littleegg的前端面经(一)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!