前端传给后端字符串为啥会多一个双引号_西安腾讯云前端面试经

本人已入职&＃xff0c;需要的内推的可以私聊我呦&＃xff01;

一面:

1&＃xff0c;平时工作中有遇到过跨域问题吗&＃xff1f;怎么解决的&＃xff1f;

答:遇到过&＃xff0c;一般情况都是ajax请求的跨域问题&＃xff0c;常用的解决方式有两种&＃xff0c;一种是jsonp&＃xff0c;就是通过创建script标签请求一个http接口&＃xff0c;但是这种方式必须是get请求且后端必须与前端商量好一个调用方式&＃xff0c;第二种是w3c推荐的方式:cors&＃xff0c;这种一般是后台通过设置access-control-allow-origion&＃xff0c;access-control-allow-headers,access-control-allow-method,access-control-allow-credentials来控制。

面试官进一步体问:能详细说一下jsonp的原理吗&＃xff1f;

答:jsonp在前端具体来说就是创建一个script&＃xff0c;设置类型为Javascript&＃xff0c;拼接一个callback&＃61;callback的参数&＃xff0c;添加一个window.callback的全局回调。服务端收到请求后&＃xff0c;手动获取callback的值并将要响应的数据拼接在callback的调用中:res.send(callback&＃43;&＃39;(&＃39;&＃43; data &＃43;&＃39;)&＃39;)

面试官进一步提问&＃xff0c;能具体说一下客户端到底怎么触发响应&＃xff0c;执行回调的吗&＃xff1f;

答:因为刚我们注册了一个全局的回调&＃xff0c;当script请求完毕之后会执行这个callback。说完以后感觉面试官依旧不是很满意&＃xff0c;他又提示我:script标签加载完之后是自动执行脚本的吗&＃xff1f;是&＃xff01;

面试官:好我们接着说说cors&＃xff0c;我想所有网站都能跨域请求怎么解决&＃xff1f;

答:后端设置access-control-allow-origion:*

面试官:ok&＃xff0c;那我要是觉得这样不安全&＃xff0c;同时想要解决跨域&＃xff0c;应该怎么解决&＃xff1f;

答:设置access-control-allow-origion为自己网站具体的协议&＃43;域名&＃43;端口号

面试官&＃xff0c;嗯&＃xff0c;一般情况下我这样设置后&＃xff0c;前端就无法接受和存储COOKIEs了&＃xff0c;你一般怎么解决&＃xff1f;

答:前端xmlhttprequest设置withCredentials:true&＃xff0c;服务端同时设置access-control-allow-credentials

2&＃xff0c;用过闭包吗&＃xff0c;你一般用在哪里&＃xff01;

答&＃xff0c;用过&＃xff0c;以前主要是用在for循环中&＃xff0c;当for循环中出现异步操作时&＃xff0c;最终结果将会是for循环的最后一个值&＃xff0c;这时我们需要用闭包保存住for循环每一步的值。

面试官:额&＃xff0c;我还是头一次听说把闭包用在for循环里&＃xff0c;但是似乎也可以&＃xff0c;那你知道闭包具体的作用吗&＃xff1f;

答:我个人理解&＃xff0c;闭包就是缓存变量用的&＃xff01;

面试官:闭包为什么能缓存变量&＃xff0c;知道他的原理吗&＃xff1f;

答:闭包一般都是通过函数内返回另一个函数&＃xff0c;并且返回的函数依赖了父函数的某个变量&＃xff0c;当我们在外部调用父函数时&＃xff0c;此时js将会获得一个内部的函数的对象引用&＃xff0c;但因为这个内部函数依赖了外部函数的某个变量&＃xff0c;所以外部函数无法被js引擎销毁&＃xff0c;此时变量被缓存&＃xff0c;行成闭包。

3&＃xff0c;了解前端安全吗&＃xff1f;比如xss这种

答:了解的&＃xff0c;工作中经常遇到。

