面试后反问

1：针对我刚才回答的问题，您觉得哪些回答是欠佳的 2：这个岗位对应应聘的员工更看重哪些除了专业技能之外的问题 3：我应聘的这个岗位咱们开始招聘多长时间了 4：这个岗位要招聘多少员工？是补充位置还是业务扩展 5：我如果进入后，计划我是一个怎样的角色，再团队中处于怎样的位置 6：这个岗位具体的工作职责是做什么？初中高级分别有多少位员工，通过您对我的了解，绝对目前在职的员工哪个基础知识掌握情况和我最接近 7：在公司工作时间最长的开发有多少年了 8：咱们目前有多少产业链，多少产品在开发中 9：公司，这个前端部门开设多久了，这个部门从开设到现在经历过比较大的人员变动吗？如果有，最多变动了多少人 10：公司，开发的时候遇到过事故吗？有的话最大的事故是什么，后来怎么解决的，这边领导层是怎样的应对态度

前端某群员面试点

1：原型，原型链，闭包，作用域，词法环境，this指向，垃圾回收，构造函数，工厂模式，new发生了什么，call、bind、apply实现运用，class原理 2：浏览器输入url到页面呈现，宿主环境差异，EventLoop 3：webpack looder，plugins，proxy，require与import，AMD，CMD，chunk 4：nodeJS，http服务，fs模块，JS-token，session，await，async，promise 5：vue原理核心，亮点，响应式原理（ES5，ES6）双向数据绑定，template原理，$nextTick，$delete,$set,$on,$once原理,$emit keepAlive实现，vNode，diff，patch，ssr，nuxt

面试刷题

往期更多精彩可前往 https://github.com/sisterAn/JavaScript-Algorithms （2.6k star）、

https://github.com/Advanced-Frontend/Daily-Interview-Question （22.6k star）查看

社区，vue、react社区，mdn技术文档，github：panjinhai（vue-element-admin）、花花（vue-h5-templete）、surmon（quill插件）、尤雨溪

前端面试点

1.自我介绍
2.vue 数据流 
3.组件传值有哪些 
4.子组件改父组件怎么操作、几种方法
5.面试官口述代码未props传值也不能改父组件代码怎么在子组件获取父组件的数据、会几种方法。
6.生命周期、 created mounted区别
7.Mixin 是什么怎么使用，加载到组件中各个钩子的顺序
8.Vuex 有哪些部分、 modules细节 
9.vueRouter、 mode、 传参、 区别 
10.vue 响应式原理
11.宏任务微任务
12.面试官口述代码 promise  settimeout 等其他 混合在一起时 执行顺序 
13.面试官口述代码 This 相关
14.Webpack 用到哪些
15.Vue3.0 新的api 、 proxy

stlye scoped vue实现
this指向
vuerouter 钩子函数
父子组件传值
防抖节流
变量提升
生命周期
事件循环
http
tcp三次握手

1.项目相关的
2.跨域解决办法
3.webpack配置
4.es6使用过哪些
5.vue的生命周期有哪些 分别是什么作用
6.js的数据类型有哪些 
    基本类型：布尔类型、null类型、undefined类型、数字类型、bigint类型、字符串类型、符号（symbol）类型。
    引用类型：数组，对象，函数、date、
    栈：存放基本数据类型和引用类型的指针（访问地址），先进后出，后进先出
    堆：存放引用数据类型和闭包
    池：存放常量
7.垂直居中有哪些方式

1. h5的新特性 （draggable 重点说一下）
2. 深拷贝和浅拷贝
3. Vue2和Vue3（顺带）实现mvvm的原理
4. 组件传值问题
5. 节流和防抖
6. 闭包
7. es6 (promise)
8. webpack的原理
9. event-loop

1.说一下最近的项目，亮点
2.事件循环机制3.做什么模块化的操作
4.线上打包怎么优化
5.有什么储存策略
6.es6有哪些迭代器
7.路由怎么实现传参
8.vue 3 proxy实现了什么
9.内存泄漏，内存溢出
10.场景实现

闭包的理解
防抖和节流
作用域链和原型链
函数式编程
vue nextTick原理

nextTick会创建一个异步任务添加到异步队列的最后面，当数据更新触发watch.run()后执行到最后一个异步任务Dom更新完成，nextTick里面就能获取到最新的dom

mixin
父组件和子组件的生命周期顺序
js数据类型及分类
数组includes和indexof的区别：includes返回true可以判断NaN，indexOf返回索引判断不了NaN
es6有哪些特性
js事件循环
js有哪些异步
手机兼容实现
IE兼容
vue mvvm源码实现（怎么从模板生成了vnode）
懒加载实现方式
isNaN
深拷贝实现
typeof
宏任务和微任务（执行顺序：主线程(宏任务)先执行>微任务>宏任务>宏任务里的微任务>宏任务）

宏任务： setTimeout

setInterval

js主代码

setImmediate(Node)

requestAnimationFrame(浏览器)

微任务： process.nextTick

Promise的then方法

插槽

前端性能优化

优化 DOM

* 删除不必要的代码和注释包括空格，尽量做到最小化文件。
* 可以利用 GZIP 压缩文件。
* 结合 HTTP 缓存文件。

优化 CSSOM 首先，DOM 和 CSSOM 通常是并行构建的，所以 CSS 加载不会阻塞 DOM 的解析。

然而，由于 Render Tree 是依赖于 DOM Tree 和 CSSOM Tree 的，所以他必须等待到 CSSOM Tree 构建完成，也就是 CSS 资源加载完成(或者 CSS 资源加载失败)后，才能开始渲染。因此，CSS 加载会阻塞 Dom 的渲染。

