#牛客创作赏金赛##前端##前端面试##前端开发##面试#

跨域请求是指浏览器不能直接向不同域名的服务器发起请求。解决跨域问题的方法有以下几种：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=43521d43a8e341f888324dd690363024JSONP（JSON with Padding）：利用script标签的src属性可以加载任意域名下的js文件的特性，通过在URL中传递callback函数名，让服务端返回指定格式的数据，前端通过调用指定的callback函数来获取数据。CORS（Cross-Origin Resource Sharing）：跨域资源共享，是W3C标准，需要服务端在响应头中设置Access-Control-Allow-Origin字段来允许前端跨域访问。代理：通过后台中转请求，将服务端的数据请求发送到同一域名下的后台进行处理并返回结果给前端。WebSocket：在建立WebSocket连接时不会执行同源检测，因此可以使用WebSocket进行跨域通信。发布JSON数据文件，JSONP或者JavaScript加载到页面里。但这种方式并不友好，容易暴露数据。设置Access-Control-Allow-Origin允许跨域，此方法支持IE8+、Chrome、Firefox等现代浏览器,或者使用XMLHttpRequest Level 2对象里面提供的withCredentials属性的值为true。在同一根域名下，但是不同二级域名之间进行跨越AJAX请求, 可以通过设置document.domain来解决。

WebSocket协议是一种基于TCP的协议，用于实现客户端和服务器之间的全双工通信。 它提供了一种在单个TCP连接上进行长期交互的方式，使得服务器可以主动向客户端推送数据。相比之下，HTTP协议是一种无状态的请求-响应协议，通常用于客户端向服务器发送请求并接收响应。 HTTP协议是基于请求-响应模式的，意味着每次客户端想要获取新的数据时，都需要通过新的HTTP请求来获取。以下是WebSocket协议与HTTP协议的不同之处：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=43521d43a8e341f888324dd690363024连接方式：HTTP协议是短连接，即每次请求都需要建立和关闭连接。而WebSocket协议是长连接，在连接建立后，可以持续保持通信状态。数据传输效率：HTTP协议每次请求只能传输有限的数据，而且每次传输都需要携带请求头等信息，导致额外的开销。WebSocket协议可以在保持连接状态的情况下，实现全双工通信，避免了频繁建立和关闭连接的开销，并且可以传输较大量级的数据。通信方式：HTTP协议采用的是请求-响应模式，客户端发送请求后，服务器返回响应。而WebSocket协议允许服务器主动推送数据给客户端，实现实时的双向通信。

WebSocket协议是一种基于TCP的协议，用于实现客户端和服务器之间的全双工通信。 它提供了一种在单个TCP连接上进行长期交互的方式，使得服务器可以主动向客户端推送数据。相比之下，HTTP协议是一种无状态的请求-响应协议，通常用于客户端向服务器发送请求并接收响应。 HTTP协议是基于请求-响应模式的，意味着每次客户端想要获取新的数据时，都需要通过新的HTTP请求来获取。以下是WebSocket协议与HTTP协议的不同之处：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=43521d43a8e341f888324dd690363024连接方式：HTTP协议是短连接，即每次请求都需要建立和关闭连接。而WebSocket协议是长连接，在连接建立后，可以持续保持通信状态。数据传输效率：HTTP协议每次请求只能传输有限的数据，而且每次传输都需要携带请求头等信息，导致额外的开销。WebSocket协议可以在保持连接状态的情况下，实现全双工通信，避免了频繁建立和关闭连接的开销，并且可以传输较大量级的数据。通信方式：HTTP协议采用的是请求-响应模式，客户端发送请求后，服务器返回响应。而WebSocket协议允许服务器主动推送数据给客户端，实现实时的双向通信。

#前端##前端面试##求职##牛客创作赏金赛##每日一题挑战#

