浏览器

requestAnimationFrame

requestAnimationFrame 是一个浏览器 API，用于在浏览器准备重绘之前执行动画。与 setTimeout 或 setInterval 相比，requestAnimationFrame 能够更好地优化动画性能，因为它与浏览器的刷新率同步。

工作原理

• requestAnimationFrame 告诉浏览器您希望执行一个动画，并请求浏览器在下一次重绘之前调用指定的回调函数。
• 回调函数的执行频率通常与显示器的刷新率相匹配（例如，60Hz 或 120Hz）。
• 浏览器会在下一次重绘之前集中处理所有 requestAnimationFrame 回调，从而优化性能。

优点

• 性能优化： requestAnimationFrame 能够更好地利用浏览器的渲染机制，避免不必要的重绘，从而提高动画性能。
• 节能： 当浏览器检测到用户没有查看页面时，requestAnimationFrame 会自动暂停，从而节省资源。
• 避免掉帧： requestAnimationFrame 能够确保动画在浏览器的刷新周期内执行，从而避免掉帧现象。

使用方法

1. 调用 requestAnimationFrame 方法，并传入一个回调函数作为参数。
2. 在回调函数中执行动画更新操作。
3. 如果需要持续执行动画，在回调函数中再次调用 requestAnimationFrame 方法。

示例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

function animate(timestamp) {
  // 执行动画更新操作
  // ...

  // 如果需要持续执行动画，再次调用 requestAnimationFrame
  requestAnimationFrame(animate);
}

// 开始动画
requestAnimationFrame(animate);

注意事项

• requestAnimationFrame 是一次性的，每次执行动画更新操作都需要再次调用。
• 回调函数接收一个 timestamp 参数，表示当前时间。可以使用 timestamp 来计算动画的进度。
• 可以使用 cancelAnimationFrame 方法取消 requestAnimationFrame 的回调。

应用场景

• 动画
• 游戏
• 画布绘制
• 任何需要频繁更新界面的场景

事件委托与事件冒泡及其他

在 JavaScript 中，事件代理、事件冒泡和事件委托是理解事件处理机制的关键概念。它们之间相互关联，共同影响着事件在 DOM 树中的传播和处理方式。

1. 事件冒泡（Event Bubbling）

• 定义：
  • 当一个 DOM 元素上的事件被触发时，该事件会从目标元素开始，沿着 DOM 树向上传播，直到到达根元素。
  • 这意味着，如果子元素上的事件被触发，父元素以及祖先元素上的相同事件处理程序也会被调用。
• 示例：
  • 如果您点击一个嵌套在多个 div 元素中的 button 元素，button、其父 div、祖父 div 等元素的点击事件处理程序都会被依次触发。
• 作用：
  • 事件冒泡允许我们利用事件委托来实现更高效的事件处理。

2. 事件委托（Event Delegation）/事件代理（Event Proxy）

• 定义：
  • 事件委托是一种利用事件冒泡机制的技术，它将事件处理程序添加到父元素上，而不是每个子元素上。
  • 当子元素上的事件被触发时，事件会冒泡到父元素，然后由父元素上的事件处理程序来处理。
• 原理：
  • 事件委托的核心在于，通过事件对象的 target 属性，我们可以确定实际触发事件的子元素。
  • 因此，即使事件处理程序绑定在父元素上，我们也可以根据 target 属性来区分不同的子元素，并执行相应的操作。
• 优点：
  • 性能优化：
    • 减少事件处理程序的数量，从而减少内存占用和提高性能。
  • 动态内容：
    • 当动态添加或删除子元素时，无需重新绑定事件处理程序。
• 示例：
  • 如果您有一个包含大量列表项（li）的无序列表（ul），可以将点击事件处理程序绑定到 ul 元素上，而不是每个 li 元素上。
  • 当用户点击某个 li 元素时，事件会冒泡到 ul 元素，然后您可以通过 event.target 来确定被点击的 li 元素。
