slice、splice、split 三者的区别
slice（切割） slice 能够截取 字符串 或 数组，并返回一个新的 字符串 或 数组（不改变原字符串或数组） 功能一：截取字符串 从 start下标 开始，保留到 end下标 的前一个结束，如果没有 end，就保留到最后一个字符结束。 举一反三： 除了 能够截取字符串外，还有两个方法经常也被用来截取字符串，它们分别是： 与 。它们都能截取字符串，并且返回一个新的字符串（不改变原字符串）。 ：截取字符串，从 start下标 开始，...
substring方法与substr的区别
JavaScript 提供了两个用于截取字符串的方法：substring 和 substr。虽然它们在功能上有些类似，但在使用和行为上存在一些差异。本文将对这两个方法进行全面比较，并提供示例代码来说明它们的用法和区别。 1\. substring 方法 substring(startIndex, endIndex) 方法用于从字符串中提取从 startIndex 到 endIndex 1（不包括 endIndex）之间的 。如果省略 e...
JS 高效生成数字数组
📖 简介 在 JavaScript 中，我们经常需要生成从 到 的数字数组。常见的方法包括 循环、 、 以及 等。但在实际应用中，不同方法的性能差异如何？最传统的 循环真的最快吗？而最慢的方法又是哪一个？ 📌 摘要 目标 ：对比 JavaScript 中几种生成 数组的方法，找出最高效和最慢的方案。 方法 ： 循环、 、 、 等。 结果 ： 循环在大数据量情况下最优，而某种常见方法的性能表现却意外最差！ 适用场景 ：不同方法适用于不...
Vue首屏优化指南
🔍性能诊断用数据说话 1. Lighthouse精准定位瓶颈 核心指标：FCP（首次内容渲染）<1.5s、LCP（最大内容渲染）<2.5s 实战技巧：通过 性能面板 揪出长任务（Long Tasks） 2. Webpack Bundle分析 安装 插件，可视化查看各模块体积占比 🚀 核心优化5大杀器 🔥 技巧1：路由级懒加载（体积削减40%） 效果：首屏仅加载必要组件，非核心路由延迟加载 🔥 技巧2：组件级动态导入 �...
前端实现分包及组件懒加载的核心方案&&图片懒加载
组件懒加载 一、路由级懒加载（框架原生支持） 1. Vue Router 动态导入 使用 语法实现路由级代码分割，访问对应路由时加载独立分包。 React Router v6+ 方案 结合 和 实现按需加载： 二、组件级懒加载（细粒度优化） 1. 动态导入语法 在组件使用前通过 延迟加载，适用于弹窗等非首屏内容： 条件触发加载 结合用户交互（如点击按钮）触发组件加载： 三、构建...
如何防止 XSS、CSRF 等常见的安全漏洞
前言 随着互联网技术的飞速发展，前端应用的功能越来越强大，用户体验也越来越好。然而，这也使得前端应用面临更多的安全威胁。其中， （XSS）和跨站请求伪造（CSRF）是最常见且危害较大的两种攻击方式。本文将详细介绍这两种攻击的原理，并提供详细的防范措施，帮助开发者构建更加安全的前端应用。 一、跨站脚本攻击（XSS） 1.1 原理 跨站脚本攻击（Cross Site Scripting，简称 XSS）是一种攻击手段，攻击者通过在网页中插入恶...
vite项目打包build后提示说超过500k了
说可以通过配置build.rollupOptions.output.manualChunks来提升一下，好可以，我来配置一下，把那些可能大的包单独分配一下： 然后再看一下，是变小了，但是还是500警告啊： 那就开始分析是哪个包比较大吧，使用rollup plugin visualizer这个插件来分析一下，rollup plugin visualizer是一个开源项目，地址： 安装： 配置插件 在 文件中添加 插件的配置，如下： 构建完...
使用 IntersectionObserver 实现曝光埋点
在 Web 开发中，我们经常需要埋点统计用户的行为，比如 元素曝光 统计，即某个元素在视口中可见并达到一定时间后触发上报。为了解决这一需求，我们可以使用 监听元素的可见性，并结合 计算停留时间，确保符合条件后才触发上报。 需求分析 我们的曝光埋点 SDK 需要满足以下需求： 监听多个元素的可见性 设定曝光阈值 （元素可见面积的比例，比如 50% 才算曝光） 设定曝光时间 （元素需要在视口内持续一段时间才触发上报） 动态解绑监听 （防止内...
浏览器缓存及优化手段
前言 当我们通过url首次访问某个网站的时候，我们如果使用浏览器的工具查看网络请求，会发现有很多http请求，但是当我们下一次再访问时，这些请求都不会发送而是展现在了页面上，而这就是浏览器缓存发挥的作用。 浏览器缓存 浏览器缓存是指将页面长时间不更新的资源缓存到浏览器上，下次访问页面时该部分长时间不更新的资源直接从缓存中获取，从而减少了网络请求次数，提高了页面的加载速度。浏览器的缓存方式主要分为两种： 强缓存 和 协商缓存 ，下面将为大...