寒冬三年经验前端面试总结

前言跳槽是每个人的职业生涯中都要经历的过程,不论你是搜索到的这篇文章还是无意中浏览到的这篇文章,希望你没有白白浪费停留在这里的时间,能给你接下来或者以后的笔试面试带来一些帮助。 2019也许是互联网未来10年中最好的一年。WINTER IS COMING。但是如果你不真正的自己去尝试尝试,你永远不知道市面上的行情如何。这次找工作下来,我自身感觉市场并没有那么可怕,也拿到了几个大厂的offer。在此进行一个总结,给自己,也希望能帮助到需要的同学。 面试准备面试准备根据每个人掌握的知识不同,准备的时间也不一样。现在对于前端岗位,以前也许不是很重视算法这块,但是现在很多公司也都会考。建议大家平时有空的时候多刷刷leetcode。算法的准备时间比较长,是一个长期的过程。需要在掌握了大部分前端基础知识的情况下,再有针对性的去复习算法。面试的时候算法能做出来肯定加分,但做不出来也不会一票否决,面试官也会给你提供一些思路。 笔试题笔试题一般考的都是基础知识,复习基础知识建议看书,高程和你不知道的JS都行,会讲的比较细。 CSScss基本上每个公司也都会问,但是问的不会很深,都是一些常见的问题。 盒模型垂直居中方法三栏布局选择器权重计算方式清除浮动的方法flex什么是BFC、可以解决哪些问题position属性如何实现一个自适应的正方形如何用css实现一个三角形手写题手写题每个公司都会有,范围也比较固定,如果之前好好准备的话,应该没什么问题。 防抖和节流深拷贝数组去重、数组乱序手写call、apply、bind继承(ES5/ES6)sleep函数实现promise实现promise.all实现promise.retry将一个同步callback包装成promise形式写一个函数,可以控制最大并发数jsonp的实现eventEmitter(emit,on,off,once)实现instanceof实现new实现数组flat、filter等方法lazyManES6现在基本上都会使用ES6开发。ES6也成为了一个面试必考点。一般面试官都会问用过ES6的哪些新特性,再针对你所回答的进行深入的提问。 let、const、var区别箭头函数与普通函数的区别变量的结构赋值promise、async await、Generator的区别ES6的继承与ES5相比有什么不同js模块化(commonjs/AMD/CMD/ES6)浏览器相关知识浏览器相关知识几乎是每个公司都会问到的考点,里面涉及的东西也比较多。其中缓存、http2、跨域必问。 从输入URL到呈现页面过程强缓存、协商缓存、CDN缓存HTTP2HTTP状态码三次握手与四次挥手跨域(JSONP/CORS)跨域时如何处理cookie垃圾回收机制web安全一般我都会从xss和csrf说起。 https什么是xss,如何预防什么是csrf,如何预防为什么会造成csrf攻击事件循环事件循环绝对是一个必考题。其中涉及到宏任务、微任务、UI渲染等的执行顺序,浏览器端的必须要掌握,node端的有精力的最好也能掌握。 框架(vue)因为我一直用的都是vue框架,所以问的也都是跟vue相关的。vue中的高频题也不外乎双向绑定、虚拟dom、diff算法这些。 watch与computed的区别vue生命周期及对应的行为vue父子组件生命周期执行顺序组件间通讯方法如何实现一个指令vue.nextTick实现原理diff算法如何做到的双向绑定虚拟dom为什么快如何设计一个组件webpackwebpack也基本上成了必考的内容,一般会问是否配置过webpack、做过哪些优化之类的。 用过哪些loader和pluginloader的执行顺序为什么是后写的先执行webpack配置优化webpack打包优化(happypack、dll)plugin与loader的区别webpack执行的过程如何编写一个loader、plugintree-shaking作用,如何才能生效性能优化首屏加载如何优化一个网页从请求到呈现花了很长时间,如何排查因为之前的经历大部分都集中在PC端,所以移动端的经验比较少。面试官也不会一直问你移动端的东西,问也就问一些常见的问题,比如1px问题、如何适配等。react用的也不多,问的也不多,也就会问问react与vue的对比之类的问题。 基本的问题过了之后,有的面试官还喜欢问一些开放性的问题。比如平时都是如何学习的、最近了解了什么新技术、未来的职业规划、为了达到这个目标目前做了什么努力等等。 总结的基本上就是这么多了,上面问题的答案我也会陆续给出,给大家一个参考。喜欢的可以点个收藏哈~最后预祝看了此篇文章的小伙伴们都能收获多多的offer,找到自己满意的工作~

