之之的前端面经整理

最新推荐文章于 2024-08-09 11:30:01 发布

z_zhiya

最新推荐文章于 2024-08-09 11:30:01 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/z_zhiya/article/details/115732231

版权

前端面试记录

前言

前言

查缺补漏查缺补漏查缺补漏

联通（2021-04-15）

技术面照着简历问，问得浅没太深挖，不会的就答不会也没有压力面，然后紧跟hr面，一共18min左右。1v3。

求职意向是前端，本科学过什么相关课程或自行了解过什么?

本科学过web技术及应用，计算机网络；项目实践时自学微信小程序开发和React；

常用设计模式有哪些？

软件设计模式分类：
①创建型：创建对象时，不再由我们直接实例化对象；而是根据特定场景，由程序来确定创建对象的方式，从而保证更大的性能、更好的架构优势。（简单工厂模式、工厂方法、抽象工厂模式、单例模式、生成器模式和原型模式）
②结构型：用于帮助将多个对象组织成更大的结构。（适配器模式adapter、桥接模式bridge、组合器模式component、装饰器模式decorator、门面模式、亨元模式flyweight和代理模式proxy）
③行为型：用于帮助系统间各对象的通信，以及如何控制复杂系统中流程。（命令模式command、解释器模式、迭代器模式、中介者模式、备忘录模式、观察者模式、状态模式state、策略模式、模板模式和访问者模式）

观察者模式和广播模式的区别是什么？

①从表面上看：
观察者模式里，只有两个角色 —— 观察者 + 被观察者。
发布订阅模式里，却不仅仅只有发布者和订阅者两个角色，还有一个经常被我们忽略的 —— 经纪人Broker。
②往深层次讲：
观察者和被观察者，是松耦合的关系。
发布者和订阅者，则完全不存在耦合。
③从使用层面上说：
观察者模式，多用于单个应用内部。
发布订阅模式，则更多的是一种跨应用的模式(cross-application pattern)，比如我们常用的消息中间件。

数据结构及算法，展开说说

数据结构逻辑层次如下图

问算法可以把排序算法展开说

小程序页面生命周期及怎样运行（补充为小程序的生命周期）

小程序的生命周期分为：

（1）应用生命周期
（2）页面生命周期
（3）应用生命周期影响页面生命周期

（1）小程序通过App()来注册一个小程序，App() 必须在 app.js 中调用，必须调用且只能调用一次，app.js中定义了一些应用的生命周期函数：

（1）onLaunch: 初始化小程序时触发，全局只触发一次。
（2）onShow: 小程序初始化完成或用户从后台切换到前台显示时触发。
（3）onHide: 用户从前台切换到后台隐藏时触发。
（4）onError: 小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息。

①用户首次打开小程序，会触发onLauch(全局只触发一次);
②小程序初始化完成后，触发onShow方法，监听小程序显示；
③小程序从前台进入后台（点击左上角关闭，或者按了设备 Home 键，并没有直接销毁），触发onHide方法；
④小程序从后台进入前台显示，触发onShow方法；
⑤小程序后台运行一定时间，或系统资源占用过高，会被销毁；

（2）小程序通过Page()来注册一个页面，js文件中定义了一些页面生命周期函数：

（1）onLoad：首次进入页面加载时触发，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
（2）onShow：加载完成后、后台切到前台或重新进入页面时触发
（3）onReady：页面首次渲染完成时触发（页面已准备妥当，可以进行视图层交互）
（4）onHide：从前台切到后台或进入其他页面触发
（5）onUnload：页面卸载时触发
（6）onPullDownRefresh：监听用户下拉动作
（7）onReachBottom：页面上拉触底事件的处理函数

①小程序注册完成后，加载页面，触发onLoad方法，一个页面只会调用一次；
②页面载入后触发onShow方法，显示页面，每次打开页面都会调用一次；
③首次显示页面，会触发onReady方法，渲染页面和样式，一个页面只会调用一次；
④当小程序后台运行或跳转到其他页面时，触发onHide方法；
⑤当小程序从后台进入前台运行或重新载入页面时，触发onShow方法；
⑥当使用wx.readirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack(),触发onUnload

【补充】

wx.navigateTo跳转，页面的生命周期变化（wx.navigateTo()是隐藏当前页面，跳转到某个页面，跳转后可以通过wx.navigateBack()返回上一页，但wx.navigateBack()会关闭当前页）
①进入A页面：A执行onLoad()–> onShow()–> onReady();
②A页面wx.navigateTo(B页面)：A执行onHide(),B执行onLoad()–> onShow()–> onReady();
③B页面wx.navigateBack(A页面)：B执行onUnload(),A执行onShow();
④退出A页面：A执行onUnload()
wx.redirectTo跳转，页面的生命周期变化（wx.redirectTo()是关闭当前页面，跳转到某个页面，跳转页面后不能返回上一页）
①进入A页面：A执行onLoad()–> onShow()–> onReady();
②A页面wx.redirectTo(B页面)：A执行onUnload(),B执行onLoad()–> onShow()–> onReady();

