前端总结大全

待我称王封你为后i 2023-09-30 08:14 23阅读 0赞

### 记住 88 条精简前端面试题，让面试成为享受 ###

*   *  前言
     *  HTML&CSS
     *  JavaScript
     *  VUE2.x
     *  VUE3.x
     *  TypeScript
     *  React
     *  微信小程序
     *  uniapp
     *  网络
     *  性能相关
     *  项目相关
     *  浏览器
     *  工具
     *  其它

## 前言 ##

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

## HTML&CSS ##

--------------------

*  [盒模型][Link 1]、[BFC][]、 [清除浮动][Link 2]；
 *  [postiton定位5个值  
    ][postiton_5_]
 *  [水平/垂直居中][Link 3]、 [两/三栏布局(圣杯双飞翼)][Link 4]、[flex布局][flex]；
 *  [常见的块级/行内/空元素][Link 5]、[CSS Hack][]、[src与href的区别][src_href]、[link与@import区别][link_import]
 *  [css3/H5新特性][css3_H5]
 *  [浏览器兼容性问题][Link 6]

## JavaScript ##

--------------------

**js中的三座大山:**

1.  [原型与原型链][Link 7]
2.  [作用域][Link 8]  
    [闭包、this指针][this]  
    [垃圾回收和内存泄漏][Link 9]
3.  [异步和单线宏任务微任务][Link 10]

**js基础**

*  [数据类型][Link 11] 、[手写深拷贝][Link 12]、[类型判断][Link 13]
 *  [数组方法][Link 14]、[数组去重][Link 15]、 [数组排序][Link 16]、[数组扁平化][Link 17]、[字符串][Link 18]
 *  [深拷贝浅拷贝][Link 19]

**高频面试题**

*  [for···in和for···of的区别  
    ][for_in_for_of_]
 *  [null和undefined区别][null_undefined]
 *  [this, call, apply, bind][this_ call_ apply_ bind] , [继承][Link 20] 、[设计模式][Link 21]

**DOM**

*  [js操作DOM][js_DOM]

**BOM**

*  [js操作BOM][js_BOM]

**事件**

1.  [事件绑定、事件流、自定义事件  
    ][Link 22]
2.  [事件委托][Link 23]
3.  [封装一个通用的事件绑定函数][Link 24]

**Ajax**

*  [原生ajax创建步骤][ajax]、[jsonp的原理][jsonp]

**存储**

*  [cookie、localStorage、sessionStorage][cookie_localStorage_sessionStorage]

**Es6**

*  [let, var, const 区别][let_ var_ const]、 [es6解构赋值  
    ][es6_]、[箭头函数与普通函数区别][Link 25]、[class与class继承][class_class]
 *  [promise使用及实现][promise]、[async,await][async_await]、[generator函数  
    ][generator_]
 *  [Es6中新的数据类型symbol][Es6_symbol]、[Es6中Set、WeakSet、Map、WeakMap数据结构][Es6_Set_WeakSet_Map_WeakMap]
 *  [es6模块规范][es6]

## VUE2.x ##

*  [更多vue基础内容(最全)][vue]
 *  [为何组件的data必须是一个函数][data]、[vue常用的指令][vue 1]、 [v-if/v-show区别][v-if_v-show]、[vue生命周期][vue 2]
 *  [vue数据双向绑定原理][vue 3]、 [Vue 虚拟 Dom][Vue _ Dom] 、[vue diff算法][vue diff]
 *  [vue组件通信][vue 4]、[vuex][]、[watch深度监听][watch]
 *  [vue中Computed、Methods、Watch区别  
    ][vue_Computed_Methods_Watch_]
 *  [mvvm和mvc][mvvm_mvc]
 *  [vue中的事件修饰符][vue 5]、
 *  [vue自定义组件][vue 6]、[vue自定义指令][vue 7]、[自定义指令使用场景][Link 26]、[vue自定义过滤器filter][vue_filter]、
 *  [vue-router][]、[vue-router原理][vue-router 1]、[vue脚手架本地开发跨域请求设置][vue 8]
 *  [keep-alive][]
 *  [v-for中为何要使用key][v-for_key]
 *  [slot][]、[vue中的prop验证][vue_prop]
 *  [vue中$nextTick()作用][vue_nextTick]
 *  [vue修改数据页面不更新][vue 9]
 *  [vue2和vue3的区别][vue2_vue3]
 *  [vue中的provide和inject (依赖注入)][vue_provide_inject]
 *  [vue动画transition][vue_transition]
 *  [vue中mixins(混入)的使用  
    ][vue_mixins_]
 *  [vue项目如何部署到nginx服务器  
    ][vue_nginx_]

