Map 完全指南
JavaScript 中的 Map 完全指南 引言 在 JavaScript 中, 是一种用于存储 的数据结构,具有 键类型和丰富的方法。相较于传统的对象(Object), 提供了更高效的键值对操作方式,特别适合处理大量数据和需要频繁操作键值对的场景。本文将详细介绍 的创建、常用方法、迭代方式,并探讨它与对象的区别和实际应用场景。 1\. 创建 使用 来创建一个空的 。 也可以在创建时初始化 ,传入一个包含键值对的数组: 2\. 和对象...
slice、splice、split 三者的区别
slice(切割) slice 能够截取 字符串 或 数组,并返回一个新的 字符串 或 数组(不改变原字符串或数组) 功能一:截取字符串 从 start下标 开始,保留到 end下标 的前一个结束,如果没有 end,就保留到最后一个字符结束。 举一反三: 除了 能够截取字符串外,还有两个方法经常也被用来截取字符串,它们分别是: 与 。它们都能截取字符串,并且返回一个新的字符串(不改变原字符串)。 :截取字符串,从 start下标 开始,...
substring方法与substr的区别
JavaScript 提供了两个用于截取字符串的方法:substring 和 substr。虽然它们在功能上有些类似,但在使用和行为上存在一些差异。本文将对这两个方法进行全面比较,并提供示例代码来说明它们的用法和区别。 1\. substring 方法 substring(startIndex, endIndex) 方法用于从字符串中提取从 startIndex 到 endIndex 1(不包括 endIndex)之间的 。如果省略 e...
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 特点 : 提高网页加载速度 减少后台服务器压力 提升用户体验 原理 将图片地址存储到 属性上 判断图片是否在可视区域 如果在,就设置图片 绑定 监听事件 节流 节流是一种常用的性能优化技术,它可以限制函数的执行频率,避免过多的重复操作,提升页...