（3）应用生命周期影响页面生命周期
在这里插入图片描述

①小程序初始化完成后，页面首次加载触发onLoad，只会触发一次；
②小程序进入后台，先执行页面的onHide方法然后执行应用的onHide方法；
③当小程序从后台进入到前台，先执行应用的onShow方法然后执行页面的onShow方法；
生命周期总结
进入小程序时：
首先执行应用生命周期函数，再次执行页面生命周期函数
离开小程序时：
首先执行页面生命周期函数，再次执行应用生命周期函数

CDN加快响应速度是怎样的原理

一文看懂CDN加速原理
CDN网络是在用户和服务器之间增加Cache层，主要是通过接管DNS实现，将用户的请求引导到Cache上获得源服务器的数据，从而降低网络的访问时间。

传统的未加缓存服务的访问过程：
在这里插入图片描述

①用户输入访问的域名,操作系统向 LocalDns 查询域名的ip地址；
②LocalDns向 ROOT DNS 查询域名的授权服务器(这里假设LocalDns缓存过期)；
③ROOT DNS将域名授权dns记录回应给 LocalDns；
④LocalDns得到域名的授权dns记录后，继续向域名授权dns查询域名的ip地址；
⑤域名授权dns 查询域名记录后，回应给 LocalDns；
⑥LocalDns 将得到的域名ip地址，回应给用户端；
⑦用户得到域名ip地址后，访问站点服务器；
⑧站点服务器应答请求，将内容返回给客户端.

使用CDN缓存后的网站的访问过程：
在这里插入图片描述

①用户输入访问的域名,操作系统向 LocalDns 查询域名的ip地址；
②LocalDns向 ROOT DNS 查询域名的授权服务器(这里假设LocalDns缓存过期)；
③ROOT DNS将域名授权dns记录回应给 LocalDns；
④LocalDns得到域名的授权dns记录后,继续向域名授权dns查询域名的ip地址；
⑤域名授权dns 查询域名记录后(一般是CNAME)，回应给 LocalDns；
⑥LocalDns 得到域名记录后,向智能调度DNS查询域名的ip地址；
⑦智能调度DNS 根据一定的算法和策略(比如静态拓扑，容量等),将最适合的CDN节点ip地址回应给 LocalDns；
⑧LocalDns 将得到的域名ip地址，回应给用户端；
⑨用户得到域名ip地址后，访问站点服务器。

CDN节点部署在哪里

跨域系统使用，属于后端部署范围。

健身房系统用的哪一版React

16.12.0

react、react-dom、react-native三者定义关系搞清楚

是否了解ES6更新了那些内容