## VUE3.x ##

*  [vue3语法合成型API(Composition API)][vue3_API_Composition API]
 *  [vue2与vue3双向数据绑定的区别][vue2_vue3 1]
 *  vue3脚手架使用
 *  [Vue3 ElementPlus Admin后台管理系统（二次开发）][Vue3 ElementPlus Admin]

## TypeScript ##

*  [TypeScript  
    ][TypeScript]
 *  [TypeScript参考文档][TypeScript 1]

## React ##

*  更新中…

## 微信小程序 ##

*  [微信小程序双向数据绑定,父子传参][Link 27]
 *  [小程序自定义组件封装][Link 28]
 *  [使用promise封装wx.request()][promise_wx.request]
 *  [小程序生命周期钩子函数][Link 29]
 *  [微信小程序上拉加载更多(scroll-view组件)][scroll-view]
 *  [小程序页面跳转有几种方式][Link 30]
 *  [微信小程序本地存储][Link 31]
 *  [小程序如何使用vant  
    ][vant]
 *  [小程序中的吸顶效果（小程序操作DOM）][DOM]
 *  [小程序返回到顶部][Link 32]
 *  [微信小程序授权登陆][Link 33]
 *  [小程序微信支付流程  
    ][Link 34]
 *  [小程序发布流程][Link 35]

## uniapp ##

*  [uni-app教程一（项目创建、tabbar配置、运行）  
    ][uni-app_tabbar_]
 *  [uni-app教程二（微信开发者工具运行项目，icon字体使用，组件）  
    ][uni-app_icon_]
 *  [uni-app教程三（全局模块util.js、全局变量、vuex）  
    ][uni-app_util.js_vuex_]
 *  [uni-app教程四（uni.requet()、网络模块封装）  
    ][uni-app_uni.requet_]
 *  [uni-app教程五（页面跳转、本地数据缓存）  
    ][uni-app_]
 *  [uni-app教程六（常用事件、生命周期）  
    ][uni-app_ 1]
 *  [uni-app教程七（下拉刷新、上拉加载）  
    ][uni-app_ 2]  
    `待更新....`

## 网络 ##

*  [常见的http状态码][http]、[HTTP和HTTPS区别][HTTP_HTTPS]、
 *  [浏览器从输入url到页面加载完成发生了什么][url]；
 *  [前端安全（XSS、CSRF、sql注入)][XSS_CSRF_sql]
 *  TCP连接(三次握手, 四次挥手)
 *  [get与post区别][get_post]

## 性能相关 ##

*  [vue项目最强优化][vue 10]
 *  [图片优化][Link 36]
 *  [图片懒加载][Link 37]
 *  [路由懒加载][Link 38]
 *  [节流防抖][Link 39]
 *  [vue-cli4打包webapck优化][vue-cli4_webapck]
 *  [vue项目首页优化][vue 11]
 *  [vue开发seo优化][vue_seo]

## 项目相关 ##

*  [vue-cli4+vant+rem+sass+vuex+axios封装+webpack搭建移动端项目][vue-cli4_vant_rem_sass_vuex_axios_webpack]
 *  [axios拦截与api接口封装][axios_api]
 *  路由拦截
 *  [支付问题][Link 40]
 *  [登陆鉴权][Link 41]
 *  [websocket实现客服聊天功能][websocket]
 *  第三方登录
 *  \-[vue全家桶+Echarts+百度地图，搭建数据可视化系统  
    ][vue_Echarts_]
 *  [Vue+Element后台管理系统导入导出Excel  
    ][Vue_Element_Excel]
 *  [js实现放大镜功能][js]
 *  [element-ui自定义表单校验规则及常用表单校验  
    ][element-ui_]
 *  [el-form实现表单和图片手动上传和校验][el-form]
 *  [require与import的区别和使用(CommonJS规范和es6规范)][es6]
 *  [app分类WebApp、HybridApp、 NativeApp][app_WebApp_HybridApp_ NativeApp]，
 *  [webapp开发框架][webapp]
 *  [使用Hbuilder打包前端网站为WebApp(Android,ios应用)  
    ][Hbuilder_WebApp_Android_ios_]
 *  [vue项目如何打包以及如何变成android、ios应用程序  
    ][vue_android_ios_]
 *  [什么是RESTful API？  
    ][RESTful API_]

## 浏览器 ##

--------------------