面试官&＃xff0c;大致介绍一下xss攻击&＃xff0c;如何利用xss去攻击一个网站&＃xff0c;换句话说&＃xff0c;攻击的步骤是哪些&＃xff1f;

答:xss&＃xff0c;也就是跨域脚本攻击&＃xff0c;常见于前端的input框还有console控制栏&＃xff0c;我们将我们写好的脚本通过input标签注入&＃xff0c;没有拦截过xss页面将会直接执行这些脚本。

面试官&＃xff0c;你说的这些其实不是很危险&＃xff0c;你一直在你本地操作&＃xff0c;怎么才能真正的攻击到别人&＃xff1f;

答:额&＃xff0c;我理解的xss攻击一般不会攻击服务端。。。

面试官:其实这个脚本在你的input框里是不会装执行的&＃xff0c;真正的危险是&＃xff0c;当你的脚本被上传到服务端(存在数据库或者缓存中&＃xff0c;常见于评论等功能)&＃xff0c;当其他人请求此资源时&＃xff0c;服务端就会将此脚本下发至客户端&＃xff0c;客服端收到请求后&＃xff0c;就会自动执行此脚本。

4&＃xff0c;你了解csrf攻击吗&＃xff1f;如何攻击别人&＃xff1f;攻击的原理是什么&＃xff01;

答:csrf攻击&＃xff0c;也就是跨站请求伪造&＃xff0c;当我在一个以COOKIEs为授权方式的网站登陆以后&＃xff0c;服务端就会下发用户标识至客户端&＃xff0c;此时客户端将会把这些信息存储在COOKIEs中&＃xff0c;此时我们打开另一个有攻击性的网站&＃xff0c;他将会返回一个带有攻击性的脚本&＃xff0c;去请求刚登陆的网站&＃xff0c;原网站接到请求后以为是正常操作&＃xff0c;默认通过&＃xff0c;形成了csrf攻击。

面试官:你说的对&＃xff0c;但是我觉得这没有意义啊&＃xff0c;你这个csrf脚本&＃xff0c;就是为了获取别人的账号信息&＃xff0c;进行支付啊发布啊&＃xff0c;你刚说的都是在自己本地玩&＃xff0c;有考虑过怎么攻击别人吗&＃xff1f;

答:不好意思&＃xff0c;不太懂。

面试官:其实这很常见&＃xff0c;通常做法是&＃xff0c;写一个自己的网站&＃xff0c;网站里嵌套一个别人的网站&＃xff0c;完了以后我把我的域名做的很像&＃xff0c;发给别人&＃xff0c;别人误以为这是官方网站&＃xff0c;进行登陆等一系列操作&＃xff0c;我再在页面中加上我自己的一些脚本就可以通过他的COOKIE执行很多操作&＃xff01;

5&＃xff0c;用过es6吗&＃xff0c;知道哪些新功能&＃xff1f;

答:promise。。。。巴拉巴拉

6&＃xff0c;看你简历用过vue&＃xff0c;用的怎么样呀&＃xff0c;能说下vue的双向绑定原理&＃xff0c;或者说是mvvm的双向绑定原理&＃xff01;

参考vue响应式原理&＃xff01;

7&＃xff0c;了解http状态码吗&＃xff1f;比如304状态码是什么意思&＃xff1f;

答:304一般情况下用于http缓存&＃xff0c;服务器端告诉客户端请求的资源可以继续使用缓存。

面试官:302呢&＃xff0c;302状态码怎么使用&＃xff1f;

答:没使用过。

面试官:302也是一个和资源有关的状态码&＃xff0c;代表当前url请求的资源已经被暂时移动

8&＃xff0c;了解ajax吗&＃xff0c;能说说ajax是怎么实现的&＃xff1f;

答:了解的&＃xff0c;发起一个ajax请求必须创建一个xmlHttpRequest对象&＃xff0c;通过设置请求方式、请求参数、url等发出请求&＃xff0c;当请求响应时会触发一个onReadyStateChange事件&＃xff0c;这时我们监听此事件的readyState属性为4且ajax的status为200时&＃xff0c;可以通过ajax.responseText取到后端返回的数据。

