http相关
1、从输入URL到浏览器显示页面发生了什么？
DNS解析，TCP三次握手，发送http数据，服务端处理返回客户端，TCP四次挥手，浏览器解析资源，渲染页面
TCP三次握手: 客户端向服务端发起连接，服务端对客户端进行确认，客户端对服务端的响应进行确认
TCP四次挥手: 客户端请求服务端断开连接，服务端对客户端进行确认，服务端请求客户端断开连接，客户端对服务端进行确认
2、http和https的区别？
http是明文传输；https为密文传输，更安全
3、TCP和UDP的区别？
1. 基于连接与无连接；
2. 对系统资源的要求（TCP较多，UDP少）；
3. UDP程序结构较简单；
4. 流模式与数据报模式 ；
5. TCP保证数据正确性，UDP可能丢包；
6. TCP保证数据顺序，UDP不保证。
4、cookie、sessionstorage、localstorage的区别？
1. cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存；
2. cookie数据不能超过4K，sessionStorage和localStorage可以达到5M或更大
3. 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效
4. 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage和cookie在所有同源窗口中都是共享的
5、如何解决前端跨域？
1. 设置后端的cors允许跨域；
2. 利用JsonP，JsonP的原理大概就是，利用浏览器对script加载完自动执行的特新来实现的；
3. 采用nginx反向代理；
4. node正向代理，如配置webpack，vue中的proxy；
5. websocket
6. window.postMessage
7. document.domain + Iframe
8. window.location.hash + Iframe
9. window.name + Iframe
10. 浏览器开启跨域（不推荐），如**chrome canary**
6、DOM和BOM对象
BOM是指浏览器对象模型，可以对浏览器窗口进行访问和操作
DOM是指文档对象模型，可以访问 HTML 文档的所有元素
7、ajax的过程
1. 创建`XMLHttpRequest`对象;
2. 调用`open`方法传入三个参数 请求方式`(GET/POST)、url、同步异步(true/false)`;
3. 监听`onreadystatechange`事件，当`readystate`等于4时返回`responseText`;
4. 调用send方法传递参数。
8、GET和POST区别
1. GET在浏览器回退不会再次请求，POST会再次提交请求
2. GET请求会被浏览器主动缓存，POST不会，要手动设置
3. GET请求参数会被完整保留在浏览器历史记录里，POST中的参数不会
4. GET请求在URL中传送的参数是有长度限制的，而POST没有限制
5. GET参数通过URL传递，POST放在Request body中
6. GET参数暴露在地址栏不安全，POST放在报文内部更安全
7. GET一般用于查询信息，POST一般用于提交某种信息进行某些修改操作
8. GET产生一个TCP数据包；POST产生两个TCP数据包
9、浏览器的渲染过程
构建DOM树 -> 构建CSSOM规则树 -> 构建渲染树（Render Tree）-> 渲染树布局(layout of the render tree) -> 渲染树绘制（Painting the render tree）
css相关
1、link 和 @important
1. @import只能导入样式；link可以定义 RSS、rel 连接属性等
2. link在加载css时同时加载，@important在页面加载完毕后被加载
3. link无兼容性差异，@important只能在ie5+以上
4. DOM可控制link，无法控制@important
2、说一说盒模型、box-sizing
1. 标准盒模型：margin + content + border + padding；width等于content
2. IE盒模型：margin + (content + border + padding)；width等于content + border + padding
3. 使用box-sizing：border-box 可以将标准盒模型变为IE盒模型
3、如何实现水平垂直居中
1. 绝对定位
2. table布局
3. flex布局
4. vertical-align:middle
4、浮动的影响
1. 父元素的高度无法被撑开，影响与父元素同级的元素
2. 与浮动元素同级的非浮动元素（内联元素）会跟随其后
3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
5、如何清除浮动
1. 父级div定义height
2. 最后一个浮动元素后加空div标签 并添加样式clear:both
3. 包含浮动元素的父标签添加样式overflow为hidden或auto
4. 父级div定义zoom
6、块格式化上下文（BFC）（也是清除浮动的原理）
任何的BFC元素，它里面无论如何渲染都不会影响外界的元素
应用：清除浮动、处理内容溢出
7、样式权重
!important > style > id > class > 标签
8、为什么要初始化CSS样式
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，页面显示存在差异。
JS相关
1、什么是闭包，应用场景
1. 概念：闭包就是能够读取其他函数内部变量的函数
2. 应用：① 访问函数内部的变量
② 将数内部的变量一直保存在内存中
2、深拷贝与浅拷贝
浅拷贝指向同一个内存地址，a值变b值跟着变，深拷贝指向不同的内存地址，ab值互不影响
最简单暴力的实现方法：JSON.parse(JSON.stringify(XXX))
3、防抖节流
防抖：n秒内函数只会执行一次，如果n秒内事件再次被触发，则重新计算时间（如input事件）
节流：n秒内只会触发一次事件（如发送验证码）
4、去重
常用Set、Map、filter、indexOf、hasOwnProperty、includes
5、js基本数据类型
8个：null、undefined、Boolean、Object、Number、String、Symbol、BigInt
6、原型、原型链
原型: 对象中固有的 __proto__ 属性，该属性指向对象的 prototype 原型属性
原型链: 当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，也就是原型链的概念。
原型链的尽头一般来说都是 Object.prototype。（新建的对象能够使用 toString() 等方法的原因）
7、eventLoop
eventLoop 即 JS事件循环机制，JS是单线程的，执行顺序如下：
1. 先执行同步任务，遇到异步任务时，会把异步任务先放到任务队列中
2. 待同步任务执行完毕之后，再执行任务队列中的异步任务
3. 遇到任务队列中有异步任务再次放入下一个任务队列中，如此便形成事件循环直到任务全部执行完毕。
异步任务又可分为微任务和宏任务
1. 微任务包括Promise，process.nextTick，Async/Await等
2. 宏任务包括整体代码script，setTimeout，setInterval等
3. 微任务比宏任务先执行（这里的宏任务不指整体代码script）
ES6语法
1、常用的ES6
1. const/let
2. 解构赋值
3. 模板字符串(`${data}`)
4. 扩展运算符（...）
5. 箭头函数
6. Set和Map数据结构
7. promise
8. async/await函数
9. Class
10. Module语法(import/export)
2、promise
Promise 是异步编程的一种解决方案：
从语法上讲，promise是一个对象，从它可以获取异步操作的消息
从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。
promise的状态：等待(pending)、已完成(fulfilled)、已拒绝(rejected)；状态一旦改变就不会再变化。
promise用来解决的问题：
1. 解决回调地狱问题
2. 处理多个请求返回的多个数据
all和race的区别：all需多模块都有返回时才修改状态，race只要有一个先返回就修改状态
vue相关
1、双向绑定的原理
Vue2.0 通过 Object.defineProperty 数据劫持结合发布者-订阅者模式的方式来实现的
Vue3.0 使用了 es6 的 ProxyAPI 对数据代理，通过 reactive() 函数给每一个对象都包一层 Proxy，通过 Proxy 监听属性的变化，从而实现对数据的监控
2、v-for key的作用
key可以标识组件的唯一性，可以更高效的更新虚拟DOM，不会重新创建元素和删除元素
3、mixins的作用
当存在多个组件中的数据或者功能很相近时，就可以利用mixins将公共部分提取出来
缺点：不易维护，命名冲突，变量难溯源
3、通讯方式
1. props / $emit
2. eventBus： Bus = new Vue(); Bus.$emit / Bus.$on
3. $attrs（父组件中绑定的非 Props 属性） / $listeners（父组件中绑定的非原生事件）
4. provide / inject（provide 和 inject 绑定并不是可响应的，可用Vue.observable或直接传入this）
5. $parent / $children 与 ref
6. vuex
4、vuex流程
dispatch 触发 actions -> actions 中 commit 触发 mutations -> mutations 修改 state -> 视图更新
actions 可同步可异步，mutations 只能同步
5、vue生命周期
beforeCreate、Created、beforeMount、Mounted、beforeUpdate、Updated、beforeDestory、destroyed
父子组件加载顺序：父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created ->子 beforeMount -> 子 mounted -> 父 mounted
6、computed和watch的区别和原理
computed: 支持缓存，不支持异步，多个属性影响一个属性一般用computed
原理：computed 的依赖的状态发生改变时，通知惰性的watcher判断有无订阅者，有的话，会重新计算，然后对比新旧值，如果变化了，才会重新渲染。
watch: 不支持缓存，支持异步，一个属性影响多个地方一般用watch
原理：1. 数据改变时，通知 watch 的 watcher 进行更新，handler 被调用
2. 设置 immediate 时，初始化 watch 时，handler 被调用，然后传入刚读取的值
3. 设置 deep 时，如果数据是一个对象，会递归遍历这个值，把内部所有属性逐个设置get 和 set
优化相关
常用webpack配置
1. loader / Plugin
2. 服务器自动刷新 watch、devServer
3. 区分环境 process.env.NODE_ENV
4. CDN 加速资源的获取速度
5. Tree Shaking 可以用来## 提取公共代码剔除 JavaScript 中用不上的死代码
6. 提取公共代码
7. Scope Hoisting 可以让 Webpack 打包出来的代码文件更小、运行的更快
8. 代码分离（入口起点、防止重复、动态导入）
性能优化
1. 减少 HTTP 请求
2. 使用服务端渲染
3. 静态资源使用 CDN
4. CSS 放在文件头部，JavaScript 文件放在底部
5. 字体图标 iconfont 代替图片图标
6. webpack压缩文件
7. 图片懒加载
8. 减少重绘重排
9. 使用事件委托
10. 防抖、节流
vue长列表优化
采用虚拟列表，`虚拟列表`其实是按需显示的一种实现，即只对`屏幕可视区域`进行渲染，对`不可见区域`中的数据不渲染或部分渲染的方案，从而使长列表的能高性能渲染
设计模式
工厂模式
基本理解：传入不同参数，然后工厂根据不同的参数来创建不同的对象。
业务场景: 几种弹窗组件：消息型弹窗，确认型弹窗，取消型弹窗等等
单例模式
基本理解： 一个极有可能重复出现的“实例”, 借助第一次的实例，后续对该实例的重复使用，节省性能。
业务场景： 登录弹出框，取消重新弹出时，再显示原来的弹出框，而不是重新创建。
观察者（发布订阅）模式
基本理解： 定义了对象之间一对多的依赖关系，当对象发生变化，通知对应的属性
优点： 1、观察者和被观察者是抽象耦合的。 2、建立一套触发机制。
缺点： 1、太多的话消耗系能。 2、如有回调循环，系统就会崩溃 3、仅只是知道变化，不知怎么发生变化。
业务场景： dom点击事件监听。
中介者模式
基本理解： 提供了一个中介类，该类通常处理不同类之间的通信。
优点： 1.降低了类的复杂度，将一对多转化成了一对一。 2.各个类之间的解耦。
缺点： 中介者庞大时，变得复杂难以维护。
应用实例： vuex
