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

666

1.长列表优化,一万条数据不用分页和懒加载,如何提升性能

👉👉 后端一次给你10万条数据,如何优雅展示,到底考察我什么?

1.requestAnimationFrame

使用requestAnimationFrame代替setTimeout,减少了重排的次数,极大提高了性能,建议大家在渲染方面多使用requestAnimationFrame

2.使用懒加载 其实实现原理很简单,咱们通过一张图来展示,就是在列表尾部放一个空节点blank,然后先渲染第1页数据,向上滚动,等到blank出现在视图中,就说明到底了,这时候再加载第二页,往后以此类推。

至于怎么判断blank出现在视图上,可以使用getBoundingClientRect方法获取top属性

image.png

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标签,点击时不发生跳转,而是弹出提示框提示即将跳转到某个网址,点击确认则跳转,点击取消则无操作

类似于掘金中跳转到外链时。 image.png

  • 就是阻止链接跳转(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页面的方法

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中间件原理

你怎么看待Typescript中大量存在any的现象?面对这样的场景你将有什么样的想法和行动?