October 7, 2019 · 1 min · jiezi

活动:送两本《PHP 程序员面试笔试真题库》

你好,是我琉忆。由于近期工作忙碌,没有时间去更新PHP面试专栏。现在特此搞个抽奖活动送2本书给大家。给各位面试助力,尽快找到一份满意的PHP工作。《 PHP 程序员面试笔试真题库》历时一年,由机械工业出版社出版,在 2019 年 4 月问世。本书的适用群体:刚接触 PHP,自学一段时间 PHP 后打算去找 PHP 相关的 PHP 面试工作的群体。本书主要抽取了各大互联网公司往年 PHP 的面试笔试真题,然后抽出整理成书,为你的面试笔试助力。现免费送出 2 本《 PHP 程序员面试笔试真题库 》,具体参与规则如下:1、在本文下留言即可参与,并且一个用户的多次留言只算作一次。2、活动截止日期为北京时间 2019 年 4 月 19 日 19:59:59(本周五),以评论时间为准。(2019年4月 19 日晚上 21 点开奖)3、在活动结束后随机抽取 2 名幸运网友。4、获赠名单在本帖后会公布,并 私信该网友。5、幸运网友把收件地址、姓名和手机号发送给我安排邮寄。6、全国包邮(不含新疆、西藏、港澳台)7、保留最终解释权。PS:该书已在天猫、京东、当当等电商平台销售。获取更多PHP程序员面试笔试资料可以关注:琉忆编程库

April 15, 2019 · 1 min · jiezi

记一次笔试题

