【无标题】

JS运行机制
路由router
生命周期
请求状态码
跨域
es6
vueX
new Vue()都做了什么？
promise
重定向
webpack
事件冒泡
事件委托

vue基础涉及方面：

父子组件渲染顺序
组件之间传值事件交互
vue双向绑定原理
v-for和v-if为什么不能同时使用，怎么解决？
v-for中key的作用
vue中的data为什么是个函数
请求一般在那个生命周期里
apply和call 的区别

js为什么要设计成单线程？答：js是作为浏览器的脚本语言，主要是实现用户与浏览器的交互，以及操作dom；这决定了它只能是单线程，否则会带来很复杂的同步问题。

耗时比较久的操作怎么分离出js线程：答：采用异步操作

webwork能操作dom吗：不了解

webwork怎么和主进程通信 不了解

如何判断空对象，如何判断是否是对象，判断数组有哪些方法 object.keys({}).length

vue有一个很深的子组件，父组件怎么给它传值 provied（父组件）inject（子组件）

vue中怎么拦截路由？router.beforeEach

vue3和vue2的区别？ vue2采用的Object.defineproprety,通过重写对象属性的get和set方法实现的数据的拦截。vue3采用的proxy，proxy是重写监听整个对象，解决了数组索引改变数据vue2监听不到的问题，vue3的组合API和TS

webpack怎样设置多入口模式 ：entry:设置多个入口

相同引用的js代码打包成一个单独的文件要怎么配置

怎么启动混淆模式 uglifyjs-webpack-plugin

webpack的构建原理（流程）

（1）初始化参数：解析webpack配置参数，合并shell传入和webpack.config.js文件配置的参数，形成最后的配置结果。
（2）开始编译：上一步得到的参数初始化compiler对象，注册所有配置的插件，插件监听webpack构建生命周期的事件节点，做出相应的反应，执行对象的 run 方法开始执行编译。
（3）确定入口：从配置的entry入口，开始解析文件构建AST语法树，找出依赖，递归下去。
（4）编译模块：递归中根据文件类型和loader配置，调用所有配置的loader对文件进行转换，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理。
（5）完成模块编译并输出：递归完事后，得到每个文件结果，包含每个模块以及他们之间的依赖关系，根据entry配置生成代码块chunk。
（6）输出完成：输出所有的chunk到文件系统。

import引入和require引入在webpack中有什么区别

import语法会被转化为commonjs格式或者是AMD格式，babel默认会把ES6的模块转化为commonjs规范的。
import list from './list';
//等价于
var list = require('./list');

html中meta标签有什么作用
元素可提供有关页面的元信息（meta-information）
如何关掉浏览器还能记住用户登录状态；
localstorage
图片标签中如何进行xss攻击，input呢，如何进行防范
1. 后端需要对提交的数据进行过滤。
2. 前端也可以做一下处理方式，比如对script标签，将特殊字符替换成HTML编码这些等。
垃圾回收有什么方法
现在各大浏览器通常用采用的垃圾回收有两种方法：标记清除、引用计数。
div水平垂直居中布局 绝对定位、flex，
事件循环机制（说了为什么需要，怎么样），
(macro)task 主要包含：script( 整体代码)、setTimeout、setInterval、I/O、UI 交互事件、setImmediate(Node.js 环境) ===== 宏任务
microtask主要包含：Promise、MutaionObserver、process.nextTick(Node.js 环境) ==== 微任务
事件循环机制 执行顺序，====> 同步任务 微任务 异步任务其中 new promise()是同步任务；
http状态码（4xx、5xx）
4** 是客户端错误
5** 是服务端错误
301 永久重定向
302 临时重定向

跨域、同源机制
跨域是指不同的地址，端口。浏览器的一种保护策略。
如何加快页面渲染速度（懒加载、CDN、压缩、雪碧图，treeshrinking），
ES6新增的东西（let、const、解构赋值、箭头函数，块级作用域），

websocket协议（原生与sock.io、wss），

express和koa的最主要的区别（koa中间件洋葱模型），

vue双向绑定响应式原理（语法糖、数据劫持订阅发布），

webpack（问用过什么插件，loader），

vue2、3区别，为什么要用proxy替换原响应式方案。（v2方案缺陷，v3亮点），
Object.defineProperty 是对所有对象属性的劫持，如访问obj.o, 所有属性，包括深层的都是响应式，浪费性能
Proxy 是对访问到哪个属性，那个属性就是响应式，如访问obj.o,属性o才是响应式， 访问obj.o.b， b才是响应式，访问到那个属性，那个属性才是响应式，不需一次性遍历