• 事件代理的局限性
  • 性能考虑：尽管事件委托在大多数情况下能提升性能，但在特定场景下，如事件处理逻辑复杂或性能敏感的应用中，直接为每个元素添加事件处理函数可能更为合适。
  • 事件捕获阶段限制：事件代理主要利用了事件冒泡机制，这意味着只有在事件冒泡阶段才能被捕获。

3. 其他相关概念

• 事件捕获（Event Capturing）
  • 与事件冒泡相反，事件捕获是从根元素开始，沿着 DOM 树向下传播，直到到达目标元素。
  • 事件捕获不常用，但可以通过 addEventListener 方法的第三个参数来启用。
• 事件目标（Event Target）
  • event.target 属性指向实际触发事件的元素。
  • 它是事件委托中用于确定被点击子元素的关键属性。
• 事件传播（Event Propagation）
  • 事件传播描述了事件在 DOM 树中的传播过程，包括事件捕获和事件冒泡两个阶段。
• 阻止事件传播（stopPropagation）
  • 使用 event.stopPropagation() 方法可以阻止事件继续传播。
  • 这可以用于阻止事件冒泡或事件捕获。
• 阻止默认行为（preventDefault）
  • 使用 event.preventDefault() 方法可以阻止元素的默认行为。
  • 例如，可以阻止链接的跳转或表单的提交。

总结

• 事件冒泡是事件在 DOM 树中向上

浏览器存储，SessionStorage，LocalStorage，Cookie

浏览器存储是 Web 开发中用于在客户端（用户的浏览器）存储数据的机制。主要有四种类型的浏览器存储：SessionStorage、LocalStorage 和 Cookie。它们各自具有不同的特点和用途。

1. SessionStorage（会话存储）

• 特点：
  • SessionStorage 用于存储会话期间的数据，即在用户打开浏览器标签页或窗口时开始，关闭标签页或窗口时结束。
  • 数据仅在当前会话中有效，关闭浏览器后数据会被清除。
  • 数据存储在客户端，不会发送到服务器。
  • 每个标签页或窗口都有独立的 SessionStorage。
  • 存储容量相对较大，通常为 5-10MB。
• 用途：
  • 存储临时数据，例如表单数据、购物车内容等。
  • 在单页应用中，用于存储页面状态。
• 优点：
  • 数据在会话结束后自动清除，安全性较高。
  • 每个标签页或窗口独立存储，避免数据冲突。
• 缺点：
  • 数据仅在当前会话中有效，无法持久保存。

2. LocalStorage（本地存储）

• 特点：
  • LocalStorage 用于持久存储数据，数据在浏览器关闭后仍然存在，除非用户手动清除或浏览器缓存被清除。
  • 数据存储在客户端，不会发送到服务器。
  • 所有同源的标签页或窗口共享同一个 LocalStorage。
  • 存储容量相对较大，通常为 5-10MB。
• 用途：
  • 存储用户偏好设置，例如主题、语言等。
  • 存储离线应用数据。
  • 存储不需要频繁修改的数据。
• 优点：
  • 数据持久保存，无需担心会话结束或浏览器关闭。
  • 所有同源页面共享数据，方便数据共享。
• 缺点：
  • 数据不会自动清除，需要手动管理。
  • 安全性相对较低，不适合存储敏感数据。

3. Cookie（小型文本文件）

• 特点：
  • Cookie 是一种小型文本文件，由服务器发送到用户的浏览器，并存储在本地。
  • Cookie 可以设置过期时间，过期后数据会被清除。
  • Cookie 会在每次 HTTP 请求中自动发送到服务器。
  • Cookie 的存储容量较小，通常为 4KB。
  • Cookie有路径（path）的概念，可以限制cookie只属于某个路径下。
• 用途：
  • 存储用户登录状态、会话信息等。
  • 跟踪用户行为，例如浏览历史、购物车内容等。
  • 实现个性化推荐。
• 优点：
  • 可以在客户端和服务器之间共享数据。
  • 可以设置过期时间，灵活控制数据的生命周期。
• 缺点：
  • 存储容量较小。
  • 安全性较低，容易被窃取或篡改。
  • 每次 HTTP 请求都会发送 Cookie，增加网络开销。

总结

使用建议：

