div居中方法 1、绝对居中

给div设置样式，div默认显示位置为body的左上方。首先给div添加绝对定位，并设置上下左右边距为0，然后使用margin: auto;自动居中。

2、水平垂直居中 给其父元素添加display: flex;弹性布局。 内容对齐（justify-content）属性：应用在弹性容器上，即父元素上。把弹性项沿着弹性容器的主轴线（main axis）对齐，如果横向有多个div，则X轴就为当前弹性容器的主轴线，Y轴为副轴线，反之亦然。

3、（定位+变形）居中

给父元素添加?position: relative;相对定位。

给自身元素添加position: absolute;绝对定位。

怎么实现三列布局（左侧和右侧宽度固定，中间自适应） 绝对定位 + 中间版块不给宽度两侧浮动 + 中间自动撑开（使用 calc 动态计算宽度，设置对应宽度的 margin）flex，左右设置 flex-basis，中间设置?flex-grow??????

?1-1: flex 具体是怎么实现三列布局的（左侧和右侧的宽度是怎么设置的，中间自适应使用的是哪个属性）

flex 设置宽度和宽度自适应应该算是 flex 的最基本用法，在面试中，问到 flex 的设置宽度和中间自适应具体是哪个属性，

Q 1-2: 设为 flex 属性之后，子元素的哪些属性会失效

float、clear 和?vertical-align

-4: webpack 打包的过程

读取文件，分析模块依赖对模块进行解析执行（深度遍历）针对不同的模块使用不同的 loader编译模块，生成抽象语法树（AST）遍历 AST，输出 JS

webpack 的 loader 和 plugin 区别，举几个常用的 loader 和 plugin 并说出作用

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！ 因为 webpack 本身只能处理 JavaScript，如果要处理其他类型的文件，就需要使用 loader 进行转换，loader 本身就是一个函数，接受源文件为参数，返回转换的结果。Plugin 是用来扩展 Webpack 功能的，通过在构建流程里注入钩子实现，它给 Webpack 带来了很大的灵活性。 通过plugin（插件）webpack可以实 loader 所不能完成的复杂功能，使用 plugin 丰富的自定义 API 以及生命周期事件，可以控制 webpack 打包流程的每个环节，实现对 webpack 的自定义功能扩展。

?模块化解决了前端的哪些痛点

命名冲突文件依赖代码复用 三大框架解决了传统 JQ 开发的哪些问题

使前端不用再操纵 DOM,数据驱动，通过数据的改变直接改变 DOM

Q 1-1: Vue2.0 怎么实现双向绑定的

Q 1-2: Vue3.0 怎么实现双向绑定的

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

Q 1-3: Object.defineProperty() 和 proxy 的区别

Proxy 是对整个对象的代理，而 Object.defineProperty 只能代理某个属性。 所以我们在编写响应式函数的时候，defineProperty 需要用for in 去给每个属性添加监听

Q2: 你使用过哪些 Vue/React 全家桶，分别解决了什么问题

vue-cli也叫脚手架1.项目构建工具、2.路由、3.状态管理、4.http 请求工具。

Q3: Vue/React 的 diff 算法

react在diff遍历的时候，只对需要修改的节点进行了记录，形成effect list，最后才会根据effect list 进行真实dom的修改，修改时先删除，然后更新与移动，最后插入vue 在遍历的时候就用真实dominsertBefore方法，修改了真实dom，最后做的删除操作react 采用单指针从左向右进行遍历vue采用双指针，从两头向中间进行遍历react的虚拟diff比较简单，vue中做了一些优化处理，相对复杂，但效率更高 Q4: Vue hash 路由和 history 路由的区别

hash模式url带#号，history模式不带#号。

后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问?http://oursite.com/user/id?就会返回 404

Q5: Vue 计算属性和 watch 在什么场景下使用

vue的computed选项主要用于同步对数据的处理,而watch选项主要用于事件的派发,可异步.

这两者都能达到同样的效果,但是基于它们各自的特点,使用场景会有一些区分.

computed拥有缓存属性,只有当依赖的数据发生变化时,关联的数据才会变化,适用于计算或者格式化数据的场景.

watch监听数据,有关联但是没有依赖,只要某个数据发生变化,就可以处理一些数据或者派发事件并同步/异步执行.

Q6: Vue 的 nexttick 实现的原理

nextTick 是 Vue 提供的一个全局的 API ，由于 Vue 的异步更新策略导致我们对数据的修改不会立马体现到都没变化上，此时如果想要立即获取更新后的 dom 的状态，就需要使用这个方法。 Vue 在更新 dom 时是异步执行的。

通信的要点和目的

要点：1. 发送者和接收者 2. 传输媒介 3. 传输的数据 4. 传输格式（协议）

目的：1. 同步数据 2. 传递指令(执行的方法)

你所接触的前端领域的通讯有哪些 前端和后端前端和移动端前端 父页面 和 iframe 之间浏览器各个 tab 之间web workers 线程通信路由间的通信vue 父子组件 概述输入一个url到网页呈现的过程

