9月面试 -- 记录

这样_我有一个朋友
129 阅读7分钟

9月以来面试了大概有20家公司的前端开发岗位，先做个记录(大纲)后面再慢慢整理

  • JS相关
  1. 值类型和引用类型？  引用类型是先指向内存地址(栈)，内存地址在指向具体存储位置(堆)，引出来栈和堆的区别？值类型是存在栈还是堆的？为什么？
    • 值类型： string/number/boolean/null/undefined/bigInt/symbol
    • 引用类型： array/object/function/reg

      • 值类型的存储是直接存在内存里面(栈，因为值类型占用空间小、大小固定，通过按值来访问，属于被频繁使用的数据，用栈更快

      • 引用类型是先指向内存地址(栈，然后内存地址指向具体的位置(堆里面。引用数据类型存储在堆内存中，因为引用数据类型占据空间大、大小不固定。 如果存储在栈中，将会影响程序运行的性能； 引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。

      • 参考 juejin.cn/post/684490…

      • bigInt的延伸： 64 bit 双精度浮点数进行存储，JS 中的Number类型只能安全地表示-9007199254740991 (-(2^53-1)) 和9007199254740991(2^53-1)之间的整数，任何超出此范围的整数值都可能失去精度.

      • 精度丢失问题怎么解决？ Math juejin.cn/post/684490… 或者转成string解决，具体就是根据小数点.截断成两截然后利用大数相加的原理进行处理

      • 大数相加 转数组进行处理

      • typeof? instanceof? 注意 typeof null = 'object' / typeof array = 'object' / array instanceof Array //true

  2. 显示类型转换和隐式类型转换？ .toString() 和 .parseInt() 显示转换

  3. ES6新特性，类，参数默认值，模板字符串，解构赋值，promise(有哪些状态，箭头函数(讲讲使用场景)，set, map使用场景，那么map和对象的区别是什么？
    • 箭头函数： 箭头函数与包围它的代码共享同一个this,能帮你很好的解决this的指向问题
    • map和对象的区别： Map的键可以是任意类型数据，就连函数都可以。Object的键只能是String或Symbol，map和对象是不是有序的？Chrome 的 JS 引擎遍历对象属性时会遵循一个规律：它们会先提取所有 key 的 parseFloat 值为非负整数的属性，然后根据数字顺序对属性排序首先遍历出来，然后按照对象定义的顺序遍历余下的所有属性。
  • 数字：当属性的类型时数字类型时，会按照数字的从大到小的顺序进行排序；
  • 字符串：当属性的类型是字符串时，会按照时间的先后顺序进行排序；
  • Symbol：当属性的类型是Symbol时，会按照时间的先后顺序进行排序。
  1. xss攻击和CSRF攻击
    • XSS攻击是防止用户脚本注入，一般有xss三方包进行检验，主要是对<和>做字符转换
    • CSRF跨站脚本攻击，一般偷偷获取用户cookie，用header里面的refer check，添加token验证，指纹识别和验证码识别。
  2. 变量提升？var let const哪个可以重复声明，为什么？
    • var可以重复声明，在同一个**「函数作用域」或「块作用域」**中重复声明同一个变量会引起SyntaxError(语法错误) (let const
  3. 常用API, pop() push() shift() unshift() forEach/some/every/reduce(改变原数组  concat/map/filter/splice(不改变原数组

  4. 一级缓存、二级缓存、三级缓存

  5. new对象时候做了什么？可以new箭头函数吗？ 箭头函数的原型是什么？
    • 不可以，箭头函数this为null，原型为null
  6. 响应式布局，flex，rem，vm，viewpoint，media

  7. 闭包 柯里化的实现

    function curry(fn, args) {
    var length = fn.length;
    args = args || [];
    return function() {
        var _args = [...args, arguments];
        if(length > _args) {
            return curry.call(this, fn, _args);
        } else {
            return fn.apply(this, _args);
        }
    }
}
let add = curry(function(a, b, c) {
    return a + b +c;
});
add(1)(2)(3);
add(1, 2)(3);
  • http相关
  1. websocket用过吗？ 两个window怎么进行通信？
    • 实现服务端向客户端进行消息推送。
    • 不同window之间的通信 WebSocket/postMessage/SharedWorker/localStorage
  2. 强制缓存和协商缓存？ cache-control？ max-age  modify-since  Etag

  3. head/options请求？复杂请求和简单请求
    • head请求 请求资源的头部信息 场景：在下载一个大文件前先获取大小再决定是否要下载
    • options请求 获取目的资源所支持的通信选项 跨域的时候先发个请求
  4. https为什么安全？对称加密和非对称加密？
    • http + tsl/ssl 安全套接层
  5. http2怎么实现多路复用的？
    • 增加requestid 根据id匹配
  6. 浏览器是怎么知道一个请求是http1.1还是http2的？

  7. 什么情况下https的小锁会被划掉？ 证书过期，没有证书，服务器和浏览器的证书时间对不上

  8. timeout的默认时间是多久？

  1. loader和plugin的区别
    • loader是对语言编译器，对JSX/SASS这种进行转换的
    • plugin是一种扩展性功能，比如热加载，happyPack这种一类的
  2. 有没有自己实现过一个plugin？原理？

  3. 热加载的原理了解过吗？

  4. 怎么抽离公共代码？

  5. tree shaking了解过吗？ 如果是你，你怎么去设计呢？

  6. 怎么去异步加载一个组件呢？(比较大的组件需要异步加载
    • import函数 动态引入 () => import('../../component.js');
    • 按需加载，用的时候再加载大组件 React里面的用法：
    • React.lazy: const ContextDemo = React.lazy(() => import('../..'));
    • React.suspend: <React.Suspense fallback=""></React.Suspense>
  • login相关
  1. 单点登录 sso

  2. 怎么保证用户在线状态下，缓存过期不让用户重新登录呢？
  • react相关
  1. react和vue的区别

  2. ref和forwardRef

  3. context和redux的区别

  4. 受控组件和非受控组件

  5. react-router的原理，路由守卫? 动态路由参数怎么获取？
    • this.props.match
      • patch:自己定义的路由规则，可以清楚的看到是可以id参数的
      • url: 真实的访问路径，这上面可以清楚的看到传递过来的参数是什么
      • params：传递过来的参数，key和value值
  6. setState为什么是异步的？

  7. redux的实现原理？ redux里面处理数据的优化 - selector (reselect

  8. useMemo/useCall的区别

  9. useRef的骚操作

  10. react hooks的实现原理？

  11. hooks的好处有哪些？

  12. react的性能优化？

  13. Fragment
  • 性能优化
  1. 加载十张图片怎么实现优化？ 只有当图片进入可视区域的时候才赋值src，怎么知道图片进入了可视区 ( https://juejin.cn/post/6844903688390049800
    • 只有当图片进入可视区域的时候才去加载，具体做法是不在可视区域范围不对src进行赋值
    • imgPosition = imageElement.getBoundingClientRect()
    • imgPosition.top < document.documentElement.clientHeight
  2. 时间分片加载长列表的时候，如果在一帧的时间里，塞入的数据太多导致时间到了，会出现什么情况？
    • 通过时间分片的方式来同时加载大量简单DOM
  3. 虚拟列表？怎么实现的？ 怎么保证当用户拉到后面的时候，重新加载之后定位到之前的位置？ (https://juejin.cn/post/6844903982742110216
    • 在首屏加载的时候，只加载可视区域内需要的列表项，当滚动发生时，动态通过计算获得可视区域内的列表项，并将非可视区域内存在的列表项删除
    • 偏移量startOffset = scrollTop - (scrollTop % itemSize)
    • 使页面平滑滚动，我们还需要在可见区域的上方和下方渲染额外的项目，在滚动时给予一些缓冲
    • 使用IntersectionObserver替换监听scroll事件，IntersectionObserver可以监听目标元素是否出现在可视区域内，在监听的回调事件中执行可视区域数据的更新，并且IntersectionObserver的监听回调是异步触发，不随着目标元素的滚动而触发，性能消耗极低
  4. 列表的懒加载怎么实现的？
    • 列表懒加载就是拉到最下面的时候再去取数据，原理和分页加载差不多
  5. 如果让你设计一个性能监控工具？你会怎么实现，会监控哪些指标？ window.performance ( https://juejin.cn/post/6844903648355418120
    • window,performance主要包括有memory、navigation、timing以及timeOrigin及onresourcetimingbufferfull方法
  • Node相关
  1. stream和buff的区别？

  2. express的router怎么处理post请求？

  3. express和koa2的洋葱模型？

  4. express的简单实现？

  5. koa2的简单实现？

  6. node的并发怎么解决？ node的异常要怎么处理？

  7. nodejs的commonjs规范和es6规范的区别?
  • 移动端
  1.  react native和H5的区别，有什么好处？
avatar
文章
阅读
粉丝