本人目前大三，4月末进行了人生第一场面试。不尽人意。总觉得自己什么都了解，但是又觉得什么都不会。前几天看见涡流老哥的面试文章总结。来进行一些总结吧。
涡流老哥原博文。前端两年经验，历时一个月的面经和总结
有些的不对的地方，请指正，一起总结。
Antd栅格布局的实现
- gutter (栅格间距)。 gutter 的本质实际上是为 Col 提供一个 padding-left 和 padding-right，它们分别取值 gutter/2。
- 作为 Flex 的容器，实现 flex 布局，当 type = ‘flex’ 时
- justify 实际对应于 css 中的 justify-content
- align 实际对应于 css 中的 align-item
- 然后结合媒体查询做适配。 antd栅格布局的实现
劫持所有的a标签，点击时不发生跳转，而是弹出提示框提示即将跳转到某个网址，点击确认则跳转，点击取消则无操作
类似于掘金中跳转到外链时。
- 就是阻止链接跳转（e.preventDefault()）
- 然后通过
confirmAPI判断用户的交互，会返回一个boolean。 - 最后判断，通过open来进行跳转。
<div id="content">
<a href="http://baidu.com">点击跳转1</a>
<a href="http://juejin.cn">点击跳转1</a>
<a href="http://124.223.183.225:3000/">点击跳转1</a>
</div>
<script>
const oAs=document.getElementById("content").getElementsByTagName("a");
for(let i in oAs) {
oAs[i].onclick=function(e) {
if(e&&e.preventDefault)
e.preventDefault();
else
window.event.returnValue=false;
const isFlag=window.confirm(`是否跳转到指定的页面: ${this.getAttribute("href")}`);
if(isFlag) {
window.open(this.getAttribute("href"));
} else {
return;
}
}
}
</script>
两个promise，分别实现串行和并行形式，只有两个promise都返回结果时打印success，否则打印fail
首先看一下并行和串行的概念吧。
- Promise串行 是指每一个由promise封装的任务都顺序执行，即上一个执行完成后再执行下一个。
- Promise并行 是指多个promise一起执行。也就是利用
Promise.all()。 promise串行讲解。、 promise串行，其实使用async await是非常容易实现的，因为上一个await为执行完毕，是不会执行下面的代码的，所以就实现了promise的串行执行。
const execute = async (tasks = []) => {
const resultList = [];
for (task of tasks) {
try {
resultList.push(await task());
} catch (e) {
resultList.push(null);
console.log(e);
}
}
if (tasks.length === resultList.length)
return "success"
else
return "fail"
}
长列表的优化方案有哪些？如何设计一个虚拟列表
埋点是如何拦截和上报的
前端埋点数据收集及上报方案- SegmentFault 思否
如何实现一个无埋点数据上报
使用hash路由时，怎么能再刷新后自动滚动到页面上次的锚点位置？
这个我们想法是，当页面刷新的时刻，先把hash换一下，刷新完毕，然后再把hash换成原来的。
做过哪些性能优化方面的工作
实现一个多级菜单，菜单层级不定
看到这个，立马就想到是递归，但是递归又是很难理解的。
React 折腾记- (11) 结合Antd菜单控件(递归遍历组件)及常规优化
如何监控和排查内存泄漏问题
- 浏览器中进行打断点调试。
- memory查询内存快照。 记录一次前端内存泄漏排查经历 - 掘金
模拟实现Java中的sleep函数
只是看起来像sleep而已，并不是真正的睡眠。
- for循环
- promise
- async await 简短优雅地利用js实现 sleep 函数
实现一个数组的splice方法（说思路）
这个函数可以实现对数组的增删改。
返回值：由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。
A页面跳转到B页面，在B页面做的操作传输给A页面的方法
Sentry是如何实现错误监控的
如何做技术选型？
手写实现一个图片懒加载
1、到指定高度加载图片
2、考虑重排和重绘
3、考虑性能
4、先加载缩略图，再加载完整的图
5、注意图片加载容错情况
编写一个函数，传入一个promise和数字n，n(s)内promise没有返回结果，直接reject
了解SSR吗
说一下深拷贝要注意的点
- 对象循环引用问题
- 特殊对象的拷贝
- 函数的拷贝 JavaScript深拷贝的注意事项
如何实现模块懒加载？import语法是如何做的
通过import()实现。 通过require()实现。
使用import对路由进行懒加载, 打包时会为每一个组件生成对应的js文件, 实现代码分割,首屏渲染时只会预加载文件, 只有在使用到该组件时才会加载对应的js文件内容, 减少首屏加载的压力。
如何设计一个单点登录方案？
SSO的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。
SSO 一般都需要一个独立的认证中心（passport），子系统的登录均得通过
passport，子系统本身将不参与登录操作当一个系统成功登录以后，
passport将会颁发一个令牌给各个子系统，子系统可以拿着令牌会获取各自的受保护资源，为了减少频繁认证，各个子系统在被passport授权以后，会建立一个局部会话，在一定时间内可以无需再次向passport发起认证
当在一个项目登录后，它将通过window.postMessage({token}, origin)发送token到其他项目中，实现token的跨端获取。然后其他项目后端接收到token后，将去登录的项目上验证token的有效性。
用过哪些设计模式？分别说说它们的使用场景和应用案例？你觉得使用设计模式给你带来了什么好处？
- 单例模式。让一个类只能实例化一次。我个人感觉这个可以把属性和方法设置成静态的。
- 观察者模式。
- 发布订阅者模式 观察者和被观察者之间有联系，但是发布订阅者，发布者(emit)和订阅者(on)之间没有关系。
从A页面跳转到B页面，再返回A页面时，如何让A页面保持上一次的状态
- 如果在vue中，我们可以在组件外层包裹kepp-alive组件。
- 我们可以让其跳转到新的标签页，这样更符合用户的需求，我感觉。
- 或者将链接的位置存储到localStorage中。
了解Vue3和React18吗
Nginx和node中间件代理的区别
共同点： 异步、非阻塞I/O； 事件驱动
区别
-
Nginx使用的C语言，Node.js使用的JavaScript，这是一种解释型语言，这代表着Node.js在执行程序的过程中还有额外的工作负担。
-
Nginx的特点是：占用内存少，并发能力强，相比较而言是在最短的时间内完成最多的请求 Nginx考量的是面向客户端， 后端业务方面依然是受具体业务影响。而Node.js则可以利用异步I/O来实现业务并行，以提升效率。从这点看，Nginx没有Node.js灵活。
-
此外，Node.js后来的发展方向不再单独是一个Web服务器，而是一个面向网络的平台，它甚至可以是TCP服务器，或者变身为远端服务器的客户端。 原文链接：
Node中间件主要是解决什么问题
在NodeJS中，中间件主要是指封装http请求细节处理的方法。我们都知道在http请求中往往会涉及很多动作, 如下:
- IP筛选
- 查询字符串传递
- 请求体解析
- cookie信息处理
- 权限校验
- 日志记录
- 会话管理中间件(session)
- gzip压缩中间件(如compress)
- 错误处理 深入浅出node中间件原理
