前端技术知识体系

xss跨站点脚本攻击

csrf跨站点伪造

sql注入

安全性

http/https原理与区别

http协议传输过程

DNS解析

网络基础

研发、构建、部署、性能优化、规范化

对前端工程化的理解

前端工程化

运用的实例

nodejs

是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术

函数柯里化

排序

递归

算法

vuejs3

微前端

最新技术研究

代码规范

git规范

开发规范

开发流程

技术规划 | 架构

开发任务分解分配

技术评审

代码审核

风险识别

技术层面

目的：达成组织目标，实现组织利益最大化

向上 | 向下 | 团队内部 | 团队之间 | 个人

管理层面

技术主管的工作职责

结合项目谈技术

不要讲太多，不要过渡引申

面试原则

你好，我叫xxx，11年毕业后一直从事前端开发工作，至今有10年的开发经验。我在xxxx工作了四年，作为技术骨干，参与并主导打造xxx项目，该项目前期采用jquery+iframe框架，后来业务需要对架构升级，引入了vuejs，并主导了对整体性能的优化工作；之后进入xxx，参与公司战略项目群xxx的前端架构与开发，用到的技术以vuejs为主。我有多年的技术团队管理经验，具备跨团队协调能力，沟通能力强，能从事技术开发工作，也敢于挑战高难度任务。今天面试贵司岗位，有信心能把工作做好。谢谢您。

自我介绍

1、基本概念：作用域(链)、面向对象、继承，promise、async/await

2、es6

主代码块 > setImmediate > MessageChannel > setTimeout / setInterval requestAnimationFrame

宏任务

process.nextTick > Promise.then > MutationObserver

微任务

浏览器js

nodejs环境

3、eventLoop事件循环

BFC

flex

居中布局、三格布局的几种方式

定宽定高

不定宽高

上下左右居中

多端布局适配的方式

4、布局

回流

重绘

5、浏览器渲染过程

html/js/css基础

初始化

生成虚拟dom

挂载

实例化过程

8个生命周期函数

生命周期

数据双向绑定

底层逻辑

props/emit

event-bus

attrs

refs

parent/children

vuex

expires有效期；max-age最大有效时间

强缓存

last-modify/if-modify-since；etag/if-no-match

协商缓存

浏览器缓存

组件传值

方式

history

路由模式

路由

子主题 3

应用

监听组件销毁

应用虚拟dom原理设计制作低代码平台

实例

理解mvvm原理

响应式数据原理

2.0：监听改变数组的方法来实现对元素变化的监听，直接改变数组存在的元素无法监听，原因是性能与收益不成正比。

3.0：通过proxy来监听很好的回避了2.0的问题，为什么？

vue中如何检测数组变化

为何vuejs采用异步渲染

nextTick实现原理

vuejs生命周期

ajax放在哪个生命周期中

何时需要使用beforeDestroy

vue父子组件生命周期调用顺序

vue中computed的特点

watch中deep:true是如何实现的

vuejs中事件绑定原理

v-html会导致哪些问题

v-if与v-show的区别

v-for与v-show为何不能连用

v-model实现原理，如何实现自定义v-model

组建中的data为什么是一个函数

vuejs组件如何通信

什么是作用域插槽

用vnode来描述一个dom结构

diff算法的时间复杂度

简述vue中diff算法原理

v-for中为什么要用key

简述组件渲染和更新过程

vue中模板编译原理

vuejs中常见性能优化

vue中相同逻辑如何抽离

为什么要用异步组件

对keep-alive的了解

实现hash路由和history路由

vue-router中导航守卫有哪些

action和mutation的区别

简述vuex工作原理

Vue3采用了Type Script来编写

支持 Composition API

Vue3中响应式数据原理改成proxy

vdom的对比算法更新，只更新vdom的绑定了动态数据的部分

vue3.0有哪些改进

常见问题

vuejs框架

webpack与gulp区别

webpack原理与流程

插件配置与开发

组件配置与开发

webpack配置

webpack打包

一般处理方式

nuxt

好处

原理

ssr服务端渲染

性能优化的技术点

性能测试工具

业务拆分

引入vuejs

1、架构层面升级

2、dns缓存，部署静态资源服务器

3、减少请求次数：文件合并

4、缓存、cookie优化、文件压缩（accept-encoding：gzip）

5、异步加载、懒加载

6、js/css位置调整、减少重绘/回流

7、服务端渲染

8、webpack层面：图片压缩、提取公共代码、优化sourcemap

万家云诊所的性能优化

性能优化实际案例

性能优化

苹果手机，input弹窗导致输入框上顶

兼容性案例

媒体查询

flex弹性布局、响应式布局

viewport缩放

rem相对单位

//iPhone 6尺寸作为设计稿基准$vm_base:375;@function vw($px){\t@return ($px/375)*100vw;}设置相应的vw之后就可以使用vw作为css单位，如：.title{\tfont-size:vw(16);}

vw/vh方案+saas预处理

多端适配方法

兼容性与多端适配

前端面试知识体系