1.不改变a.js 拿到b.js中callback的tree shaking
2.webpack2 到webpack4 webpack5内部做了哪些优化
2支持es、支持tree shaking，module内部使用test use
4启动mode pro或者dev会启用不同插件
5不再自动引用polyfill，删除dev-server支持，新增了长期缓存，优化了内核等
3.webpack prepack
对webpack打包后的代码进行处理
融合了prepack,预先执行一边代码（有一套自己的js解释器）,使代码变得更小
4.Vue生命周期
是vue实例从创建到销毁的过程
2.0 beforeCreate created beforeMount mounted beforeUpdate updated beforeDestory Destoryed
3.0 setup onBeforeMount onMounted onBeforeUpdate onUpdated onBeforeUnmount onUnomounted onErrorCaptaptured
5.Vue keep-alive实现
当组件切换时不会对当前组件进行卸载，常用的两个属性include/exclude，允许组件有条件的进行缓存。
keep-alive的缓存是基于VNode节点，将需要缓存的VNode节点保存在this.cache中／在render时,如果VNode的name符合在缓存条件（可以用include以及exclude控制），则会从this.cache中取出之前缓存的VNode实例进行渲染
6.Vue router实现
有hash history两种实现模式， location.hash是URL中#后面的东西监听url地址的变化，触发hashchange事件
history路由是用浏览器提供的API实现，onpopstate事件来监听历史栈的改变，两个操作历史栈的API: history.pushState 和 history.replaceState
7.Vue hash模式锚点被占用，如何自己实现锚点
在router配置里添加：srcollBehavior(to,from,savedPosition){}；
自定义点击事件，使用scrollIntoView实现锚点
8.Vue scope css隔离实现，细节描述
给HTML的DOM节点加一个不重复data属性
在每句css选择器的末尾加一个当前组件的data属性选择器（如[data-v-19fca230]）
9.Vue css属性选择器
10.Vue model实现原理
v-model其实是一个语法糖，它会自动的在元素或者组件上面解析为 :value="" 和 @input=""
11.Vue 修饰符有哪些，这些修饰符怎么实现
stop @click.stop="inner" 内层按钮的事件绑定加上stop修饰符，就不会向上冒泡了
prevent 阻止执行类似a标签跳转预设的行为
once @click.once只触发一次
self @click.self="middle" 自身才能触发，避免冒泡事件影响
capture 捕获冒泡，即冒泡发生时，有.capture修饰符的dom元素会优先执行
passive 提高性能解决卡顿
12.for in for of区别 lterator
for ... in 循环返回的值都是数据结构的 键值名，对象返key值，数组返下标，使用for in会遍历数组所有的可枚举属性，包括原型
for-of不能直接的拿到index索引，因为它循环的是数组的键值，适用遍历数/数组对象/字符串
13.用tree shaking实现vue组件库
14.Vue3 新特性hooks
和我们在vue2中学的mixin比较像，将文件的单独功能抽离出来
15.对事件流的理解，如果addEventListener第三个参数设置为true会发生什么
捕获：沿着DOM树向下直到目标节点
冒泡：沿着DOM树向上直到document节点
事件流是从页面中接收事件的顺序，第三个参数默认为false 冒泡，如果设置成true 为捕获
16.浏览器GC机制
基于分代垃圾回收机制，将整个堆内存分为新生代内存和旧代内存，所有的内存分配操作发生在新生代
旧内存堆用标记清除算法，GC会检测当前对象有没有被变量所引用，如果没有就回收
新生代用Scavenge ，把内存空间分为两部分，分别为 From 空间和 To 空间。
17.函数执行上下文的理解，执行上下文存储了哪些内容
函数上下文时js代码执行时所在环境的抽象概念，简称EC，有三种上下文类型全局、函数、eval执行环境
构建的过程分为创建阶段和执行阶段，创建阶段分this绑定，变量环境组件、词法环境组件
执行阶段执行这些变量分配，多个上下分执行构成ECS后进先出执行调用栈
18.浏览器和node对于事件循环的差异
microtask 任务队列的执行时机不同
Node 端，microtask 在事件循环的各个阶段之间执行
浏览器端，microtask（异步任务） 在事件循环的 macrotask（同步） 执行完之后执行
19.reack hooks解决了什么问题，其原理是什么，useMemo和useCallback差别
React16.8新增特性，可以在写函数类组件时使用state和React特性，常用有useState useEffect useContext useMemo useCallback useRef
每一个hook有mount update阶段，获取hook节点，添加到hook链表，获取依赖添加到FiberNode
20.跨域问题有哪些常见处理方式
JSONP、CORS、iframe、nginx 配置proxy
21.http1 和http2区别，https为什么同时使用对称和非对称加密
HTTP2 基于HTTPS
HTTPS建立信息安全通道，保证数据传输的安全，确保网站的真实性，防止钓鱼网站
HTTP/2 的多路复用(Multiplexing) 则允许同时通过单一的 HTTP/2 连接发起多重的请求-响应消息。
(HTTP/2)和传输层(TCP or UDP)之间增加一个二进制分帧层，请求优先级，流量控制，服务器端推送
22.前端常见的安全问题有哪些，分别怎么处理
CSRF安全漏洞 仿造客户端的请求获取信息，重要请求验证身份，服务端生成token，将其存在服务端的session中及客户端的cookie中
XSS 通过URL带入的，这种带入主要是前端解析url中的参数，通过正则匹配去除某些字符串、过滤域名
23.前端性能指标及性能优化
FP，首次绘制，网页的第一个像素渲染到屏幕上所用时间，也就是页面在屏幕上首次发生视觉变化的时间。
FCP，首次内容绘制，指浏览器首次绘制来自DOM的内容，通过performance.getEntriesByType('paint’)，取第二个pain的时间
TTI，可交互时间，完全可以响应用户的输入了。是衡量应用加载所需时间并能够快速响应用户交互的指标
24.SSR 同构原理
所谓同构就是采用一套代码，构建双端（server 和 client）逻辑，最大限度的重用代码
node server 接收客户端请求，得到当前的req url path,然后在已有的路由表内查找到对应的组件，拿到需要请求的数据
25.移动端点击事件为什么会有延迟
与双击缩放的方案有关
解决方案在
使用插件 fastclick插件解决300ms延迟
26.webpack常见优化手段，hash、chunkhash和contenthash区别
自带优化：
tree-sharking :依赖关系的解析-->不用的代码不打包(注意：生产环境才会有效)
scope-hoisting :作用域提升（变量直接可以取到的结果不会打包到代码中）
手动优化：使用image-webpack-loader进行图片压缩 uglifyjs-webpack-plugin
hash 一旦针对项目中任何一个文件的修改，都会构建整个项目，重新获取hash值，缓存的目的将失效
chunkhash 根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的hash值
contenthash表示由文件内容产生的hash值
27.service worker缓存原理
Service Worker本质上也是浏览器缓存资源用的，基于h5的web worker
28.cookie和session的区别
Cookie是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现Session的一种方式。
Session是在服务端保存的一个数据结构，用来跟踪用户的状态，session 默认被存在在服务器的一个文件里（不是内存）
session 的运行依赖 session id，而 session id 是存在 cookie 中的
会话的核心就是客户端的唯一标识，即 session id
29.强缓存和协商缓存的机制详解，命中缓存的返回状态码是什么
命中缓存返回304
30.如何实现一个无侵入sdk，用于上报当前页面首屏加载速度
SDK里采用单例模式，上报模块内部保证同时只会有一个上报请求
完整的前端监控平台包括三个部分：数据采集与上报、数据整理和存储、数据展示
31.如何实现一个无侵入sdk，用于捕获并上报当前页面中发生的错误一场
Window上的error事件，过滤事件代理的error
32.项目中的难点有哪些，工程化如何处理
项目难点集中在React Vue架构应用问题，没有遇到高并发、性能瓶颈问题，印象比较深的是批量开户账户vuex应用和文件上传下载时遇到的问题，开户完成之后跳转返回拿不到数据，然后应用在H5端、微信端、Ios端返回兼容问题，利用浏览器提供的History pushState go back封装一个跳转方法，后面了解到跨域用中间页面 通过路由判断做判断，上传文件用antdesign组件，把文件数据上传到公共服务器，再load下来，沟通数据格式问题，再就是跨域 可视化项目拖拽问题
项目代码提提交到内部gitlab，然后在打包发布平台填写需求配置、项目配置，然后构建项目，跟踪日志，然后测试上线
33.web和node有哪些方式启动多线程/多进程，其交互是如何进行，进程之间的通信方式有哪些
web 创建Worker对象后, 通过postMessage和onmessage进行通信
node child_process 或者第三方cluster模块 fork spawn exec execFile
34.node如何保证服务的稳定性和延续性，保证其服务不宕机，服务挂掉能迅速恢复
分开发过程、发布前中后阶段进行稳定性优化操作
forever是一个nodejs守护进程 或者pm2进程管理工具
35.对canvas性能优化有什么样的方案，具体实践过程，对多线程原子锁是否了解
用缓存也就是用离屏canvas进行预渲染，避免浮点运算，减少canvasAPI的调用
36.TCP和UDP差异，分别作用什么场景，为什么会有两套不同的方案
TCP 一对一，面向连接的传输协议，可靠传输数据，有拥塞控制和流量控制机制，⾸部⻓度较⻓，流式传输保证顺序可靠；适用场景http/https/ftp
UDP 不需要连接，即刻传输数据，即使⽹络⾮常拥堵，也不会影响 UDP 的发送速率，⾸部只有 8 个字节，⼀个包⼀个包的发送可能丢包和乱序；适用场景 DNS 、 SNMP 等、视频、⾳频等多媒体通、⼴播通信
37.TCP握手和挥手过程，每个状态下的状态码，半连接和全连接遭受攻击分别如何处理，第四次挥手需要等待2MSL的原因
38.HTTP2有哪些优化，多路复用为什么可以提高传输效率，其原理是什么，复用的到底是什么
首部压缩，多路复用允许同时通过单一的 HTTP/2 连接发起多重的请求-响应消息，服务器主动推送，
二进制数据帧和流的概念，其中帧对数据进行顺序标识，
39.csrf攻击的本质是什么，csrf token是如何生成并校验的，其防范攻击的原理是什么
钓鱼网站，拿到用户的认证信息和登录状态，
服务端验证成功后生成随机唯一的字符串（GUID, UUID等），并保存到服务端的session或者其他服务端缓存生成token返回给请求端存储，客户端每次发起请求时都会将Token发给服务端
40.如何通过js sdk获取网页首屏加载时间及可交互时间，对应如何进行性能优化
lighthourse、web vitals第三方库获取,performance.getEntriesByType
Tree-shaking 删除无用代码\资源按需加载\图片优化，包括:css图片、裁剪适配屏幕的图片大小、小图使用 base64 或者 PNG 格式、webp
41.数据结构中，哈希表的优点和缺陷分别是什么，哈希冲突的解决方案，从硬件层面对比数组、链表和哈希表差异
可以提供快速的插入操作和查找操作， 缺点它是基于数组的，数组创建后难于扩展
常见的哈希冲突解决办法有四种，开放地址法、链地址法、公共溢出区、再地址法
开发地址法的做法是，当冲突发生时，使用某种探测算法在散列表中寻找下一个空的散列地址
链地址法对于相同的值，使用链表进行连接
42.js遍历数组有哪些方式，各遍历方式的性能对比
for 缓存数组长度、forEach、map return、for of 、for in
forEach()会改变原始的数组的值，map映射出来一个新的数组，而对原数组没有影响
43.react vue对比及差异，设计核心思想，优化思想是什么
都是数据驱动，组件化和虚拟dom，diff算法同层比较，运用key策略
核心思想，vue mvvm模式灵活易用，数据双向绑定响应式，通过数据劫持和拦截检测数据变化，
React mvc函数时编程（纯组件），数据不可变单向数据流，
Vue 将模板编译成虚拟DOM渲染函数，2采用双指针diff算法，深度优先，整体轻量、渲染速度快，3创建vnode时确定类型，运用动态规划求去最长递归子序列
React MVC模式，推崇函数式，它直接进行局部重新刷新(或者重新渲染)，采用JSX生成React元素，并将其传入 ReactDOM.render() 方法
44.对ts装饰器的理解和运用，ts高级类型与泛型
ts装饰器是一种不改变原类和继承的情况下，动态地扩展对象功能的函数
场景：代码可读性变强了，装饰器命名相当于一个注释，在不改变原有代码情况下，对原来功能进行扩展
type 可以声明类型别名，interface可以合并，主要描述接口数据
泛型，<>尖括号进行声明，对象或者集合内只能放入指定的数据类型
45.react portals
将一个React元素渲染到指定的DOM容器中，ReactDOM.createPortal
46.封装图片组件、懒加载实现方式
懒加载原理：图片先用占位符表示，页面加载完成后，监听窗口滚动，当图片出现在视窗中时再给它赋予真实的图片地址
封装demo:https://blog.csdn.net/weixin_33713503/article/details/88115573
47.vue mixins和react的hoc使用缺陷
都是函数内部再实现一个函数去扩展传入的组件，最后返回一个新的组件，为了更好的复用代码
mixins 可能导致依赖不明确相互耦合，命名冲突、状态覆盖
HOC应用场景 日志打点、权限控制、双向绑定、表单校验
48.vue文件中template、script、style三个部分怎么解析，style-loader什么情况下使用，为什么有的css插入html，有的单独处理，分别是什么场景
template：vue2 单个根结点，vue3支持多个根节点
在Vue的mount过程中，template会被编译成AST语法树，再转化为render函数的过程，生成一个最终的root根元素
script style通过vue-loader 最终编译成.js
49.getDerivedStateFromProps怎么进行前值比较
让组件在 props 变化时更新 state，nextProps, prevState两个参数，禁止了组件去访问 this.props，强制让开发者去比较 nextProps 与 prevState 中的值，场景：半受控、中间状态组件
construtor getDerivedStateFromProps render componentdidmount
shouldComponentUpdate render didupdate
50.vue当中nextTick实现原理，实现这种调队列想到什么方法
Vue中的DOM更新是异步的。运用同样是异步队列中进行的nextTick，nextTick会优先在微任务队列中执行
51.mutationObserver怎么具体实现
Mutation Observer（变动观察器），HTML5新特性， 用于监听DOM修改事件，能够监听到节点的属性、文本内容、子节点等的改动
当DOM发生变动会异步触发Mutation Observer事件
编辑器的撤销回退：https://www.itdaan.com/blog/2016/01/11/607856.html
52.为什么要使用状态管理工具，使用的其他状态管理工具有哪些
抽离组件的共享状态，提供存储和操作组件状态的地方，vuex reducer mobx
53.项目中使用过webpack、gulp打包工具，为什么要使用它们，区别是什么
webpack功能完善、容易扩展，强调模块化开发，然后使用热更新，改动模块时关联的依赖也会重新打包，相对来说速度比较慢
强调模块化开发
gulp强调工作流程，通过task方法设置一个个的任务（例如文件压缩、合并、启动server等） 基于NodeJs gulp4 可以task 传数组多任务执行，只是对静态资源做流式处理，不支持tree-shaking、热更新、代码分割等
Snowpack 每当更改文件时，都不会重建多个文件
54.使用ES6的class遇到过什么问题
55.class经过babel编译后的结果是什么
它的实质还是原型和原型链，类本身就是构造函数，方法被添加到原型对象(实例方法)或类本身(静态方法)
56.列举你知道的数据结构
数组：只能存储一种类型的数据，大小在创建后就确定了，无法扩容；
链表：递归的数据结构，可以添加任意元素 查找元素需要遍历整个链表
栈：数据先进后出
队列：数据先进先出
树：非线性 堆：一棵树的数组对象 不大于或不小于顶
哈希表：查找容易，插入和删除困难，而链表正好相反
57.设计模式有哪些，具体在什么地方用过
表单校验 策略模式，全局弹窗：单例，滚动加载：状态模式
58.最近在看什么内容，通过什么方式学习
59.js引擎执行的详细过程，在解析时做了哪些优化
语法分析，预编译和执行阶段
60.聊聊未来的发展目标和方向
61.对前端团队的了解
62.每一家的业务，自己当时的水平，最终成长
63.参考过哪些工程化方案
库框架的选择，用过react redux vue vuex taro uniapp flutter
64.自己未来的职业发展方向
65.面过哪些公司，团队对比
66.写个发布订阅
function MessageCenter() {
let message = {}; //存放消息的对象
this.register = function (messageType) {
if (typeof message[messageType] == "undefined") {
message[messageType] = [];
} else {
console.log("消息已经被注册")
}
} //进行消息注册
this.subscribe = function (messageType, func) {
if (typeof message[messageType] != "undefined") {
message[messageType].push(func);
} else {
console.log("消息未注册，不能进行订阅");
}
} //进行消息订阅，传入的2个参数，messageType是消息标识
//func,订阅后等待要执行的回调函数
this.fire = function (messageType, args) {
if (typeof message[messageType] == "undefined") {
console.log("消息未注册，不能进行发布");
return false;
}
let events = {
type: messageType,
args: args || {}
}
message[messageType].forEach(function (item) {
item(events);
})
}//发布消息,传入的2个参数,essageType是消息标识,args是要
//操作的数据
}
let messae = new MessageCenter();
messae.register("benben");
messae.subscribe("benben", subsfun);
messae.fire("benben", "你好");
function subsfun(event) {
console.log(event.type, event.args); //你好
}
67.项目工程化主要工作
开发 打包 测试 线上
68.CI CD的流程
持续集成、交付和部署
69.项目中使用了哪些第三方组件
ElementUI ant Design，taro，webpack echart bigchart
70.RN的jsbundle包大小
71.code push的成功率
72.灰度机制
体验机制/按比例发布
73.pureComponent的使用
类组件 堆数据浅比较 extends purecomponent
shouldComponentUpdate(nextProps, nextState)
74.说一下打包SDK的过程和技术难点
75.Hermes引擎的理解
76.后期部署遇到了哪些工作问题
77.手写发布订阅
78.跨域通信
jsonp cors nginx proxy，frame第三方引入，node中间件，window name+postMessage，WebSocket protocol是HTML5新协议 listen on
window.onload postmessage/window.addEventListener('message'，function(e){},false)
79.你这次换工作原因
80.资深前端应该具备什么
分技术能力 业务能力两块
81.个人的学习哪些应用到了团队
82.项目整个开发过程充当什么角色，做了哪些工作
83.哪个工作时你认为最出色的
84.最近在看什么书，在看哪些技术
85.线上bug如何解决
86.项目中做了哪些优化
87.项目选型的过程和依据
项目规模时间和架构设计，主要考虑团队人员技术栈情况，PC端项目考虑React Vue相关生态，移动端根据规模和需要选用flutter或者taro小程序
88.项目中遇到的困难点
89.项目中用到的code push
90.项目中替换了Hermes js引擎，为什么要替换
91.介绍一下浏览器的多进程架构
多进程 同一时刻处理多个任务，浏览器进程、GPU进程、第三方插件进程、渲染进程
92.浏览器中有哪些线程，它们之间怎么配合
93.requireAnimationFrame的原理，和其他方案的区别
94.vue的nextTick原理，react中使用的是什么
下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
vue用异步队列的方式来控制DOM更新和nextTick回调先后执行
95.权限判断
路由守卫
动态路由配置，登录后将routers需要的id component name path从后台接口拿到，然后赋值给route
router.addRoutes()
有什么建议，哪里不足 多给指点下
这个部门主要做什么，业务干什么，技术栈情况，团队多少人， 我进去以后要做什么，需要提前准备什么
评论区