面试官:能说说onreadystatechange的几个状态吗&＃xff1f;

答:巴拉巴拉。。。

面试官:我们取数据使用4这个状态码吗&＃xff1f;是&＃xff01;

9&＃xff0c;了解http和https吗&＃xff0c;说一下他们的区别&＃xff01;

https采用ssl/tls公钥加密技术&＃xff0c;占用端口号443&＃xff0c;巴拉巴拉。。。

6月16日二面&＃xff01;

1&＃xff0c;说一下工作中觉得有亮点的项目。

答:说了一个做了首屏加载优化&＃xff0c;webpack打包优化&＃xff0c;精简包体积的项目&＃xff0c;面试官觉得只做这些算不上亮点&＃xff0c;又问能再说一两个不&＃xff0c;又随便说了两个技术难度比较大的项目。但依旧觉得面试官不是很满意&＃xff01;

2&＃xff0c;你知道阶乘在原生js怎么实现吗&＃xff1f;

使用for循环&＃xff0c;逆序遍历n&＃xff0c;最终实现&＃xff0c;4*3*2*1

3&＃xff0c;你知道number在js中会丢失精度吗&＃xff1f;你一般怎么处理&＃xff0c;数字相乘&＃xff0c;数字相除&＃xff1f;

是的&＃xff0c;常用做法是将数字转为字符串处理&＃xff0c;或将数字转为其他进制&＃xff0c;或者先将其缩小10的倍数&＃xff0c;在转为字符串时再乘回来。

4&＃xff0c;了解中序查找吗&＃xff1f;

答:不了解。

5&＃xff0c;了解二分查找吗&＃xff1f;

答&＃xff0c;不了解

6&＃xff0c;了解快速排序吗&＃xff1f;

折中随机找到一个数字&＃xff0c;大的往前移动&＃xff0c;小的往后移动&＃xff0c;循环一定次数后结束。

7&＃xff0c;了解算法中的什么什么吗&＃xff1f;

由于名词没听过&＃xff0c;没回答上&＃xff0c;面试完深圳连名字都忘了&＃xff01;

8&＃xff0c;csrf介绍一下。&＃xff1f;&＃xff1f;&＃xff1f;又问这个&＃xff1f;

答:巴拉巴拉

面试官:嗯&＃xff0c;你说的这个只是原理&＃xff0c;但是一般情况下&＃xff0c;别人调用我的接口都是会跨站的&＃xff0c;COOKIE是无法带上的&＃xff0c;想个办法处理一下&＃xff1f;

我:额&＃xff0c;不知道

9&＃xff0c;进程和线程了解吗&＃xff0c;解释一下&＃xff1f;

说了下大概的

10&＃xff0c;了解linux吗&＃xff0c;介绍一下他的原理。

不知道具体什么意思

11&＃xff0c;我看你用过很多node.js框架&＃xff0c;能分别介绍下他们的原理吗&＃xff1f;

答&＃xff0c;说了下nest.js的原理

面试官:能说下这个框架在上线后&＃xff0c;占用服务器多少资源&＃xff0c;多少线程&＃xff0c;多少进程&＃xff0c;分别是哪些服务占用的&＃xff1f;

答:不了解

12&＃xff0c;大致描述一下服务端渲染。

答:随便答了一点

13&＃xff0c;说一下从输入url到页面渲染发生了什么&＃xff1f;并针对每个步骤采取一些优化措施&＃xff01;

答:这个很好说

14&＃xff0c;页面是如何加载的&＃xff1f;

css规则&＃xff0c;dom树&＃xff0c;渲染树

15&＃xff0c;http2新增了什么特性&＃xff1f;

多路复用&＃xff0c;header压缩

16&＃xff0c;了解promise吗&＃xff0c;介绍下promise原理

答:这个很简单&＃xff0c;参考阮一峰es6

17&＃xff0c;eventloop了解吗&＃xff1f;