Q 2-1: DNS 解析的详细过程

Q 2-2: 概述 http 的缓存控制（http2 与相关缓存控制）

Q 2-3: 简述三次握手

Q 2-4: 页面加载白屏的原因有哪些，以及如何监控白屏时间，如何优化

Q 2-5：script 标签的属性有哪些

Q 2-6: script 标签的 defer 和 async 标签的作用与区别

Q 2-7: script intergrity的作用

比较 HTML XML XHTML 和 JSON 我们最熟悉的就是 HTML（HyperText Markup Language / 超文本标记语言），用来描述和定义 网络内容的标记语言，超文本的意思是说，除了能标记本文，还能标记 图片，视频，链接 等其他内容XML（Extensible Markup Language / 可扩展标记语言），表现就是给一堆文档加上标签，说明里面的数据是什么意思，方便存储、传输、分享数据。和 HTML 的区别是 HTML 的标签就预定义的，XML 是可扩展的 XHTML: Extensible Hypertext Markup Language / 可扩展超文本标记语，其实就是 HTML 的严格语法形式，约定了 属性名必需小写，空元素必需关闭，元素名小写，属性名必需加引号，布尔类型必需加属性值JSON（Javascript Object Notation）比较轻量级的数据交换格式，由键值对组成，数据格式比较简单, 易于读写, 格式都是压缩的, 占用带宽小 这个问题确实是一个很基础的计算机先关的问题，但是很多的面试者仍然不能准确的说出 HTML 的含义（超文本标记语言），在说 XML 和 JSON 的区别的时候只能回答出 XML 常用作配置文件，JSON 用于 AJAX 传输数据 eventloop

在一个事件循环中，异步事件返回结果后会被放到一个任务队列中。然而，根据这个异步事件的类型，这个事件实际上会被对应的宏任务队列或者微任务队列中去，当执行栈为空的时候，主线程会首先查看微任务中的事件，如果微任务不是空的那么执行微任务中的事件，如果没有在宏任务中取出最前面的一个事件。把对应的回调加入当前执行栈...如此反复，进入循环。

macro-task(宏任务) setTimeoutsetIntervalsetImmediatemicro-task(微任务) Promiseprocess.nextTick ?自己如何实现一个 promise new Promise(fn) 返回一个promise对象在fn 中指定异步等处理 处理结果正常的话，调用resolve(处理结果值)处理结果错误的话，调用reject(Error对象) 一句话概述什么是 promise Promise对象用于异步操作，它表示一个尚未完成且预计在未来完成的异步操作。 ?面向对象三大要素 封装、继承、多态

Q3-1: 能够简单的说明面向对象和面向过程的区别吗

面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用就可以了。面向对象是把构成问题事务分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为。面向对象： 狗.吃(屎)面向过程： 吃.(狗,屎)

Q3-4: 怎么实现封装和继承

Q3-5: 一句话概述什么是闭包

实现给数字添加千分位符的方法 正则表达式："12345678".replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')字符串分析， 循环，然后3位加','数字分析， 取到整数部分， %1000 操作， 然后加逗号 拼接字符串 (12345678).toLocaleString("en-US") => "12,345,678"

JS 数据类型有哪些，其中基本数据类型有哪些

(ES6之前)其中5种为基本类型:string,number,boolean,null,undefined,ES6出来的Symbol也是原始数据类型 ，表示独一无二的值。Object 为引用类型(范围挺大),也包括数组、函数

Q: 1-2 原始数据类型和引用类型的区别

在内存中的存储方式不同，原始数据类型在内存中是栈存储，引用类型是堆存储 栈（stack）为自动分配的内存空间，它由系统自动释放；而堆（heap）则是动态分配的内存，大小不定也不会自动释放。

在内存中存储方式的不同导致了原始数据类型不可变 原始数据类型和引用数据类型做赋值操作一个是传值一个是传址

Q: 1-3 深拷贝 和 浅拷贝 的区别

Q: 1-4 怎么实现浅拷贝

ES6：object.assign()展开运算符…自己封装函数实现

Q: 1-5 怎么实现一个深拷贝

JSON.parse() (但是如果里面有 function 和 undefined 不可用)lodash自己封装

Q: 1-6 null和undefined的差异

相同点:

在 if判断语句中,值都默认为 false大体上两者都是代表无,具体看差异 差异:null转为数字类型值为0,而undefined转为数字类型为 NaN(Not a Number)undefined是代表调用一个值而该值却没有赋值,这时候默认则为undefinednull是一个很特殊的对象,最为常见的一个用法就是作为参数传入(说明该参数不是对象)设置为null的变量或者对象会被内存收集器回收

?JS数组有哪些常用的方法（push, pop, unshift, splice等

Vuex有用过吗，Vuex的作用，Vuex有哪些常用方法

VueX是用来在Vue项目开发中使用的状态管理工具。

用Vue脚手架工具构建好项目；2、利用npm包管理工具安装vuex；3、新建一个store文件夹，并在文件夹下新建“store.js”文件；4、在文件中引入vue和vuex。

