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...
如何防止 XSS、CSRF 等常见的安全漏洞
前言 随着互联网技术的飞速发展，前端应用的功能越来越强大，用户体验也越来越好。然而，这也使得前端应用面临更多的安全威胁。其中， （XSS）和跨站请求伪造（CSRF）是最常见且危害较大的两种攻击方式。本文将详细介绍这两种攻击的原理，并提供详细的防范措施，帮助开发者构建更加安全的前端应用。 一、跨站脚本攻击（XSS） 1.1 原理 跨站脚本攻击（Cross Site Scripting，简称 XSS）是一种攻击手段，攻击者通过在网页中插入恶...
最全的Map 和 WeakMap的区别
和 的区别及面试追问知识点 一、两者区别总结 （一）基本概念 和 均为 JavaScript 中用于存储键值对的数据结构，但在多个关键特性上有显著差异。 （二）键的类型限制 1. 键类型无严格限制，可接受基本数据类型（如字符串、数字、布尔值）以及引用数据类型（如对象、数组、函数）。 示例代码： 2. 键必须为对象，使用基本数据类型作为键会抛出错误。 示例代码： （三）垃圾回收机制 1. 对键和值采用强引用，只要 对象存在，其引用的键值对...
hash与history路由模式区别hash与history的区别
hash与history的区别 两种路由模式原因原因 对于 这类渐进式前端开发框架， 为了构建 SPA（单页面应用）， 需要引入前端路由系统， 这也就是 存在的意义。 前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。 因此有两种路由 1. : 即地址栏 URL 中的 符号（此 不是密码学里的散列运算）。 比如这个 URL： ， 的值为 。它的特点在于：hash 虽然出现在 URL 中， 但不会被包括在 HTTP 请求中，...
SPA 两种路由模式的实现原理
Web 应用的路由跳转是通过判断 url 的变化来识别的，浏览器根据不同的 url 来选择加载不同的页面资源。现有的路由工具，也都是从不同的角度来解析 url 来实现其功能的。 单页应用 (SPA) 大致有 hash路由 和 history路由 两种路由模式。前者通过识别浏览器自带的锚点来判断资源，后者利用 h5 的 history API，通过解析嵌套子路径来识别资源位置。 Hash 一个完整的网页 URL 包括：协议、域名、端口、虚...