Object.defineProperty 无法监听新增和删除
Object.defineProperty 无法监听数组部分方法需要重写
Object.defineProperty 性能不好要对深层对象劫持要一次性递归

Proxy 能正确监听数组方法
Proxy 能正确监听对象新增删除属性
Proxy 只在 getter 时才进行对象下一层属性的劫持 性能优化
Proxy 兼容性不好

vue数据传递的方案（注入，store，props，事件总线）

网络七层模型及各层应用，
前端性能优化
雪碧图，路由懒加载，SSR服务端渲染，GZIP压缩，减少HTTP请求
CDN原理
CDN的全称是Content Delivery Network,即内容分发网络。
其目的是通过在现有的Internet中增加一层新的CACHE(缓存)层,将网站的内容发布到最接近用户的网络”边缘“的节点,
使用户可以就近取得所需的内容,提高用户访问网站的响应速度。
项目部署相关，
HTTP HTTPS区别
HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输协议。相比较http来说，https更加安全
1.谈谈Vue和React的区别？
react采用的函数式变成，JSX的语法，和vue相比，更偏向原生一点，vue是组件化的，html JS CSS 都是分开的，相比较react来说vue上手比较简单。都实现了数据的双向绑定。
2.new的实现原理
1、创建一个空对象 obj
2、将该对象 obj 的原型链 proto 指向构造函数的原型 prototype，
并且在原型链 proto 上设置 构造函数 constructor 为要实例化的 Fn
3、传入参数，并让 构造函数 Fn 改变指向到 obj，并执行
4、最后返回 obj
function New(Fn) {
let obj = {}
let arg = Array.prototype.slice.call(arguments, 1)
obj.proto = Fn.prototype
obj.proto.constructor = Fn
Fn.apply(obj, arg)
return obj
}
3.从浏览器地址栏输入 URL 到显示网页，这个过程是怎么实现的？
1.DNS解析（解析你输入的这个地址去哪个服务器上获取资源，DNS有本地缓存，先从本地缓存里找，没找到会从DNS节点和服务器中找）
2.TCP连接
3.发送HTTP请求
4. 服务器处理请求并返回HTTP报文
5.浏览器解析渲染页面
6.连接结束
4.JS有哪些方式可以实现继承
1.原型链继承
2.构造继承
3、组合继承
5.JS为什么会有原型的概念
JavaScript采用原型编程，所有对象都能共享原型上的方法，节省内存;同时基于原型这一实现思想，JavaScript通过找对原型链，方便地实现了继承。
6.什么是原型链
每个对象都有它的原型,而原型又是一个对象,所以它也有它的原型,就形成了一个链条,成为原型链
7.vuex使用流程
store mountion action 变更数据采用commit提交mountion
8.说说你常用的css3属性有哪些
9.map和forEach区别
map执行速度比foEach块，map会开辟新的内存放置返回值，而forEach没有返回值
10.typescript和Es6的class区别
typescript class中有属性字段有private、protected、readonly等修饰符 typescript constructor构造函数参数必须定义所属类型
typescript class中可以存着静态方法 typescript class方法参数会类型验证
es6中, 只有静态方法,没有静态属性

11.methods，computed，watch三者区别

12.tcp和udp的区别

13.router有哪些钩子
1、全局守卫： router.beforeEach

2、全局解析守卫： router.beforeResolve

3、全局后置钩子： router.afterEach

4、路由独享的守卫： beforeEnter

5、组件内的守卫： beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave

14.vue有哪几种路由模式
history和Hash,hash带#，history不带#号，history是整个路径去请求，并且需要后端支持。
15.Vue的指令有哪些钩子函数
bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次，指令与元素解绑时调用。

16.如何自定义v-modal
v-model是个语法糖，自定义组件使用v-model，应该有以下操作：
1. 接收一个value prop
2. 触发input事件，并传入新值
在原生表单元素中：

相当于

在自定义组件中

相当于

18.你接触过哪些设计模式
工厂模式
沙箱模式
发布者订阅模式
19.vue的diff的原理

20.vue如何实现响应式的
其实就是通过数据的改变去驱动DOM视图的变化。这里是Vue最核心的内容。
初始化时通过Object.defineProperty进行绑定，设置通知的机制。
当编译生成的渲染函数被实际渲染的时候，就会触发getter进行依赖收集，在数据变化的时候，触发setter进行更新。
21.如何实现去重
const arr = [1,2,2,3,4,5,6,7,4,3,2,1,0];