VueRouter的导航守卫

“导航”表示路由正在发生改变。 正如其名， vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的

9. JS的深浅拷贝的区别，分别实现深浅拷贝 （详见：https://blog.csdn.net/a715167986/article/details/90440794）

10. Promise有用过吗，说说Promise有几个状态，分别是什么意思 （详见：http://es6.ruanyifeng.com/#docs/promise）

?pending、fulfilled、rejected (未决定，履行，拒绝)，同一时间只能存在一种状态，且状态一旦改变就不能再变。 promise是一个构造函数，promise对象代表一项有两种可能结果（成功或失败）的任务，它还持有多个回调，出现不同结果时分别发出相应回调。

11. 说说ES6 ES7的一些新特性

变量的改变，添加了块级作用域的概念

let声明变量（块级作用域），let是更完美的var，它声明的全局变量不是全局属性widow的变量，这便解决了for循环中变量覆盖的问题

const声明常量(会计作用域)

字符串新增方法

函数可以像C/C++那样设置默认参数值，增加数据容错能力??对象??Set

ES7在ES6的基础上添加三项内容：求幂运算符（**）、Array.prototype.includes()方法、函数作用域中严格模式的变更。

ES8

async、await异步解决方案

提出场景有两个：JS是单线程、优化回调地狱的写法。

字符串填充padStart()、padEnd()

12. JS中0.1 + 0.2 等于几（被问烂了这道题，然而当时笔者答不上来）

浮点数运算中产生误差值

二进制

13. 说说HTTP的几个状态码，各自的含义，304是什么意思？

15. Ajax请求过程叙述

Ajax 是一种异步请求数据的一种技术，对于改善用户的体验和程序的性能很有帮助。

使用ajax发送数据的步骤 第一步：创建异步对象 var xhr = new XMLHttpRequest(); 第二步：设置 请求行 open(请求方式，请求url): // get请求如果有参数就需要在url后面拼接参数，

16. 浏览器在输入url到看到网页发生的过程（很经典常考的一道题）

首先，在浏览器地址栏中 输入url 2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中 显示页面 内容。 若没有，则跳到第三步操作。 3、在发送http请求前，需要域名解析 (DNS解析)，解析获取相应的IP地址。

17. HTTP1.0 HTTP1.1 HTTP2.0的区别，http和https的区别

18. JS如何实现继承

19. JS数组去重，取交集、并集、差集各自怎么实现

let arr2=[4,5,6,7,8,9] // 并集 数组去重 let RemoveSame=[...new Set([...arr1,...arr2])] console.log(RemoveSame) //[1, 2, 3, 4, 5, 6, 7, 8, 9] //数组交集，或得两个数组重复的元素 let SamePart=arr1.filter(item=>arr2.includes(item)) console.log(SamePart) //[4, 5, 6] //差集=并集-交集 去除两个数组相同的元素 let Difference=RemoveSame.filter(item=>!SamePart.includes(item)) console.log(Difference) //[1, 2, 3, 7, 8, 9]

20. 说一说HTML5和CSS3的新特性

新增语义化标??新增多媒体标签??音频：< audio >??视频：< video >??新增input类型 type=" "

新增表单属性???拖放??地理定位

css 新增选择器??边框（Borders）?背景??渐变??文本效果??字体??2D 转换??3D 转换??过渡??动画??

盒模型??伸缩布局盒模型(弹性盒)??多媒体查询?

21. 说一说Vue的Render函数的作用

render函数是vue通过js渲染dom结构的函数createElement，约定可以简写为h 官方文档中是这样的，createElement 是 Vue.js 里面的 函数， 这个函数的作用就是生成一个 VNode节点， render 函数得到这个 VNode 节点之后， 返回给 Vue.js 的 mount 函数，渲染成真实 DOM 节点，并挂载到根节点上。

22. CSS实现圆环效果 （略难）

外层一个大圆(pie)，中间一个小圆(circle)，覆盖住大圆，形成圆环左右各有半圆(left、right)，也被中间小圆覆盖，形成左右两个半圆环左右半圆内有子左右半圆（left-deg，right-deg），用来旋转在父左右半圆上面设置overflow：hidden，子左右半圆旋转，可实现圆环百分比效果

23. JS let和var的区别

let 可以被修改但是不能被重新声明. 就像 var 一样，用 let 声明的变量可以在其范围内被修改。. 但与 var 不同的是， let 变量无法在其作用域内被重新声明。

25. 说说常用的算法和数据结构

26. 说说快排，快排是稳定的吗？为什么？ 快速排序是对冒泡排序算法的一种改进，同冒泡排序一样，快速排序也属于 交换排序 ，通过元素之间的比较和交换位置来达到排序的目的

?算法的稳定性要跟踪代码的执行过程来分析，有些排序算法代码不一样会导致本来稳定的排序变成不稳定。?快排过程是不稳定的，可以给每个元素添加一个原始位置属性使它变稳定。 可以利用额外的nlogn的空间记录每个元素的原始位置，来达到稳定的目的。

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。