--- theme: jzman --- 整理了一份前端面试文章指南，大概包含100多个前端知识点的文章，主要都是掘金上面的文章，文章都是作者自己认真挑选并阅读过的，希望对大家有用，喜欢的可以点赞收藏下～ 1. [🚀 CSS篇](#user-content-content1) 2. [🎉 JS基础](#user-content-content2) 3. [🍰 Typescript](#user-content-content3) 4. [🧭 浏览器、网络基础](#user-content-content4) 5. [⛽ React](#user-content-content5) 6. [🏡 Vue](#user-content-content6) 7. [🏍 Webpack](#user-content-content7) 8. [🍂 前端工程化](#user-content-content8) 9. [🎖 性能优化](#user-content-content9) 10. [🍉 前端安全](#user-content-content10) 11. [🎍 数据结构与算法](#user-content-content11) # 一、CSS篇 ### [1、css选择器有哪些？层叠、继承与优先级](https://juejin.cn/post/6844904159305531406) ### [2、BFC](https://juejin.cn/post/7147928538811727880) ### [3、盒模型](https://juejin.cn/post/7127217262133510158#heading-3) ### [4、元素垂直居中的几种方案](https://juejin.cn/post/6905921139164315661) ### [5、css的margin重叠与面试题](https://juejin.cn/post/7033349421731741727) ### [6、阮一峰flex布局语法篇](https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html) ### [7、阮一峰flex布局实例篇](https://www.ruanyifeng.com/blog/2015/07/flex-examples.html) ### [8、css常见布局实现](https://juejin.cn/post/6986873449721364510) ### [9、px、rem、vw使用场景与转换方法](https://juejin.cn/post/6941206439624966152#heading-23) ### [10、移动端1px问题与解决方法](https://juejin.cn/post/7127217262133510158#heading-10) ### [11、实现瀑布流布局](https://juejin.cn/post/6844904004720263176) ### [12、移动端文字垂直居中](https://juejin.cn/post/7033572711561429023#heading-1) ### [13、critical CSS（首屏加载css）](https://juejin.cn/post/6844903649605320711#heading-0) ### [14、position有哪些属性，区别是什么](https://juejin.cn/post/7078476624831709192) ### [15、脱离文档流是会呈现什么样的效果呢](https://blog.csdn.net/Hoshizola/article/details/118076333) ### [16、css3新特性](https://juejin.cn/post/6844903518520901639) ### [17、css加载会造成阻塞吗？](https://juejin.cn/post/6844903667733118983) ### [18、CSS性能优化的技巧](https://juejin.cn/post/6844903649605320711) ### [19、介绍一下grid网格布局](https://juejin.cn/post/6844903967701336072)
# 二、JS基础 ### [1、js基本数据类型与类型转换](https://juejin.cn/post/6844903870712283149) ### [2、判断js数据类型的几种方式](https://juejin.cn/post/6919805736734162952) ### [3、数组常用操作方法与返回](https://juejin.cn/post/6844903895873896455) ### [4、JavaScript操作DOM](https://juejin.cn/post/6844903604445249543) ### [5、执行上下文与作用域、作用域链](https://juejin.cn/post/6844903797135769614) ### [6、原型链](https://github.com/mqyqingfeng/blog/issues/2) ### [7、前端闭包与实际应用场景](https://juejin.cn/post/6937469222251560990) ### [8、事件循环机制与具体面试题](https://juejin.cn/post/6844904079353708557) ### [9、常用ES6功能，说一下ES7-ES13新增api](https://juejin.cn/post/6995334897065787422) ### [10、说说你对class类的理解](https://juejin.cn/post/7098891689955164168) ### [11、call、apply、bind的区别与源码实现](https://juejin.cn/post/7009653982066901028) ### [12、js实现继承的几种方式与源码实现](https://juejin.cn/post/6844903745768144903) ### [13、深拷贝、浅拷贝的区别与源码实现](https://juejin.cn/post/7072528644739956773) ### [14、防抖与节流区别和应用场景以及源码实现](https://juejin.cn/post/6844904038526353422) ### [15、find、some、every、filter、map、reduce、forEach区别与手动实现](https://juejin.cn/post/6957317022992564231) ### [16、手写promise](https://juejin.cn/post/6994594642280857630) ### [17、typeof、installOf原理](https://juejin.cn/post/6844904199700873223) ### [18、数组扁平化](https://juejin.cn/post/7118763684209524767) ### [19、数组去重](https://juejin.cn/post/7152759573978284040) ### [20、排序算法](https://juejin.cn/post/6856546833025237006) ### [21、如何让(a===1&\&a===2&\&a===3)的值为true](https://juejin.cn/post/7048210945738276900) ### [22、setTimeout、setInterval、requestAnimationFrame](https://juejin.cn/post/7143207951774269453) ### [23、手写代码合集](https://juejin.cn/post/6844903809206976520)
# 三、Typescript ### [ 1、Typescrip面试题（一）](https://juejin.cn/post/6999985372440559624) ### [ 2、Typescrip面试题（二）](https://juejin.cn/post/7157149049714376735)
# 四、浏览器、网络基础 ### [1、如何用js去实现一个ajax](https://juejin.cn/post/6954644961979531301) ### [2、常见的http状态码](https://juejin.cn/post/7104117388676694046) ### [3、ajax的请求头和响应头包含哪些东西](https://juejin.cn/post/7127217262133510158#heading-39) ### [4、为什么会产生跨域？怎么去解决跨域问题？](https://juejin.cn/post/6844903767226351623) ### [5、JSONP的实现原理](https://github.com/LinDaiDai/niubility-coding-js/blob/master/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/%E8%B7%A8%E5%9F%9F/JSONP%E5%8E%9F%E7%90%86%E5%8F%8A%E5%AE%9E%E7%8E%B0.md) ### [6、CORS原理及实现](https://github.com/LinDaiDai/niubility-coding-js/blob/master/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/%E8%B7%A8%E5%9F%9F/CORS%E5%8E%9F%E7%90%86%E5%8F%8A%E5%AE%9E%E7%8E%B0.md) ### [7、从输入URL到页面展示，这中间发生了什么](https://juejin.cn/post/6905931622374342670) ### [8、浏览器渲染原理](https://juejin.cn/post/6844904175067725838) ### [9、DNS以及具体的查找过程](https://baike.baidu.com/item/DNS%E8%A7%A3%E6%9E%90%E8%BF%87%E7%A8%8B%E5%8F%8A%E5%8E%9F%E7%90%86/15652603) ### [10、说一下tcp三次握手和四次挥手](https://juejin.cn/post/6844903958624878606) ### [11、TCP/IP如何保证数据包传输的有序可靠](https://zhuanlan.zhihu.com/p/112317245) ### [12、TCP/UDP区别以及应用场景](https://juejin.cn/post/6844903800336023560) ### [13、7层网络模型](https://juejin.cn/post/6844904049800642568) ### [14、说一下浏览器缓存策略，以及项目中具体怎么用这些缓存策略](https://juejin.cn/post/6844904053223358471) ### [15、浏览器的本地存储](https://juejin.cn/post/7158414568950071309) ### [16、浏览器垃圾回收机制](https://juejin.cn/post/6981588276356317214) ### [17、谈谈你对重绘和回流的理解](https://juejin.cn/post/6844903779700047885) ### [18、http和https的区别](https://juejin.cn/post/7144400185731317768) ### [19、HTTP3.0、HTTP2.0、HTTP1.X](https://juejin.cn/post/6844904001528397837) ### [20、HTTPS相关问题](https://github.com/LinDaiDai/niubility-coding-js/blob/master/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/HTTPS%E9%9D%A2%E8%AF%95%E9%97%AE%E7%AD%94.md) ### [21、CDN与高并发CDN怎么优化](https://zhuanlan.zhihu.com/p/347303669) ### [22、addEventListener函数的第三个参数](https://juejin.cn/post/7081836998071156744) ### [23、事件流、事件捕获与冒泡](https://juejin.cn/post/6844903741783556109) ### [24、js 自定义事件](https://zhuanlan.zhihu.com/p/108447200) ### [25、cookie相关问题](https://juejin.cn/post/6844904095711494151) ### [26、内存泄漏场景与解决方法](https://zhuanlan.zhihu.com/p/411103328) ### [27、渲染十万条数据问题](https://juejin.cn/post/6844903938894872589) ### [28、移动端适配与兼容性问题](https://juejin.cn/post/7033572711561429023) ### [29、前端如何进行seo优化](https://juejin.cn/post/6844903824428105735) ### [30、web worker](https://juejin.cn/post/7117774868187185188)
# 五、React ### [1、React的实现原理](https://juejin.cn/post/7117051812540055588) ### [2、说一下React生命周期](https://juejin.cn/post/6914112105964634119) ### [3、react router 原理](https://juejin.cn/post/6844904094772002823) ### [4、Redux原理](https://juejin.cn/post/6844903998139400200) ### [5、React虚拟dom与key](https://juejin.cn/post/6967626390380216334) ### [6、setState实现原理](https://juejin.cn/post/7108362046369955847) ### [7、React 16, 17, 18的变化](https://juejin.cn/post/7157888552229928996) ### [8、React事件机制](https://juejin.cn/post/7166824066811658254) ### [9、React-fiber过程与实现原理](https://react.iamkasong.com/preparation/newConstructure.html) ### [10、React diff算法](https://react.iamkasong.com/diff/prepare.html#diff%E7%9A%84%E7%93%B6%E9%A2%88%E4%BB%A5%E5%8F%8Areact%E5%A6%82%E4%BD%95%E5%BA%94%E5%AF%B9) ### [11、React中的时间切片](https://juejin.cn/post/7071914394799570975) ### [12、React Hooks及应用场景](https://juejin.cn/post/6844903985338400782) ### [13、React Hooks原理](https://juejin.cn/post/7119102104337121316) ### [14、HOC高阶组件原理及使用场景](https://juejin.cn/post/6844904050236850184) ### [15、React 性能优化](https://juejin.cn/post/7064804207722758157) ### [16、五分钟带你了解 Web Components](https://juejin.cn/post/7144888332575571981) ### [17、受控组件和非受控组件](https://juejin.cn/post/6858276396968951822) ### [18、react portal](https://juejin.cn/post/6844904024378982413) ### [19、React技术揭秘理念>架构>实现](https://react.iamkasong.com/)
# 六、Vue ### [1、最全的 Vue 面试题+详解答案](https://juejin.cn/post/6961222829979697165) ### [2、50+Vue经典面试题源码级详解](https://juejin.cn/post/7097067108663558151) ### [3、Vue3 开发文档](https://juejin.cn/post/7220220100384407610)
# 七、Webpack ### [1、webpack面试](https://juejin.cn/post/6844904094281236487) ### [2、webpack5.x 知识体系](https://juejin.cn/post/7023242274876162084) ### [3、当面试官问Webpack的时候他想知道什么](https://juejin.cn/post/6943468761575849992) ### [4、项目里有做过哪些webpack上的优化](https://juejin.cn/post/7083519723484708878) ### [5、webpack loader和plugin编写](https://juejin.cn/post/6844903689442820110)
# 八、前端工程化 ### [1、前端代码规范 ESlint、tslint、stylelint、Pretter、git husky](https://juejin.cn/post/7038143752036155428) ### [2、CommonJS、AMD/CMD](https://juejin.cn/post/6844903576309858318) ### [3、gitlab CI/CD](https://juejin.cn/post/7037022688493338661) ### [4、jenkins CI/CD](https://juejin.cn/post/7048582881576222734) ### [5、vite与webpack的区别，以及如何选型](https://juejin.cn/post/7114503513039716388) ### [6、异常报错监控工具sentry](https://juejin.cn/post/6844904006364430343) ### [7、私有npm包管理器搭建与部署](https://juejin.cn/post/6949531037613424653) ### [8、如何定制化脚手架工具](https://juejin.cn/post/6966119324478079007) ### [9、大前端](https://juejin.cn/post/6844903781990137869) ### [10、微前端](https://juejin.cn/post/6844904113445011469) ### [11、单元测试](https://juejin.cn/post/7039108357554176037) ### [12、设计模式](https://juejin.cn/post/6844904032826294286)
# 九、性能优化 ![思维导图-导出 (2).png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a25997a761d74c6a849d33b26ad65495~tplv-k3u1fbpfcp-watermark.image?)
# 十、前端安全 ### [1、前端安全你需要知道的知识点](https://juejin.cn/post/6844904100945985543)
# 十一、数据结构与算法 ### [1、写给前端的算法进阶指南](https://juejin.cn/post/6847009772500156429) ### [2、前端算法渣的救赎之路](https://juejin.cn/post/6844904175562653710)
## 结束语文章中知识点，如果有更好的文章链接大家可以在评论区发出来，我会及时更新上去。觉得这些文章对你有用的话可以点赞收藏起来