• 如果需要存储临时数据，可以使用 SessionStorage。
• 如果需要持久存储数据，可以使用 LocalStorage。
• 如果需要在客户端和服务器之间共享数据，可以使用 Cookie。
• 存储敏感数据时，尽量不要存储到客户端，如果必须存储，一定要加密。

性能优化

前端性能优化是提高 Web 应用用户体验的关键。一个高性能的 Web 应用能够更快地加载、更流畅地运行，从而提升用户满意度。以下是一些常见的前端性能优化策略，涵盖了代码、资源、网络等多个方面：

1. 代码优化

• 减少 DOM 操作：
  • 尽量避免频繁操作 DOM，可以将多次 DOM 操作合并为一次。
  • 使用虚拟 DOM 技术（如 React、Vue）可以有效地减少真实 DOM 操作。
• 优化 JavaScript 代码：
  • 避免全局变量污染，使用模块化开发。
  • 减少不必要的计算和循环。
  • 使用事件委托减少事件监听器的数量。
  • 合理使用闭包，避免内存泄漏。
  • 使用 requestAnimationFrame 处理动画，避免页面卡顿。
  • 使用 web worker 在后台线程处理复杂计算，避免阻塞主线程。
• 优化 CSS 代码：
  • 减少 CSS 选择器的层级，避免使用通配符选择器。
  • 避免使用 CSS 表达式。
  • 合理使用 CSS 动画，避免使用高消耗的 CSS 属性。
  • 使用 CSS Sprites 或 Iconfont 减少图片请求。
  • 将小的图片资源转换为 base64 编码内嵌到 CSS 中。

2. 资源优化

• 减少 HTTP 请求：
  • 合并 JavaScript 和 CSS 文件。
  • 使用 CSS Sprites 或 Iconfont。
  • 将小的图片资源转换为 base64 编码内嵌到 HTML 或 CSS 中。
• 压缩资源：
  • 压缩 HTML、CSS 和 JavaScript 文件。
  • 压缩图片资源。
• 使用 CDN：
  • 将静态资源部署到 CDN 上，利用 CDN 的缓存和加速功能。
• 懒加载：
  • 延迟加载非首屏图片和资源。
  • 使用 Intersection Observer API 实现懒加载。
• 预加载：
  • 预先加载用户可能需要的资源。
  • 使用 <link rel="preload"> 或 <link rel="prefetch">。
• 缓存：
  • 合理设置 HTTP 缓存头，利用浏览器缓存。
  • 使用 Service Worker 实现离线缓存。
  • 使用 LocalStorage 或 SessionStorage 缓存数据。

3. 网络优化

• 使用 HTTP/2 或 HTTP/3：
  • HTTP/2 和 HTTP/3 提供了多路复用、头部压缩等功能，可以提高网络传输效率。
• 启用 Gzip 或 Brotli 压缩：
  • 压缩网络传输的数据，减少传输时间和带宽消耗。
• 减少 DNS 查询：
  • 尽量使用同一个域名下的资源。
  • 使用 DNS 预解析。
• 使用 CDN：
  • CDN 可以将资源缓存到离用户更近的节点，减少网络延迟。

4. 渲染优化

• 优化首屏加载：
  • 减少首屏加载的资源量。
  • 使用骨架屏或占位符。
  • 使用服务端渲染（SSR）或预渲染。
• 减少重绘和重排：
  • 尽量避免频繁触发重绘和重排。
  • 使用 transform 和 opacity 实现动画，避免触发重排。
  • 使用 requestAnimationFrame 处理动画。
• 优化滚动性能：
  • 使用 passive 事件监听器。
  • 使用 will-change 属性。
  • 使用虚拟滚动。

5. 工具和方法

• 使用 Chrome DevTools：
  • 利用 Performance 面板分析页面性能。
  • 利用 Network 面板分析网络请求。
  • 利用 Lighthouse 评估页面性能。
• 使用 WebPageTest 或 PageSpeed Insights：
  • 在线分析页面性能。
  • 提供性能优化建议。
• 使用性能监控工具：
  • 监控页面加载时间、资源加载时间等性能指标。
  • 及时发现和解决性能问题。

