前端真题

nguhuangxiao
115 阅读5分钟

参考

最近两周出去面试遇到的面试题（前端初级、长更）

(建议收藏)原生JS灵魂之问, 请问你能接得住几个？(上)

(建议精读)原生JS灵魂之问(中)，检验自己是否真的熟悉JavaScript？

(2.4w字,建议收藏)😇原生JS灵魂之问(下), 冲刺🚀进阶最后一公里(附个人成长经验分享)

CSS

  • flex布局

JS 基础

  • Set 和 Map有什么区别

  • 你提到了map，讲讲和object有什么区别?

    • 相同点
      • 都是键值对存储
    • 不同点
      • map 有size,delete操作， object没有
      • map添加的是由顺序的，object是无序的
      • Map 自身支持迭代，Object 不支持
      • JSON 直接支持 Object，但不支持 Map

  • dsa

JS 核心

  • promise底层实现
  • 说说async、await的设计和实现
  • 深拷贝需要注意哪些问题?
  • 判断数组的方法有哪些?手写一个instanceof方法
  • ES5怎么实现继承?讲讲对原型链的理解
  • webSocket介绍及使用，socket请求失败的原因
  • 内存泄漏
    • 意外的全局变量：由于使用未声明的变量,而意外的创建了一个全局变量,而使这个变量一直留在内存中无法被回收
    • 被遗忘的计时器或回调函数：设置了 setInterval 定时器，而忘记取消它，如果循环函数有对外部变量的引用的话，那么这个变量会被一直留在内存中，而无法被回收。
    • 脱离 DOM 的引用：获取一个 DOM 元素的引用，而后面这个元素被删除，由于一直保留了对这个元素的引用，所以它也无法被回收。
    • 闭包：不合理的使用闭包，从而导致某些变量一直被留在内存当中。
  • js垃圾回收机制
  • 解释下什么是evenLoop
    • js运行机制就是eventLoop（事件循环）
    • 调用栈Call Stack、回调队列 CallBack Queue
    • 【文档】事件循环机制（Event Loop）的基本认知
    • 事件循环的整体流程
      1. 先清空调用栈里边的同步代码
      2. 执行微任务队列中的微任务 (微任务的优先顺序会比宏任务优化)
      3. 尝试DOM渲染
      4. 触发Event Loop反复询问回调队列中是否有要执行的语句，有则放入调用栈中继续执行
    • 宏任务 setTimout， setInterval， ajax， I/O 操作， 页面渲染， 事件监听器， dom操作
    • 微任务 Promise回调函数(then, catch, finaly), async/await (只有在await之后的代码开始微任务，之前都是同步代码)
  • 你提到了requestAnimationFrame，讲讲和setInterval的区别?
    • 【概念】requestAnimationFrame（callBack）告诉浏览器，要执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行
    • 【比较】
      • setTimeout 和 setInterval 的问题是，它们不够精确。它们的内在运行机制决定了 时间间隔参数 实际上只是指定了把动画代码添加到 浏览器UI线程队列 中以等待执行的时间，如果队列前面已经加入了其它任务，那动画代码就要等前面的 任务完成后 再执行，并且如果时间间隔过短（小于16.7ms）会造成丢帧，所以就会导致动画可能不会按照预设的去执行，降低用户体验。
      • requestAnimationFrame 采用 浏览器时间间隔 ，保持最佳绘制效率，不会因为间隔时间过短，造成过度绘制，消耗性能；也不会因为间隔时间太长，使用动画卡顿不流畅，让各种网页动画效果能够有一个 统一 的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。
    • 【文档】前端动画 API requestAnimationFrame

VUE

  • MVM和MVVM概念

  • spa首屏加载慢优化

  • 性能优化

  • vue双向绑定原理

    132184689-57b310ea1804f.webp

    • 核心：数据劫持+发布者-订阅者模式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图
      • 数据监听器Observer
      • 消息订阅器
      • 指令解析器Compile
      • 订阅者Watcher
    • 2.0
      • Object.defineProperty
    • 3.0
      • Proxy

  • 组件通信方式

    • props
    • vuex
    • eventBus
    • provide/inject

  • vuex设计与实现

  • vue-router底层原理

  • computed和watch的区别和应用场景

算法和编程

  • 一个盒子从中间开始，碰到最左边的边界往右移动，碰到最右边的边界往左移动，如此循环，问怎么做?
  • 用过canvas吗，如果要实现一个一笔一画写汉字的效果，应该怎么做?
  • 写一个最多能并发执行n个promise的队列
  • 给树上每个节点的父亲节点，还原树

小程序

  • 从小程序跳转公众号
    1. 微信公众号关联小程序
    2. 微信小程序后台开启【公众号关注组件】
    3. official-account包裹
  • 小程序打包体积过大
    • 基本概念：主包/分包不超过2M，总大小不超过20M
    • 分包
    • 资源CDN化
    • JS和CSS压缩（微信开发者工具自带）
    • 代码依赖分析（微信开发者工具自带）

工程化

  • 讲讲webpack的整个工作流程
  • 有没有用过webpack的loader解决过一些具体的场景问题?
  • require和import的区别?

浏览器

  • 浏览器渲染原理
  • 讲讲浏览器从输入网址到打开网页的整个过程，越细致越好。
  • https如何进行加密
  • 前端缓存机制
  • 跨域
    • 跨域，相关的几个请求头的含义
    • 解决方案
avatar
文章
阅读
粉丝