答&＃xff0c;同上

18&＃xff0c;了解async await

答:同上

19&＃xff0c;为什么想回西安&＃xff1f;

20&＃xff0c;为什么想来腾讯

21&＃xff0c;你觉得你的优势在哪里

22&＃xff0c;vue中有个子组件&＃xff0c;是一个表单&＃xff0c;数据从父组件而来&＃xff0c;想实现数据回显并可修改&＃xff0c;但不能修改父组件传值&＃xff0c;最终数据传回父组件提交&＃xff01;

答:首先通过props将数据传给子组件&＃xff0c;子组件在props对象中定义&＃xff0c;同时在data中新增变量&＃xff0c;如果传过来的对象是嵌套对象&＃xff0c;且对象中无fuction&＃xff0c;则用json.parse(json.stringify(data)深复制一份给data中的变量&＃xff0c;若传过来的对象无嵌套对象&＃xff0c;则可以直接使用...运算符和object.assign浅拷贝一份&＃xff0c;最终模板中用v-modol&＃61;http://data.xxx来实现回显及修改。修改完成后&＃xff0c;使用this.$emit触发父组件事件&＃xff0c;将修改后的值作为参数带回&＃xff0c;父组件进行数据上传等操作&＃xff01;

上述操作仅能用于父组件只传一次值的情况&＃xff0c;若父组件使用的是动态传值&＃xff0c;则上述方法无效&＃xff0c;因为data中的参数赋值只会在初始化时将其复制一次&＃xff0c;后续变化不会影响data&＃xff0c;故此时只能使用watch监听props变化&＃xff0c;如需要监听传输对象属性变化&＃xff0c;需同时开始deep。同时开启immedate&＃xff0c;保证首次赋值也触发监听&＃xff0c;最后在watch的handler中进行data的赋值操作&＃xff0c;若当前用户已在修改表单&＃xff0c;则可能需要开启数据智能合并&＃xff01;可用object.assign和...运算符实现&＃xff01;

23&＃xff0c;了解tcp和udp吗&＃xff0c;说说他们的原理及区别&＃xff1f;

答:tcp是面向连接的&＃xff0c;我们前端主要使用这个协议。。。巴拉巴拉说了一些简单的。

中间还问了很多网络、算法、linux的知识&＃xff0c;很多题目忘了&＃xff0c;抛开前端知识&＃xff0c;总体回答上一半左右吧。历时一个多小时&＃xff01;

面试官总结:对计算机网络、数据结构不求甚解&＃xff0c;对js原理和vue原理理解较深(滔滔不绝&＃xff0c;每次都喊可以了)。估计凉了

三面:

面试官自我介绍&＃xff0c;说他是后台开发工程师&＃xff0c;主要对我进行一些复试&＃xff0c;过程比较简单&＃xff0c;问了一些http原理&＃xff0c;http状态码&＃xff0c;计算机缓存&＃xff0c;服务器缓存&＃xff0c;mysql&＃xff0c;node.js原理&＃xff0c;redis原理&＃xff0c;服务端渲染&＃xff0c;大头时间主要花在亮点项目的介绍上。

9.17日补充&＃xff0c;后来才知晓&＃xff0c;三面其实是总监面&＃xff0c;后台出身&＃xff0c;问的都是架构层面的东西&＃xff01;

四面:

4面是个hr面&＃xff0c;问一些工作经历&＃xff0c;一些职场经历等等&＃xff0c;比较简单。

个人总结:难度主要出在二面&＃xff0c;二面面试官一般是你将来的直系领导&＃xff0c;我在四面时问了hr&＃xff0c;hr说以后得工作任务都是二面这位深圳的前端主管安排&＃xff0c;所以他问的问题一般非常深入&＃xff0c;一知半解的技术最好不要说出来&＃xff0c;比如我就被问到了node.js很难的问题&＃xff0c;只能解释说自己没接触过这方面知识。祝大家好运&＃xff0c;溜了&＃xff01;