const arr2 = new Set(arr);
let arr3 = Array.from(arr2)

const arr4 = [...new Set(arr)]

22.一个页面加载的流程是怎样的
1.DNS解析（解析你输入的这个地址去哪个服务器上获取资源，DNS有本地缓存，先从本地缓存里找，没找到会从DNS节点和服务器中找）
2.TCP连接
3.发送HTTP请求
4. 服务器处理请求并返回HTTP报文
5.浏览器解析渲染页面
6.连接结束
23.webpack的流程是怎样的
compile 开始编译
make 从入口点分析模块及其依赖的模块，创建这些模块对象
build-module 构建模块
after-compile 完成构建
seal 封装构建结果
emit 把各个chunk输出到结果文件
after-emit 完成输出
24.css有哪些选择器，优先级顺序是怎样的

25.css如何实现一个三角形

26.说说CDN原理

28.说说async原理

29.项目用过哪些优化方法
一、 加载优化（减少http请求数）
二、图片优化
三、使用CDN
四、开启Gzip（代码压缩）
六、减少不必要的Cookie
七、脚本优化
八、前端代码结构的优化

30.如果一个请求返回的结果有大量计算逻辑，如何优化
计算结果放在异步里进行操作计算，防止阻塞

31.webwork如何使用、关闭、怎么知道它的任务处理完成了
32.webwork能够操作dom吗，为什么

33.http和websocket区别

34.websocket如何处理异常，和链接断开的问题
35.Promise.all第一个promise函数出现异常会出现什么样的结果
会进入到catch里
36.typescript中interface和type的区别
接口（interface）
类型别名（type alias）
interface只能定义对象类型
type声明的方式可以定义组合类型、交叉类型和原始类型
37.const和let区别
const定义的变量不可重新赋值，经常用于定义常量，let定义的变量可以被重新赋值
49.什么是闭包
闭包就是能够读取其他函数内部变量的函数。
51.防抖和节流的区别
防抖是短时间多次触发只执行最后一次触发事件，节流是多次触发，每间隔一定时间触发一次。
52.如果我有1W个mens菜单你会如何优化，并且每个men高度不固定，
分页加载？
54.知道 BFC 吗？使用场景有哪些？
块级格式上下文，

55.如何解决BFC的问题
【1】根元素

【2】float的值不为none

【3】overflow的值不为visible（hidden、auto、scroll）

【4】display的值为inline-block、table-cell、table-caption、flex

【5】position的值为absolute或fixed

56.postion有哪些属性值，各个值的区别
absoluted,relative,fixed
57.浏览器的渲染流程
1.DNS解析（解析你输入的这个地址去哪个服务器上获取资源，DNS有本地缓存，先从本地缓存里找，没找到会从DNS节点和服务器中找）
2.TCP连接
3.发送HTTP请求
4. 服务器处理请求并返回HTTP报文
5.浏览器解析渲染页面
6.连接结束
58.什么是回流,什么是重绘
渲染树发生变化会引起回流，渲染树不发生变化但是渲染树的属性发生变化会引起重绘，回流必将引起重绘，但是重绘不一定引起回流
59.哪些操作会引起回流和重绘
DOM的增删行为
dom的样式变化
页面初次渲染
浏览器窗口尺寸改变
60.什么是事件循环
event loop
62.实现获取如下结构的深度
{
name:“A”,
children:{
name:“B”,
children:{
name:“C”,
children:{
name:“D”,
children:[]
}
}
}
}
63.实现
function A(){

}
A(“dom.body.div”)

返回
{
dom:{
body：{
div:{

        }
    }
}

}

function A(params){
if(params) {
const paramsList = params.split(".").reverse();
let result = {};
paramsList.forEach(element => {
let init = {}
init[element] = result
result = JSON.parse(JSON.stringify(init))
});
return result;
}
return “”
}

66.App内嵌H5是如何和Android通讯的
通过webview 这个东西
68.tcp和udp的区别

69.线程和进程的区别
进程：每个进程都有独立的代码和数据空间（进程上下文），进程间的切换会有较大的开销，一个进程包含1–n个线程。（进程是资源分配的最小单位）
线程：同一类线程共享代码和数据空间，每个线程有独立的运行栈和程序计数器(PC)，线程切换开销小。（线程是cpu调度的最小单位）
70.为什么js是单线程的
因为JS要操作DOM,如果是多线程，会存在同时操作dom的情况和状态不一致的问题
71.webpack用过哪些插件各自是什么用途
html-webpack-plugin,css-loader,style-loader,file-loader

