手把手带你简单回答真实前端面试题

3,090 阅读10分钟

前言

这些内容都是真实遇到的

面试的时候千万别简单回答,给我往死里吹,往复杂的去吹,这样你就成功了三分之一

HTML

html有哪些新特性

一、语义标签

二、增强型表单

三、视频和音频

四、Canvas绘图

五、SVG绘图

六、地理定位优化有哪

七、拖放API

八、WebWorker(创建后台线程)

九、WebStorage(本地化持久存储)

十、WebSocket

CSS

说一下rem和em的区别

  • rem是根据文档根节点html的字体大小设置
  • em是根据父节点的字体大小设置的

吹rem的时候可以往自适应方向吹,比如通过rem配合fixable实现了多端设备自适应。

如果有更好的建议,评论吧

有哪些选择器?

  1. 类选择器
  2. id选择器
  3. 标签选择器
  4. 后代选择器
  5. 子选择器

水平垂直居中有几种方式,分别是什么?

  1. 绝对定位+margin
  2. 绝对定位+transform
  3. flex
  4. 文字居中+行高

什么是盒模型?

盒模型由这四个部分组成:

  • content(内容区)
  • padding(填充区)
  • border(边框区)
  • margin(外边界区)

列举几种清除浮动

  1. clear
  2. 伪元素
  3. 创建BFC(BFC是块级格式化上下文,作用:其内部的元素布局状态不会影响到外部元素的布局状态)
  4. flex
  5. 父级overflow:hidden

JS

什么是闭包

闭包就是能够读起其它函数内部变量的函数

请你说说js有哪些数据类型?

基本数据类型

  1. String
  2. Number
  3. Undefined
  4. Symbol
  5. Null
  6. 布尔(booloan)

引用数据类型

  1. Function
  2. Object
  3. 数组(Array)

数组slice和splice的区别?

  1. splice它会改变数组,返回一个新的数组,
  2. slice不会修改数组,而是返回一个子数组。

下面的代码的结果是?

var a = 2
var fun = (function(){
    var a = 3;
    return function(){
        a++;
        alert(a)
    }
})()
fun(); // 4
fun(); // 5

