因离职整理出前公司面试文档，小公司1-3年适用~ 有问题，请指教~

眉梢
184 阅读9分钟

1-3年前端开发面试参考题

css:

  1. ios手机1px的解决办法？

    第一种办法background-image && boder-image

    第二种办法border-shadow

    第三种办法伪元素 + scale缩放

  2. 什么是伪类 什么伪元素

     伪类  :link   :visited   :hover  :active :focus :first-child  :last-child :nth-child()   :nth-last-child() :empty :checked  :disabled

 伪元素  ::first-line :first-letter  ::before ::before  ::selection

  3. 水平垂直居中多种实现方式

    利用绝对定位。flex 。 grid 。display: table-cell。

  4. 重绘跟重排 从css的角度如何避免

    重绘不一定重排，重排一定会有重绘

    优化 ： 1.使用脱离文档流 2.样式集中改变 3.尽量不使用table 4.优化动画 5.脱离文档流

  5. flex常用属性有哪些

    flex-direction 、flex-wrap、 flex-flow 、 justify-content 、align-items 、 align-content

  6. 响应式布局有哪几种

    媒体查询、百分比布局、rem布局、视口单位

  7. 用css实现三角符号

    口诀是 盒子宽高均为零，三面边框皆透明

    方法是主要通过设置一边的border

h5：

  1. H5新增了那些语义化标签，你觉得有啥优点？

    header nav main article section aside footer

    代码结构好。结构清晰，便于阅读，利于开发维护，有利于seo

js

  1. 数据类型有哪些？基本类型那几个，引用类型那几个？

    包括值类型(基本对象类型)和引用类型(复杂对象类型)

    基本类型(值类型)： Number(数字),String(字符串),Boolean(布尔),Symbol(符号),null(空),undefined(未定义)在内存中占据固定大小，保存在栈内存中

    引用类型(复杂数据类型)： Object(对象)、Function(函数)。其他还有Array(数组)、Date(日期)、RegExp(正则表达式)、特殊的基本包装类型(String、Number、Boolean) 以及单体内置对象(Global、Math)等 引用类型的值是对象 保存在堆内存中，栈内存存储的是对象的变量标识符以及对象在堆内存中的存储地址。

  2. 你怎么检测数据类型？

    typeof主要检测基础类型 instanceof主要用于引用类型 Object.prototype.toString.call 这个检测的比较全面

  3. 如何取不确定属性名的对象key值

    Object.keys、for of 循环拿出

  4. 闭包是什么 应用场景有哪些

    闭包是有权访问另一个函数的作用域内变量的函数都是闭包。容易造成内存泄露。优点是访问私有变量。

    应用场景： 模仿块级作用域 、埋点计数器、柯里化

  5. call bind apply区别

    答： 三者都可以改变函数的this对象指向。 三者第一个参数都是this要指向的对象，如果如果没有这个参数或参数为undefined或null，则默认指向全局window。 三者都可以传参，但是apply是数组，而call是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入。 bind 是返回绑定this之后的函数，便于稍后调用；apply 、call 则是立即执行 。

  6. 事件委托 是什么？机制是什么？

    类似于事件冒泡，都是在父级上面绑定事件。优点是减少内存消耗 处理场景：子元素太多，每个都有事件，且处理事件单一

  7. 节流防抖是什么 应用场景有那些

    节流是一段时间内只能触发一次，如果这段时间内触发多次事件，只有第一次生效会触发回调函数，一段时间过后才能再次触发（n秒内第一次生效）

    节流主要用于轮播图

    防抖在事件被触发时，延迟n秒后再触发回调函数，如果n秒内又触发了事件，则会重新开始计算时间（n秒内最后一次生效）

    防抖主要用于输入框事件 还有页面resize

es6

  1. es6对比es5新增了那些方法？

    新的数据类型symbol、解构赋值、箭头函数、set数据结构、 Generator函数、 新增了一些数组处理办法、新增了promise解决了回调地狱的问题，新增了模块化、利用import 、export来实现导入、导出、新增了class类的概念，它类似于对象。

  2. promise你的了解？ 如果有多接口的话用哪个？

    promise的话解决了同步异步的问题，解决了回调地狱的麻烦。 多接口的话 promise.all

  3. 深拷贝浅拷贝你常用有哪些？

    es6的扩展运算符,变量赋值是浅拷贝 深拷贝有 遍历属性 ，JSON.parse(JSON.stringify) 、递归

  4. Generator 函数你的理解？

    Generator 函数和普通的函数写法有些许不同，它需要在 function后面加上*，来表示当前函数是 Generator函数。Generator 函数可以用来控制函数执行的暂停和启动，在 Generator函数中，yield 会起到标识暂停的标志。

    通过next() 一步步执行函数

  5. 你会怎么用继承？

    通过原型和构造器 、类继承。只继承父类模版,不继承父类原型对象、混合继承、new关键字继承

