前端面试题整理【入门版】

原创不易,如需转载请【联系作者】或【署名作者并注明文章出处】

image.png

  • js基础技术

    • VUE

      • vue2

        • 双向绑定原理

          • get时collect,set时notify
          • v-model原理,监听input输入框的input事件

            • 如果直接document.querySelector('xxx input').value = new value,v-model对应的值会变化么,为什么
          • input与change区别
          • computed与watch区别
          • this.$set与Vue.set区别
        • vue实例与父子组件

          • vue组件内写的this指向谁
          • 计算属性,函数名和data数据源中的数据可以同名吗,为什么
          • 给vue定义全局的方法
          • 父子组件生命周期是如何串起来的
          • 组件通信方案
          • project/reject的理解,使用时需要每一个组件内都注入么
          • EventBus注册在全局上时,路由切换时会重复触发事件,如何解决呢
          • 父子组件如何访问彼此的实例
        • 其他问题

          • vue2.0不再支持v-html中使用过滤器了怎么办
          • 函数式组件特点与应用场景
          • vue为什么要求组件模板只能有一个根元素
          • :class和:style有几种表示方式
          • nextTick的原理
          • spa的seo怎么做

            • ssr的渲染时机示什么
        • v-for的key绑不绑定有什么区别

          • 原地复用机制
          • 子级依赖索引问题
        • vue router的原理

          • keep alive原理
          • router link原理
          • 页面加载完成后,非当前路由的部分开始了生命周期么
        • vue-cli

          • 在使用vue-cli开发vue项目时,自动刷新页面的原理你了解吗
          • vue-cli怎么解决跨域的问题,是什么原理
        • diff算法

          • react与vue的区别、传统diff的局限、vdom如何提高性能
          • vue3为啥更快
      • vue3

        • proxy-reflect优化的原因
        • 对象的子级对象的双向绑定,vue是如何处理的
        • composition API优点
        • 其他优化
    • webpack

      • vue文件是如何变成js文件的,有哪些环节

        • webpack build与vue-cli dev场景分别有什么区别
      • webpack打包的流程、loader、plugin区别、polly-fill原理
      • hash、content-hash、chunk-hash区别
      • tree-shaking原理

        • 模块规范的区别
        • 如何写一个兼容amd cmd的模块
    • http

      • get post区别 安全 / 幂等
      • 版本演进

        • tcp-ip握手与ssl握手

          • 知道ssl是非对称+对称加密
      • 常见端口号 204 206 302 304 403 503
      • 并发问题

        • 支持多少tcp/ip并发
        • 每一个tcp-ip可以发送多个http么
      • 缓存策略

        • 缓存优先级
        • 强缓存

          • 知道pragma有加分但不要求
        • 协商缓存

          • 两种方案区别与各自的问题以及如何处理的
          • 同时使用两种协商缓存策略,如何处理的
          • no-cache与no-store区别
        • 200 from memory cache 与 200 from disk cache区别
        • 之前项目的缓存策略
      • 跨域问题

        • 原因与表现
        • 问题:server资源 / localstorage资源
        • 解决方案

          • cros可以配置什么内容
          • postMessageAPI如何使用
          • JSONP运行流程与限制
          • nginx配置代理转发
          • coop coep等【不硬性要求】
    • 原型链

      • 如何获取一个对象的原型对象有哪些方案
      • 为何不建议使用__proto__,以及应该怎么实现这种场景的需求
      • 1.__proto__和a = 1; a.__proto__有什么区别

        • 拆箱与装箱
        • primitive (primitive value, primitive data type)是什么
        • primitive 可更改值么
      • 通过原型链实现继承有哪些方案

        • 注:prototype指向过去,一定要constructor指向回来才算
    • eventLoop

      • setTimeout(fun, 0), fun是什么时机触发的,属于第一次事件循环序列的宏任务还是第二次的,第二次序列里面的宏任务最前还是最后
      • 渲染是何时进行的
      • setInterval的执行策略与setTimeout有什么区别
      • 栈与队列的概念

        • 可以顺带聊一下 尾递归优化 不强求
    • 安全策略

      • xss三种原理与防范
      • xsrf原理与防范
    • 其他

      • promise

        • all 如何容错式返回
        • 手写一个all / race
      • es6

        • weak map与map
        • let const的理解
      • this

        • 函数指向
        • 闭包指向
        • class内function的指向
        • bind之后还可以改变this指向么
      • 闭包
      • 柯里化

        • 说得清楚如何实现即可,不强制要求
      • 高阶函数

        • 主要考察理念的理解和arr的一些方法,其他更深层次的概念不做强制要求
      • 手写bind
      • iife
  • css等

    • 居中方案
    • 圣杯、双飞燕
    • animation参数
    • flex、grid相关与兼容处理
    • 动效优化、transition与animation渲染的区别
    • 补间动画
    • fps与raf概念
    • 盒模型与互相转化
    • 清除浮动
  • 浏览器

    • arr的sort默认算法是什么
    • url到页面加载出来的流程
    • ast如何构建、ast有哪些属性【不要求】
    • 词法分析、语法分析区别
    • 常见的兼容问题
    • 屏幕适配问题
    • 存储策略

      • localstorage、cookies、ss、IndexDB等区别与各自空间大小、空间大小、url长度限制 等
    • 写一个10px为何调试的时候会是10.222px或者8.666px
    • 沙箱、webworker原理与应用空间与限制
  • 团队建设与优化

    • 错误收集与报警 https://segmentfault.com/a/1190000016959011

    • 性能优化

      • 资源型

        • 应体积越小越好, 尽可能复用传输通道,利用缓存
        • 优化显示关键资源, 优先加载头部内容, 用户主观感受更快
      • 渲染型

        • 尽量局部重排、集中式操作、分离读写操作、dom离线、脱离文档流
    • ci/cd

      • 如何集成到项目里,遇到管理性质的流程如何处理
    • 公共组件维护

      • git submodule、git subtree、npm 以上方案的优缺点以及如何使用与优化的
    • 效率提升

      • cli优化
      • 流程优化
  • 算法

    • 数组查重,至少三个

      • set ,obj-key,arr的index reduce find等方法,
    • 深拷贝

      • JSON的缺陷
      • 循环引用的处理
      • weakmap 与while优化
      • 正则,函数 箭头函数,eval等情况的处理
    • 实现节流 防抖
    • 实现lodash里面某一个算法,比如chunk
    • 链表查环
    • 斐波那契
    • 深度优先遍历与广度优先遍历
    • 如何写一个加减法的编译器
    • 基本思路理解:递归、贪心、动态规划、回溯、时空复杂度的计算
  • 业务问题

    • h5

      • 1px像素问题
      • 适配处理问题 / 原理
      • 滚动穿透
      • ios300ms延迟
      • 上传的问题

        • 低版本Android上传图片回来刷新的问题 、无权限如何处理 、 如何打开相册
      • 音乐

        • 自动播放 、 如何预加载
      • 视频上层覆盖按钮
    • pc

      • 主流浏览器兼容
      • sso方案
      • 如何避免运营商劫持
      • 数据可视化相关方案
      • 响应式设计方案
      • 权限管理方案
      • 截留 / 防抖
      • 登录态管理
      • 万级节点优化
  • 其他

    • 跨平台

      • 主流框架与方案
      • 各个方案的原理
    • 前端未来方向的思考

      • BFF、TWA 方向;UI 智能化方向;数据可视化方向;图形互动化方向;serveless、可视化、动效、3d+vr+ar、第三方扩展能力、等
    • node 常用api等
    • eslint、babel等的原理
【By: 360手机助手团队-XTeam】
原创不易,如需转载请【联系作者】或【署名作者并注明文章出处】

你可能感兴趣的:(前端面试题整理【入门版】)