前言 今天参加了一场印象深刻的笔试,想把它记录下来,做一个知识补充作用。题目1:Response Headers中有哪些字段?答:响应(服务端–>客户端)ResponseHTTP/1.1(协议版本)200(状态码)OK(描述信息)Location:http://www.baidu.com(服务端需要客户端访问的页面路径)Server:apache tomcat(服务端的Web服务端名)Content-Encoding:gzip(服务端能够发送压缩编码类型)Content-Length:80(服务端发送的压缩编码类型)Content-Language:zh-cn(服务端发送的语言类型)Content-Type:text/html;charset=GB2312(服务端发送的类型及采用的编码方式)Last-Modified:Tue,11 Jul 2000 18:23:51 GMT(服务端对该资源最后修改的时间)Refresh:1;url=http://www.it315.org(服务端要求客户端1秒钟后,刷新,然后访问指定的页面路径)Content-Disposition:attachment;filename=aaa.zip(服务端要求客户端以下载文件的方式打开该文件)Transfer-Encoding:chunked(分块传递数据到客户端)Set-Cookie:SS=Q0=5Lb_nQ;path=/search(服务端发送到客户端的暂存数据)Expires:-1(服务端禁止客户端缓存页面数据)Cache-Control:no-cache(服务端禁止客户端缓存页面数据)Pragma:no-cache(服务端禁止客户端缓存页面数据)Connection:close(1.0)/(1.1)Keep-Alive(维护客户端和服务端的连接关系)Date:Tue,11 Jul 2000 18:23:51 GMT(服务端响应客户端的时间)请求(服务端–>客户端)RequestGET(请求方式)/newcoder/hello.html(请求的目标资源)HTTP/1.1(请求采用的协议和版本号)Accept:*/ *(客户端能接收的资源类型)Accept-Language:en-us(客户端接收的语言类型)Connection:Keep-Alive(维护客户端和服务端的连接关系)Host:localhost:8080(连接目标主机和端口号)Referer:http://localhost/links.asp(告诉服务器我来自哪里)User-Agent:Mozilla/4.0(客户端版本号的名字)Accept-Encoding:gzip,deflate(客户端能接收的压缩数据的类型)If-Modifie-Since:Tue,11 Jul 2000 18:23:51 GMT(缓存时间)Cookie(客户端暂存服务端的信息)Date:Tue,11 Jul 2000 18:23:51 GMT(客户端请求服务端的时间)题目2: 下列代码输出的是什么? console.log((function(a){}).length);//1 console.log((function(a = 5){}).length);//0 console.log((function(a,b = 5,c){}).length);//1 console.log((function(a,b = 5,c = 5){}).length);//1 console.log((function(a,b,c = 5){}).length);//2解答:该题考察的是es6中函数长度的问题,具体的解析可以参考下图(图片来自阮一峰大神的es6入门):题目3:使用js将url中的信息转换成json对象 function splitUrl(url){ var arr = url.split(’?’)[1].split(’&’); var json = {}; var key,value = null; for(var i=0;i<arr.length;i++){ key = arr[i].split(’=’)[0]; value = arr[i].split(’=’)[1]; json["${key}"] = value; } return json; } var result = splitUrl(‘www.baidu.com?a=1&b=2&c=5'); console.log(result);题目4:下列哪一个语句会产生运行错误?var _变量 = NaN;var obj = [];var obj = //;var obj = {};答:这道题只在1和3中纠结,1中的变量名其实是合法的,纠结的地方在于能否直接赋值为NaN,其实这个是可以的,使用typeof NaN,会发现返回的是number,所以也是可以赋值给该变量的;而3的特殊之处在于//其实是js中的注释语句,所以直接将其赋值给变量会报错。题目5:以下两个变量a和b,请问a+b的结果是NaN有哪些?var a=undefined;b=NaN;var a=‘123’;b=NaN;var a=undefined,b=NaN;var a=NaN,b=‘undefined’;答:题目6:请写出以下代码的输出结果var a = 0,b = 0; function add(a){ add = function(b){ console.log(++a + b++); } console.log(a++); } add(1);//1 add(2);//5分析:首先,第一次运行的是外面的函数,a=1进去之后,执行a++,由于a++是先运算再赋值,所以输出的是1;第二次运行的是内部函数,此时a的值为2,传进去b的值为2,++a == 3,b++ == 2,所以最后输出的是5。题目7:请写出下面代码执行的结果 var c = { name:‘Json’, sayName:function(){ console.log(this.name); } }; var name = ‘Aaron’; function sayName(){ var sss = c.sayName; sss(); c.sayName(); (c.sayName)(); (b=c.sayName)(); } sayName();结果:分析:第一个是sss(),实际上this是指向全局变量的,也就是说输出的应该是全局的name,即Aaron;第二个this是指向c的,那么输出的就是c中的name属性值;第三个this指向c,和第二个是一样的;第四个this指向全局变量。 ...

March 13, 2019 · 1 min · jiezi

2018年阿里社招笔试题分享

