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 在遍历的时候就用真实dom
insertBefore方法，修改了真实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
在一个事件循环中，异步事件返回结果后会被放到一个任务队列中。然而，根据这个异步事件的类型，这个事件实际上会被对应的宏任务队列或者微任务队列中去，当执行栈为空的时候，主线程会首先查看微任务中的事件，如果微任务不是空的那么执行微任务中的事件，如果没有在宏任务中取出最前面的一个事件。把对应的回调加入当前执行栈...如此反复，进入循环。
?自己如何实现一个 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 怎么实现浅拷贝
Q: 1-5 怎么实现一个深拷贝
- JSON.parse() (但是如果里面有 function 和 undefined 不可用)
- lodash
- 自己封装
Q: 1-6 null和undefined的差异
相同点:
- 在 if判断语句中,值都默认为 false
- 大体上两者都是代表无,具体看差异 差异:
- null转为数字类型值为0,而undefined转为数字类型为 NaN(Not a Number)
- undefined是代表调用一个值而该值却没有赋值,这时候默认则为undefined
- null是一个很特殊的对象,最为常见的一个用法就是作为参数传入(说明该参数不是对象)
- 设置为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声明常量(会计作用域)
字符串新增方法
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的新特性
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的空间记录每个元素的原始位置，来达到稳定的目的。
|