前端总结大全，前端开发就业培训

专业技能

一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

• HTML+CSS

• JavaScript

• 前端框架

• 前端性能优化

• 前端监控

• 模块化+项目构建

• 代码管理

• 信息安全

• 网络协议

• 浏览器

• 算法与数据结构

• 团队管理

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。

其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等

由于文章篇幅有限，仅展示部分内容

开源分享：docs.qq.com/doc/DSmRnRG…

• 微信小程序

• uniapp

• 网络

• 性能相关

• 项目相关

• 浏览器

• 工具

• 其它

前言

---

背的最少、说的最好。你的面试我帮你，本博客持续优化改进，请关注收藏。

HTML&CSS

---

---

• 盒模型、BFC、 清除浮动；

• [postiton定位5个值

]( )

• 水平/垂直居中、 两/三栏布局(圣杯双飞翼)、flex布局；

• 常见的块级/行内/空元素、CSS Hack、src与href的区别、link与@import区别

• css3/H5新特性

• 浏览器兼容性问题

JavaScript

---

---

js中的三座大山:

1. 原型与原型链

2. 作用域

闭包、this指针

垃圾回收和内存泄漏

3. 异步和单线宏任务微任务

js基础

• 数据类型 、手写深拷贝、类型判断

• 数组方法、数组去重、 数组排序、数组扁平化、字符串

• 深拷贝浅拷贝

高频面试题

• [for···in和for···of的区别

]( )

• null和undefined区别

• this, call, apply, bind , 继承 、设计模式

DOM

• js操作DOM

BOM

• js操作BOM

事件

1. [事件绑定、事件流、自定义事件

]( )

2. 事件委托

3. 封装一个通用的事件绑定函数

Ajax

• 原生ajax创建步骤、jsonp的原理

存储

• cookie、localStorage、sessionStorage

Es6

• let, var, const 区别、 [es6解构赋值

]( )、箭头函数与普通函数区别、class与class继承

• promise使用及实现、async,await、[generator函数

]( )

• Es6中新的数据类型symbol、Es6中Set、WeakSet、Map、WeakMap数据结构

• es6模块规范

VUE2.x

---

• 更多vue基础内容(最全)

• 为何组件的data必须是一个函数、vue常用的指令、 v-if/v-show区别、vue生命周期

• vue数据双向绑定原理、 Vue 虚拟 Dom 、vue diff算法

• vue组件通信、vuex、watch深度监听

• [vue中Computed、Methods、Watch区别

]( )

• mvvm和mvc

• vue中的事件修饰符、

• vue自定义组件、vue自定义指令、自定义指令使用场景、vue自定义过滤器filter、

• vue-router、vue-router原理、vue脚手架本地开发跨域请求设置

• keep-alive

• v-for中为何要使用key

• slot、vue中的prop验证

• vue中$nextTick()作用

• vue修改数据页面不更新

• vue2和vue3的区别

• vue中的provide和inject (依赖注入)

• vue动画transition

• [vue中mixins(混入)的使用

]( )

• [vue项目如何部署到nginx服务器

]( )

VUE3.x

---

• vue3语法合成型API(Composition API)

• vue2与vue3双向数据绑定的区别

• vue3脚手架使用

• Vue3 ElementPlus Admin后台管理系统（二次开发）

TypeScript

---

• [TypeScript

]( )

• TypeScript参考文档

React

---

• 更新中…

微信小程序

---

• 微信小程序双向数据绑定,父子传参

• 小程序自定义组件封装

• 使用promise封装wx.request()

• 小程序生命周期钩子函数

• 微信小程序上拉加载更多(scroll-view组件)

• 小程序页面跳转有几种方式

• 微信小程序本地存储

• [小程序如何使用vant

]( )

• 小程序中的吸顶效果（小程序操作DOM）

• 小程序返回到顶部

• 微信小程序授权登陆

• [小程序微信支付流程

]( )

• 小程序发布流程

uniapp

---

• [uni-app教程一（项目创建、tabbar配置、运行）

]( )

• [uni-app教程二（微信开发者工具运行项目，icon字体使用，组件）

]( )

• [uni-app教程三（全局模块util.js、全局变量、vuex）

]( )

• [uni-app教程四（uni.requet()、网络模块封装）

]( )

• [uni-app教程五（页面跳转、本地数据缓存）

]( )

• [uni-app教程六（常用事件、生命周期）

]( )

• [uni-app教程七（下拉刷新、上拉加载）

]( )

待更新....

网络

---

• 常见的http状态码、HTTP和HTTPS区别、

• 浏览器从输入url到页面加载完成发生了什么；

• 前端安全（XSS、CSRF、sql注入)

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】