以下是2018年年初,面阿里时候的笔试题。为啥现在才分享出来,纯粹是因为之前懒。只分享题,没有答案。1.请通过代码实现下面的效果function add(num){ var total = 0; var curryAdd = function(num){ total = total + num; return total; } return curryAdd;}console.log(add(2)(3)); //结果为5console.log(add(2)(3)(4)(5)); // 结果为142.请回答按钮点击前后,代码中的两个console.log在浏览器控制台的输出信息并解释现象背后的原因.let count = 0;class MyComponent extends React.Component{ constructor(){ super(); this.state = { count : count }; } componentWillMount(){ this.setState({ count : ++count }); this.setState({ count : ++count }); setTimeout(() => { this.setState({ count : ++count }); this.setState({ count : ++count }); }, 1000); } componentDidMount(){ this.button.addEventListener(‘click’, this.onClick.bind(this, ‘原生浏览器事件’), false); } onClick(info) { console.log(info); this.setState({ count : ++count }); this.setState({ count : ++count }); } render() { console.log(this.state.count); return ( <div> <button type=“button” ref={node => this.button = node} onClick={this.onClick.bind(this, ‘React事件’)}>生成新计数</button> <div>Count : {this.state.count}</div> </div> ); }}ReactDOM.render(<MyComponent />, mountNode);3.throttle的简单实现function throttle(func, duration) { // 在这里编写具体实现}window.addEventListener(‘scroll’, throttle(func, 50), false);4.实现一个深度优先搜索算法(非递归) function dfs(tree, name){ // 请在这里实现}var tree = { name : ‘中国’, children : [ { name : ‘北京’, children : [ { name : ‘朝阳群众’ }, { name : ‘海淀区’ }, { name : ‘昌平区’ } ] }, { name : ‘浙江省’, children : [ { name : ‘杭州市’, code : 0571, }, { name : ‘嘉兴市’ }, { name : ‘绍兴市’ }, { name : ‘宁波市’ } ] } ]};var node = dfs(tree, ‘杭州市’);console.log(node); // { name: ‘杭州市’, code: 0571 }5.编写一个简单的自定义事件处理器: 1.具备 on 方法绑定事件, 2.具备 off 方法解绑事件function EventEmitter () { // TODO}var emitter = EventEmitter();emitter.on(‘foo’, function(e){ console.log(’listening foo event 1’, e);});emitter.on(‘foo’, function(e){ console.log(’listening foo event 2’, e);});emitter.on(‘bar’, function(e){ console.log(’listening bar event’, e);});// 监听全部事件emitter.on(’’, function(e){ console.log(’listening all events’);});emitter.trigger(‘foo’, {name : ‘John’});emitter.trigger(‘bar’, {name : ‘Sun’});emitter.trigger(’’, {name : ‘Sun’});emitter.off(‘foo’);6.请用原生 JS 实现 DOM 拖动效果,尽量多考虑兼容以及其他可能的情况 ...

December 17, 2018 · 2 min · jiezi

【剑指offer】33.二叉树镜像

题目操作给定的二叉树,将其变换为源二叉树的镜像。二叉树的镜像定义:源二叉树 8 / \ 6 10 / \ / \ 5 7 9 11 镜像二叉树 8 / \ 10 6 / \ / \ 11 9 7 5题解首先先理解题意,镜像通过以下几个步骤可以实现:可以看到首先对根节点的左右进行翻转。再递归的对左子树,以及右子树进行翻转。之前讲过,链表的题目分为四个步骤:连过来、指针走、断后路、调状态。二涉及到树的题目,基本都是递归。一旦涉及到递归,就要搞清楚两个东西:递归的过程。在这里就是,先翻转根节点,再翻转左子树,再翻转右子树。递归结束的条件。 这里就是当树为Null的时候不翻转。public class Solution { public void Mirror(TreeNode root) { // 递归结束条件 if (root == null) return; // 交换左右 TreeNode temp = root.left; root.left = root.right; root.right = temp; // 递归 Mirror(root.left); Mirror(root.right); }}同时一般,我们会有一些边界case去检查一下代码的鲁棒性。比如左右有一个是null 8 / \ 10 Null / \ null null 代码执行到交换没啥问题: 8 / \ Null 10 / \ null null执行到递归,左子树就结束掉了。右子树的话还要递归的执行左右子树,也可以执行正确,但是其实没必要。public class Solution { public void Mirror(TreeNode root) { // 递归结束条件 if (root == null) return; if (roo.left == null && root.left == null) return; // 交换左右 TreeNode temp = root.left; root.left = root.right; root.right = temp; // 递归 Mirror(root.left); Mirror(root.right); }}热门阅读【Leetcode】175. 组合两个表jvm类加载机制学习资料推荐 ...

December 14, 2018 · 1 min · jiezi