①let、const：规范变量作用域提高程序运行安全性
②箭头函数：操作符=>简化了函数的书写
③字符串模版：允许使用反引号 ` 来创建字符串，此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}
④Proxyy：可以监听对象身上发生了什么事情，并在这些事情发生后执行一些相应的操作，一个对象有了很强的追踪能力，同时在数据绑定方面也很有用处。个人理解类似于触发器。

是否了解React更新后有何不同

react与VUE一大差别就在于优化，vue打包完整使用方便，而react更接近js，优点是很灵活，但运行时优化是一大问题。
React16的expirationTimes模型只能区分是否>=expirationTimes决定节点是否更新。React17的lanes模型可以选定一个更新区间，并且动态的向区间中增减优先级，可以处理更细粒度的更新。

是否了解HTML5与更新前有何不同

①新增用于绘画的canvas元素
②新增表单属性
required 属性：是一个 boolean 属性。要求填写的输入域不能为空
pattern 属性：描述了一个正则表达式用于验证元素的值。
min 和 max 属性：设置元素最小值与最大值。
step 属性：为输入域规定合法的数字间隔。
height 和 width 属性：用于 image 类型的标签的图像高度和宽度。
autofocus 属性：是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。
multiple 属性：是一个 boolean 属性。规定元素中可选择多个值。
③新增video和audio元素
video标签如何控制播放，放标签，autoplay/autobuffer/muted/loop controls或自己加入组件绑定动作实现。
④地理位置
⑤拖放功能
⑥…

人寿（2021-04-20）

急速8min，自我介绍（2min），然后挑一个最近的项目（基于微信小程序的健身动作只能识别与纠正），主要问实现细节，如何解决问题。1v3。

前端主要用了哪些接口实现了什么东西

除了最基础的页面布局和响应跳转之外
主要用了TensorFlow.js接口实现视觉模型加载
结合camera接口获取用户动作，canvas接口将识别的肢体骨架重绘在屏幕上实时反馈给用户，完成前端数据获取和视觉反馈的功能
为了达到更好的用户体验有实现一些数据预拉取和缓存策略
在节约内存方面，使用了tf.tidy丢掉中间变量，以及tf.dispose丢掉用过的tensor向量。

怎样实现不同机型的适配，为什么没用盒式模型

考虑到小程序可以被任何机型的手机使用，有考虑过适配的问题
①对于普通组件适配用的是盒式模型，尽量采用百分制描述组件属性而不是写死坐标，布局等也尽量使用居中使不同机型都有相似观感。
②但对于最核心最影响观感的canvas重绘部分没有办法做到不同机型适配
原因在于tf传的数据是实际camera坐标，照理说直接拿这个坐标写会canvas就可以，但实操并不如此，发现骨架点会有漂移
查阅小程序开发文档发现，微信会在后台按一套不可知的方法将展示出来的camera做裁剪，导致坐标数据失效，并且没有提供可以拿到camera实际大小的方法或说明后台的裁剪规则
所以只能通过将坐标比例写死来适配某一特定手机来解决骨架点漂移的问题

优化细节：缓存、数据预拉取都是怎么实现的

缓存：
posenet.load支持网络加载和localStorage两种方式。
一开始我们是通过google在国内的镜像加载模型的
但是每次加载都需要时间，于是我们直接把模型的json文件放到本地localStorage里面，然后每次都从本地加载，这样就加快了模型加载速度
但是缺点就是不能灵活的更换不同backend的模型
这是从用户体验和实际编码两个方面做出的妥协，我们认为作为一个练习性的项目，首先是要保证功能的稳定性和可用性，再去考虑功能的多样性，这就是我们解决这个问题的全过程
后面如果可以的话，我们认为可以使用相关云服务商提供的OSS（对象存储服务）对模型文件做加速，以进一步提高功能的多样性
数据预拉取：
为使小程序的使用更符合一般使用习惯以及后续还要加上后端进行动作纠正的部分，不会一开始就把获取camera和重绘的界面显示出来，而是通过层层点击跳转，依次选定运动的大类和小类，到达某一特定运动介绍页点击开始训练，才会跳转到识别的功能页。
如果每次都打开camera了才开始加载模型，会让拉长空等时间影响用户体验。
因此考虑运利用前面页面跳转的时间，在进入运动介绍页时就开始加载动作模型，可以减少等待时间，如果用户因阅读介绍页花费较长时间，更可不必等待模型加载，达到打开即用的效果。

美团（2021-04-20）

1h12min，面试官人很温柔。从自我介绍挖项目，从项目挖基础知识，计网osds都有涉及。手撕代码太拉环节是我自己拉跨，总体体验不错。1v1。

http报头内容

http报头让客户端和服务器之间传递了更多的信息
服务器能够从发送过来的报头了解到用户的一些必要信息
服务器传回的报头让客户端更好的理解和解析
分为公共头部、请求头request和返回头response

公共头部：

字段	说明
Remote Address	请求的远程地址
Request URL	请求的域名
Request Method	页面请求的方式：Post/Get
Status Code	请求的返回状态

【补充】

Get和Post的区别（浏览器什么情况下发get，什么情况下发post）
1）post更安全（不会作为url的一部分，不会被缓存、保存在服务器日志、以及浏览器浏览记录中）
2）post发送的数据更大（get有url长度限制）
3）post能发送更多的数据类型（get只能发送ASCII字符）
4）post比get慢
5）post用于修改和写入数据，get一般用于搜索排序和筛选之类的操作（淘宝，支付宝的搜索查询都是get提交），目的是资源的获取，读取数据。

请求头request：

字段	说明
Accept	浏览器支持的MIME类型（MIME的英文全称是 Multipurpose Internet Mail Extensions（多功能 Internet 邮件扩充服务），它是一种多用途网际邮件扩充协议，在1992年最早应用于电子邮件系统，但后来也应用到浏览器。）
Accept-Encoding	浏览器支持的压缩类型
Accept-Language	浏览器支持的语言类型，并且优先支持靠前的语言类型t
Cache-Control	指定请求和响应遵循的缓存机制
Connection	当浏览器与服务器通行时对于长连接如何进行处理：close/keep-alive
Cookie	向服务器返回cookie，这些cookie是之前服务器发给浏览器的
Host	请求的服务器URL
Referer	该页面的来源URL
User-Agent	用户客户端的一些必要信息（如os、浏览器及版本、浏览器渲染引擎等）

返回头response：

字段	说明
Cache-Control	高速浏览器或者其他客户什么环境可以安全地缓存文档
Connection	当client和server通行时对于长连接如何进行处理
Content-Encoding	数据在传输过程中所使用的压缩编码方式
Content-Type	数据的类型
Date	数据从服务器发送的时间
Expires	认为文档已经过期从而不再缓存的时间期限
Server	服务器名字。Servlet一般不设置这个值，而是由Web服务器自己设置
Set-Cookie	设置和页面关联的cookie
Transfer-Encoding	数据传输的方式

前后端交互信息格式（RESTful）

在REST架构风格中，数据和功能被视为资源，并使用统一资源标识符（URI）进行访问。通过使用一组简单，定义明确的操作来执行资源。客户端和服务器通过使用标准化接口和协议（通常是HTTP）来交换资源的表示。
REST的指导原则包括以下六项
客户端-服务器 ：将用户接口问题与数据存储问题分开，通过简化服务器组件来提高跨多个平台的用户接口的可移植性并提高可伸缩性。
无状态 ：从客户端到服务器的每个请求都必须包含理解请求所需的所有信息，并且不能利用服务器上任何存储的上下文。因此，会话状态完全保留在客户端上。
可缓存 ：缓存约束要求将对请求的响应中的数据隐式或显式标记为可缓存或不可缓存。如果响应是可缓存的，则客户端缓存有权重用该响应数据以用于以后的等效请求。
统一接口 ：通过将通用性的软件工程原理应用于组件接口，简化了整个系统架构，提高了交互的可见性。为了获得统一的接口，需要多个架构约束来指导组件的行为。REST由四个接口约束定义：资源识别; 通过陈述来处理资源; 自我描述性的信息; 超媒体作为应用程序状态的引擎。
分层系统 ：分层系统风格允许通过约束组件行为来使体系结构由分层组成，这样每个组件都不能“看到”超出与它们交互的直接层。
按需编码（可选） ：REST允许通过以小程序或脚本的形式下载和执行代码来扩展客户端功能，因减少预先实现所需的功能数量来简化客户端。

Http状态码

1**：信息，服务器收到请求，需要请求者继续执行操作
2**：成功，操作被成功接收并处理
3**：重定向，需要进一步的操作以完成请求
4**：客户端错误，请求包含语法错误或无法完成请求
5**：服务器错误，服务器在处理请求的过程中发生了错误
404 (“Not Found”)
410(“gone”)当客户端请求的URI不对应任何应用资源时

小程序缓存用的是什么api

ps：微信小程序本地缓存最大为10M
缓存数据到本地：缓存值可以为一个字符串，也可以为一个对象，当第一个参数值key相同的时候，后面的会覆盖前面的。异步也一样。
wx.setStorageSync(‘key’,‘value’)同步
wx.setStorage({ key:“key”, data:“value”})异步
获取本地缓存数据：同步和异步两种方法中的key是必须要传入的，否者不知道获取的具体缓存值。
wx.getStorageInfoSync(string key) 同步方式从本地缓存同步获取指定key wx.getStorageInfo(Object object) 异步方式从本地缓存同步获取指定key
wx.getStorageSync(string key)同步方法获取当前storage相关信息 wx.getStorage(Object object) 异步方式获取当前storage相关信息
移除和清理本地缓存数据
wx.removeStorageSync() 同步移除指定key
wx.removeStorage() 异步移除指定key
wx.clearStorageSync() 同步清理本地缓存
wx.clearStorage() 清理本地数据缓存

图片缓存在本地用什么格式

格式原本格式，不会变换成二进制流或者其他类型。
①首次加载图片一定是从网络下载：wx.downloadFile 必填参数url: 图片的地址。
②当图片下载成功以后，会返回给我们一个tempFilePath，是临时的文件路径。本地临时文件只能通过调用特定接口产生，不能直接写入内容。本地临时文件产生后，仅在当前生命周期内有效，重启之后即不可用。因此，不可把本地临时文件路径存储起来下次使用。
③但小程序的api可以获取到全局唯一的文件管理器，其作用之一就是可以根据临时文件路径，通过saveFile把文件保存到本地缓存，返回值为本地存储路径savedFilePath。
④下次打开小程序首先去缓存中检查是否存在本地文件的缓存路径，如果有，直接image src赋值本地缓存路径；如果没有，则是第一次下载图片，或者用户手动清理缓存造成的。