74.Vue computed,watch区别
computed是vue的计算属性会缓存当前的结果，只有当依赖数据发生改变的时候才会重新计算，适合多对一的情况，watch不会缓存，数据变更直接出发，适合一对多，
75.Vue computed可以使用v-model吗
可以，最好不要
76.Vue可以在子组件中修改Pros吗，为什么
不可以，vue数据是单向流动的，props里的数据只能通过emit事件由父组件修改
77.Vue有哪些数据传递方式
props inject provied bus emit等
78.如何实现一个map函数
Array.prototype.m = function (fn, arg, result = []) {
for(let i = 0; i < this.length; i++) {
result.push(fn.apply(arg, [this[i], i, this]));
}

    return result;
};

const res = [1, 2, 3].m(item => return item * 2);

console.log(res);

79.继承的原理

80.vue2和vue3.0区别
Vue2.0
基于Object.defineProperty，不具备监听数组的能力，需要重新定义数组的原型来达到响应式。
Object.defineProperty 无法检测到对象属性的添加和删除 。
由于Vue会在初始化实例时对属性执行getter/setter转化，所有属性必须在data对象上存在才能让Vue将它转换为响应式。
深度监听需要一次性递归，对性能影响比较大。
Vue3.0
基于Proxy和Reflect，<可以原生监听数组，可以监听对象属性的添加和删除。
不需要一次性遍历data的属性，可以显著提高性能。
因为Proxy是ES6新增的属性，有些浏览器还不支持,只能兼容到IE11 。
81.为什么需要减少http请求（如果有一个请求耗时800毫秒 有三个请求耗时100，300，800总的耗时不也是一样的吗，那为什么需要减少http请求）
HTTP请求建立和释放需要时间：客户端连接到Web服务器->发送HTTP请求->服务器接受请求并返回HTTP响应->释放连接TCP链接

如果http请求很多，不合并http请求就会耗费大量时间再建立和释放上。

浏览器对同一个域名的并发数量有限制：如果页面的并发资源非常多，那后续的资源请求只能等到前面的资源下载完后才开始。 

82.什么是事件委托，运用场景是什么

83.什么是事件代理，运用场景是什么

85.谈谈你理解的JS垃圾回收机制
采用的引用计数和标记清除
86.从输入 url 到页面展示经过了哪些步骤
查找DNS => 建立TCP连接 => 发送HTTP请求 => 服务器处理请求并返回HTTP报文 => 浏览器解析渲染页面
87.react class 组件和 hooks 的区别

88.webpack热更新原理
用webpack-dev-server启动一个服务之后，浏览器和服务端是通过websocket进行长连接，webpack内部实现的watch就会监听文件修改，只要有修改就webpack会重新打包编译到内存中，然后webpack-dev-server依赖中间件webpack-dev-middleware和webpack之间进行交互，每次热更新都会请求一个携带hash值的json文件和一个js，websocker传递的也是hash值，内部机制通过hash值检查进行热更新

89.判断是否为数组有哪几种方法
1、Array.isArray([])

2、let a = [];
console.log(a instanceof Array); //true
let b = {};
console.log(b instanceof Array); // false

3、let a = [1,3,4];
    a.constructor === Array // true

90.如何解决递归爆栈

91.页面卡顿怎么去定位问题

92.页面加载空白如何定位问题

93.typeof(new Array())返回什么
object
94.如何定位Node内存泄露

95.什么是盒子模型

96.行内元素有哪些？块级元素有哪些？

97.HTML5新增了哪些Api

98.如何实现左中右三个元素水平垂直居中
display:flex;
align-items:center;
justify-content:space-between;
99.SSR中遇到过什么问题，需要注意什么

100.ajax和axios、fetch的区别
axios
基于ajax封装
为MVVM框架而生 (vue react)
支持 Promise API
支持并发请求

fetch
AJAX在ES6的替代品
fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。

101.Vue数据流和React数据流的区别

102.如何上传大文件
切片上传
103.实现居中有哪些方法

104.AMD,CMD和UMD的差异
1.对于模块的依赖，AMD是提前执行，CMD是延时执行。
2.AMD推崇依赖前置，CMD推崇就近依赖。
//AMD

define(['./a','./b'], function (a, b) {

    //依赖一开始就写好
    a.test();
    b.test();
});

//CMD
define(function (requie, exports, module) {

    //依赖就近书写
    var a = require('./a');
    a.test();
});

105.ES6新增了哪些api