91. 面试官:什么是前后端分离，好处是什么

91期

1. 什么是前后端分离，好处是什么？

2. 讲解你了解到的Express框架？

3. 2个Node.js进程如何进行通讯？

上面问题的答案会在第二天的公众号(程序员每日三问)推文中公布

90期问题及答案

1. 遇到一个页面有多个请求时，如何高效的获取数据并渲染页面

在一个页面有多个请求时，高效获取数据并渲染页面是前端开发中的一个重要挑战。以下是一些策略和最佳实践，可以帮助你高效地管理多个请求并渲染页面：

1. 并行请求数据：

• 使用异步编程模型（例如 Promises.all）来并行发起多个请求，而不是按顺序等待一个请求完成后再发起下一个请求。这可以减少总体加载时间。

合并请求：

• 如果可能，尽量合并多个小请求为一个大请求。例如，可以创建一个 API 端点，它能够返回多个相关数据块，而不是单独请求每个数据块(需要接口配合)。

懒加载或分页加载：

• 如果页面上有大量数据需要加载，考虑使用懒加载或分页加载的技术，只在用户需要时加载数据。这可以提高页面的初始加载性能。

• 使用无限滚动（Infinite Scroll）等技术，以在用户滚动到页面底部时加载更多数据。

数据缓存：

• 使用本地缓存（例如浏览器的 localStorage 或 sessionStorage）来存储已加载的数据，以减少不必要的重复请求。

• 利用浏览器缓存（HTTP 缓存）来缓存静态资源，以减轻服务器负担。

前端路由和状态管理：

• 如果你使用的是单页应用（SPA），考虑使用前端路由和状态管理库（如 Vue Router 和 Vuex、React Router 和 Redux）来有效地管理页面状态和数据加载。

骨架屏和加载指示器：

• 在等待数据加载的同时，可以展示骨架屏（Skeleton Screen）或加载指示器，以告知用户页面正在加载数据。

异步组件：

• 如果你使用的是 Vue.js 或类似的框架，可以使用异步组件来延迟加载页面组件，以减小初始加载的包大小。

数据预取：

• 对于某些数据，在用户实际需要之前可以进行预取（Pre-fetch），以便在用户请求时能够快速获取到数据。

前端性能优化：

• 遵循前端性能优化的最佳实践，例如减少不必要的 DOM 操作、优化图片加载、使用合适的压缩算法等，以提高页面加载速度。

错误处理：

• 针对每个请求实施适当的错误处理机制，以确保在请求失败时向用户提供友好的错误提示。

网络优化：

• 使用 HTTP/2 或 HTTP/3 协议，以减少请求的延迟和提高并发性。

代码拆分：

• 如果使用模块化的打包工具（如 Webpack），可以考虑代码拆分以减小初始包大小，并仅加载当前页面所需的代码。

最终，多个请求的处理和页面渲染策略会取决于具体的应用程序需求和架构。根据项目的复杂性和性能要求，你可以组合使用上述策略以实现高效的数据获取和页面渲染。同时，监测和性能测试是优化的关键，以便不断改进和优化你的前端应用。

2. 跨域时，如何处理cookie？

处理跨域时的 Cookie 可能会涉及到一些安全性和隐私问题，因此需要小心处理。通常情况下，浏览器会限制在跨域请求中发送和接收 Cookie。以下是一些处理 Cookie 跨域的方法和注意事项：

1. SameSite 属性：

• Strict：只有在当前站点的请求中才发送 Cookie。

• Lax：在导航的 GET 请求中发送 Cookie，例如点击链接，但在 POST 请求中不发送。

• None：总是发送 Cookie，即使是跨域请求。需要搭配 Secure 标志，要求必须通过 HTTPS 传输。

• 设置 Cookie 的 SameSite 属性可以帮助控制 Cookie 的跨域行为。SameSite 有三个值：Strict、Lax 和 None。

• 通过设置 SameSite 属性，你可以控制 Cookie 在跨域请求中的行为。

使用 CORS（跨域资源共享）：

fetch('https://example.com/api/data', {
  method: 'GET',
  credentials: 'include', // 或者 credentials: 'same-origin'
})
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

• 在服务器端配置 CORS 规则，允许来自特定域的请求访问资源，同时可以设置 Access-Control-Allow-Credentials: true 表示允许携带 Cookie。

• 在前端发起请求时，需要设置 withCredentials: true 以允许发送 Cookie。示例：

注意安全性：

• 在处理跨域 Cookie 时要格外小心安全问题。确保只有受信任的域可以访问和接收 Cookie。

• 不要在 Cookie 中存储敏感信息，因为 Cookie 可能被窃取或劫持。

• 使用 HTTPS 来加密 Cookie 的传输，以增加安全性。

其他选项：

• 如果有必要，可以考虑使用代理服务器将请求代理到目标域，以避免浏览器的同源策略限制。

• 可以使用 JSON Web Tokens (JWT) 等替代方案来管理用户会话，而不依赖于 Cookie。

总之，在处理跨域 Cookie 时，确保充分了解浏览器的同源策略、Cookie 属性和安全性要求，并根据具体需求和安全性要求采取适当的措施。

3. 如何控制input输入框只能输入数字？

要限制 input 输入框只能输入数字，你可以使用以下几种方法：

1. 使用type="number"属性：

• 最简单的方法是将 input 的 type 属性设置为 "number"，这将强制输入框只接受数字输入。然而，这仅适用于数字输入，不适用于其他字符。

使用正则表达式：

这个示例使用正则表达式来移除非数字字符。

• 你可以使用 JavaScript 来验证用户输入并确保只有数字字符被接受。通过添加 oninput 事件监听器，你可以在用户输入时检查输入内容是否为数字。

使用 pattern 属性：

这个示例中，pattern="[0-9]*" 表示只接受数字字符。

• pattern 属性允许你指定一个正则表达式，来限制用户的输入。这个属性通常与 type="text" 一起使用。

使用 JavaScript 事件监听：

const numericInput = document.getElementById('numericInput');
numericInput.addEventListener('input', function (e) {
  const input = e.target;
  input.value = input.value.replace(/[^0-9]/g, '');
});

• 你还可以使用 JavaScript 事件监听器来控制用户输入。在事件处理函数中，可以检查每个字符是否是数字，并阻止非数字字符的输入。

这些方法中，最常见的是使用正则表达式或 JavaScript 事件监听来确保只能输入数字。选择适合你项目需求的方法，并根据需要进行定制。如果你需要更复杂的控制，可以考虑使用 JavaScript 来验证和处理输入。

如果觉得这篇文章对你有帮助，希望多多点赞收藏加关注，也希望分享给更多爱学习的小伙伴，你的肯定是我最大的动力。

学习不打烊，充电加油只为遇到更好的自己,每天早上9点纯手工发布面试题，每天坚持花20分钟来学习与思考，在千变万化，类库层出不穷的今天，不要等到找工作时才狂刷题，提倡每日学习。