1.长列表优化,一万条数据不用分页和懒加载,如何提升性能
👉👉 后端一次给你10万条数据,如何优雅展示,到底考察我什么?
1.requestAnimationFrame
使用requestAnimationFrame
代替setTimeout
,减少了重排
的次数,极大提高了性能,建议大家在渲染方面多使用requestAnimationFrame
2.使用懒加载
其实实现原理很简单,咱们通过一张图来展示,就是在列表尾部放一个空节点blank
,然后先渲染第1页数据,向上滚动,等到blank
出现在视图中,就说明到底了,这时候再加载第二页,往后以此类推。
至于怎么判断blank
出现在视图上,可以使用getBoundingClientRect
方法获取top
属性
2. 如何做权限认证
在路由上配合后端返回的token做验证
3 前端登录
开放题
Antd栅格布局的实现
-
gutter (栅格间距)。 gutter 的本质实际上是为 Col 提供一个 padding-left 和 padding-right,它们分别取值 gutter/2。
-
作为 Flex 的容器,实现 flex 布局,当 type = ‘flex’ 时
- justify 实际对应于 css 中的 justify-content
- align 实际对应于 css 中的 align-item
-
然后结合媒体查询做适配。
劫持所有的a标签,点击时不发生跳转,而是弹出提示框提示即将跳转到某个网址,点击确认则跳转,点击取消则无操作
类似于掘金中跳转到外链时。
- 就是阻止链接跳转(e.preventDefault())
- 然后通过
confirm
API判断用户的交互,会返回一个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>
复制代码
长列表的优化方案有哪些?如何设计一个虚拟列表
埋点是如何拦截和上报的
前端埋点数据收集及上报方案- SegmentFault 思否
如何实现一个无埋点数据上报
使用hash路由时,怎么能再刷新后自动滚动到页面上次的锚点位置?
这个我们想法是,当页面刷新的时刻,先把hash换一下,刷新完毕,然后再把hash换成原来的。
做过哪些性能优化方面的工作
实现一个多级菜单,菜单层级不定
看到这个,立马就想到是递归,但是递归又是很难理解的。
React 折腾记- (11) 结合Antd菜单控件(递归遍历组件)及常规优化
如何监控和排查内存泄漏问题
- 浏览器中进行打断点调试。
- memory查询内存快照。
模拟实现Java中的sleep函数
只是看起来像sleep而已,并不是真正的睡眠。
- for循环
- promise
- async await
最佳方案:利用Promise()结合setTimeout 实现sleep 然后在async await中使用
const log = console.log;
const sleep = (timeout) => {
return new Promise((resolve)=>{
setTimeout(()=>{
resolve();
}, timeout)
})
}
const main = async()=>{
await sleep(1000);
log(1);
await sleep(2000);
log(2);
await sleep(3000);
log(3);
}
实现一个数组的splice方法(说思路)
这个函数可以实现对数组的增删改。
返回值:由被删除的元素组成的一个数组。如果只删除了一个元素,则返回只包含一个元素的数组。如果没有删除元素,则返回空数组。
A页面跳转到B页面,在B页面做的操作传输给A页面的方法
Sentry是如何实现错误监控的
如何做技术选型?
编写一个函数,传入一个promise和数字n,n(s)内promise没有返回结果,直接reject
可参考手写超时时间部分,利用Promise.race() 和 setTimeOut
了解SSR吗
说一下深拷贝要注意的点
- 对象循环引用问题
- 特殊对象的拷贝
- 函数的拷贝
如何实现模块懒加载?import语法是如何做的
通过import()实现。 通过require()实现。
使用import对路由进行懒加载, 打包时会为每一个组件生成对应的js文件, 实现代码分割,首屏渲染时只会预加载文件, 只有在使用到该组件时才会加载对应的js文件内容, 减少首屏加载的压力。
如何设计一个单点登录方案?
SSO的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。
SSO 一般都需要一个独立的认证中心(passport),子系统的登录均得通过
passport
,子系统本身将不参与登录操作当一个系统成功登录以后,
passport
将会颁发一个令牌给各个子系统,子系统可以拿着令牌会获取各自的受保护资源,为了减少频繁认证,各个子系统在被passport
授权以后,会建立一个局部会话,在一定时间内可以无需再次向passport
发起认证
当在一个项目登录后,它将通过window.postMessage({token}, origin)发送token到其他项目中,实现token的跨端获取。然后其他项目后端接收到token后,将去登录的项目上验证token的有效性。
从A页面跳转到B页面,再返回A页面时,如何让A页面保持上一次的状态
- 如果在vue中,我们可以在组件外层包裹kepp-alive组件。
- 我们可以让其跳转到新的标签页,这样更符合用户的需求,我感觉。
- 或者将链接的位置存储到localStorage中。
Node中间件主要是解决什么问题
在NodeJS中,中间件主要是指封装http请求细节处理的方法。我们都知道在http请求中往往会涉及很多动作, 如下:
- IP筛选
- 查询字符串传递
- 请求体解析
- cookie信息处理
- 权限校验
- 日志记录
- 会话管理中间件(session)
- gzip压缩中间件(如compress)
- 错误处理