前端技术知识体系
2022-05-28 19:32:38 0 举报AI智能生成
前端面试知识体系
作者其他创作
大纲/内容
安全性
xss跨站点脚本攻击
csrf跨站点伪造
sql注入
网络基础
http/https原理与区别
http协议传输过程
DNS解析
前端工程化
对前端工程化的理解
研发、构建、部署、性能优化、规范化
nodejs
运用的实例
nodejs
算法
函数柯里化
是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术
排序
递归
最新技术研究
vuejs3
微前端
技术主管的工作职责
技术层面
开发规范
代码规范
git规范
开发流程
技术规划 | 架构
开发任务分解分配
技术评审
代码审核
风险识别
管理层面
目的：达成组织目标，实现组织利益最大化
向上 | 向下 | 团队内部 | 团队之间 | 个人
面试原则
结合项目谈技术
不要讲太多，不要过渡引申
自我介绍
你好，我叫xxx，11年毕业后一直从事前端开发工作，至今有10年的开发经验。我在xxxx工作了四年，作为技术骨干，参与并主导打造xxx项目，该项目前期采用jquery+iframe框架，后来业务需要对架构升级，引入了vuejs，并主导了对整体性能的优化工作；之后进入xxx，参与公司战略项目群xxx的前端架构与开发，用到的技术以vuejs为主。我有多年的技术团队管理经验，具备跨团队协调能力，沟通能力强，能从事技术开发工作，也敢于挑战高难度任务。今天面试贵司岗位，有信心能把工作做好。谢谢您。
html/js/css基础
1、基本概念：作用域(链)、面向对象、继承，promise、async/await
2、es6
3、eventLoop事件循环
浏览器js
宏任务
主代码块 > setImmediate > MessageChannel > setTimeout / setInterval requestAnimationFrame
微任务
process.nextTick > Promise.then > MutationObserver
nodejs环境
4、布局
居中布局、三格布局的几种方式
BFC
flex
上下左右居中
定宽定高
不定宽高
多端布局适配的方式
5、浏览器渲染过程
回流
重绘
vuejs框架
底层逻辑
实例化过程
初始化
生成虚拟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原理
响应式数据原理
vue中如何检测数组变化
2.0：监听改变数组的方法来实现对元素变化的监听，直接改变数组存在的元素无法监听，原因是性能与收益不成正比。
3.0：通过proxy来监听很好的回避了2.0的问题，为什么？
为何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.0有哪些改进
Vue3采用了Type Script来编写
支持 Composition API
Vue3中响应式数据原理改成proxy
vdom的对比算法更新，只更新vdom的绑定了动态数据的部分
webpack打包
webpack与gulp区别
webpack原理与流程
webpack配置
插件配置与开发
组件配置与开发
性能优化
性能优化的技术点
一般处理方式
ssr服务端渲染
方式
nuxt
好处
原理
性能测试工具
性能优化实际案例
万家云诊所的性能优化
1、架构层面升级
业务拆分
引入vuejs
2、dns缓存，部署静态资源服务器
3、减少请求次数：文件合并
4、缓存、cookie优化、文件压缩（accept-encoding：gzip）
5、异步加载、懒加载
6、js/css位置调整、减少重绘/回流
7、服务端渲染
8、webpack层面：图片压缩、提取公共代码、优化sourcemap
兼容性与多端适配
兼容性案例
苹果手机，input弹窗导致输入框上顶
多端适配方法
媒体查询
flex弹性布局、响应式布局
viewport缩放
rem相对单位
vw/vh方案+saas预处理
//iPhone 6尺寸作为设计稿基准
$vm_base:375;
@function vw($px){
@return ($px/375)*100vw;
}
设置相应的vw之后就可以使用vw作为css单位，如：
.title{
font-size:vw(16);
}
0 条评论
下一页
为你推荐
查看更多