由此可见，对于 CSSOM 缩小、压缩以及缓存同样重要，我们可以从这方面考虑去优化。


* 减少关键 CSS 元素数量
* 当我们声明样式表时，请密切关注媒体查询的类型，它们极大地影响了 CRP 的性能 。

优化 JavaScript 当浏览器遇到 script 标记时，会阻止解析器继续操作，直到 CSSOM 构建完毕，JavaScript 才会运行并继续完成 DOM 构建过程。

* async: 当我们在 script 标记添加 async 属性以后，浏览器遇到这个 script 标记时会继续解析 DOM，同时脚本也不会被 CSSOM 阻止，即不会阻止 CRP。
* defer: 与 async 的区别在于，脚本需要等到文档解析后（ DOMContentLoaded 事件前）执行，而 async 允许脚本在文档解析时位于后台运行（两者下载的过程不会阻塞 DOM，但执行会）。
* 当我们的脚本不会修改 DOM 或 CSSOM 时，推荐使用 async 。
* 预加载 —— preload & prefetch 。
* DNS 预解析 —— dns-prefetch 。

浏览器重绘（Repaint）和回流（Reflow）

回流必将引起重绘，重绘不一定会引起回流。

重绘（Repaint） 当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility 等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。

回流（Reflow） 当 Render Tree 中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。 会导致回流的操作：

* 页面首次渲染
* 浏览器窗口大小发生改变
* 元素尺寸或位置发生改变元素内容变化（文字数量或图片大小等等）
* 元素字体大小变化
* 添加或者删除可见的 DOM 元素
* 激活 CSS 伪类（例如:hover）
* 查询某些属性或调用某些方法
* 一些常用且会导致回流的属性和方法
clientWidth、clientHeight、clientTop、clientLeftoffsetWidth、offsetHeight、offsetTop、offsetLeftscrollWidth、scrollHeight、scrollTop、scrollLeftscrollIntoView()、scrollIntoViewIfNeeded()、getComputedStyle()、
getBoundingClientRect()、scrollTo()

CSS

避免使用 table 布局。
尽可能在 DOM 树的最末端改变 class。
避免设置多层内联样式。
将动画效果应用到 position 属性为 absolute 或 fixed 的元素上。
避免使用 CSS 表达式（例如：calc()）。

Javascript

避免频繁操作样式，最好一次性重写 style 属性，或者将样式列表定义为 class 并一次性更改 class 属性。

// 优化前
const el = document.getElementById('test');
el.style.borderLeft = '1px';
el.style.borderRight = '2px';
el.style.padding = '5px';
// 优化后,一次性修改样式，这样可以将三次重排减少到一次重排
const el = document.getElementById('test');
el.style.cssText += '; border-left: 1px ;border-right: 2px; padding: 5px;'

避免频繁操作 DOM，创建一个 documentFragment，在它上面应用所有 DOM 操作，最后再把它添加到文档中。
也可以先为元素设置 display: none，操作结束后再把它显示出来。因为在 display 属性为 none 的元素上进行的 DOM 操作不会引发回流和重绘。
避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。

图片懒加载

图片懒加载在一些图片密集型的网站中运用比较多，通过图片懒加载可以让一些不可视的图片不去加载，避免一次性加载过多的图片导致请求阻塞（浏览器一般对同一域名下的并发请求的连接数有限制），这样就可以提高网站的加载速度，提高用户体验。

事件委托

事件委托其实就是利用JS事件冒泡机制把原本需要绑定在子元素的响应事件（click、keydown……）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

优点：

1. 大量减少内存占用，减少事件注册。
2. 新增元素实现动态绑定事件

渲染完成后的页面交互优化：

防抖（debounce）/节流（throttle）

节流函数：只允许一个函数在N秒内执行一次。滚动条调用接口时，可以用节流throttle等优化方式，减少http请求；

VUE

引入生产环境的 Vue 文件

使用单文件组件预编译模板

提取组件的 CSS 到单独到文件

利用Object.freeze()提升性能

扁平化 Store 数据结构

避免持久化 Store 数据带来的性能问题

当你有让 Vue App 离线可用，或者有接口出错时候进行灾备的需求的时候，你可能会选择把 Store 数据进行持久化，这个时候需要注意以下几个方面：

持久化时写入数据的性能问题

Vue 社区中比较流行的 vuex-persistedstate，利用了 store 的 subscribe 机制，来订阅 Store 数据的 mutation，如果发生了变化，就会写入 storage 中，默认用的是 localstorage 作为持久化存储。

也就是说默认情况下每次 commit 都会向 localstorage 写入数据，localstorage 写入是同步的，而且存在不小的性能开销，如果你想打造 60fps 的应用，就必须避免频繁写入持久化数据。

我们应该尽量减少直接写入 Storage 的频率：

 多次写入操作合并为一次，比如采用函数节流或者将数据先缓存在内存中，最后在一并写入
* 只有在必要的时候才写入，比如只有关心的模块的数据发生变化的时候才写入

优化无限列表性能

通过组件懒加载优化超长应用内容初始渲染性能

Vue 应用加载性能优化建议

利用服务端渲染（SSR）和预渲染（Prerender）来优化加载性能

其他方面优化补充

webpack模块打包和JavaScript 压缩（如gzip压缩）
利用CDN
按需加载资源
在使用 DOM 操作库时用上 array-ids
缓存优化
避免重定向
启用 HTTP/2
应用性能分析
使用负载均衡方案
为了更快的启动时间考虑一下同构
使用索引加速数据库查询
使用更快的转译方案
避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染
用于未来的一个建议：使用 service workers + 流
图片编码优化，尽量使用svg和字体图标

跨域解决方案

1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域

前端面试