前端面试题网络请求慢如何解决

㈠ 前端面试八股文都是什么，那位大佬能帮忙总结一下

前端面试中常被提问的”八股文”知识点总结如下：

1. 安全传输与协议 HTTP：明文传输，不安全。 HTTPS：加密通信，保证数据安全，但可能影响性能。其过程包括SSL连接、安全等级协商、会话密钥交换。

2. 网络通信基础 TCP三次握手：用于连接建立。 TCP四次挥手：用于断开连接。 包传输：TCP保证有序、可靠传输，通过编号与重传机制实现。

3. 协议与区别 TCP与UDP：TCP是面向连接的、可靠的协议；UDP是无连接的、不可靠的协议。 跨域原理：基于同源策略，解决方案包括JSONP、iframe等。

4. 储存技术 Cookie、localStorage、sessionStorage：了解它们的存储位置、大小限制及生命周期。

5. 网络问题与解决 粘包问题：可通过编程控制、接收进程优化、线程预处理分包等方法解决。

6. 浏览器加载流程 缓存优先：浏览器会优先使用缓存资源。 DNS解析：将域名解析为IP地址。 连接建立：建立TCP连接。 HTTP请求：发送HTTP请求并接收响应。 渲染流程：包括DOM构建、CSS解析、渲染树构建等步骤。

7. 用户体验优化 DOM操作与重排重绘：优化DOM操作以减少性能损耗。 CSS优化：样式集中管理，利用动画和GPU加速提升性能。

8. 缓存与性能 304缓存机制：利用Expires、CacheControl等头部实现缓存。 浏览器缓存策略：包括强制缓存和协商缓存。

9. 布局与定位 position属性：了解fixed、relative、absolute、sticky、static等属性的用法。 boxsizing：contentbox和borderbox的区别与应用。

10. 布局模式与应用场景 BFC：了解BFC的概念及其在应用中的作用，如避免重叠、解决布局问题等。 居中元素：掌握水平与垂直居中的多种方法。

11. 移动端适配 rem布局与viewport：利用rem和viewport实现快速适配与适应性设计。 清除浮动：了解额外标签法、父元素设置等方法清除浮动。

12. 数据类型与内存管理 数据类型检测与实例化：掌握JavaScript中数据类型的检测及实例化方法。 变量声明与作用域：了解var、let、const的区别及作用域规则。 内存泄漏与垃圾回收：了解内存泄漏的原因及垃圾回收机制。

13. JavaScript核心概念 this的指向：理解this在不同上下文中的指向规则。 原型链：掌握原型链的概念及其在JavaScript中的作用。 new运算符：了解new运算符的工作原理及创建对象的过程。 Event Loop：理解Event Loop的异步处理机制，包括宏任务与微任务。 MVVM框架：了解MVVM框架的数据绑定、生命周期管理等核心概念。

14. 常见面试问题与解决方案 生产环境错误修复：掌握生产环境中错误修复的方法及版本分支管理技巧。 前端优化策略：了解缓存、性能优化、设计优化等前端优化策略。 参考文档：熟悉项目优化和最佳实践相关的参考文档。

㈡ 快手前端春招一面面经 凉经

快手前端春招一面面经：

1. 面试体验：

   • 快手面试官的态度非常友好，整个面试过程让人感到舒适。
   • 即使未能通过面试，这次经历也非常宝贵，有助于复盘总结和提升面试技巧。

2. 面试内容：

   • 技术知识考察：面试官询问了Vue和React的区别，以及在React中常用的组件。同时，还考察了TCP/IP协议、JavaScript常见数组方法、CSS属性和布局排列的知识。
   • 深入提问：对于网络请求返回代码的理解，面试官详细询问了各种不常见状态码。
   • 基础概念：考察了GET请求与POST请求的区别，以及JS数组中map遍历的理解。
   • 算法题：最后是一道手撕代码题——树的蛇形遍历。虽然面试官允许使用C++解答，但由于长时间未用JavaScript进行算法实现，最终未能给出满意回答。

3. 面试建议：

   • 充分准备：复习和巩固基础知识非常重要，哪怕临时背诵也能提高信心。
   • 保持冷静：面试时不要过于紧张，通过多次面试和充分准备可以提升表现。
   • 技术栈展示：在反问环节，可以具体介绍自己的技术栈，避免抽象回答。
   • 考虑工作地点：准备面试时，应充分考虑到工作地点的因素，以便在面试中更好地与面试官沟通。

