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
然后结合媒体查询做适配。

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>
复制代码

三种弹窗的介绍

长列表的优化方案有哪些？如何设计一个虚拟列表

应用性能前端监控，字节跳动这些年经验都在这了

埋点是如何拦截和上报的

前端埋点数据收集及上报方案- SegmentFault 思否

如何实现一个无埋点数据上报

使用hash路由时，怎么能再刷新后自动滚动到页面上次的锚点位置？

这个我们想法是，当页面刷新的时刻，先把hash换一下，刷新完毕，然后再把hash换成原来的。

做过哪些性能优化方面的工作

前端性能优化24条建议（2020）

实现一个多级菜单，菜单层级不定

看到这个，立马就想到是递归，但是递归又是很难理解的。

React 折腾记- (11) 结合Antd菜单控件(递归遍历组件)及常规优化

js递归遍历讲解

如何监控和排查内存泄漏问题

浏览器中进行打断点调试。
memory查询内存快照。

记录一次前端内存泄漏排查经历 - 掘金

模拟实现Java中的sleep函数

只是看起来像sleep而已，并不是真正的睡眠。

for循环
promise
async await

简短优雅地利用js实现 sleep 函数

最佳方案：利用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方法（说思路）

这个函数可以实现对数组的增删改。

返回值：由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。

如何手动实现数组的splice方法 ? (V8源码级别)

A页面跳转到B页面，在B页面做的操作传输给A页面的方法

postMessage。请看mdn
可以通过localStorage在同源页面下传递数据。监听storage事件。以前写过一篇文章

Sentry是如何实现错误监控的

解析Sentry源码(二)｜ Sentry如何处理错误数据

一篇讲透自研的前端错误监控

如何做技术选型？

精读《12 个评估 JS 库你需要关心的事》

编写一个函数，传入一个promise和数字n，n(s)内promise没有返回结果，直接reject

可参考手写超时时间部分，利用Promise.race() 和 setTimeOut

了解SSR吗

谈谈我对服务端渲染(SSR)的理解

说一下深拷贝要注意的点

对象循环引用问题
特殊对象的拷贝
函数的拷贝

如何实现模块懒加载？import语法是如何做的

通过import()实现。通过require()实现。

使用import对路由进行懒加载, 打包时会为每一个组件生成对应的js文件, 实现代码分割,首屏渲染时只会预加载文件, 只有在使用到该组件时才会加载对应的js文件内容, 减少首屏加载的压力。

import 和 require 实现路由懒加载的区别

如何设计一个单点登录方案？

SSO的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。

SSO 一般都需要一个独立的认证中心（passport），子系统的登录均得通过passport，子系统本身将不参与登录操作

当一个系统成功登录以后，passport将会颁发一个令牌给各个子系统，子系统可以拿着令牌会获取各自的受保护资源，为了减少频繁认证，各个子系统在被passport授权以后，会建立一个局部会话，在一定时间内可以无需再次向passport发起认证

当在一个项目登录后，它将通过window.postMessage({token}, origin)发送token到其他项目中，实现token的跨端获取。然后其他项目后端接收到token后，将去登录的项目上验证token的有效性。

依旧是使用postMessage来完成

从A页面跳转到B页面，再返回A页面时，如何让A页面保持上一次的状态

如果在vue中，我们可以在组件外层包裹kepp-alive组件。
我们可以让其跳转到新的标签页，这样更符合用户的需求，我感觉。
或者将链接的位置存储到localStorage中。

Node中间件主要是解决什么问题

在NodeJS中，中间件主要是指封装http请求细节处理的方法。我们都知道在http请求中往往会涉及很多动作, 如下:

IP筛选
查询字符串传递
请求体解析
cookie信息处理
权限校验
日志记录
会话管理中间件(session)
gzip压缩中间件(如compress)
错误处理

深入浅出node中间件原理

offer收割之项目场景以及开放题