姐妹们！今天想和你们聊聊一个超有共鸣的话题👩💻💫我是一个毕业4年，实际工作5年的前端人：🎓 第一年是前端实习生 👶👨💻 接下来四年一直在一线做前端开发而现在，我日常用AI+技术积累双重buff为工作赋能！作为一个经历过应届生秋招的老司机，今天就来分享：给现在前端同学备战秋招的实用建议，还会重点讲讲——AI如何帮你更高效拿offer！👇📌一、秋招时间线规划（适合在校/在职党）⏰ 提前2-3个月开始准备✔️ 复盘项目经验✔️ 刷题+复习基础知识✔️ 准备简历+作品集⏰ 提前批（6-7月）优先投递✔️ 抢占先机，竞争相对小✔️ 大厂通常有转正机会⏰ 正式批（9-10月）集中发力✔️ 每天刷新招聘平台✔️ 参加宣讲会+笔试模拟📌二、核心能力清单（前端必备）✅ 基础三件套HTML/CSS/JS▪️ ES6+特性、闭包、原型链、异步编程等必须熟练掌握▪️ CSS布局、动画、响应式设计要能手写✅ 主流框架Vue & React▪️ Vue3 + Composition API 是趋势▪️ React生命周期、Hooks、状态管理都要深入理解▪️ 建议至少精通其中一个，另一个也要了解✅ 工程化 & 构建工具▪️ Webpack/Vite配置原理▪️ Git协作流程、CI/CD机制✅ 性能优化▪️ 首屏加载、懒加载、缓存策略、SEO优化等✅ 算法与数据结构▪️ LeetCode高频题刷起来！别只背答案，要理解思路📌三、AI实战技巧（打工人必备）💡 1. 用AI辅助刷题▪️ 使用通义千问、ChatGPT辅助解释算法题解法▪️ 输入题目描述，让AI一步步带你分析，比看题解更清晰💡 2. AI帮你整理知识体系▪️ 给AI输入“帮我梳理React的Hook原理”▪️ 它会为你输出结构清晰的知识点，节省大量查资料时间💡 3. AI模拟面试▪️ 用AI模拟技术面官提问，训练你的表达能力和逻辑思维▪️ 比如：“请讲解一下虚拟DOM的工作原理”👉 我每次都是对着AI练完再记录下来复盘，效果翻倍！💡 4. AI优化简历 & 项目描述▪️ 把你的项目经历丢给AI，让它帮你润色语言▪️ 突出“解决了什么问题”、“带来了什么价值”，不是只会写功能列表💡 5. GitHub项目灵感来源▪️ 用AI生成一些有趣的小项目idea▪️ 比如“帮我设计一个基于Vue3的个人博客系统”▪️ 然后自己实现，放进作品集，超级加分！📌四、真实项目经验才是王道📌建议大家：✅ 主导或深度参与过至少2个完整项目✅ 能清晰说出你在项目中承担的角色和技术难点✅ 不只是“做了什么”，更要说明“为什么这么选”、“有没有更好的方案”📌举个例子：“我在重构项目时，引入了Webpack SplitChunks进行代码拆分，首屏加载速度提升了40%，用户体验明显改善。”📌五、我的亲身建议（送给每一个前端人）✔️ 别光埋头写代码，要思考业务价值和技术沉淀✔️ 提前准备作品集和个人博客，展示你的持续学习力✔️ AI不是替代者，而是你的超级助手，合理使用事半功倍✔️ 保持对新技术的好奇心，比如Vue3、React Server Components、Web3等最后想说：在这个AI快速发展的时代，我们不再是孤军奋战的码农，而是可以借助AI力量、不断提升自己的新时代开发者！希望我的经验能帮到你，无论你是应届还是社工，只要准备充分，都能拿到心仪的offer 💪记得点赞+收藏，让更多前端小伙伴看到这篇干货！你也正在准备秋招吗？有什么疑问或者目标公司？欢迎留言区一起交流呀💬💖

TLS/SSL协议是一种用于保护网络通信安全的协议。 TLS（Transport Layer Security）是其最新版本，而SSL（Secure Sockets Layer）是早期版本。TLS/SSL协议通过在通信双方建立安全通道并对通信数据进行加密，确保通信过程中的数据传输不被窃听、篡改或伪装。它的重要作用包括：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=43521d43a8e341f888324dd690363024加密通信：TLS/SSL协议使用加密算法对通信数据进行加密，使得传输的数据在传输过程中不易被窃听或窃取敏感信息。身份认证：TLS/SSL协议使用证书来验证通信双方的身份，防止中间人攻击。证书由可信的第三方机构（CA）签发，确保通信双方的真实性和可信度。完整性保护：通过数字签名和消息认证码（MAC），TLS/SSL协议能够保证通信数据在传输过程中不被篡改或损坏。防止重放攻击：TLS/SSL协议使用随机数和时间戳来防止攻击者重放先前的通信数据，保证通信的安全性。多方通信安全：TLS/SSL协议允许多个通信实体之间进行加密通信，确保多方通信的安全性。综上所述，TLS/SSL协议在网络通信中起到了保护数据安全和保证通信各方身份真实性的重要作用，为用户提供了更安全的网络环境。