总结

前端性能优化是一个持续的过程，需要不断地分析、优化和监控。通过综合运用上述策略，可以有效地提高 Web 应用的性能，提升用户体验。

安全

前端安全是 Web 开发中至关重要的一环。它涉及保护用户数据、防止恶意攻击以及确保 Web 应用的可靠性。以下是一些常见的前端安全问题和相应的防御措施：

1. 跨站脚本攻击（XSS）

• 定义：
  • 攻击者将恶意脚本注入到受信任的网站中，当用户浏览该网站时，这些脚本会在用户的浏览器中执行。
• 防御：
  • 输入验证和过滤： 对用户输入的数据进行严格的验证和过滤，移除或转义潜在的恶意代码。
  • 输出编码： 在将用户输入的数据输出到网页时，进行正确的编码，防止浏览器将其解析为可执行的脚本。
  • 内容安全策略（CSP）： 使用 HTTP 头部 Content-Security-Policy，限制浏览器可以加载的资源来源。
  • 使用 httpOnly Cookie： 设置 Cookie 的 HttpOnly 属性，防止 JavaScript 代码访问 Cookie。

2. 跨站请求伪造（CSRF）

• 定义：
  • 攻击者利用用户在受信任网站上的登录状态，伪造用户请求，在用户不知情的情况下执行恶意操作。
• 防御：
  • 使用 CSRF Token： 在用户请求中添加一个随机的、不可预测的 Token，服务器端验证 Token 的有效性。
  • 验证 HTTP Referer： 检查 HTTP 请求的 Referer 头部，验证请求是否来自受信任的来源。
  • 使用 SameSite Cookie： 设置 Cookie 的 SameSite 属性，限制 Cookie 只能在同源请求中发送。
  • 验证码： 在一些敏感操作中，比如转账，修改密码等，增加验证码，可以有效的防止CSRF。

3. 点击劫持（Clickjacking）

• 定义：
  • 攻击者将恶意网站覆盖在受信任网站之上，诱使用户点击恶意网站上的元素。
• 防御：
  • X-Frame-Options 头部： 设置 X-Frame-Options 头部，禁止网页在 iframe 中加载。

4. SQL 注入

• 定义：
  • 恶意用户通过在输入框中输入恶意的SQL语句，导致后端数据库执行了计划外的操作。
• 防御：
  • 永远不要信任用户的输入： 始终对用户的输入进行验证和过滤。
  • 使用参数化查询或预编译语句： 避免将用户输入直接拼接到 SQL 查询语句中。
  • 最小权限原则： 为数据库用户分配最小必要的权限。

5. 中间人攻击（MITM）

• 定义：
  • 攻击者拦截客户端和服务器之间的通信，窃取或篡改数据。
• 防御：
  • 使用 HTTPS： 通过加密通信，防止数据被窃取或篡改。
  • HTTP 严格传输安全（HSTS）： 通过设置 HSTS 头部，强制浏览器使用 HTTPS 连接。

6. 其他安全措施

• 避免使用不安全的 JavaScript 代码： 例如 eval()、innerHTML 等。
• 使用安全的第三方库： 选择经过安全审计的第三方库，并及时更新。
• 定期进行安全扫描和漏洞评估： 及时发现和修复安全漏洞。
• 用户教育： 提高用户的安全意识，例如避免点击可疑链接、使用强密码等。

前端安全最佳实践

• 最小权限原则： 只授予用户必要的权限。
• 纵深防御： 采用多层防御措施，即使一层被攻破，还有其他层保护。
• 安全编码规范： 遵循安全的编码规范，例如 OWASP Top 10。
• 持续监控和改进： 定期进行安全评估和漏洞扫描，及时发现和修复安全问题。

希望这些信息能够帮助你更好地理解前端安全。

 mvvm 和 mvc 的区别

MVVM（Model-View-ViewModel）和 MVC（Model-View-Controller）都是常见的软件架构模式，用于分离应用程序的不同部分，提高代码的可维护性和可测试性。虽然它们的目标相似，但在实现方式和数据流上存在一些关键区别。