js与es6综合

  1. 多维数组如何变成一维数组？

    flat()、 new Set、for of

  2. 箭头函数与普通函数的区别

    外形不同，箭头函数使用箭头定义，普通函数中没有

    普通函数可以有匿名函数，也可以有具体名函数，但是箭头函数都是匿名函数。

    箭头函数不能用于构造函数，不能使用new，普通函数可以用于构造函数，以此创建对象实例。

  3. new运算符的实现机制

    首先创建一个空对象，并且设置原型对象，让函数this指向当前对象并执行构造函数的代码，判断返回值类型，如果是值类型，返回被创建的对象。如果是引 用类型，就返回这个引用类型的对象。

  4. forEach、for in、for of三者区别

    forEach更多的用来遍历数组
    for in 一般常用来遍历对象或json
    for of数组对象都可以遍历，遍历对象需要通过和Object.keys()
    for in循环出的是key，for of循环出的是value

  5. 常用的数组方法有哪些？

    every、map、filter、forEach、for of 、for in 、some 、concat、find、findIndex、sort、shift

  6. 那些数组方法会改变原数组

    map 、 filter 、push

  7. cookie，localStorage 和 sessionStorage区别

    localStorage 数据会永久存储，除非代码删除或手动删除。sessionStorage 数据只存在于当前会话，浏览器关闭则清空。cookie本身用于浏览器和与服务器通讯并存储大小限制4kb。


vue

  1. vue你了解的生命周期有哪些？

    beforeCreate（初始化界面前）、created（初始化界面后）、beforeMount（渲染dom前）、mounted（渲染dom后）、beforeUpdate（更新数据前）、updated（更新数据后）、beforeDestroy（卸载组件前）、destroyed（卸载组件后）

  2. keep-alive用过么，是干啥的？

    缓存组件，，可以使被包含的组件保留状态，避免重新渲染，主要用于tab切换。

    activited deactivated 是他的生命周期

  3. vue的事件修饰符与指令

    事件修饰符— .prevent ：阻止默认事件 .stop: 阻止单击事件继续传播(阻止事件冒泡，相关事件都要加修饰符.stop) .capture，事件捕获 .self ：只处理自己内部事件 .once 点击多次时只执行一次 .passive ： 执行默认方法

    指令— v-for v-show v-if v-else v-else-if v-once v-text v-html v-on v-bind v-model

  4. vue.extend 是啥

    创建一个构造器。

  5. 说说你对 SPA 单页面的理解，它的优缺点分别是什么

    SPA仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。

    优点：

    • 用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
    • 基于上面一点，SPA 相对对服务器压力小；
    • 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；

    缺点：

    • 初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；
    • 前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；
    • SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势

  6. 在哪个生命周期内调用异步请求？

    created、beforeMount、mounted，在这三个钩子函数中，data 已创建，可以将服务端端返回的数据进行赋值。但是比较推荐在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下能更快获取到服务端数据，减少页面 loading 时间；ssr 不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性；

  7. 使用过 Vue SSR 吗？说说 SSR？

    SSR大致的意思就是vue在客户端将标签渲染成的整个 html 片段的工作在服务端完成，服务端形成的html 片段直接返回给客户端这个过程就叫做服务端渲染。

  8. vue-router 路由模式有几种？

    vue-router 有 3 种路由模式：hash、history、abstract

    其中，3 种路由模式的说明如下：

    • hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器；
    • history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式；
    • abstract : 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式.

  9. vue.use()

    全局使用

综合问题

  1. web性能优化

    这个属于开放题，层面很广，可以从css 、js 、vue三个层面拓展，还有webpack和上线后的

  2. css 预处理器

    预处理器是基于css的另一种语言，通过工具编译成css，添加了很多css不具备的特性，能帮助更好组织css代码，提高代码复用率，提升可维护性。

  3. 组件封装自己做过哪些？

     这个是个开放题，什么二次封装，多复用卡片封装，表格封装，很多种

  4. 原生小程序的生命周期

    onshow 、onhide 、 onload、onReady、onUnload、 onLaunch

  5. 有做过vue项目么？ 权限这块你们怎么做的？（经验多一点的问这个）

    这个是个开放题 看看回答的是否合理




    纯属自己个人整理分享，轻点喷。

avatar
文章
阅读
粉丝