1. 前端面试要点
想要通过前端面试顺利进入一线大厂成就高薪前端梦。那么首先,我们得知道前端面试中,社招和校招究竟有啥区别?
对于前端开发来说,如果说社招更看重对前端技术体系的深入理解,以及解决问题的能力话,那校招更看重的其实是基本功和学习能力(或者说是潜力)。
但其实,无论是社招还是校招,面试的时候都会问到一些曾经操作过的项目,尤其是大厂,或者热门高薪部门,面试官除必问的技术经验外,也会对技术深度进行一个基础的考核,那在这种情况下如何hold住大厂面试呢?
前端面试三要素:简历、个人介绍、技术能力。下面,就来分别聊一聊。
1、简历筛选关:
HR一般会去看简历中所提的技术栈是否匹配,怎么看呢?我们可以抓住简历中的技术名词,一般来说如果一点技术名词都没有提到,那么大概有以下几种可能:很水、很牛但概率很小、不会写简历。所以,一部分人可能会因为简历的问题没有了面试机会,这点是需要非常注意的。
2、个人介绍关:
通过了简历筛选阶段,就真正到了面试环节。这时候一定要准备好一段最多3分钟的个人介绍。请注意,最多3分钟!言简意赅的说明自己的工作时间,擅长技术栈和自己的工作预期。
3、项目经验表达:
对前端开发学习者而言,JS并不陌生,但大厂的JS面试题却总是显得很“陌生”,怎么样能够真正做到深入理解与高级应用?这不仅是面试过程中对前端求职者的要求,也是大多数前端开发者的痛点。
大厂面试中,面试官除了关注你的项目经验外,还往往喜欢和面试者深入探讨前端某些技术领域成体系的前端知识。比如:模块化、异步解决方案、网络、框架及原理、线程等,但在与面试官的正面battle中,求职者总会败下阵来。
所以,建议大家在Web前端面试前一定要注重这三个方面的内容。注重了这些想找找到一份适合的Web前端开发工作并不是难事。
2. 大厂的前端面试难吗
分享给你一些面试题
一面
小米的面试官给人的感觉很亲切很真诚,是一个体验很不错的面试。
css 实现图片自适应宽高
讲 flex,手写出 flex 常用的属性,并且讲出作用
BFC 是什么
项目里面的前端鉴权是怎么实现的?
vue 里面的虚拟 dom 是怎么回事?
vue 双向绑定讲一讲
手写函数防抖和函数节流
讲讲常用的 es6 语法,比如 let、promise、class 等等
浏览器渲染过程,回流重绘等等,load、DOMContentLoaded 等等事件的触发顺序
从小米应用商店里面随便找了一个需求让我现场实现,写伪代码
讲项目里面的鉴权和图片懒加载怎么实现的
讲 vue-lazyloader 的原理,手写伪代码
讲 express 框架的设计思想
线上日志是如何处理的
讲事件循环
讲 nodejs 的 eventEmitter 的实现
讲项目里面做的事情
讲 vue 的响应式原理、依赖收集、监听数组、虚拟 dom 等等
讲 express 的中间件系统是如何设计的
现场从小米应用商店中找出一个需求现场实现,说思路,写关键的代码
四面
讲 vue-lazyloader 源码以及设计
使用 es5 实现 es6 的 class
websocket 握手过程
浏览器的事件循环和 nodejs 事件循环的区别
跨域以及解决办法
手写一段小算法
JavaScript 的 sort 方法内部使用的什么排序?
讲项目里面干了啥
vue-lazyloader 怎么实现的
vue 的响应式系统、虚拟 dom
函数式编程
手写了一个算法题
讲讲项目里面做了什么
vue 原理,和 react 的区别(其实我没怎么用过 react)
JavaScript 异步的处理方式,现场出了一个问题,使用 promise 实现
讲项目模块规划、项目如何部署、如何优化等等
手写函数的防抖
手写一道算法题
讲讲项目
手写一道算法题
讲项目
前端持久化的方式、区别
vue-lazyloader 的原理
怎么配 webpack
手写 vue 双向绑定
讲 es6 的一些特性,并且现场出了几个代码片段,说结果
手写一道算法题
http 状态码
讲项目
vue-router 的原理
项目中怎么用的 webpack,怎么优化
讲 express 的设计原理
手写一道算法题
讲项目
手动实现 parseInt
讲 tcp/ip 网络层、三次握手,为什么不能两次握手
讲 vue 原理
手写一道算法题
手写 vue 的 mixin 方法
手写 promise 的 all 方法
现场出了一个移动端的小需求
讲项目
项目里面用 nodejs 做了啥
抽取了哪些 vue 组件
讲项目
手写实现 promise
腾讯-地图(跪)
腾讯两个部门面试都会先做一套笔试题,笔试题基本就是一些常见的前端问题以及算法题
讲项目,对项目提了一些问题
怎么判断一个点是否在圆形内、正方形内
对笔试题
笔试题
没了
讲项目
vue 响应式原理,什么是 mvvm
es6 使用过的特性
flex 常见的属性
css 选择器的优先级
抽取过哪些 vue 组件
讲项目
express 设计原理,面试官对动态路由匹配一直追问下去,但是这里的源码设计我确实是忘了,一路讨论下去扯到了字符串的前缀树…
实现一个事件发布订阅类,其实就是 eventEmitter
讲项目
事件循环
回调函数的坏处
vue 里面哪儿不会用到双向绑定
讲项目
如何抽取公共组件的
vue 的响应式原理
如何实现一个可设置过期时间的 localStorage
实现一个发布订阅系统,包括 on、emit、off 等等
一道智力题
软件工程思想、设计模式等等
async/await 代码片段,说输出结果
讲项目
讲 lazyloader 实现
用 docker 做了什么
用 webpack 做了什么
手写一个算法题
讲 flex
vue 响应式原理
es6
JavaScript 异步
优化项目
vue 原理,包括计算属性、依赖收集等等
用 JavaScript 的异步实现 sleep 函数
算法题
手写快排,时间复杂度,优化
手写实现 jsonp
项目部署,线上问题等等
websocket 握手过程
对 vuex 的理解,单向数据流
设计一个单点登录的系统,类似阿里系那种
手写一个算法
实现一个联想搜索组件
手写函数防抖和节流
讲项目
讲 vue 的 响应式系统,讲了好久,从渲染 watcher 到虚拟 dom,面试官还跟我讨论了好久
忘了
讲项目
忘了
websocket 握手过程
tcp/ip 网络层,http 的特点
http 强行使用 udp 能实现吗?
vue 原理
webpack 热更新原理,使用过的插件
原型、闭包、跨域
手写了一道算法题
二面
三面
百思编程(过)
这个公司是猎头推荐的,CEO 比较强势,也算比较有趣。
一面
二面
这一面是 CEO 面,主要问了我的职业规划等等问题,在我没有表现出很强的要去该公司的意愿后,直接给我送走了…
ponyAI-基础架构(过)
一面
二面
这轮面试时从美国打电话过来的,事后才知道是 Google 的前端…
三面
四面
洋钱罐(过)
一面
二面
创新奇智(过)
一面
二面
这一面居然遇到了前同事…写了一些笔试题,问了一些问题!
三面
猿辅导(跪)
猿辅导好像总共就一面,期间一些实现方式和面试官有争议(没有冲突)。
一面
搜狐-垂直媒体部门(过)
一面
二面
三面
腾讯-天天快报(跪)
也是先做了一套笔试题,但是令人尴尬的是,面试官觉得我快排写错了,然而我只是在原地快排没有申请额外空间…
网络-网络云(过)
这个部门今年据说升为一级部门了,好像还挺不错的~
一面
二面
三面
三面是山大老学长,聊了一些业务上的事情~
搜狗-手机搜狗(过)
搜狗一面的体验比较差,面试官给人的感觉不太好…
一面
二面
忘了…
快手-商业化(过)
一面
二面
今日头条-广告系统(过)
一面
二面
三面
四面
五面
OPPO 成都研发中心(过)
一面
二面
百词斩(跪)
首先会在线做一道算法题,挺简单的,百词斩感觉挂的稀里糊涂的…
一面
为什么面这么多公司
因为我是实习直接转正的,也没参加过秋招,所以对自己在市场上是个怎样的实力没有一个清晰的了解,而且我也想多了解一下其他公司在做什么,于是就尽量的多面,不过说实话面试确实挺累的。
3. 前端好还是后端好
关于前后端的选择,前端更容易入门,每天调整界面的展示,通过代码完成优美的界面和酷炫的交互。后端入门稍困难,每天关注的是业务逻辑的处理,数据的增删改查,性能的优化。总之,前端和后端工资和职业发展前景就都不错。
前端开发主要做的是用户所能看到的前端展示界面。前端开发用到的技术包括但不限于html5、css3、javascript、jquery、Bootstrap、Node.js 、AngularJs等技术。
后端开发主要做的是逻辑功能等模块,是用户不可见的。后端开发 以java为例,主要用到的是包括但不限于Struts、spring、springmvc、Hibernate、Http协议、Servlet Tomcat服务器等技术。
前端开发的内容:
前端开发主要做的是用户所能看到的前端展示界面。前端开发用到的技术包括但不限于html5、css3、javascript、jquery、Bootstrap、Node.js 、AngularJs等技术。从开始的切页面,到现在复杂的前端单页应用,node服务端应用,移动端react-native等。
前端的技术更新速度远远超过服务端的更新速度,这也就要求前端同学,需要不停地学习新的技术来跟上前端技术的升级,一旦松懈,就可能被淘汰。前端现在所覆盖的场景已经越来越广,从传统的前端,已经延伸到服务端,工具链,移动端等。
4. WEB前端面试题
第二章 面试题基础篇
2.1 HTML面试题
面试题:行内元素有哪些?块级元素有哪些? 空(void)元素有那些?
面试题:页面导入样式时,使用link和@import有什么区别?
面试题:title与h1的区别、b与strong的区别、i与em的区别?
面试题:img标签的title和alt有什么区别?
面试题:png、jpg、gif 这些图片格式解释一下,分别什么时候用?
2.2 CSS面试题
面试题:css背景纹路
面试题:介绍一下CSS的盒子模型
面试题:CSS选择符有哪些?哪些属性可以继承?
面试题:CSS优先级算法如何计算?
面试题:用CSS画一个三角形
面试题:一个盒子不给宽度和高度如何水平垂直居中?
面试题:display有哪些值?说明他们的作用。
面试题:对BFC规范(块级格式化上下文:block formatting context)的理解?
面试题:清除浮动有哪些方式?
面试题:在网页中的应该使用奇数还是偶数的字体?为什么呢?
面试题:写一个左中右布局占满屏幕,其中左、右俩块固定宽200,中间自适应宽,要求先加载中间块,请写出结构及样式。
面试题:什么是CSS reset?
面试题:css sprite是什么,有什么优缺点
面试题:display: none;与visibility: hidden;的区别
面试题:position有哪些值?有什么作用? 【特别多公司问】
面试题:line-height和height有什么区别?
面试题:opacity 和 rgba区别
2.3 JavaScript基础面试题
面试题:延迟加载JS有哪些方式?
面试题:JS数据类型有哪些?
面试题:null和undefined的区别
面试题:JS数据类型考题
面试题:==和===有什么不同
面试题:JS微任务和宏任务
面试题:JS作用域考题
面试题:JS对象考题
面试题:JS作用域+this指向+原型 考题
面试题:JS判断变量是不是数组,你能写出哪些方法?
面试题:slice是干嘛的、splice是否会改变原数组
面试题:JS数组去重
面试题:找出多维数组最大值
面试题:给字符串新增方法实现功能
面试题:找出字符串出现最多次数的字符以及次数
2.4 真正移动端 —— H5/C3面试题
面试题:什么是语义化标签
面试题:::before 和 :after中双冒号和单冒号 有什么区别?解释一下这2个伪元素的作用。
面试题:如何关闭iOS键盘首字母自动大写
面试题:怎么让Chrome支持小于12px 的文字?
面试题:rem和em有什么样区别
面试题:ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
面试题:webkit表单输入框placeholder的颜色值能改变吗?
面试题:禁止ios 长按时不触发系统的菜单,禁止ios&android长按时下载图片
面试题:禁止ios和android用户选中文字
面试题:自适应 [淘宝无线适配]
面试题:响应式
第三章 面试题进阶篇
3.1 JavaScript进阶面试题
面试题:new操作符具体做了什么
面试题:闭包 【必须会】
面试题:原型链 【必须会】
面试题: JS继承有哪些方式
面试题:说一下call、apply、bind区别
面试题:sort背后原理是什么?
面试题:深拷贝和浅拷贝
面试题:localstorage、sessionstorage、cookie的区别
3.2 ES6面试题
面试题:var、let、const区别
面试题:作用域考题
面试题:将下列对象进行合并
面试题:箭头函数和普通函数有什么区别?
面试题:Promise有几种状态
面试题:find和filter的区别 【大厂】
面试题:some和every的区别 【大厂】
3.3 webpack面试题
面试题:webpack插件
3.4 Git面试题
面试题:git常用命令
面试题:解决冲突
面试题:GitFlow
第四章 面试题框架篇
4.1 区分初中高级的 —— Vue面试题
面试题:Vue2.x 生命周期有哪些?
1.系统自带八个
2.当一旦进入到某个组件会执行哪些生命周期
3.$el和$data在哪个阶段有
4.如果使用keep-alive会多俩个生命周期
5.如果加入keep-alive第一次进入组件会执行哪些生命周期
6.如果加入keep-alive第二次或者第N进入该组件会执行哪些生命周期
面试题:谈谈你对keep-alive的了解
面试题:v-if和v-show区别
面试题:v-if和v-for优先级 2.x
面试题:ref是什么?
面试题:nextTick是什么?
面试题:Vue中如何做样式穿透
面试题:scoped原理
面试题:Vuex是单向数据流还是双向数据流?
面试题:讲一下MVVM
面试题:双向绑定原理
面试题:什么是虚拟DOM
面试题:key是干什么?
面试题:diff算法
面试题:Vue组件传值
面试题:props和data优先级谁高?
面试题:computed、methods、watch有什么区别?
面试题:Vuex
面试题:Vue路由
面试题:Vue项目打包后出现空白页
4.2 微信小程序面试题
面试题:如何自定义头部?
面试题:如何自定义底部?
4.3 uni-app面试题
面试题:生命周期
面试题:条件编译
第五章 面试题性能优化篇
5. 那些陌生又熟悉的前端面试题
过完年需要跳槽的小伙伴还是挺多的,又要开始刷前端面试题了!会不会有一种错觉,看着这道面试题很熟,但是不知道该如何做?或者有答案又不知道是否正确?或者使用编辑器可以运行出来正确的答案,但是不知道怎么得来的,这些你都中招了吗?
JavaScript 语言是一门弱类型语言,存在许多类型错误,因此 ES6 引入了严格模式概念。
如果不加 ‘use strict’ 常规模式下就是属于非严格模式。
严格模式
在 js 文件顶部添加 ‘use strict’ 就属于严格模式,严格模式也可以指定在函数内部。
严格模式,是为 js 定义来了一种不同的解析与执行模型,在严格模式下,ECMAScipt 3 中一些不解和不确定的行为将得到处理,而且会对不安全的操作会抛出异常。‘use strict’ 会告诉浏览器引擎可以切换到严格模式执行。
严格模式与非严格模式区别
常见笔试题:
试试这道笔试题你会做吗?
要说 js 的深浅拷贝,就不得不提 js 的两大数据类型:基本数据类型和引用类型。
基本数据类型的变量名和值都存储在栈中,对于引用类型的变量名存储在栈中,而值存储在堆中。由于存储方式不同,所以导致了他们复制的时候方式不同。
赋值
基本数据类型赋值的时候,创建的基本数据类型会在内存中开辟一个新空间把值复制过来,而引用类型采用的是地址存储,如果直接把一个引用数据直接赋值给另外一个数据,就相当于直接把自己存储值的地址给了另外一个变量,所以改变一个的值,也会改变另外一个的值。
深浅拷贝是如何定义的?
假设有 p 和 P 两个变量,如果P 是拷贝了 p 的,我们通过修改 P 来观察 p 是否发生改变,如果跟着改变,就是浅拷贝,如果是不改变,就说明是深拷贝。
基本类型复制的时候会开辟新的内存空间,所以两个值是相互独立的,引用类型复制的时候就要看是复制的内存地址还是复制一个新的堆。所以深拷贝主要针对的是引用类型的数据。
浅拷贝的常见的方式:
1、直接赋值
2、Object.assign
深拷贝的常见方式:
引用数据类型最常用的就是 Object 和 Array ,引用数据内部的数据也可以是多样化的,进行深拷贝时,也要适当地根据数据结构进行合适的复制方式,具体的深拷贝方法分别有:
1、数组中只包含基本数据类型
2、对象中只包含基本数据类型
3、对象或数组里含有一层或多层引用数据类型时
深浅拷贝的常见应用主要是数据的增删改操作。
大厂笔试题:
这是一道关于 this 指向的面试题,接下来我们就说说 this 是如何指向的?
this 对象是运行时基于函数的执行环境绑定的:
看完上述 this 指向解释,你就可以做上边的那道面试题了。
如何改变 this 的指向?
call 、bind 和 apply 这三个函数都是用来改变 this 指向的,就是改变函数执行时的上下文。
修改上述面试题:
call 、bind 和 apply 改变 this 指向,最大作用就是实现代码复用。
至于 call、bind 和 apply 的区别,可以自行去了解下。
有了上边那个表,事情就变得简单了!
关系运算符进行运算时,不同类型的值会自动转化为相同类型值,然后进行
1、两边有一个是字符串一个是是数字时,字符串调用 Number 方法,将字符串转为数字,所以:
2、如果两边都是字符串时,按照字符串的 unicode 编码来转换的,所以:
3、字符串进项比较时,先比较第一位,如果不相等直接得出结果,如果第一项相等,会继续使用第二项进行比较。
4、转为布尔值都为 false 的类型分别有:undefined 、null 、0、NaN、false、‘’
5、NaN表示的是非数字,但是这个非数字也是不同的,因此 NaN 不等于 NaN,两个NaN永远不可能相等。
6、关系运算有一个数值,将另外一个值也转为 number 类型。
7、有逻辑运算的,将其他数据类型转为 boolean 值。
8、直接使用两个空数组比较,数组地址不同,所以不相等。
评论区可以留下最近你想学习的知识点,或面试题类型!
6. Web前端需要掌握哪些技能才能进大厂
一名合格的前端开发工程师,不单单需要掌握前端必须的各种技术,同时还要掌握其它技术,需要掌握一点后台的知识,同时也要对网站构架有一定的了解,这样才可以称之为一个合格的Web前端开发工程师。如果你想自学,可以找一些千锋视频学习资源之类。
如果你想要快速学习Web前端技术,专业全面的学习方式比较好,一般费用在2W左右,4-6个月左右。千锋适合零基础的小白迅速成长,学习曲线先快后慢,也适合有一定基础的学员进阶学习,巩固知识的基础上,稳步进步突破职业瓶颈。
7. web前端初级面试要求
想要通过前端面试顺利进入一线大厂成就高薪前端梦。那么首先,我们得知道前端面试中,社招和校招究竟有啥区别?
对于前端开发来说,如果说社招更看重对前端技术体系的深入理解,以及解决问题的能力话,那校招更看重的其实是基本功和学习能力(或者说是潜力)。
但其实,无论是社招还是校招,面试的时候都会问到一些曾经操作过的项目,尤其是大厂,或者热门高薪部门,面试官除必问的技术经验外,也会对技术深度进行一个基础的考核,那在这种情况下如何hold住大厂面试呢?
前端面试三要素:简历、个人介绍、技术能力。下面,就来分别聊一聊。
1、简历筛选关:
HR一般会去看简历中所提的技术栈是否匹配,怎么看呢?我们可以抓住简历中的技术名词,一般来说如果一点技术名词都没有提到,那么大概有以下几种可能:很水、很牛但概率很小、不会写简历。所以,一部分人可能会因为简历的问题没有了面试机会,这点是需要非常注意的。
2、个人介绍关:
通过了简历筛选阶段,就真正到了面试环节。这时候一定要准备好一段最多3分钟的个人介绍。请注意,最多3分钟!言简意赅的说明自己的工作时间,擅长技术栈和自己的工作预期。
3、项目经验表达:
对前端开发学习者而言,JS并不陌生,但大厂的JS面试题却总是显得很“陌生”,怎么样能够真正做到深入理解与高级应用?这不仅是面试过程中对前端求职者的要求,也是大多数前端开发者的痛点。
大厂面试中,面试官除了关注你的项目经验外,还往往喜欢和面试者深入探讨前端某些技术领域成体系的前端知识。比如:模块化、异步解决方案、网络、框架及原理、线程等,但在与面试官的正面battle中,求职者总会败下阵来。
所以,建议大家在Web前端面试前一定要注重这三个方面的内容。注重了这些想找找到一份适合的Web前端开发工作并不是难事。
8. 大厂前端笔试面试题总结(一)
1.从下列选项中找出正确的打印值
A. 'false','true'
B. '"Lydia"','21'
C. 'true','true'
D. 'undefined','undefined'
解析:
注:const、let、var声明的变量在使用delete关键字进行删除时是无效的,且其返回值是false。
正确答案:A
2.从下列选项中找出正确的打印值
A. {admin:true,user:{name:"Lydia",age:21}}
B. {admin:true,name:"Lydia",age:21}
C. {admin:true,user:["Lydia",age:21]}
D. {admin:true}
解析:
注: ...user 使用的是ES6的扩展运算符,默认作用是将user的属性展开平铺,并且和 admin:true 组成一个新的对象。
如果 const user ={name:"Lydia",age:21,admin:false}; 和前面的属性有重名时, ... 扩展运算符会把前面的属性覆盖掉。打印结果就会为: {admin:false,name:"Lydia",age:21}
正确答案:B
3.从下列选项中找出正确的打印值
A. 10
B. 11
C. Error
D. NaN
解析:从模块导出的变量是不能被修改的,只能作为一个只读的变量进行其他文件引入使用。
正确答案:C
4.从下列选项中找出正确的打印值
A. [1,1,2,3,4]
B. [1,2,3,4]
C. {1,1,2,3,4}
D. {1,2,3,4}
解析:
注:Set具有唯一性,输出时会默认过滤掉重复项。Set是一种新的数据结构并不是数组。
数组的去重、找唯一值都可以利用Set形式
正确答案:D
5.从下列选项中找出正确的打印值
A. "Woof I am Mara" , TypeError
B. "Woof I am Mara" , "Woof I am Mara"
C. "Woof I am Mara" , undefined
D. TypeError , TypeError
解析:
正确答案:A
6.从下列选项中找出正确的打印值
A. "undefined","number"
B. "number","number"
C. "object","number"
D. "number","undefined"
解析:
正确答案:A
7.从下列选项中找出正确的打印值
A. Lamborghini
B. "Maserati"
C. ReferenceError
D. TypeError
解析:
正确答案:B
8.从下列选项中找出正确的打印值
A. "It worked! Hello world!"
B. "Oh no an error: undefined"
C. SyntaxError: can only throw error objects
D. "Oh no an Error: Hello world!"
解析:
正确答案:D
A. []
B. [null,null,null]
C. [undefined, undefined,undefined]
D. [3 × empty]
解析:
正确答案:C
10.从下列选项中找出正确的打印值
A. 42
B. "42"
C. 7
D. NaN
解析:
parseInt(string, radix)函数解析字符串并返回整数。
9. web前端开发面试流程是怎样的
首先投简历,等待hr通知面试,一般情况下先填资料,做测试题,接着开始第一面(一般问经你的个人情况,工作经历等),资料已经交给技术,等一面通过之后接着二面,二面一般是技术面试,问你开发相关的技术问题(例如布局问题,js,框架之类的),有些公司还需要上机操作(写一两个页面或者开发一个js方法等),有些公司是通过之后直接进行3面有些是改天再进行3面,3面一般就是项目经理或总经理问你一些各种各样的问题(随机应变就行,也有一些公司没有这个环节),如果3面都过了,基本上就是面试成功了,接下来就是4面,也就是人事主管和你谈工资待遇等问题了,这个谈好之后就会告诉你什么时候过来上班,要准备什么东西,当然一般还会有正式的工作邀请函发到你的邮箱。如果没有3面的公司,那人事这个环节就直接是3面了。
还有一些公司是一面之后等通知,通过的就通知你二面,然后再等通知,然后通过再三面(这样的公司我一般不会等,太浪费时间)