*  [浏览器内核][Link 42]
 *  [浏览器如何渲染UI][UI]
 *  [DOM Tree如何构建][DOM Tree]
 *  [浏览器重绘与重排][Link 43]
 *  [浏览器同源策略][Link 44]
 *  [如何实现跨域][Link 45]

## 工具 ##

*  [git&gitHub  
    ][git_gitHub]
 *  [Vue调试工具vue-devtools安装][Vue_vue-devtools]
 *  [Chrome 性能调试工具][Chrome]

## 其它 ##

*  [推荐一款画流程图工具processon][processon]好工具一定要分享给最好的朋友

[Link 1]: https://blog.csdn.net/weixin_43638968/article/details/108246260
[BFC]: https://blog.csdn.net/weixin_43638968/article/details/109164600
[Link 2]: https://blog.csdn.net/weixin_43638968/article/details/107617275
[postiton_5_]: https://blog.csdn.net/weixin_43638968/article/details/117786551
[Link 3]: https://blog.csdn.net/weixin_43638968/article/details/103768036
[Link 4]: https://blog.csdn.net/weixin_43638968/article/details/107919835
[flex]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
[Link 5]: https://blog.csdn.net/weixin_43638968/article/details/109175244
[CSS Hack]: https://blog.csdn.net/weixin_43638968/article/details/108983068
[src_href]: https://blog.csdn.net/weixin_43638968/article/details/108982757
[link_import]: https://blog.csdn.net/weixin_43638968/article/details/109175553
[css3_H5]: https://blog.csdn.net/weixin_43638968/article/details/109194480
[Link 6]: https://blog.csdn.net/weixin_43638968/article/details/109177674
[Link 7]: https://blog.csdn.net/weixin_43638968/article/details/107615232
[Link 8]: https://blog.csdn.net/weixin_43638968/article/details/108981839
[this]: https://blog.csdn.net/weixin_43638968/article/details/105232090
[Link 9]: https://blog.csdn.net/weixin_43638968/article/details/109492727
[Link 10]: https://blog.csdn.net/weixin_43638968/article/details/108941287
[Link 11]: https://blog.csdn.net/weixin_43638968/article/details/107588961
[Link 12]: https://blog.csdn.net/weixin_43638968/article/details/109243067
[Link 13]: https://blog.csdn.net/weixin_43638968/article/details/103733600
[Link 14]: https://blog.csdn.net/weixin_43638968/article/details/108515297
[Link 15]: https://blog.csdn.net/weixin_43638968/article/details/107519628
[Link 16]: https://blog.csdn.net/weixin_43638968/article/details/108500572
[Link 17]: https://blog.csdn.net/weixin_43638968/article/details/108515003
[Link 18]: https://blog.csdn.net/weixin_43638968/article/details/112960668
[Link 19]: https://blog.csdn.net/weixin_43638968/article/details/103694753
[for_in_for_of_]: https://blog.csdn.net/weixin_43638968/article/details/109291957
[null_undefined]: https://blog.csdn.net/weixin_43638968/article/details/109292296
[this_ call_ apply_ bind]: https://blog.csdn.net/weixin_43638968/article/details/107523660
[Link 20]: https://blog.csdn.net/weixin_43638968/article/details/107589371
[Link 21]: https://blog.csdn.net/weixin_43638968/article/details/108573273
[js_DOM]: https://blog.csdn.net/weixin_43638968/article/details/109247181
[js_BOM]: https://blog.csdn.net/weixin_43638968/article/details/109259167
[Link 22]: https://blog.csdn.net/weixin_43638968/article/details/109279582
[Link 23]: https://blog.csdn.net/weixin_43638968/article/details/108518584
[Link 24]: https://blog.csdn.net/weixin_43638968/article/details/109281347
[ajax]: https://blog.csdn.net/weixin_43638968/article/details/106048461
[jsonp]: https://blog.csdn.net/weixin_43638968/article/details/105497709
[cookie_localStorage_sessionStorage]: https://blog.csdn.net/weixin_43638968/article/details/109280784
[let_ var_ const]: https://blog.csdn.net/weixin_43638968/article/details/107619416
[es6_]: https://blog.csdn.net/weixin_43638968/article/details/109674684
[Link 25]: https://blog.csdn.net/weixin_43638968/article/details/108869205
[class_class]: https://blog.csdn.net/weixin_43638968/article/details/109999897
[promise]: https://blog.csdn.net/weixin_43638968/article/details/105258289
[async_await]: https://blog.csdn.net/weixin_43638968/article/details/105475789
[generator_]: https://blog.csdn.net/weixin_43638968/article/details/105475881
[Es6_symbol]: https://blog.csdn.net/weixin_43638968/article/details/108939840
[Es6_Set_WeakSet_Map_WeakMap]: https://blog.csdn.net/weixin_43638968/article/details/108939104
[es6]: https://blog.csdn.net/weixin_43638968/article/details/108871430
[vue]: https://blog.csdn.net/weixin_43638968/article/details/112691490
[data]: https://blog.csdn.net/weixin_43638968/article/details/109282750
[vue 1]: https://blog.csdn.net/weixin_43638968/article/details/103575257
[v-if_v-show]: https://blog.csdn.net/weixin_43638968/article/details/108606900
[vue 2]: https://blog.csdn.net/weixin_43638968/article/details/107906809
[vue 3]: https://blog.csdn.net/weixin_43638968/article/details/103820865
[Vue _ Dom]: https://blog.csdn.net/weixin_43638968/article/details/107907928
[vue diff]: https://blog.csdn.net/weixin_43638968/article/details/112686317
[vue 4]: https://blog.csdn.net/weixin_43638968/article/details/103637735
[vuex]: https://blog.csdn.net/weixin_43638968/article/details/112170229
[watch]: https://blog.csdn.net/weixin_43638968/article/details/108861261
[vue_Computed_Methods_Watch_]: https://blog.csdn.net/weixin_43638968/article/details/103593954
[mvvm_mvc]: https://blog.csdn.net/weixin_43638968/article/details/103972523
[vue 5]: https://blog.csdn.net/weixin_43638968/article/details/108635864ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161775671516780274178500%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=161775671516780274178500&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_v29-1-108635864.nonecase&utm_term=%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6
[vue 6]: https://blog.csdn.net/weixin_43638968/article/details/108623317
[vue 7]: https://blog.csdn.net/weixin_43638968/article/details/103603393
[Link 26]: https://blog.csdn.net/weixin_43638968/article/details/103611397
[vue_filter]: https://blog.csdn.net/weixin_43638968/article/details/103599847
[vue-router]: https://blog.csdn.net/weixin_43638968/article/details/103655244
[vue-router 1]: https://blog.csdn.net/weixin_43638968/article/details/109303363
[vue 8]: https://blog.csdn.net/weixin_43638968/article/details/103679993
[keep-alive]: https://blog.csdn.net/weixin_43638968/article/details/104599113
[v-for_key]: https://blog.csdn.net/weixin_43638968/article/details/109457277
[slot]: https://blog.csdn.net/weixin_43638968/article/details/103923899
[vue_prop]: https://blog.csdn.net/weixin_43638968/article/details/103762637
[vue_nextTick]: https://blog.csdn.net/weixin_43638968/article/details/108314554
[vue 9]: https://blog.csdn.net/weixin_43638968/article/details/103910257
[vue2_vue3]: https://blog.csdn.net/weixin_43638968/article/details/108800361
[vue_provide_inject]: https://blog.csdn.net/weixin_43638968/article/details/108661661
[vue_transition]: https://blog.csdn.net/weixin_43638968/article/details/117510582
[vue_mixins_]: https://blog.csdn.net/weixin_43638968/article/details/108665092
[vue_nginx_]: https://blog.csdn.net/weixin_43638968/article/details/109636044
[vue3_API_Composition API]: https://blog.csdn.net/weixin_43638968/article/details/114260999
[vue2_vue3 1]: https://blog.csdn.net/weixin_43638968/article/details/118329835
[Vue3 ElementPlus Admin]: https://blog.csdn.net/weixin_43638968/article/details/117511580
[TypeScript]: https://blog.csdn.net/weixin_43638968/article/details/121517688
[TypeScript 1]: http://ts.xcatliu.com/introduction/what-is-typescript.html
[Link 27]: https://blog.csdn.net/weixin_43638968/article/details/111384261
[Link 28]: https://blog.csdn.net/weixin_43638968/article/details/108773572
[promise_wx.request]: https://blog.csdn.net/weixin_43638968/article/details/108732834
[Link 29]: https://blog.csdn.net/weixin_43638968/article/details/108777593
[scroll-view]: https://blog.csdn.net/weixin_43638968/article/details/111401854
[Link 30]: https://blog.csdn.net/weixin_43638968/article/details/108863744
[Link 31]: https://blog.csdn.net/weixin_43638968/article/details/108864294
[vant]: https://blog.csdn.net/weixin_43638968/article/details/108868421
[DOM]: https://blog.csdn.net/weixin_43638968/article/details/111496883
[Link 32]: https://blog.csdn.net/weixin_43638968/article/details/111493015
[Link 33]: https://blog.csdn.net/weixin_43638968/article/details/108925483
[Link 34]: https://blog.csdn.net/weixin_43638968/article/details/109018487
[Link 35]: https://blog.csdn.net/weixin_43638968/article/details/111665057
[uni-app_tabbar_]: https://blog.csdn.net/weixin_43638968/article/details/108948784
[uni-app_icon_]: https://blog.csdn.net/weixin_43638968/article/details/108950025
[uni-app_util.js_vuex_]: https://blog.csdn.net/weixin_43638968/article/details/109023307
[uni-app_uni.requet_]: https://blog.csdn.net/weixin_43638968/article/details/109024311
[uni-app_]: https://blog.csdn.net/weixin_43638968/article/details/109049827
[uni-app_ 1]: https://blog.csdn.net/weixin_43638968/article/details/109052524
[uni-app_ 2]: https://blog.csdn.net/weixin_43638968/article/details/109056821
[http]: https://blog.csdn.net/weixin_43638968/article/details/108636675
[HTTP_HTTPS]: https://blog.csdn.net/weixin_43638968/article/details/108596822
[url]: https://blog.csdn.net/weixin_43638968/article/details/103815159
[XSS_CSRF_sql]: https://blog.csdn.net/weixin_43638968/article/details/109292659
[get_post]: https://blog.csdn.net/weixin_43638968/article/details/109335970
[vue 10]: https://blog.csdn.net/weixin_43638968/article/details/109100958
[Link 36]: https://blog.csdn.net/weixin_43638968/article/details/108381411
[Link 37]: https://blog.csdn.net/weixin_43638968/article/details/103388909
[Link 38]: https://blog.csdn.net/weixin_43638968/article/details/109093613
[Link 39]: https://blog.csdn.net/weixin_43638968/article/details/107567601
[vue-cli4_webapck]: https://blog.csdn.net/weixin_43638968/article/details/109093199
[vue 11]: https://blog.csdn.net/weixin_43638968/article/details/109091552
[vue_seo]: https://blog.csdn.net/weixin_43638968/article/details/109091105
[vue-cli4_vant_rem_sass_vuex_axios_webpack]: https://blog.csdn.net/weixin_43638968/article/details/111689711ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162977205716780255215998%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=162977205716780255215998&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_v29-5-111689711.pc_v2_rank_blog_default&utm_term=h5&spm=1018.2226.3001.4450
[axios_api]: https://blog.csdn.net/weixin_43638968/article/details/108580321
[Link 40]: https://blog.csdn.net/weixin_43638968/article/details/108476420
[Link 41]: https://blog.csdn.net/weixin_43638968/article/details/108642482
[websocket]: https://blog.csdn.net/weixin_43638968/article/details/105716211
[vue_Echarts_]: https://blog.csdn.net/weixin_43638968/article/details/108661364
[Vue_Element_Excel]: https://blog.csdn.net/weixin_43638968/article/details/108661442
[js]: https://blog.csdn.net/weixin_43638968/article/details/108723840
[element-ui_]: https://blog.csdn.net/weixin_43638968/article/details/108870205
[el-form]: https://blog.csdn.net/weixin_43638968/article/details/108869823
[app_WebApp_HybridApp_ NativeApp]: https://blog.csdn.net/weixin_43638968/article/details/108937621
[webapp]: https://blog.csdn.net/weixin_43638968/article/details/108937699
[Hbuilder_WebApp_Android_ios_]: https://blog.csdn.net/weixin_43638968/article/details/108959964
[vue_android_ios_]: https://blog.csdn.net/weixin_43638968/article/details/109277690
[RESTful API_]: https://blog.csdn.net/weixin_43638968/article/details/109000295
[Link 42]: https://blog.csdn.net/weixin_43638968/article/details/108282145
[UI]: https://blog.csdn.net/weixin_43638968/article/details/108282368
[DOM Tree]: https://blog.csdn.net/weixin_43638968/article/details/108282569
[Link 43]: https://blog.csdn.net/weixin_43638968/article/details/108282631
[Link 44]: https://blog.csdn.net/weixin_43638968/article/details/108282907
[Link 45]: https://blog.csdn.net/weixin_43638968/article/details/108283066
[git_gitHub]: https://blog.csdn.net/weixin_43638968/article/details/109361069
[Vue_vue-devtools]: https://blog.csdn.net/weixin_43638968/article/details/121948181
[Chrome]: https://blog.csdn.net/weixin_43638968/article/details/109035841
[processon]: https://www.processon.com/i/5f69591107912949af446653