前端面试核心知识点汇总：JavaScript、CSS、HTML、框架及工程化

七、计算机网络面试题

1. 简单描述从输入网址到页面显示的过程。
2. 说说 WebSocket 和 HTTP 的区别。
3. 说说 HTTPS 的握手过程。
4. HTTP2 中，多路复用的原理是什么？
5. 说说你对'三次握手'、'四次挥手'的理解。
6. 为什么推荐将静态资源放到 CDN 上？
7. 什么是 DNS 劫持？
8. TLS 1.3 做了哪些改进？
9. TLS1.2 握手的过程是怎样的？
10. HTTP 报文结构是怎样的？

八、Node.js 面试题

1. CommonJS 和 ES6 中模块引入的区别？
2. 为什么 Node 在使用 ES Module 时必须加上文件扩展名？
3. 浏览器和 Node 中的事件循环有什么区别？
4. Node 性能如何进行监控以及优化？
5. 如果让你来设计一个分页功能，你会怎么设计？前后端如何交互？
6. 如何实现文件上传？说说你的思路。
7. 如何实现 JWT 鉴权机制？说说你的思路。
8. 说说对中间件概念的理解，如何封装 Node 中间件？
9. 说说 Node 文件查找的优先级以及 Require 方法的文件查找策略？
10. 说说对 Nodejs 中的事件循环机制理解？

九、TypeScript 面试题

1. 说说对 TypeScript 中命名空间与模块的理解？区别？
2. 说说你对 TypeScript 的理解？与 JavaScript 的区别？
3. TypeScript 中泛型是什么？
4. TypeScript 中有哪些声明变量的方式？
5. 什么是 TypeScript 的方法重载？
6. 请实现下面的 sleep 方法。
7. TypeScript 中的 is 关键字有什么用？
8. TypeScript 支持的访问修饰符有哪些？
9. 请实现下面的 myMap 方法。
10. 请实现下面的 treePath 方法。

十、性能优化面试题

1. Script 标签放在 header 里和放在 body 底部里有什么区别？
2. 前端性能优化指标有哪些？怎么进行性能检测？
3. SPA(单页应用) 首屏加载速度慢怎么解决？
4. 如果使用 CSS 提高页面性能？
5. 怎么进行站点内的图片性能优化？
6. 虚拟 DOM 一定更快吗？
7. 有些框架不用虚拟 DOM，但是他们的性能也不错是为什么？
8. 如果某个页面有几百个函数需要执行，可以怎么优化页面的性能？
9. 讲一下 png8、png16、png32 的区别，并简单讲讲 PNG 的压缩原理。
10. React.memo() 和 useMemo() 的用法是什么，有哪些区别？

十一、前端安全面试题

1. 说说你对 XSS 的了解。
2. Web 常见的攻击方式有哪些，以及如何进行防御？
3. 说说你对前端鉴权的理解。
4. 如何禁止别人调试自己的前端代码？
5. CSP(Content Security Policy) 可以解决什么问题？
6. 前端怎么实现跨域请求？
7. HTTPS 有哪些优点？
8. WebSocket 有哪些安全问题，应该如何应对？
9. 什么是点击劫持？如何防范点击劫持？
10. 什么是 SameSite Cookie 属性？

十二、小程序面试题

1. 说说微信小程序的架构？
2. 为什么小程序里拿不到 DOM 相关的 API？
3. 小程序的双线程分别做的什么事情？
4. 简述微信小程序原理？
5. 微信小程序的优劣势？
6. 小程序页面间有哪些传递数据的方法？
7. 微信小程序 bindtap 和 catchtap 区别？
8. 小程序 WXSS 与 CSS 的区别？
9. 简述一下微信小程序的主要文件有哪些？

十三、ES6 面试题

1. CommonJS 和 ES6 中模块引入的区别？
2. Map 和 Set 的用法以及区别。
3. ES5 中的类和 ES6 中的 class 有什么区别？
4. 你是怎么理解 ES6 中 Decorator 的？使用场景有哪些？
5. 你是怎么理解 ES6 中 Module 的？使用场景有哪些？
6. 你是怎么理解 ES6 中 Proxy 的？使用场景有哪些？
7. 怎么理解 ES6 中 Generator 的？使用场景有哪些？
8. 你是怎么理解 ES6 中 Promise 的？使用场景有哪些？
9. ES6 中新增的 Set、Map 两种数据结构怎么理解？
10. ES6 中函数新增了哪些扩展？

十四、编程题

1. 使用 Promise 实现红绿灯交替重复亮。
2. bind、call、apply 有什么区别？如何实现一个 bind？
3. 说说 new 操作符具体干了什么？
4. 如何实现上拉加载，下拉刷新？
5. 大文件怎么实现断点续传？
6. 什么是防抖和节流，以及如何编码实现？
7. 说说 AJAX 的原理，以及如何实现？
8. 深拷贝浅拷贝有什么区别？怎么实现深拷贝？
9. 用 JS 实现二叉树的定义和基本操作。

十五、设计模式面试题

1. 观察者模式和发布订阅模式分别是什么？有什么区别？
2. 开发的过程中你用到过哪些设计模式？
3. 设计模式分类。
4. 什么是 MVVM？比之 MVC 有什么区别？什么又是 MVP？
5. 单例模式。
6. 设计模式的六大原则。
7. 工厂模式。

十六、前端工程化面试题

1. package.json 文件中的 devDependencies 和 dependencies 对象有什么区别？
2. Webpack 5 的主要升级点有哪些？
3. 说下 Vite 的原理。
4. 与 Webpack 类似的工具还有哪些？区别？
5. 说说如何借助 Webpack 来优化前端性能？
6. 说说 Webpack proxy 工作原理？为什么能解决跨域？
7. 说说 Webpack 的热更新是如何做到的？原理是什么？
8. 面试官：说说 Loader 和 Plugin 的区别？编写 Loader，Plugin 的思路？
9. 说说 Webpack 中常见的 Plugin？解决了什么问题？
10. 说说 Webpack 中常见的 Loader？解决了什么问题？