校招｜秋招前端面经汇总（远景、招银网络、阿里巴巴、有赞、B站、美团、苏宁）
2020-06-10 22:54:24
- 项目相关
项目角色
项目难点
- Vue相关
为什么选vue
vue和react区别：React采用虚拟DOM，通过JSX语法描述UI，数据驱动视图更新，单向数据流；Vue也使用虚拟DOM，模板语法更接近传统HTML，双向数据绑定更便捷，上手相对容易。
vue数据绑定原理：通过Object.defineProperty()（Vue2）或Proxy（Vue3）对数据进行劫持，当数据变化时通知视图更新。
vue在get和set里面做了什么：get收集依赖，set触发更新。
jquery和vue的差别：jQuery直接操作DOM，通过选择器查找元素进行操作；Vue数据驱动视图，开发者只需关注数据变化。
vue好在哪：简单易用，双向数据绑定方便，组件化开发提高代码复用性，生态丰富。
vue性能方面有什么提升：虚拟DOM减少直接操作DOM的开销，异步渲染优化性能。
vue的diff算法：通过同级比较、key值羡吵优化等方式，尽量复用DOM节点，减少不必要的更新。
vue对于数组的数据劫持：重写数组的变异方法，如push、pop等，在调用这些方法时触发更新。
vue给data添加新属性会发生什么，会发生相应改变吗：直接添加新属性不会触发视图更新，需使用Vue.set或this.$set方法。
- 其他
事件循环
settimeout实现setIntervel：通过递归调用setTimeout模拟setInterval，可避免setInterval可能出现的连续执行问题。
闭包
promise的了解，promise的then为什么在settimeout的then之前：Promise的then回调是微任务，setTimeout的回调是宏任务，微任务优先于宏任务执行。
跨域方式：包括代理、JSONP、CORS等。
代理怎么实现跨域的：通过在服务器端设置代理，将前端请求转发到目标服务器，避免浏览器同源策略限制。
css两列布局（左固定右自适应）：可使用浮动、flex布局、grid布局等方式实现。
css3新增选择器，选择最后一个节点，和奇节点：last-child选择最后一个节点，nth-child(odd)选择奇节点。
- 电面
vue双向绑定原理：同远景面试中vue数据绑定原理相关内容。
如何确保更新之后再操作DOM：使用Vue的nextTick方法，在下次DOM更新循环结束后执行回调。
虚拟DOM
原型链讲一下：每个对象都有原型对象，原型对象也有自己的原型，形成原型链，用于实现继承。
原型继承
new的过程：创建新对象，将新对象的原型指向构造函数原型，执行构造函数代码，返回新对象。
css盒模型，区别：包括标准盒模型和IE盒模型，标准盒模型宽度只包含content，IE盒模型宽度包含content、padding和border。
c3盒模型定义属性，默认值：box-sizing属性，默认值为content-box（标准盒模型），border-box为IE盒模型。
http方法，常见状态码
get和post区别：get用于获取数据，参数在URL中；post用于提交数据，参数在请求体中。
- 一面
数据库join，innerjoin区别：join包括内连接、外连接等，innerjoin即内连接，只返回匹配的行。
数据库脏读：一个事务读取了另一个未提交事务修改的数据。
纯前端吗，有意向后台吗
osi七层协议，http tcp分别哪层，应用层具体做什么：http在应用层，tcp在传输层；应用层负责处理饥旁特定的应用程序细节。
http2.0提升：多路复用、头部压缩兄肢侍、服务器推送等。
https实现过程：包括证书颁发、密钥交换、数据加密传输等步骤。
https请求过程中客户端和服务端约定对称加密方法是在哪一步：在SSL/TLS握手过程中。
手撕url参数按首字母排序，不可sort：可通过遍历参数对象，提取键并按首字母排序后重新拼接。
- 二面
问项目
css动画实现一个点加速中间再减速到右边运动曲线属性：可使用cubic-bezier函数定义运动曲线。
webpack打包流程：包括入口文件分析、依赖解析、模块编译、代码生成等步骤。
css最难点
项目中跨域
项目中最难点
组件传值，一层和多层：一层可通过props传值，多层可使用事件总线、Vuex等方式。
border属性定位
vue生命周期
- hr面
项目难点
- 简单介绍项目
- 前端方案如何敲定
- vue-router实现原理：基于hash或history模式，通过监听URL变化实现页面切换。
- vuex怎么实现组件数据一致：通过单一状态树、mutations、actions等机制实现数据管理和更新。
- 表单怎么提交给后台的，异步还是同步：通常使用异步提交，如axios发送POST请求。
- 文件怎么发，formData怎么实现：使用FormData对象封装文件数据，通过axios等发送请求。
- 图片怎么在线展示：可通过设置img标签的src属性为图片URL实现。
- h5新特性：包括语义化标签、本地存储、canvas等。
- webstorage类型，区别，大小限制：包括localStorage和sessionStorage，localStorage持久化存储，sessionStorage会话期间存储，大小限制一般为5MB。
- 登录功能，前端及服务端实现和处理方式：前端发送用户名密码，服务端验证并返回token，前端存储token用于后续请求认证。
- token服务端不记录，如何处理每次都要计算token的问题：可使用JWT等机制，服务端生成包含用户信息的token，前端存储，服务端验证token有效性。
- token被偷怎么办：可采用设置token有效期、使用HTTPS、限制token使用场景等方式提高安全性。
- nodejs如何实现一个服务端：使用http模块创建服务器，监听端口并处理请求。
- 用nodejs做过其他事情吗
- webpack怎么搭建
- 排序算法有哪些
- 堆排序原理：通过构建堆结构，不断取出堆顶元素并调整堆实现排序。
- java写过哪些东西
- 毕业设计涉及的算法以及内容
- 自我介绍
- 介绍项目
- mock理解，优劣：mock可模拟后端接口数据，方便前端开发测试；优点是减少对后端依赖，缺点是可能与实际接口数据不一致。
- 单页面应用和多页面应用的差别：单页面应用只有一个HTML页面，通过路由切换组件；多页面应用有多个HTML页面，通过链接跳转。
- css3哪些新特性：包括选择器、动画、过渡等。
- 选择器权重
- 写样式方法
- 小于n的素数：可通过遍历判断每个数是否为素数实现。
- http https加密
- 验证码作用：防止恶意注册、登录等。
- 哪些排序算法，复杂度比较低的有哪些，有没有o（n）：如冒泡排序、插入排序等复杂度较高，快速排序、归并排序等相对较低，没有严格意义上的o（n）排序算法。
- java和js差别
- 介绍项目，前端学习经历（学习有什么比较感兴趣的，对什么比较深入，举例子，研究生课程主要学习什么，主要攻什么方向（算法和前端都给offer选哪个），能实习多久）
- vue（vue cli）为何能帮助搭建项目，它本身用什么技术实现了什么：vue cli基于webpack等工具，提供项目模板、开发服务器等功能，方便快速搭建项目。
- 项目为什么用vue2.0
- vue router如何实现页面，模式hash：通过监听hash变化或history.pushState等方法实现页面切换。
- vue内置功能
- 父子组件传值，多层嵌套传值咋做：父子组件通过props传值，多层嵌套可使用事件总线、Vuex等方式。
- http在哪一层，跟底层那些协议相关，同层协议有哪些，http和https区别，http2.0提升：http在应用层，与tcp等协议相关；同层协议有ftp等；https在http基础上加密传输；http2.0提升包括多路复用等。
- tcp udp区别，udp适用场景：tcp可靠传输，udp不可靠但速度快；适用于视频直播等对实时性要求高、对数据准确性要求不高的场景。
- 跨域遇到什么问题，咋解决的：遇到浏览器同源策略限制，可通过代理、JSONP、CORS等方式解决。
- 前端发请求用的什么技术：如axios、fetch等。
- 跟后台怎么进行数据的交互（http？）：通常通过http协议进行数据交互。
- undefined在java中什么情况才会出现：java中基本类型有默认值，不会出现undefined，引用类型未初始化时为null。
- 对部门有啥了解
- axios如何发起请求，post请求数据如何发送：通过axios.get、axios.post等方法发起请求，post请求数据可在配置对象中设置data属性。
- vue-router如何获取path：可通过this.$route.path获取当前路由路径。
- vue-router钩子函数，导航守卫：包括全局守卫、路由独享守卫、组件内守卫等，用于在路由切换时进行拦截和处理。
- 手写mock生成随机数：可使用Math.random()方法生成随机数。
- mock如何截获请求：可通过拦截axios等请求库的请求，返回模拟数据。
- http-content里有啥：包括请求或响应的内容，如HTML、JSON等。
- http-method包含哪些：包括GET、POST、PUT、DELETE等。
- options什么时候会触发：在进行跨域请求时，浏览器会先发送OPTIONS请求进行预检。
- 文字和图片并排垂直居中：可使用flex布局或vertical-align属性实现。
- arr乱序：可通过遍历数组并随机交换元素位置实现。
- react（虽问题较少，但也是面试可能涉及内容）
- 单页面多页面的差别
- webpack怎么配置
- vue-cli webpack入口文件配置，webpack统一配置后台的ip
- 登录记住状态怎么做：可使用localStorage或cookie存储用户登录状态。
- 用户清除了localStorage怎么办：可引导用户重新登录或提供其他登录方式。
- 导航守卫
- ES6 const能修改value值吗：const声明的是常量，不能重新赋值，但对于对象等引用类型，可修改其属性值。
- 值传递和地址传递区别：值传递传递的是变量的值，地址传递传递的是变量的地址。
- 如何和后台联调：可通过模拟接口数据、使用代理等方式进行联调。
- 怎么学习vue：可通过官方文档、在线课程、实践项目等方式学习。
- 怎么查文档：可访问Vue官方文档、社区论坛等查找相关资料。
- 遇到不会的问题怎么办：可通过搜索引擎、社区论坛、请教他人等方式解决。
热门标签