凉经：

• 复习不足：对于部分面试问题，由于忽视了复习的重要性，导致准备不足。
• 紧张影响表现：面试时的紧张情绪影响了对网络请求返回代码理解等问题的回答。
• 算法实现能力：长时间未使用特定语言进行算法实现，导致在手撕代码题上表现不佳。
• 决策犹豫：在面试官询问是否可以使用C语言解答时，未能快速做出决定，影响了后续表现。

综上所述，快手前端春招一面的面试经验非常宝贵，不仅考察了技术知识，还提供了面试技巧和心理调适方面的建议。同时，通过凉经总结，可以明确自己在面试中的不足，为后续的面试做好准备。

㈢ 2024Web前端面试题大全（整理版）面试题附答案详解，最全面详细

1. 什么是防抖和节流？有什么区别？如何实现？

   答案：防抖（Debounce）和节流（Throttle）是两种控制函数执行频率的技术。

   防抖：在事件被触发后，延迟一段时间再执行回调函数，如果在这段时间内事件再次被触发，则重新计时。适用于搜索框输入、窗口大小调整等场景。

   节流：在一段时间内只允许一次函数调用，不管在这段时间内事件被触发多少次。适用于滚动加载、鼠标移动等场景。

   实现：防抖可以通过设置定时器，在事件触发时重置定时器；节流可以通过记录上一次执行时间，判断当前时间与上次执行时间的差值是否超过阈值。

2. 如何判断一个元素是否在可视区域中？

   答案：可以通过比较元素的边界与视口（Viewport）的边界来判断。使用getBoundingClientRect方法获取元素的边界信息，然后与window.innerHeight和window.innerWidth进行比较。

3. 什么是单点登录？如何实现？

   答案：单点登录（SSO）是指在多个应用系统中，用户只需一次登录就可以访问所有相互信任的应用系统。

   实现：通常通过OAuth、SAML等协议实现，用户在一个认证中心登录后，认证中心会颁发一个令牌（Token），用户携带该令牌访问其他应用时，应用通过验证令牌的有效性来确认用户身份。

4. 如何实现上拉加载，下拉刷新？

   答案：通过监听滚动事件或触摸事件来实现。

   上拉加载：当用户滚动到页面底部时，触发加载更多数据的请求。

   下拉刷新：当用户下拉页面到一定位置时，触发刷新数据的请求。

5. 说说你对正则表达式的理解？应用场景？

   答案：正则表达式是一种用于匹配字符串中字符组合的模式。它可以用于字符串搜索、替换、验证等操作。

   应用场景：表单验证（如邮箱、电话号码格式）、文本搜索、内容替换等。

1. CSS如何画一个三角形？原理是什么？

   答案：通过设置元素的宽度和高度为0，仅设置边框的宽度和颜色，利用边框的相交部分形成三角形。

   原理：CSS中的边框是矩形的，但当元素的宽高为0时，边框的相交部分就会形成一个三角形。

2. 如何使用CSS完成视差滚动效果？

   答案：通过transform: translateZ()和perspective属性实现。

   原理：利用透视效果，使不同层次的元素在滚动时产生不同的移动速度，从而形成视差效果。

3. CSS3新增了哪些新特性？

   答案：包括选择器增强（如属性选择器、伪类选择器）、动画（如@keyframes、animation）、过渡（transition）、媒体查询（@media）、弹性盒布局（Flexbox）、网格布局（Grid）等。

1. 说说var、let、const之间的区别

   答案：

   var：函数作用域或全局作用域，存在变量提升（Hoisting），可以重复声明。

   let：块级作用域，不存在变量提升（但存在暂时性死区），不能重复声明。

   const：块级作用域，声明时必须赋值，值不可变（但如果是对象或数组，其内部属性或元素可以修改）。

2. ES6中数组新增了哪些扩展？

   答案：包括Array.from()、Array.of()、find()、findIndex()、fill()、Within()、includes()等。

3. 你是怎么理解ES6中Promise的？使用场景？

   答案：Promise是异步编程的一种解决方案，用于处理异步操作的结果。

   使用场景：网络请求、文件读取、定时器等异步操作。