常见的HTTP请求方法有以下几种：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=43521d43a8e341f888324dd690363024GET：用于从服务器获取资源。GET请求是幂等的，即多次执行相同的GET请求应该返回相同的结果。它通常用于向服务器请求数据，并将响应作为正文返回给客户端。POST：用于向服务器提交数据，创建新资源或处理一些操作。POST请求不是幂等的，即多次执行相同的POST请求可能会产生不同的结果。它通常用于向服务器发送数据，并将响应作为正文返回给客户端。PUT：用于更新服务器上已存在的资源。PUT请求也是幂等的，即多次执行相同的PUT请求应该具有相同的效果。它通常用于替换服务器上指定位置的资源。DELETE：用于删除服务器上指定的资源。DELETE请求也是幂等的，即多次执行相同的DELETE请求应该具有相同的效果。它通常用于删除服务器上指定位置的资源。PATCH：用于对服务器上已存在的资源进行局部更新。PATCH请求是非幂等和非安全（可能会引起副作用）的。它通常用于对资源进行部分更新，而不需要替换整个资源。这些HTTP请求方法提供了一种标准化和统一化的方式来与Web服务器进行交互，并实现不同类型操作对应不同类型HTTP动词，以满足各种需求。

#牛客创作赏金赛##牛客激励计划##金三银四，你有感觉到吗##前端##前端面试#

#牛客创作赏金赛##前端##前端面试#

#前端##牛客创作赏金赛##面试##学习##程序员#

在Vue中，通过props来声明和接收数据有以下几个原因：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=c8973c67c0d4486fb9b49ef343b162bb数据流向清晰：通过使用props，父组件可以明确地传递数据给子组件，从而使数据的流向清晰可见。这种明确的数据流动方式使得代码更易于理解和维护，特别是在大型应用程序或复杂的组件层次结构中更加重要。组件解耦：通过使用props来传递数据，父组件和子组件之间可以实现解耦。父组件不需要关心子组件内部如何处理数据，只需将数据传递给子组件，而子组件也不需要了解数据的来源。这种解耦可以使得组件更加独立和可复用。数据验证和类型检查：使用props声明数据时，可以对数据进行验证和类型检查，以确保接收到的数据满足特定要求。在子组件的props声明中，可以指定props的类型、是否必需以及默认值等信息，Vue会在运行时检查传递的数据是否与声明相符，从而提供更好的数据安全性和错误提示。单向数据流：Vue推荐单向数据流的模式，props的使用符合这一模式。通过将数据传递给子组件的props，可以确保子组件不会直接修改父组件的数据，避免了数据混乱和难以追踪的问题。这种单向数据流的方式使得应用程序更加可预测和可维护。

Vue 2中的生命周期钩子函数按照创建和销毁的顺序，可以分为以下8个：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=3b2e25e269df494f90670f3caf52de1cbeforeCreate：在实例创建之后，数据观测和事件配置之前被调用。在这个阶段，实例的方法和数据都还没有被初始化。created：在实例创建完成后被调用。在这个阶段，实例已经完成了数据观测、属性和方法的运算，但是还没有开始DOM的渲染。beforeMount：在挂载开始之前被调用。在这个阶段，模板编译已经完成，但是尚未将模板渲染到页面。mounted：在实例挂载到页面后被调用。在这个阶段，实例已经完成了模板的渲染，并挂载到页面上，可以进行DOM操作。beforeUpdate：在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前。在这个阶段，你可以对更新之前的数据进行操作。updated：在数据更新后被调用，发生在虚拟DOM重新渲染和打补丁之后。在这个阶段，DOM已经更新完毕，可以进行操作，但要注意避免无限循环的更新。beforeDestroy：在实例销毁之前被调用。在这个阶段，实例仍然完全可用，可以进行一些清理操作。destroyed：在实例销毁之后被调用。在这个阶段，实例已经解除了所有的事件监听器和绑定的DOM元素，进行最后的清理工作。

在使用深拷贝时，有一些性能和内存方面的问题需要注意。 深拷贝涉及复制对象及其所有层级的属性和值，因此可能会对性能和内存产生一定的影响。以下是在使用深拷贝时需要考虑的性能和内存问题：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=4e254dc3fdff4e8689fd57ad2d828b18性能开销：深拷贝是一个计算密集型操作，特别是对于复杂和嵌套层级深的对象来说。递归遍历并复制对象的每个属性会消耗大量的时间和计算资源。因此，在处理大型对象或对象数量较多的情况下，深拷贝可能会导致性能下降。内存消耗：深拷贝会创建原始对象的完全副本，并将其存储在内存中。如果拷贝的对象很大或者拷贝的对象数量很多，将占用大量内存空间。这可能导致内存压力增加，特别是在内存有限的环境下（例如浏览器中的JavaScript应用程序）。循环引用：深拷贝可能会面临循环引用的情况，即对象之间存在相互引用的关系。如果不正确处理循环引用，深拷贝可能会导致无限递归，最终导致堆栈溢出。因此，在实现深拷贝时，需要采取相应的处理措施来避免循环引用问题。