核心概念

• Model（模型）：
  • 表示应用程序的数据和业务逻辑。
  • 它独立于视图和控制器/ViewModel。
• View（视图）：
  • 用户界面，负责显示数据和接收用户输入。
  • 它应该尽可能地被动，只负责展示，不包含复杂的业务逻辑。
• Controller（控制器）（MVC）：
  • 负责处理用户输入、更新模型和选择要显示的视图。
  • 它是视图和模型之间的中介。
• ViewModel（视图模型）（MVVM）：
  • 是视图和模型之间的抽象层。
  • 它暴露模型中的数据和命令，供视图绑定。
  • 它负责将模型数据转换为视图所需的数据格式。

主要区别

1. 数据绑定：
   • MVVM 的核心是双向数据绑定。ViewModel 通过数据绑定将模型数据同步到视图，并将视图的用户输入同步回模型。
   • MVC 通常不使用双向数据绑定，视图通过控制器来更新模型，模型的变化通过控制器来通知视图。
2. 通信方式：
   • 在 MVC 中，视图和模型之间通过控制器进行通信。
   • 在 MVVM 中，视图直接与 ViewModel 通信，ViewModel 与模型通信。
3. 测试性：
   • MVVM 的 ViewModel 更容易进行单元测试，因为它独立于视图。
   • MVC 的控制器可能包含较多的视图逻辑，测试起来相对复杂。
4. 适用场景：
   • MVC 更适用于传统的 Web 应用，其中用户交互相对简单。
   • MVVM 更适用于富客户端应用，其中用户交互复杂，数据更新频繁。

总结

希望这些信息能够帮助你更好地理解 MVVM 和 MVC 的区别。

cookie有哪些属性

Cookie 是 Web 开发中常用的客户端存储机制，它允许服务器在用户的浏览器中存储少量数据。Cookie 的属性控制着 Cookie 的行为和安全性。以下是 Cookie 的主要属性：

1. Name=Value

• 这是 Cookie 的核心部分，定义了 Cookie 的名称和值。
• 名称和值都必须经过 URL 编码。

2. Expires 或 Max-Age

• Expires：设置 Cookie 的过期时间，使用绝对日期和时间格式。
• Max-Age：设置 Cookie 的最大生存时间，单位为秒。
• 如果两者都没有设置，Cookie 会在浏览器会话结束时过期（会话 Cookie）。
• 建议使用 Max-Age，因为它更直观。

3. Domain

• 指定 Cookie 所属的域名。
• 如果设置了 Domain，Cookie 会被发送到指定域名及其子域名。
• 如果没有设置 Domain，Cookie 默认属于设置它的域名。

4. Path

• 指定 Cookie 所属的路径。
• 只有请求的 URL 路径与 Cookie 的 Path 匹配时，Cookie 才会被发送到服务器。
• 如果没有设置 Path，Cookie 默认属于设置它的页面的路径。

5. Secure

• 指定 Cookie 只能通过 HTTPS 连接发送。
• 这可以防止 Cookie 在不安全的 HTTP 连接中被窃取。

6. HttpOnly

• 指定 Cookie 不能通过 JavaScript 代码访问。
• 这可以防止 XSS 攻击窃取 Cookie。

7. SameSite

• 控制 Cookie 在跨站点请求中的发送行为，有助于防止 CSRF 攻击。
• 有三个可选值：
  • Strict：Cookie 只会在同站点请求中发送。
  • Lax：Cookie 在同站点请求和某些跨站点请求（如导航到目标站点的 GET 请求）中发送。
  • None：Cookie 在所有请求中发送，但必须同时设置 Secure 属性。

属性使用示例：

1

Set-Cookie: username=JohnDoe; Max-Age=3600; Domain=example.com; Path=/; Secure; HttpOnly; SameSite=Lax

重要提示：

• Cookie 的大小限制为 4KB。
• Cookie 存储在用户的浏览器中，因此不适合存储敏感数据。
• 现代浏览器对第三方 Cookie 的限制越来越严格，因此建议尽量使用第一方 Cookie。