1. 说说你对slot的理解？slot使用场景有哪些？

   答案：Slot是Vue中用于内容分发的一种机制，允许父组件向子组件插入HTML内容。

   使用场景：创建可复用的组件时，允许父组件自定义子组件的部分内容。

2. 什么是虚拟DOM？如何实现一个虚拟DOM？说说你的思路

   答案：虚拟DOM是真实DOM的抽象表示，以JavaScript对象的形式存在。

   实现思路：通过JavaScript对象描述DOM结构，当数据变化时，比较新旧虚拟DOM的差异，然后只更新真实DOM中发生变化的部分。

1. Vue3.0所采用的Composition Api 与Vue2.x使用的Options Api有什么不同？

   答案：Composition Api将逻辑相关的代码组织在一起，提高了代码的可复用性和可读性；而Options Api将代码按照选项（如data、methods、computed等）进行分割，适合小型项目或简单组件。

2. vue3.0的设计目标是什么？做了哪些优化？

   答案：设计目标是提高性能、更好的类型支持、更小的包体积等。

   优化：引入了Proxy替代Object.defineProperty实现响应式系统，提高了性能；引入了Composition Api，提高了代码复用性和可读性；优化了打包体积等。

1. 说说对Fiber架构的理解？解决了什么问题？

   答案：Fiber是React的协调算法的一种实现，它将渲染过程拆分成多个小任务，允许中断和恢复，从而实现了任务的优先级调度。

   解决的问题：提高了React的响应性，使得在高频率更新下也能保持流畅的用户体验。

2. 说说React diff的原理是什么？

   答案：React通过比较新旧虚拟DOM树的差异，找出需要更新的部分，然后只更新真实DOM中发生变化的部分。

   原理：采用分层比较的策略，从根节点开始逐层比较子节点，对于同类型的节点进行深度比较，不同类型的节点直接替换。

1. 说说对Node中的Stream的理解？应用场景？

   答案：Stream是Node.js中处理数据流的一种机制，允许以流的方式读写数据，提高了处理大文件的效率。

   应用场景：文件读写、网络请求、管道流等。

2. 说说对Node中的process的理解？有哪些常用方法？

   答案：Process是Node.js中的一个全局对象，提供了有关当前Node.js进程的信息和控制当前进程的方法。

   常用方法：process.exit()退出进程，process.cwd()获取当前工作目录，process.env获取环境变量等。

1. 说说你对微信小程序的理解？优缺点？

   答案：微信小程序是一种不需要下载安装即可使用的应用，用户扫一扫或搜一下即可打开使用。

   优点：无需安装、即用即走、体验接近原生APP；

   缺点：受限于微信平台、功能相对有限。

2. 说说微信小程序的生命周期函数有哪些？

   答案：包括onLoad（页面加载）、onShow（页面显示）、onHide（页面隐藏）、onUnload（页面卸载）等。

1. 说说TCP为什么需要三次握手和四次挥手？

   答案：三次握手用于建立连接，确保客户端和服务器之间的通信能力；四次挥手用于断开连接，确保双方都已准备好关闭连接并释放资源。

2. 说说HTTP常见的状态码有哪些，适用场景？

   答案：包括200（OK）、404（Not Found）、500（Internal Server Error）等。

   200：请求成功；

   404：请求的资源未找到；

   500：服务器内部错误。

1. 说说你对TypeScript中接口的理解？应用场景？

   答案：接口是TypeScript中的一个核心特性，用于定义对象的形状，即对象应该包含哪些属性以及这些属性的类型。

   应用场景：在开发大型项目时，通过接口定义组件之间的通信协议，提高代码的可维护性和可读性。

2. 说说你对TypeScript中泛型的理解？应用场景？

   答案：泛型是TypeScript中的一个高级特性，允许在定义函数、接口、类时不指定具体的类型，而是在使用时再指定。

   应用场景：编写可复用的组件或函数时，通过泛型提高代码的灵活性和可扩展性。

1. 说说你对webpack的理解？解决了什么问题？

   答案：Webpack是一个现代JavaScript应用程序的静态模块打包器（mole bundler）。

   解决的问题：将项目中的各种资源（如JavaScript、CSS、图片等）作为模块来处理，通过打包和优化，提高项目的加载速度和运行