OPTIONS请求条件与浏览器安全策略CORS
1\. 什么时候会发送OPTIONS请求 在 Web 开发中， 请求是一种 HTTP 请求方法，通常与 CORS（跨源资源共享，Cross Origin Resource Sharing） 机制相关。它主要用于预检（preflight）请求，以检查服务器是否允许特定的跨域请求。以下是详细说明： 1.1. 发送OPTIONS请求条件 1.1.1. 跨域请求且不是简单请求 当发起的请求是跨域的（即请求的目标域名与当前页面域名不同），并且不满...
前端项目中，强缓存和协商缓存的配置
前端缓存分为HTTP缓存和 1. HTTP缓存(本文重点) 强缓存 协商缓存 2. 浏览器缓存 比较熟悉的 cookie，localstorage sessionstorage indexDB… 或者cacheStorage 请求的缓存，如果本地有取本地的 先说总结的内容 webpack配置（主要是文件名上有个hash值，便于服务器校验文件有没有修改） 使用hash的好处就是，使版本发布之后，使之前文件的强缓存失效 nginx配置 （主...
搞定前端性能优化问题
一、首屏加载优化 首屏加载是指 用户打开页面到第一个可视内容呈现出来之间的时间 。它直接影响用户对网站的第一印象，因此在前端性能优化中具有最高的优先级。 优化首屏加载的目标是 尽可能快地把关键内容展示给用户，减少白屏时间，提升首屏体验。 常见的优化方式包括资源按需加载、预加载关键资源、使用服务端渲染或静态生成等。 1\. 资源按需加载（Lazy Load） 在前端应用中，JS、CSS、图片等资源如果全部打包在一起加载，会极大拖慢页面的加...
JS宏任务，微任务，DOM渲染，requestAnimationFrame执行顺序比较
本文小结 1. 宏任务和微任务都是异步任务。 2. 优先级： 3. 慢于同步任务。本次实践中，第一次执行的时间比微任务慢，比宏任务和DOM渲染快。 来自MDN的理论部分 每个代理都是由 事件循环 驱动的，事件循环负责收集用事件（包括用户事件以及其他非用户事件等）、对任务进行排队以便在合适的时候执行回调。然后它执行所有处于等待中的 JavaScript 任务（宏任务），然后是微任务，然后在开始下一次循环之前执行一些必要的渲染和绘制操作。...
一文总结vue和react的区别
Vue.js 和 React.js 都是流行的 JavaScript 前端框架，用于构建用户界面。它们在设计理念、语法和使用方式等方面有一些区别，以下是一些比较详细的对比： 设计理念： Vue.js ：Vue.js 是一款轻量级、渐进式的框架，它专注于视图层的渲染和状态管理。Vue 的核心思想是通过数据驱动视图的变化，提供了一套简洁的模板语法和响应式数据绑定机制，使得开发者可以更便捷地构建交互式的用户界面。 React.js ：Reac...
性能优化
<span style="color: var( g textcolor);" 图片懒加载也叫延迟加载，只加载当前屏幕的图片，可视区域外的图片不会进行加载，只有当屏幕滚动的时候才加载。</span 特点 ： 提高网页加载速度 减少后台服务器压力 提升用户体验 原理 将图片地址存储到 属性上 判断图片是否在可视区域 如果在，就设置图片 绑定 监听事件 节流 节流是一种常用的性能优化技术，它可以限制函数的执行频率，避免过多的重复操作，提升页...
JavaScript函数参数arguments的用法
JavaScript是一门强大的编程语言，它支持函数传递参数，参数的个数是不确定的。 可以通过JavaScript内置的arguments对象访问。arguments对象是一个伪数组对象，它包含传递给函数的所有参数，可以通过索引值访问每个参数。 参数arguments的用法 1.访问函数参数 我们可以通过arguments对象访问传递给函数的所有参数，如下所示： 在上面的add函数中，我们可以通过arguments\[0\]和argum...
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. 动态导入语法 在组件使用前通过 延迟加载，适用于弹窗等非首屏内容： 条件触发加载 结合用户交互（如点击按钮）触发组件加载： 三、构建...