您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496net那是本人面过Wechat,二零一七年八月

新葡亰496net那是本人面过Wechat,二零一七年八月

发布时间:2019-12-12 08:01编辑:新葡亰官网浏览(116)

    毕业一年左右的前端妹子面经总结

    2018/05/14 · 前端职场 · 1 评论新葡亰496net, · 面试

    原文出处: Qin菇凉   

    从大一开始学习前端,今年大三,10月份开始投简历,陆续收到很多家公司的面试,目前为止的面试通过率是百分之百,总结下面试题。
    不定期更新中。。。

    忙碌奔波的四月,虽然就投递了三份简历,但由于一边在实习,一边又有学校的课程,也是够折腾的。在此感谢一路上,彼此支持、互相鼓励的道友们,也想着把近期的感悟记于纸上,分享给正在路上的道友。也感谢每一位投来橄榄枝的面试官。

    1月前端面试记

    前言

    嗯ennnnnn,,,,懒癌症拖延的毛病,趁着最后一个上班日赶紧把最近一周的面试做个总结(虽然我下周一才入职),作为一位去年才毕业的前端妹子来说,其实还是个技术小白啦,近几年还是想在技术上能有一个很大的提升,而且不是说金三银四嘛(嘤嘤嘤,好像是真的),所以在试水了两家公司之后,开启了我一周左右的面经之路,大大小小的公司都有面,我就是奔着涨知识和积累经验去的!!!加起来差不多10家公司左右吧,成绩自己也还挺满意的,拿到了6家公司的offer,大小公司也都有,像大华、华三,但是最终综合考虑的结果,去了一家自己面试体验最好的公司,至少也是一家上市公司啦~

    百度第一次

    一、春招形式

    背景

    我于16.12.18辞职,之前有过一年左右的前端工作经验。从12月26号开始到1月9号先后面试了微信,百度,阿里巴巴uc,唯品会以及深圳腾讯等几家公司,特此总结与各位共勉。

    面试前需要注意的细节点

    1. 简历一定要写好,这个不用多说啦
    2. 先想清楚你辞职想去的下一家的初衷是什么,是加薪资、提升技术 or 换个工作环境。根据你自己的真实情况,投简历的时候针对性地看看公司的招聘要求,先看看符合度是多少,以免遇到要求极度不符合又没有在商量的前提下去面试了,最后的结果可能就是你还不错,但是不符合我们公司的要求。
    3. 准备工作要做好,我是因为才去年毕业啦,所以集中准备在基础知识和目前在用的VUE框架这两块啦,其他的知识点我平时在撸代码的时候都有在做笔记,所以都会扫一遍知识点,其他的你实际工作中没有用到的但是比较流行的也不能忽略哦,了解一下或者临时补一下,不要被问到没有听过有点尴尬的。面试完一家记得被面到不会的要做笔记做笔记!!!!就当做是学习吧,而且有时候真的受益匪浅~
    4. 规划好你自己的面试时间,提前要面试的公司做个简单的背景了解。我是一个比较想把时间集中在一起做的人,所以提完离职后专心面试,一天会安排2-3家面试,面试前看看你即将面试的公司规模大小背景简单地了解一下,公司的面试流程一般是笔试 or 电话面试 (可无) —> 技术面(1-2轮) —> HR面 

    一面

    1.AJAX流程
    2.promise简单说一下
    3.手写一个箭头函数
    4.链式调用
    5.简单的观察者模式
    6.let、const
    7.数组去重
    8.判断数据类型,null怎么判断
    9.正则 电话区号 座机号,并给区号加上括号
    10.MVC、MVP、MVVM
    11.TopK用的什么排序
    12.堆排序的时间复杂度、稳定性,什么是稳定排序
    13.基本有序的数组用什么排序
    14.冒泡排序时间复杂度,最好的情况的时间复杂度

    1.1 内推

    • 内推,顾名思义,就是找内部人员推荐你的简历。这样,你的简历就会被放在一个“简历池”里边,如果有面试官看好你的简历,那么你的简历便会从简历池里边捞出来,接下来你就会陆续接到电话了。(这个其实很蛋疼的,有次在地铁上都能接到电话)
    • “简历池”也存在不同的“简历池”之分。最好的“简历池”就是心仪的部门里边刚好有认识的前辈,直接把你的简历发到 BOSS 的邮箱,这样被面试的几率是最高的,当然难度也更高。其次,便是找内部技术人员推荐,这个“简历池”被面试的几率也是极高的。另外,也有一些宣传群发布内推码,不过这种“简历池”人数太多,被捞起来的几率就很低了。
    • 内推的好处自然是有一些福利了,不过对于不同公司也有一些不同。阿里跟腾讯的内推福利是可以免去笔试环节,只要你的简历能够吸引到某个面试官,然后被捞起来。不过阿里参加内推的话,就没有参加正式校招的机会。

    微信

    由于我已经毕业工作过,所以去微信面试是走的社招。微信社招极其严格,共八轮面试,总体来说我基本上当了一把炮灰。由于腾讯前端又细分为重构和JS,所以微信的面试基本上以JS为主。
    微信第一面是笔试,共一个小时,四道编程题:

    • JS手写二分搜索算法
    • 给你一段代码,让你发现其中的问题(考察闭包)
    • 实现一个Lazyman(请自行搜索)
    • 用JS代码求出页面上一个元素的最终的background-color,不考虑IE浏览器,不考虑元素float情况。

    前两道题比较基础,只要有JS基础的同学一般都应该没什么问题。第三道题,有些难度,但是我之前曾在网上见过该题,使用队列或者promise都可以。第四道题,看完之后一脸懵逼,想了半天也没明白它考察什么内容。由于时间关系,我直接用了window.getComputedStyle。后来交完之后仔细想想,好像确实有很多情况没考虑到,例如当这个元素的背景色为透明时,它最终的背景色应该为其父元素的背景色。

    微信二面是项目经历面,我跟面试官大致介绍下我过去一年做的项目。然后掏出笔记本开始一起看我之前写的代码,面试官觉得我之前做的项目复杂度不太高。然后就问了我其他几个问题:既然你面的是小程序组,那么你了解小程序吗?我说不了解。然后问我是否使用过React,我说没有。面试官不是很满意,但最终让我过了。

    微信第三面是前端基础面,面完之后我的人生观发生了改变,我感觉我不配做前端。第一个问题是,请问前端优化的手段有哪些?我心里暗喜,这么简单的问题还问。然后我答将CSS文件放在上面,JS文件放在下面。正准备说下一条时,面试官问为什么这样做?我答JS下载解析时会阻塞DOM树的构建,如果放在上面可能会出现白屏的情况。然后面试官问,有没有可能让JS下载解析不阻塞DOM树构建?我答使用defer或asyn字段。面试官问有什么区别?我答...然后面试官问CSS下载解析会不会阻塞DOM树渲染?我已经开始一身汗了,这个问题我不太确定。然后面试官让我接着说优化手段,我答CSS-sprit或者将小图使用base64内嵌。面试官问我CSS-sprit原理是什么?使用base64虽然会减少请求数,但是会增大文件的大小,以什么为基准去衡量什么时候使用base64?此时我已经泪流满面。然后面试官问我了解HTTPS吗?我说了解。他问,请问HTTPS和HTTP有什么区别?我答HTTPS增加了SSL层。面试官问请画出SSL四次握手过程?此刻已经崩溃,我答不会。然后他问请问SSL握手时有对称加密和非对称加密吗?我答不知道。他问如何优化这一层?我答不知道。然后继续回答优化手段?我答将静态内容推向CDN。然后他问现在CDN不稳,时而工作时而崩溃,我有一个首页如何确保每次都能正常显示该首页?答案是CSS inline。他看了看时间,说那就下一个问题。然后给了我一个柱状图,让我使用html和CSS绘制出来。当时我是用了flex。然后他让我手写一个快排算法,我写了。然后他让我用CSS和JS动画在刚才那个柱状图中表现出快排的整个过程,然后我哭了。其实这个动画是见过的,只不过平时使用的都是canvas。面试结束,我跪了。

    整体来言,微信的面试难度还是挺大的。他对每个细节的考察非常仔细,不仅要求你知其然更要让你知其为什么。另外一方面我也意识到了准备的不足。

    面试知识点

    在面两个大公司和一个小公司的时候,尤其是一个传统行业的大型公司时,也有可能是我年限的问题,尤其注意基础,无论是笔试还是技术主管面试的时候都集中在这块,像原生JS、原生Ajax等,,(这些虽然我在工作中用的也不是很多ennnn,原生的是用的不多,但是我自己很注重),说下面试碰到的吧(一些记不住了,想起来我补上哈~)。

    二面

    1.三栏布局,(博客有)
    2.position值
    3.让元素不可见
    4.数组深浅拷贝、对象深浅拷贝
    5.webpack路由懒加载
    6.ES6异步请求数据怎么操作
    7.有哪些公司offer

    1.2 正式校招

    • 正式校招的流程各大公司都大同小异,基本就是:

    投递简历 -> 简历筛选 -> 笔试 -> 面试 -> offer阶段

    • 参加正式校招的话就是不会有“突击”电话,可以有所准备。

    百度

    百度的面试是我最喜欢的,考察的比较全面。百度第一面为基础面,包括HTML/CSS/JS各方面,共50分钟左右,大约30个问题左右:

    • HTML5新特性(新增的标签, API等),如localstorage的用法以及与cookie的区别,如何理解web语义化
    • CSS3新特性,如动画等
    • CSS特性,如position的用法,如何实现居中,bootstrap源代码的理解,盒模型(W3C和IE),flex的使用
    • 前端兼容性处理(CSS hack技术)
    • JS基础,如this用法,new关键字的过程,call与apply的区别,闭包,原型以及JS如何实现继承
    • 前端基础,浏览器缓存,跨域,从输入url到渲染的整个过程,事件(W3C和IE),TCP三次握手过程,如何实现懒加载(跟预加载的区别)

    百度二面为基础面 算法 项目经历,持续一个小时。问题如下:

    • 之前有看过你做的一个移动页简历,请问如何实现?我主要是使用REM Media Query,根据不同尺寸的设备进行不同的font-size设置。然后问我REM和EM的区别,如果父元素的font-size也是采用em表示,那么子元素的font-size怎么计算等。
    • 有没有遇到过margin重叠的现象,如何解决?BFC
    • 常见的清除浮动的方法有哪些?bootstrap是怎么做的?bootstrap是怎么实现grid系统的?
    • 怎么理解JS模块化?有没有使用过webpack?

    算法题只有一道:什么是浅复制和深复制?有什么区别?如何实现Object的深复制?

    首先我对这个问题进行分析,Object是一个树形结构,所以我采用递归的方法进行复制。面试官随后提问能否通过循环的方法?我思考了一会,回答说循环的关键在于循环条件的设置,我想借助栈作为循环判断的条件,当栈为空时,循环结束。当时我立马反应过来,因为Object子节点的个数不确定,可能入栈出栈会存在一定问题。面试官随后问,还有什么东西没有考虑到吗?我想了下说没有。他提示了下,如果出现环怎么办?我愣了一下说不知道。然后他给我个提示说使用深度优先的方法借助栈并不能解决这个问题,然后让我使用宽度优先试试,将代码发给他。面试结束后我发给了他我的代码,各位可以参考下:

    // 深度优先遍历复制, 借助队列
    function deepCopy(obj) {
        var newObj = {},
            srcQueue = [obj], srcVisitedQueue = [],
            copyQueue = [newObj], copyVisitedQueue = [];
    
        while (srcQueue.length > 0) {
            var currentSrcElement = srcQueue.shift(),
                currentCopyElement = copyQueue.shift();
    
            srcVisitedQueue.push(currentSrcElement);
            copyVisitedQueue.push(currentCopyElement);
    
            for (var key in currentSrcElement) {
                if (typeof currentCopyElement[key] !== 'object') {
                    currentCopyElement[key] = currentSrcElement[key];
                } else {
                    // 有环的情况
                    var index = srcVisitedQueue.indexOf(currentSrcElement[key]);
                    if (index >= 0) {
                        currentCopyElement[key] = copyVisitedQueue[index];
                    } else {
                        srcQueue.push(currentSrcElement[key]);
                        currentCopyElement[key] = {};
                        copyQueue.push(currentCopyElement[key]);
                    }
                }
            }
        }
    
        return newObj;
    }
    
    // Test case
    // 1. 只含有简单类型的Object{a: 1, b:2} => pass
    // 2. 简单类型和复杂类型同时存在的情况下的Object => pass:
    // var obj1 = {
    //     a: 1,
    //     b: 2,
    //     c: {
    //         d: 3,
    //         e: {
    //             f: 4,
    //             g: 5
    //         }
    //     },
    //     h: {
    //         i: 6,
    //         j: 7
    //     }
    // };
    // 3. 有环的情况下的Object => pass:
    // var obj1 = {
    //     a: 1,
    //     b: 2,
    //     c: obj1
    // };
    

    然后面试官问了关于我项目经历,之前曾看到你推进过公司的模块化,请问是基于什么背景,你是如何推进的,遇到过什么问题等等。

    百度三面就是属于开放性面试。首先面试官跟我讨论了下我二面当中的那道算法题,问我是否解决,环如何解决,然后问是否看过Jquery的源代码怎么进行Object的深复制的?我答看过,是采用递归。他然后问为什么Jquery对环的考虑只判断当前节点是否为根节点?该问题我没回答上来。然后他说现在百度有许多部门,每个部门都有自己的组件库,实现的功能基本相同,但有的用的是原生的JS,有的是使用JQuery,有的是使用React,现在想进行统一,如何解决?我说采用重构,他问了问我重构的思路有哪些。然后他说百度有些项目在线上已经很久了,代码比较陈旧,如果你去重构可能会对线上的版本有冲击,你怎么解决这个问题?我答小幅度重构,然后进行回滚等。然后他问,现在有一个很急的项目,需要一个组件,刚好网上提供的有该组件,你是如何屏蔽该组件与现有项目的差异?我的思路是写一个wrapper屏蔽掉该组件与现有库的差异。然后面试官问,如果引入该组件必须引入一个新的库,如React你该如何选择?引入的话有什么好处坏处?我提供了自己的一些看法。

    HTML以及CSS篇,集中在CSS

    1. 说下你常用的几种布局方式
      集中往盒模型、flex布局说(至于grid布局,这个我看过没有用到过)
    2. 实现水平居中的几种方法?
    3. animate和translate有没有用过,一些常见的属性说下?
    4. CSS实现宽度自适应100%,宽高16:9的比例的矩形。
    5. 如何实现左边两栏一定比例,左栏高度随右栏高度自适应?

    三面

    1.类似脑筋急转弯
    2.类似脑筋急转弯
    3.let、const
    4.结构辅助
    5.rest参数
    6.SPA优缺点
    7.MVC、MVVM MVVM为了解决什么问题
    8.箭头函数
    9.XSS、CSRF
    10.ES5和ES6区别
    11.项目
    12.项目难点
    13.有哪些offer
    14.全栈的看法

    二、简历

    阿里巴巴UC

    UC的面试是最轻松的,以至于我感觉我可能没通过。

    UC第一面是一个阿里非常高级的前端工程师,面试大约一小时。首先让我讲了讲我对移动前端的了解?然后我讲了讲移动前端布局,JS方面,性能优化等,大于15分钟。然后他问我如何理解前端工程化?然后我又讲了15分钟等。然后他问我有什么问题吗?我问请问你如何理解前端以及你是如何从pc端转入移动端?他站在黑板上给我讲了20多分钟。包括hybrid技术以及现在流行的RN和Weex,以及阿里现在的业务使用的一些技术以及为什么使用等。第一轮面试结束。

    第二轮面试是一个后端的哥们,面试大约30分钟。问了我一些前端优化的方法,以及平常遇到过最大的困难是什么,如何解决。有什么难忘的事等。然后问我有什么问题?我说为什么你不问我前端的基础知识也不问我前端的项目经验?他说没必要,已经了解我的背景了等等,然后带我吃了个饭。

    JavaScript篇(重要)

    1. 变量提升遇到的一些简单code题
    2. 说一下对闭包的理解,以及你在什么场景下会用到闭包?
    3. 说一下你对原型与原型链的了解度,有几种方式可以实现继承,用原型实现继承有什么缺点,怎么解决?
    4. iframe的缺点有哪些?
    5. Ajax的原生写法
    6. 为什么会有同源策略?
    7. 前端处理跨域有没有遇到过,处理跨域的方式有哪几种方式去解决
    8. 怎么判断两个对象是否相等
    9. 代码实现一个对象的深拷贝
    10. 从发送一个url地址到返回页面,中间发生了什么
    11. 说下工作中你做过的一些性能优化处理

    百度第二次

    2.1 重要的点

    • 项目丰富度
    • 技术栈广度、深度
    • 技术热情
    • 自学能力
    • 职业规划

    唯品会

    唯品会技术面共5轮,考察的非常全面。前两面都是基础面跟百度大概类似。但是它重点问了我web安全的一些知识,xss和csrf。问我如何解决相关的问题?xss的话主要使用转义,csrf的话项目中我主要使用的是jwt(javascript web token)。然后针对jwt细节问了我20多分钟。第三面是一个产品经理面,说虽然是技术但是还是要了解产品才行。问我有没有用过唯品会app,我说没有。然后问我知道唯品会是干什么的吗?我说一家专做特卖的网站。然后给我一个唯品会的页面问我有什么建议,然后我讲了20多分钟。第四面是技术总监,进来之后先把我吊了一顿。说虽然感觉你前端基础各方面比较好,但是唯品会的业务性非常强,我没有任何电商方面的经验等,让我过来从头做起之类的。

    ES6篇(引导篇,相对重要)

    这块面试官主要是问你哪块用的比较多,你可以引导性地把面试官往你会的地方说

    1. 箭头函数中的this指向谁?
    2. 如何实现一个promise,promise的原理,以及它的两个参数是什么?
    3. promise中第二个参数的reject中执行的方法和promise.catch()都是失败执行的,分别这么写有什么区别,什么情况下会两个都同时用到?
    4. map和set有没有用过,如何实现一个数组去重,map数据结构有什么优点?

    一面

    1.闭包
    2.作用域链
    3.垃圾回收制
    4.垃圾回收制的循环引用问题
    5.原型链
    6.浏览器的兼容(说几个CSS说几个JS)
    7.PromiseA 规范
    8.HTTP状态码
    9.HTTP首部有哪些关于缓存的字段
    10.服务器怎么判断304
    11.Git

    2.2 简历格式参考

    • 简历规格:建议内容不超过单面A4纸,文字精炼,亮点之处字体加粗。排版尽量紧凑,这样可以放更多的内容。另外,简历的 UI 还是不要太粗糙,本人吃过亏。。。
    • 内容分布:
    • 个人信息:姓名、联系方式(邮箱,手机)、学校、专业、学历水平;个人博客或者 Github 地址。(体现技术热情,技术能力)
    • 校园经历:个人认为不是特别牛逼的项目经历的话,就不必要列出来,写明所在组织及职位即可。(如果面试官有兴趣的话,也会问在里边的经历及职务的)
    • 项目经历:项目经历主要是指企业项目或者比赛类型的项目经历。参考的罗列的点:项目名称、时间、负责工作、项目的技术亮点、难点(无需长篇大论,要点写明即可,不然篇幅过长)
    • 技术栈罗列:分类清晰,使用专业名词描述,重点词汇加粗。根据所剩篇幅考虑技术栈的详略描述。
    • 其他:主要是体现技术热情,学习方法和自学能力,还有发展方向归划。

    腾讯

    由于面试的是移动方面的业务,所以主要问的有zepto库的使用,移动端布局,优化,JS的一些基础还有localstorage等。重点还问了一下我是如何在项目中开展测试的(单元测试和e2e测试)。后序面试由于要去深圳总部,所以我推掉了。

    计算机网络篇(相对重要)

    ennnnn,因为我专业是网络工程的,在华三和另一家公司面试的时候没有被少问这些问题

    1. http、https、以及websocket的区别
    2. http常见的状态码,400,401,403状态码分别代表什么?
    3. 协商缓存和强缓存的区别
    4. 说下计算机网络的相关协议?

    二面

    1.进程与线程的区别
    2.SQL中事务的概念
    3.死锁
    4.产生死锁的条件
    5.CHAR和VARCHAR的区别
    6.深度遍历二叉树
    7.排序算法复杂度、稳定性
    8.前端安全
    9.HTTP状态码
    10.重定向怎么实现
    11.离开确认怎么实现
    12.并行和并发

    三、一些面试题

    总结

    针对于前端的面试,还是需要一定的时间去好好梳理,尤其是知识点的细节一定要非常清楚。关于项目经历一定要有一条主线,在这条主线上你做过什么,遇到过什么坑,怎么解决一定要非常清楚等。另外一点算法还是很重要的,推荐大家一本书<<剑指offer>>,面试前我前前后后看过三遍。共勉之!

    浏览器兼容性问题

    因为我的工作主要还在专注在web端,所以浏览器兼容性的问题没有少碰到过,因主要是兼容IE8以上以及其他各个浏览器,这个就当做总结一下吧(在被问到这一块的时候其实我是有加分的,因为回答的比较多2333)

    1. 使用meta标签来调节浏览器的渲染方式,告诉浏览器用哪种内核渲染,360双核浏览器就是在ie和chrome之间来回切换,现在使用meta标签来强制使用最新的内核渲染页面
    &lt;meta http-equiv="X-UA-Compatible"
    content="IE=edge,chrome=1"/&gt;
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f631c135f1477835695-1">
    1
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f631c135f1477835695-1" class="crayon-line">
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;/&gt;
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    
    1. rgba不支持IE8
      解决:用opacity
    2. CSS3前缀
    -webkit- webkit渲染引擎 chrome/safari -moz gecko引擎 firefox -ms-
    trident渲染引擎 IE -o- opeck渲染引擎 opera
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f631c135fa113332358-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f631c135fa113332358-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f631c135fa113332358-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f631c135fa113332358-4">
    4
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f631c135fa113332358-1" class="crayon-line">
    -webkit- webkit渲染引擎  chrome/safari
    </div>
    <div id="crayon-5b8f631c135fa113332358-2" class="crayon-line crayon-striped-line">
    -moz gecko引擎    firefox
    </div>
    <div id="crayon-5b8f631c135fa113332358-3" class="crayon-line">
    -ms- trident渲染引擎 IE
    </div>
    <div id="crayon-5b8f631c135fa113332358-4" class="crayon-line crayon-striped-line">
    -o-    opeck渲染引擎 opera
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    
    1. 过渡不兼容IE8,可以用JS动画实现
    2. background-size不支持IE8,可以用img
    3. 使用PIE.htc让IE6/7/8支持CSS3部分属性,像CSS3的border-radius,box-shadow,css backgrounds(-pie-background),Gradients,RGBA属性
    .border-radius { border-radius: 10px; -webkit-border-radius: 10px;
    -moz-border-radius: 10px; background: #abcdef; behavior:
    url(css/PIE.htc); }
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f631c135fe911624083-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f631c135fe911624083-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f631c135fe911624083-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f631c135fe911624083-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f631c135fe911624083-5">
    5
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f631c135fe911624083-6">
    6
    </div>
    <div class="crayon-num" data-line="crayon-5b8f631c135fe911624083-7">
    7
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f631c135fe911624083-1" class="crayon-line">
    .border-radius {
    </div>
    <div id="crayon-5b8f631c135fe911624083-2" class="crayon-line crayon-striped-line">
    border-radius: 10px;
    </div>
    <div id="crayon-5b8f631c135fe911624083-3" class="crayon-line">
    -webkit-border-radius: 10px;
    </div>
    <div id="crayon-5b8f631c135fe911624083-4" class="crayon-line crayon-striped-line">
    -moz-border-radius: 10px;
    </div>
    <div id="crayon-5b8f631c135fe911624083-5" class="crayon-line">
    background: #abcdef;
    </div>
    <div id="crayon-5b8f631c135fe911624083-6" class="crayon-line crayon-striped-line">
    behavior: url(css/PIE.htc);
    </div>
    <div id="crayon-5b8f631c135fe911624083-7" class="crayon-line">
     }
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    
    1. 用css hack
    IE6: _ IE7/7: * IE7/Firefox: !important IE7: *  IE6/7/8: \9 IE8:
    \0
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f631c13601410431759-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f631c13601410431759-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f631c13601410431759-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f631c13601410431759-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f631c13601410431759-5">
    5
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f631c13601410431759-6">
    6
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f631c13601410431759-1" class="crayon-line">
    IE6: _
    </div>
    <div id="crayon-5b8f631c13601410431759-2" class="crayon-line crayon-striped-line">
    IE7/7: *
    </div>
    <div id="crayon-5b8f631c13601410431759-3" class="crayon-line">
    IE7/Firefox: !important
    </div>
    <div id="crayon-5b8f631c13601410431759-4" class="crayon-line crayon-striped-line">
    IE7: * 
    </div>
    <div id="crayon-5b8f631c13601410431759-5" class="crayon-line">
    IE6/7/8: 9
    </div>
    <div id="crayon-5b8f631c13601410431759-6" class="crayon-line crayon-striped-line">
    IE8: 
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    
    1. :IE浮动margin产生的双倍距离,通常使用float:left来实现,浏览器存在兼容性问题,导致图片与 后面的内容存在margin不一致的问题,解决方法就是给图片添加diaplay:inline即可
    2. ie8不支持nth-child,但支持first-child和last-child,可以通过转化写法来处理问题,span:nth-child(2)可以转换为span:first-child span,可以使ie8显示该内容,last-child可以自定义一个class类兼容ie8写法
    3. IE8下不支持HTML5属性placeholder,解决问题的js插件挺多的,常用的使用jquery.JPlaceholder.js插件处理问题
    4. 识别HTML5元素,IE中可能无法识别nav/footer,使用html5shiv
    5. 火狐下表单阻止表单默认提交事件:在form中添加 action=”javascript:”,秒杀上述所有默认行为;
    6. 始终为按钮button添加type属性,IE下的默认类型是button,其他浏览器下的默认类型是submit
    7. IE下删除所有不必要的console语句,IE下当遇到console时不识别之后报错,代码不会执行,或者全局自定义一个window.console方法
    8. IE浏览器下由于参数过长导致通过GET请求下载文件方法报错,解决改为POST请求
    9. IE浏览器下iframe弹窗中输入框光标丢失(无法输入)问题,解决清一下frame
    10. 新葡亰496net那是本人面过Wechat,二零一七年八月WEB前端开拓实习生面试题计算。兼容IE8 new Date()返回NaN问题,解决自定义方法
    function parseISO8601(dateStringInRange) { var isoExp =
    /^\s*(\d{4})-(\d\d)-(\d\d)\s*$/, date = new Date(NaN),
    month, parts = isoExp.exec(dateStringInRange); if(parts) { month =
     parts[2]; date.setFullYear(parts[1], month - 1, parts[3]);
    if(month != date.getMonth()   1) { date.setTime(NaN); } } return
    date; }
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f631c13605182909953-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f631c13605182909953-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f631c13605182909953-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f631c13605182909953-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f631c13605182909953-5">
    5
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f631c13605182909953-6">
    6
    </div>
    <div class="crayon-num" data-line="crayon-5b8f631c13605182909953-7">
    7
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f631c13605182909953-8">
    8
    </div>
    <div class="crayon-num" data-line="crayon-5b8f631c13605182909953-9">
    9
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f631c13605182909953-10">
    10
    </div>
    <div class="crayon-num" data-line="crayon-5b8f631c13605182909953-11">
    11
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f631c13605182909953-12">
    12
    </div>
    <div class="crayon-num" data-line="crayon-5b8f631c13605182909953-13">
    13
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f631c13605182909953-14">
    14
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f631c13605182909953-1" class="crayon-line">
    function parseISO8601(dateStringInRange) {
    </div>
    <div id="crayon-5b8f631c13605182909953-2" class="crayon-line crayon-striped-line">
        var isoExp = /^s*(d{4})-(dd)-(dd)s*$/,
    </div>
    <div id="crayon-5b8f631c13605182909953-3" class="crayon-line">
            date = new Date(NaN), month,
    </div>
    <div id="crayon-5b8f631c13605182909953-4" class="crayon-line crayon-striped-line">
            parts = isoExp.exec(dateStringInRange);
    </div>
    <div id="crayon-5b8f631c13605182909953-5" class="crayon-line">
     
    </div>
    <div id="crayon-5b8f631c13605182909953-6" class="crayon-line crayon-striped-line">
        if(parts) {
    </div>
    <div id="crayon-5b8f631c13605182909953-7" class="crayon-line">
            month =  parts[2];
    </div>
    <div id="crayon-5b8f631c13605182909953-8" class="crayon-line crayon-striped-line">
            date.setFullYear(parts[1], month - 1, parts[3]);
    </div>
    <div id="crayon-5b8f631c13605182909953-9" class="crayon-line">
            if(month != date.getMonth()   1) {
    </div>
    <div id="crayon-5b8f631c13605182909953-10" class="crayon-line crayon-striped-line">
                date.setTime(NaN);
    </div>
    <div id="crayon-5b8f631c13605182909953-11" class="crayon-line">
            }
    </div>
    <div id="crayon-5b8f631c13605182909953-12" class="crayon-line crayon-striped-line">
        }
    </div>
    <div id="crayon-5b8f631c13605182909953-13" class="crayon-line">
        return date;
    </div>
    <div id="crayon-5b8f631c13605182909953-14" class="crayon-line crayon-striped-line">
    }
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    

    美团

    3.1 阿里巴巴面试

    阿里的面试体验真的是亲切,也收获良多。需要提的一点就是同个部门面试,前一轮的问题,下一轮还是可能重复问到,所以如果确实不会或者没把握,就赶紧补一补。以下是面试过程记得的问题,仅供参考。

    • 一轮面试:
    • 谈项目架构及原理
    • React 函数钩子及运用
    • React 事件绑定原理
    • React setState 后发生的流程
    • React 跟 Vue 的对比
    • CSS 选择器的优先级
    • 闭包
    • 跨域
    • 移动端适配方案
    • Canvas、SVG
    • Localstorage、Sessionstorage 和 cookie 三者的区别
    • 二轮面试(具体的基础问题问的比一轮面试少,主要是考查思考问题的思路还有工程化思想):
    • React 跟 Vue 的区别
    • cookie 跟 Localstorage 的区别
    • Websocket 的流程
    • ES6 的新特性
    • 组件封装的工程化思想考查
    • 前端打包工具(如 gulp,webpack)
    • 网站安全(主要是 CORS 跟 CSRF),富文本字符串过滤处理方法
    • 为什么选择前端而不是后端
    • 印象最深的项目经历
    • 三轮面试(这一轮确实被问到几个不是很懂的问题):
    • 学习前端多久
    • 聊项目(项目背景、技术亮点、难点)
    • 觉得最有成就感的项目
    • 产品沟通,用户体验优化
    • 移动端事件穿透
    • 同源策略(原因及解决方案)
    • 搜索框样式实现
    • 属性跟方法放在 prototype 还是构造函数比较好
    • 性能优化(下拉加载图片处理有具体问了一些)
    • Jquery 源码(选择器实现方法、递归思想、class 选择器不用递归的优化算法)
    • 觉得自己有什么缺点和优点(缺点克服方法)
    • 四轮面试(前面面试都是一个多钟,最后两轮时间差不多都是 20 分钟,不是很长):
    • 操作系统的线程和进程
    • 数据结构和算法
    • 职业规划和学业规划
    • 项目经历(基本都问,主要是了解拥有哪些领域开发具备的技术栈)
    • 五轮面试(HR 面试):
    • 基本都是谈人生

    更多免费面试资料扫描下方二维码或搜索qq群号642482868加群领取。

    新葡亰496net 1

    image

    Vue相关知识点 (框架之一重要)

    因为我简历上主要写的是会vue啦,其实也不是精通,因为边学边开发,主要是实践的项目不是特别复杂,不过常见的一些坑点还是有遇到的啦,这个是看你会的框架问相应的知识点

    1. 简单阐述一下vue的生命周期
    2. 如何实现一个自定义组件,不同组件之间如何通信的?
    3. 父子组件如何通信的?
    4. 前端路由有没有用过,你在项目中怎么实现路由的嵌套?
    5. nextTick和Vuex两个有没有用过,分为什么情况下用到?
    6. Vue的响应式原理你知道是怎么实现的吗?你觉得订阅者-发布者模式和观察者模式有区别吗?有的话,说一下它们的区别。

    一面

    1.Vue双向数据绑定
    2.diff算法
    3.vue计算属性如何实现
    4.vdom优缺点
    5.SPA原理
    6.webpack用过那些loader
    7.gitHub
    8.angular脏检查
    9.export看代码说结果(好像babel转码的export和node里的不太一样)
    10.let、const
    11.箭头函数
    12.localStorage缺点
    13.手写算法,求二叉树中两个标记的节点之间的最短路径吧,(类似迪杰特斯拉算法吧)

    3.2 腾讯面试

    • IEG 某部门一面:
    • 项目经历,主要问 NodeJS
    • KOA 框架
    • 客户端缓存(localstorage 和 cookie)
    • 网络安全(主要是 CORS,CSRF)
    • Websocket(技术介绍,项目介绍,低版本浏览器兼容方案)
    • http 协议(有具体到字段名称)
    • Vue 双向数据绑定原理
    • 浏览器渲染机制
    • 浏览器存储
    • 原生 DOM 操作
    • CSS print
    • 同源策略
    • 事件触发流程(捕获、冒泡、委托)
    • 客户反馈错误处理方法
    • 团队协作代码管理
    • SNG 某部门一面:(因为 IEG 二轮面试电话来的时候刚好赶项目,所以...):
    • 事件流机制
    • 变量类型
    • 区别 Object 和 Array
    • 客户端存储的方法
    • LocalStorage 的作用
    • HTTP 状态码
    • 项目经历
    • 服务器访问量过载处理方式
    • 同源策略的原因,解决方法
    • 哪些存在同源策略
    • xss, csrf
    • CSS 伪类和伪元素的关系
    • 正则表达式
    • JSONP 实现原理
    • Ajax 实现原理,IE8 CORS 的兼容
    • SNG 某部门二面(基础的考核比较刨根问底):
    • 动态 DOM 节点的事件绑定方法
    • 移动端事件穿透
    • 网络安全
    • 其他问题大致跟一轮面试差不多,就是基本都刨根问底
    • 某事业群某部门一面(面试内容比较简单,但不知为何没后续...):
    • 项目经历
    • IE8 的一些兼容问题
    • 移动端浏览器内核兼容问题
    • 校园经历

    构建工具

    因为项目还在前后端未分离的时候,我研究的gulp比较多,像grunt、fis3也有了解过,webpack还不是很熟(感觉要GG),所以这块问的比较少,面试官也就没有这么问,不过我觉得还是有必要去熟悉或者实践一下一下

    二面

    1.无序数组,找出所有满足条件的数,这个数比前面的数都大,比后面的数都小
    2.js继承
    3.实现一个简单的mvvm
    4.实现一个装饰者模式
    5.看过哪些书
    6.this绑定
    7.HTTP缓存,ETag

    四、一些建议

    • 技术热情:如果确实对自己现在的方向没有兴趣,建议考虑别的方向。
    • 前端技术栈:基础很重要,不要急着去用框架,基础不扎实的话,一些语法,浏览器的运行机制,常用 API 都不了解的话,就更要先打好 基础了。否则直接上手框架成本高,又只停留在用的阶段。
    • 推荐的打基础的几本书:
    • 《HTML5 权威指南》
    • 《CSS 权威指南》
    • 《JavaScript 高级编程》
    • 《JavaScript 权威指南》
    • 《HTTP 权威指南》
    • 《JavaScript 设计模式》
    • 《NodeJS 深入浅出》
    • MDN 文档
    • 建议看源码的库:
    • Bootstrap:样式库主要当补基础,把没见过的属性了解一下;JavaScript 库主要看实现的思想,JavaScript 插件最好自己也实现一遍。
    • jQuery:看懂源码,思考为什么这么写,有没有更好的实现方法。
    • 主流框架 Vue/React/Angular 建议至少挑一款深入学习。
    • 大前端时代,NodeJS 也需要从基础到框架的一个过程去学习。
    • 成长是一个不断学习的过程,遇到不懂的最好记下来,有时间一点一点去解决,最好是相关的知识都去了解,系统消化。

    注:写于 2017 年 04 月 30 号

    Other

    有一些技术主管会考量一下你除了前端之外的技术能力,例如你熟悉的后端语言,sql会不会新葡亰496net那是本人面过Wechat,二零一七年八月WEB前端开拓实习生面试题计算。,还有人问我Linux命令会不会的(我内心:不会不会不会====),不过node多多少少都有在用,这个也是前端应该要会的啦(but技术小白我不会,只是用到一点点~)

    三面

    1.prototype属性
    2.跨域安全,怎么防范
    3.设计方面的书
    4.UI的了解
    5.CSS的书
    6.前端哪里不好
    7.问了一些复杂的设计模式
    8.项目亮点
    9.MVC

    最后

    把面试当做学习,这个过程你会收益很大。自己也拿到了几家还不错的offer,最后选择了我比较满意的一家公司,我并没有特别在意薪资这块,都是综合考虑的一个结果啦!前端知识很杂,可能实际工作中用到的技术,像框架都是跟着公司的要求走的,像我最近也在看React啦,Vue和React都对比着再学习,不要问我为什么没有在看Angular(懒懒懒),因为新公司说是偏向于React,所以最重要的还是更看重基础知识的积累吧,当然,开心最重要~

    1 赞 4 收藏 1 评论

    新葡亰496net 2

    京东

    一面

    1.jq和vue区别,各自的场景
    2.为什么选择Vue
    3.跨域方法
    4.ES6新特性
    5.h5新特性
    6.你做前端的优势

    二面

    1.Vuex原理
    2.项目难点
    3.水平垂直剧中
    4.盒模型
    5.数组去重
    6.一维数组变二维
    7.HTTP状态码
    8.继承
    9.对框架怎么看

    今日头条

    一面

    1.ES6了解哪些
    2.promise
    3.promise.all是并行还是并发
    4.手写promise.all
    5.实现一个BST、Node构造函数,要求有inster方法,能先序、中序、后序遍历
    6.css多种方式画三角形
    7.css实现正方形的自适应
    8.进程间的通信方式
    9.详细说下三次握手、四次挥手
    10.css画菱形

    滴滴

    一面

    1.手写算法
    2.手写继承
    3.画盒模型

    二面

    1.常用的类名
    2.继承
    3.盒模型
    4.jsonp
    5.ajax同步和异步
    6.window.onload,浏览器怎么渲染
    7.轮播图
    8.linux命令
    9.数组归并去重

    滴滴第二次

    一面

    1.css3动画
    2.实现水平垂直居中
    3.Promise规范、源码
    4.Promise链式调用如何中断
    5.Vue性能优化,用过哪些性能优化的方案(这个他和我说了好多,我也懂了好了好多,一会记录一下)
    6.vue、react的区别
    7.快速找到数组中只出现一次的值(用位操作)
    8.async function
    9.项目和我聊了很多
    10.postCss、mixin
    聊的挺好的,然后不知道为什么就什么消息都没有了,可能是我问了面试官很多题,他有些反感吧。

    滴滴第三次

    一面

    1.React和Vue区别(我吹了二十分钟)
    2.Koa和Express区别(又吹了十分钟)
    3.做题 关于Async functiom
    4.做题 引用值
    5.做题 还是引用值

    二面

    1.React的setState机制(异步队列)
    剩下的都是我自己在吹。。。
    这次滴滴就是吹出来的。。。

    百度外卖

    一面

    1.手写trim
    2.用call或qpply实现bind
    3.找出数组中最多的
    4.有哪几种查找的算法
    5.二分思想,要求的条件
    6.类数组,怎么实现,有哪些类数组
    7.promise
    8.Generator
    9.webpack路由懒加载
    10.v-bind实现
    以下都是根据项目引申出的问题
    11.防抖
    12.性能优化
    13.跨域
    14.vuex思想
    15.做题, 就是考察了map传参数
    16.Vue和React的区别
    17.多种方法实现两栏布局(固定和自适应)
    面试官说我表现很不错

    北森云计算

    一面

    1.JS数据类型
    2.盒模型
    3.vue和react区别
    4.如何选择框架
    5.移动端1px
    6.vuex
    7.Promise源码
    8.跨域

    二面

    1.自我介绍
    2.项目
    3.jq源码
    4.vue源码
    5.vue、react区别
    6.promise
    7.性能优化
    8.diff算法
    9.双向数据绑定
    10.跨域

    商汤科技

    一面

    1.行元素和块元素
    2.盒模型
    3.eval
    4.JS数据类型
    5.JS有哪些对象
    6.==和===
    7.link和@import
    8.undefined和null
    9.get、post
    10.JS时间线
    11.项目
    12.position值
    13.H5新特性
    14.cookie和storage区别

    二面

    1.项目
    2.性能优化
    3.手写快排
    4.表单怎么抽取成组件
    5.双向数据绑定
    6.响应式布局
    7.浏览器兼容
    8.vue、react区别

    网易有道

    一面

    1.行元素、块元素
    2.原型链和继承
    3.浏览器内核,浏览器引擎
    4.跨域
    5.typescript
    6.todolist
    7.互斥锁
    8.bind、call、apply区别
    9.将一个元素隐藏
    10.css单位
    11.闭包
    12.webSocket兼容处理

    二面

    1.浏览器输入URL到页面渲染完成发生了什么
    2.渲染界面过程
    3.SQL语句
    4.操作系统
    5.HTTPS
    6.算法(子集合问题)
    7.子集合问题怎么优化
    8.二分查找
    算法答的不好,浪费了很多时间。。下次注意

    小米

    一面

    1.flex布局垂直居中
    2.ES5有什么块作用域
    3.CSS3动画
    4.H5 拖拽元素状态,方法
    5.webSocket
    6.history方法
    7.h5增加了哪些事件
    6.webpack性能优化
    7.express中间件
    8.promise穿透,promise递归
    9.mongoDB的分页
    10.观察者模式
    11.UDP和TCP区别
    12.generate
    13.Iterator
    14.async function
    15.前端安全
    16.import互相引用
    17.JS垃圾回收制
    18.怎么创建一个没有原型的对象
    19.with
    20.闭包
    21.css hack
    22.作用域链
    23.性能优化
    24.require和import的区别
    25.commonJS
    26.cookie和storage
    27.大列表的优化
    28.vue源码
    29.jq源码
    30.dom事件流
    31.事件委托,为什么会提升性能
    32.事件绑定IE兼容
    33.attarhEventListen 和 addEventListener区别
    34.浏览器缓存
    35.PromiseAPI
    36.对象实现遍历接口
    37.三栏布局
    38.new 原理
    39.看了哪些书
    40.拿了哪些offer
    还有好多我听都没有听到过的东西。。。我直接说不懂。。。
    还问了n多个,类似表单优化的问题,然后说他们也不太会,就和我讨论下
    问的问题比我前几次的总和都多了,最后打电话说我还OK,我他妈反手。。就是一张过去的CD
    前几次面试我觉得还OK,到了小米,感觉自己废了。。果然学无止境
    前几天看了个文章叫《小米Java程序员第一轮面试的12个问题,你会几个?》,我觉得我可以写一个叫《小米前端工程师第一轮面试的50个问题,你会几个?》

    网易雷火

    一面

    1.原生实现lazyload
    2.原生实现v-bind
    3.原生实现v-modul
    4.webpack和gulp的区别
    5.css预处理器、后处理器
    6.CDN的好处
    7.XSS原理及其防御、CSRF原理及其防御
    8.观察者模式
    9.git 一个分支已经提交了,你现在的代码已经写了很多,发现之前有个BUG要改,怎么办
    10.nginx反向代理
    11.跨域
    12.vue-cli配置proxy
    13.jQ.on源码

    二面

    哈哈哈哈 二面我和面试官谈了一个多小时,全程就问了我两个问题,面试官是后端,哈哈哈哈哈
    1.进程、线程、协程之间的区别
    2.linux的find和grep
    哈哈哈哈哈 全程跟前端一点关系都没有,

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496net那是本人面过Wechat,二零一七年八月

    关键词: