前端面试知识点目录整理

系统管理员 2022-02-16 12:32 424阅读 0赞

![1240][]

写在前面

金三银四，又到了一年一度的跳槽季，相信大家都在准备[自己的面试笔记][Link 1]，我也针对自己工作中所掌握或了解的一些东西做了一个目录总结，方便自己复习。详细内容会在之后一一对应地补充上去（有些在我的个人主页笔记中也有相关记录），这里暂且放一个我的面试知识点目录，大家有兴趣可以自己根据目录去扩展。欢迎在评论下方指点一二，看还有哪些没考虑到的，互相交流一哈...

基本功考察

1.关于Html

1、html语义[化标签的理解][Link 2]、结构化的理解；能否写出简洁的html结构；SEO优化。

2、h5中新增的属性，如自定义属性data、类名className等；新增表单元素；拖拽Drag。

3、h5中新增的API、修改的API、废弃的API稍作了解（离线存储、audio、video）。

2.关于CSS

1、CSS[选择器][Link 3]（三大特性）。

2、BFC机制。

3、盒模型。

4、CSS模块化开发（封装）；SCSS和LESS的使用。

5、屏幕适配以及页面自适应。

6、CSS3中新增的选择器。

7、CSS3中新增的属性，transform、trasition、animation等。

3.关于布局

1、标准文档流（padding + margin + 负margin）+ 浮动float + 定位 left + right + top + bottom。

2、百分比布局：px单位用%num代替，占父级元素的百分比。

3、flex弹性布局：主轴、辅助轴的几个属性。

4、grid栅格布局：使用框架中的类名来替代，本质上还是百分比布局。

4.关于JS基础

1、变量数据类型及检测：基本 + 引用。

2、运算符：算术 + 条件 + 逻辑 + 位 + 短路、隐式转换等。

3、条件、循环、异常处理if、switch()\{case xxx:\}、try、catch、finally、throw。

4、函数定义、调用方式（apply、call、直接调用）；传参：实参给形参赋值。

5、字符串、数组、对象常用API。

6、[正则表达式][Link 4]。

5.关于JS高级

1、作用域、作用域链、闭包。

2、原型、原型链、继承。

3、函数上下文、this指向。

4、js的运行机制、事件队列和循环。

5、Ajax原理、axios库。

6、同步、异步编程。

7、[jQuery源码][Link 3]学习。

6.关于浏览器

1、浏览器的构成和运行机制。

2、浏览器内核。

3、浏览器交互：BOM和DOM相关webApi、监听事件。

4、[浏览器缓存机制][Link 5]。

5、浏览器的渲染原理。

6、浏览器的安全性：跨域和攻击。

7.关于网络协议

1、HTTP协议。

2、cookie、session、token。

8.关于ES6语法

1、字符串、数组、对象扩展的api。

2、变量扩展：let、const解构赋值，块级作用域。

3、函数扩展：箭头函数默认参数、rest参数。

4、展开运算符、模板字符串。

5、set和map数据结构。

6、迭代器和生成器函数next和yield的理解。

7、proxy对象属性代理器：属性的读取（get）和设置（set）相关操作。

8、promise对象、异步编程的解决方案。

9、async + await：异步编程的终极方案promise + generator的语法糖。

10、class语法、构造函数的语法糖。

11、模块化编程export + import的导出和导入。

9.VUE基础

1、基本指令。

2、实例的属性和方法。

3、实例的生命周期。

4、组件基础：创建、注册、添加属性方法、套用等。

5、组件通信传值，父子、兄弟、跨级。

6、插槽slot等。

10.VUE高级

1、vue-router：搭建SPA

路由、组件的配置。

路由间的传值。

路由跳转。

路由的导航守卫。

记住在router.js和组件页面中的使用方式。

2、vuex：状态管理、数据仓库store

实例化仓库的5大属性的使用。

state、getters、mutations、actions、modules。

辅助函数mapState等，仓库中计算属性的映射、方便操作。

记住在store.js和组件中使用方式。

11.VUE深入、源码阅读

1、数据响应式原理。

2、virtual dom。

3、diff 算法。

4、nextTick等等。

工程能力考察

1.项目能力

1、vue-cli脚手架搭建和功能配置vue.config.js。

2、webpack的常用配置。

3、项目构建打包。

4、熟悉各类框架的文档。

5、UI框架：Bootstrap、MUI、Element-ui等。

6、常用的插件整理；整理一个自己插件库，封装自己的方法库、组件库。

7、常用的工具熟练度。

8、PC端和移动端开发注意事项。

9、经验总结：快速确定项目的技术选型。

10、坑点总结：项目遇到坑坑坑！

11、项目中的性能优化记录（都是细节点，多记录）。

12、需求文档的理解，可以结合项目流程图、UML图。

13、问题解决能力：bug定位调试、查找文档、寻求他人。

14、记录[习惯养成][Link 6]。

2.模块化、组件化开发能力

1、项目分类；各类文件整理、分类。

2、各类功能封装。

3、组件和功能模块的抽离、解耦、复用。

内功考察

1.面向对象的编程思想

1、类的抽象。

2、对象的封装、继承。

3、为了更好的去管理数据、分类数据，实现高内聚、低耦合。

2.设计模式

[设计模式][Link 7]感觉也是将面向对象思想再度抽象成现实中某些特定模式。

3.数据结构和算法

1、学习常用的排序搜索算法、顺序表、链表、栈、队列、树、堆等。

2、考验你的抽象思维和数学功底。

3、将现实需求抽象成计算机代码的思维能力。

附加技能考察

1.学习能力

1、持续学习的态度[——博客、][Link 8]笔记记录。

2、技术论坛活跃度高、问答多。

3、GitHub开源项目参与。

2.了解一门后端语言

1、python、node.js、php等。

2、数据库mysql、redis、mongodb；sql的操作语句、mongodb的操作语句、redis的操作语句。

3、node + express搭建本地服务等。

4、python + django + request + scrapy。

3.系统编程

1、[Linux命令行操][Linux]作、系统文件管理。

2、多任务、多线程、多进程、协程、并发、并行、串行、同步、异步等概念的理解。

***扩展阅读***

[记一次前端大厂面试][Link 9]

[前端小团队建设][Link 10]

[新鲜出炉的8月前端面试题][8]

[毕业一年左右的前端妹子面经总结][Link 11]

[一位程序猿面试蚂蚁金服后端的经验总结！][Link 12]

[Java后端程序员1年工作经验总结][Java_1]

来源：https://segmentfault.com/a/1190000018603454

文章来源网络，版权归作者本人所有，如侵犯到原作者权益，请与我们联系删除

![1240 1][]

[1240]: /images/20220216/4851b2a63a0e441a9ece3eacda952131.png
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzU5NTAzNjM0Mw==&mid=2247485480&idx=1&sn=4db76c81236b699d411b7307004b9ed6&chksm=fe7959f0c90ed0e6e1dff28ad82c90f41333438f14ed8fccfa83366825ad51adfee8c84fb735&scene=21#wechat_redirect
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzU5NTAzNjM0Mw==&mid=2247485448&idx=2&sn=409c97ac2cf7ca305009eff35d3e9a13&chksm=fe7959d0c90ed0c6ec4d6c74ebd0e42975f9df58a63981e7b2d6fc0d99f8016a9ad62f5dce1a&scene=21#wechat_redirect
[Link 3]: http://mp.weixin.qq.com/s?__biz=MzU5NTAzNjM0Mw==&mid=2247484179&idx=3&sn=aba93559e896b819e05b7b7c9159d7c5&chksm=fe7952cbc90edbddb22503cfa1f211620b41633b934c08ced87dbe045139517355dc82771d8a&scene=21#wechat_redirect
[Link 4]: http://mp.weixin.qq.com/s?__biz=MzU5NTAzNjM0Mw==&mid=2247485762&idx=2&sn=a533969c274c975d43d44842d0865ff1&chksm=fe79589ac90ed18c8324c74e32fc961b83e88128d761c4dc0ec6f42f30bdd174503f26fb704f&scene=21#wechat_redirect
[Link 5]: http://mp.weixin.qq.com/s?__biz=MzU5NTAzNjM0Mw==&mid=2247486293&idx=1&sn=b7eab1c1c7f2094464228403ed2796b8&chksm=fe795a8dc90ed39b4d0a90604335c98349b5b5d34db16999fa43df6da2925f628ea370ed7185&scene=21#wechat_redirect
[Link 6]: http://mp.weixin.qq.com/s?__biz=MzU5NTAzNjM0Mw==&mid=2247485583&idx=3&sn=610ce494351aa014727d6736ee5b0c8f&chksm=fe795957c90ed0417bbbfb7e923656a587642e92c6a62ad624ba6399015cad9e7d362f6ca93b&scene=21#wechat_redirect
[Link 7]: http://mp.weixin.qq.com/s?__biz=MzU5NTAzNjM0Mw==&mid=2247486209&idx=1&sn=b38f8cab0bc2f00fb2818c4ed43e8431&chksm=fe795ad9c90ed3cf59ee5c0e779ebd58cd112670c37bc982f8a26cb5941e36c09100897d05ab&scene=21#wechat_redirect
[Link 8]: http://mp.weixin.qq.com/s?__biz=MzU5NTAzNjM0Mw==&mid=2247486408&idx=1&sn=0ede324eb0ffa176bef5fe9dd386f110&chksm=fe795a10c90ed306c13ae6a525ac1af0693cac85b3bcb44e1136f8106590f4ea447114f16585&scene=21#wechat_redirect
[Linux]: http://mp.weixin.qq.com/s?__biz=MzU5NTAzNjM0Mw==&mid=2247484712&idx=4&sn=e64b27ac89b8603661684bc95abeccc8&chksm=fe7954f0c90edde685283dfcd84db8925136527e89a0006678ea75c1832416b9d335060a2d65&scene=21#wechat_redirect
[Link 9]: http://mp.weixin.qq.com/s?__biz=MzU5NTAzNjM0Mw==&mid=2247485817&idx=3&sn=80b06354d496e10b015b4282490a9df4&chksm=fe7958a1c90ed1b72eba2d5a4ea57bf1f90b9960d175b6900859c3bc7c165490c7a5affc93e6&scene=21#wechat_redirect
[Link 10]: http://mp.weixin.qq.com/s?__biz=MzU5NTAzNjM0Mw==&mid=2247485756&idx=2&sn=78c08d26c4c2042692f03e9670a8a848&chksm=fe7958e4c90ed1f2be0e56835c4e7c63bd97e25482cc5ca7dbbe0d02255a3263248f36ce41bd&scene=21#wechat_redirect
[8]: http://mp.weixin.qq.com/s?__biz=MzU5NTAzNjM0Mw==&mid=2247485494&idx=2&sn=ded5bd2ac8875a24fad3b17184719e00&chksm=fe7959eec90ed0f85d4cf1b0bd1b506442fd875286de296f753f8a06c0ae0e3a80e144d064b3&scene=21#wechat_redirect
[Link 11]: http://mp.weixin.qq.com/s?__biz=MzU5NTAzNjM0Mw==&mid=2247484659&idx=3&sn=3907c00a713507c3001d21b0c48f09e8&chksm=fe79552bc90edc3dd583a0252b1418f9ed6bbf6ba1a33ab02846746503166469e1a746d53cd7&scene=21#wechat_redirect
[Link 12]: http://mp.weixin.qq.com/s?__biz=MzU5NTAzNjM0Mw==&mid=2247484691&idx=2&sn=9a55bda7c247ca47e46eb514515e5861&chksm=fe7954cbc90eddddca95982a1c8ef30f82f4ba562024f1c1e8d1e597994143dc7245512f74e9&scene=21#wechat_redirect
[Java_1]: http://mp.weixin.qq.com/s?__biz=MzU5NTAzNjM0Mw==&mid=2247484071&idx=6&sn=d1c3fe18161ebb032a9dd3b9d6f95a46&chksm=fe79537fc90eda69526960ca6b56808df52cab9aeb7e3da65d73787c92f3328e8843215d46b3&scene=21#wechat_redirect
[1240 1]: /images/20220216/56091219b14a4fbc9877f0cb4ab57329.png