for of 和 for in区别 ?

  • for...in 循环只遍历可枚举属性(包括它的原型链上的可枚举属性)。像 Array和Object使用内置构造函数所创建的对象都会继承自Object.prototype和String.prototype的不可枚举属性。

    • 例如 String 的 indexOf() 方法或 Object的toString()方法。循环将遍历对象本身的所有可枚举属性,以及对象从其构造函数原型中继承的属性(更接近原型链中对象的属性覆盖原型属性)。
  • for...of语句在可迭代对象(包括Array,Map,Set,String,TypedArray,arguments 对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句

介绍一下vuex

vuex是状态管理模式,通过创建集中式数据存储,给程序中所有组件访问

使用场景:当我们开发中大型项目或者数据量较大的时候,就会使用vuex

核心

  1. state:数据共享/存储
  2. getter:对共享数据进行过滤
  3. mutation:注册改变数据状态
  4. action:解决异步改变共享数据
  5. module(模块):每个模块都有自己的state,getter,mutation,action,解决项目臃肿

一个数组有重复元素,怎么用简单的方式去重?

Array.from(new Set([1,1,1,1,1,1,4]))

cookie,localstorage,sessionstorage区别?

区分localStoragesessionStoragecookies
相同点保存在浏览器端,且是同源的
存储大小5M5M4kb
有效期永久,除非手动删除关闭页面或者浏览器可设置时长,超时失效。
与服务器端的通信不可能不可能参与,每次都会携带http请求头

Ajax-网络-http

get和post区别?

区分getpost
参数位置url请求体(request body)
参数长度有限制无限制
参数编码ASCII编制无限制
后退/刷新不重复提交,回退无害重复提交,回退有害
安全性参数暴露,不安全安全
缓存YESNO
收藏书签同上同上
历史参数保留在浏览器历史中不保留
相同点都是http请求,tcp连接
重大区别
  • get产生一个TCP数据包
  • post产生两个TCP数据包

出现错误时会返回错误状态码,分别是什么?

简单几个

  • 401 无法解析此请求。
  • 403 禁止访问:访问被拒绝。
  • 404 找不到文件或目录
  • 500 服务器内部错误

介绍一下ajax

ajax是什么?

ajax就是异步的javascr和xml的结合

作用

通过AjAx与服务器进行数据交换,AjAx可以使用网页实现布局更新

这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

说一下ajax执行流程

向服务器请求有哪些方式?请求有几种格式?

两种提交方式:get、post

三种格式

  1. 表单提交 get,post
  2. 超链接 get
  3. 地址栏跳转 get

前端向后端发送请求有几种方式?

  1. link src=""
  2. script src=""
  3. img src=""
  4. ajax请求
  5. 表单提交
  6. a href=""
  7. iframe src=""

websocket是怎么与后端交互的?

项目升级后,前端js脚本在不要求用户强刷浏览器的情况怎么更新?

思路:监听加载js的错误信息》处理错误信息加入刷新页面功能》获取最新的runtime.[hash].js文件》用户正常访问

blog.csdn.net/guzhao593/a…

Es6

介绍一下promise

什么是promise

Promise 是异步编程的一种解决方案,比传统的异步解决方案【回调函数】和【事件】更合理、更强大。现已被 ES6 纳入进规范中。

promise有三个状态:

  1. pending[待定]未完成
  2. fulfilled[实现]完成
  3. rejected[被否决]拒绝

有两种过度:pending -> fulfilled 或者是 pending -> rejected 总的来说呢,就是Promise对于错误处理机制的理解

如果错误已经捕获了,那么错误不会继续传递下去

如果错误没有被捕获,那么错误会隐式传递下去,直到有错误处理函数来捕获这个错误

Promise 常用的方法有哪些?它们的作用是什么?

  1. Promise.resolve(value) :返回一个状态已变成 resolved 的 Promise 对象。
  2. Promise.reject :类方法,且与 resolve 唯一的不同是,返回的 promise 对象的状态为 rejected。
  3. Promise.prototype.then: 就是将Promise中的resolve或者reject的结果拿到,实例方法,为 Promise 注册回调函数,函数形式:fn(vlaue){},value 是上一个任务的返回结果,then 中的函数一定要 return 一个结果或者一个新的 Promise 对象,才可以让之后的then 回调接收。
  4. Promise.prototype.catch:实例方法,捕获异常,函数形式:fn(err){}, err 是 catch 注册 之前的回调抛出的异常信息。
  5. Promise.race :多个 Promise 任务同时执行,返回最先执行结束的 Promise 任务的结果,不管这个 Promise 结果是成功还是失败
  6. Promise.all: 类方法,多个 Promise 任务同时执行。

作用/使用场景

  1. 解决地狱回调
  2. 将异步操作队列化,按照期望的顺序执行,返回符合预期的结果
  3. 主要用于异步计算
  4. 可以在对象之间传递和操作promise,帮助我们处理队列

var、let、const三者的区别?

var定义的变量,没有块的概念,可以跨块访问, 不能跨函数访问。

let定义的变量,只能在块作用域里访问,不能跨块访问,也不能跨函数访问。

const用来定义常量,使用时必须初始化(即必须赋值),只能在块作用域里访问,而且不能修改。

Vue

Vue的双向数据绑定原理是什么?

采用数据劫持结合发布者-订阅者模式的方式,通过 Object.definePorperty() 来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。

自定义指令如何定义,它的生命周期是什么?

 Vue.directive('red',{
    * bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
    * inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于document中)。
    * update:被绑定于元素所在的模板更新时调用,而无论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新。
    * componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
    * unbind:只调用一次,指令与元素解绑时调用。
});

子组件如何主动获取父组件中的数据?

this.$parent.数组
this.$parent.方法

组件通信有哪些方案?

数组变动

这行代码是否正确,原因是什么? vm.items[1] = 'x';

var vm = new Vue({
    data:{
        items:['a','b','c']
    }
})
vm.items[1] = 'x';

computed和watch的区别?

computed

  1. 支持缓存,只有依赖数据发生改变,才会重新进行计算
  2. 不支持异步,当computed内有异步操作时无效,无法监听数据的变化
  3. computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过的数据通过计算得到的
  4. 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed
  5. 如果computed属性属性值是函数,那么默认会走get方法;函数的返回值就是属性的属性值;在computed中的,属性都有一个get和一个set方法,当数据变化时,调用set方法

watch

  1. 不支持缓存,数据变,直接会触发相应的操作;
  2. watch支持异步;
  3. 监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;
  4. 当一个属性发生变化时,需要执行对应的操作;一对多;

页面中定义一个定时器,在哪个阶段清除?

beforeDestroy 

为什么销毁它: 在页面 a 中写了一个定时器,比如每隔一秒钟打印一次 1,当我点击按钮进入页面 b 的时候,会发现定时器依然在执行,这是非常消耗性能的。

在哪个生命周期发ajax请求?为什么?

性能或其他

前端性能优化有哪些?

  1. v-show 和 v-if 的区分使用
  2. 图片压缩
  3. 图片/路由懒加载
  4. 代码压缩
  5. 组件按需引入
  6. 开启gzip压缩
  7. 减少或合并http请求

跨域方案有哪些?

同协议+同域名+同端口=同源策略,不满足其中之一都是跨域

CORS:由后端解决,后端跨域自由配置某个域名地址可访问

jsonp:通过发现js实现跨域,并不是xhr请求

服务器代理:vue通过proxy代理

缓存的策略是怎么做的?

知道三次握手吗?

常用js调试工具是什么?怎么快速找到某元素的事件的对应的代码?

手写

数组去重的函数

深拷贝