全部文章
共 1306 篇文章
前端实现分包及组件懒加载的核心方案&&图片懒加载
组件懒加载 一、路由级懒加载（框架原生支持） 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是一个开源项目，地址： 安装： 配置插件 在 文件中添加 插件的配置，如下： 构建完...
JavaScript 基础详解
数据类型 1\. JS 中有哪些基本数据类型？ 答案： 基本数据类型（Primitive Types） ： ：声明未赋值的变量 ：空值 ： ：整数/浮点数（包括 , ） ：字符串 ：大整数（ES2020） ：唯一值（ES6） 引用类型（Reference Type） ： （包含 , , 等） 解析： 基本类型存储在栈内存，按值访问。 引用类型存储在堆内存，按引用访问。 返回 （历史遗留问题）。 2\. 如何判断数据类型？ 答案： ：返回...
JavaScript无阻塞加载的方式
JavaScript无阻塞加载的方式 在 JavaScript 中，无阻塞加载（Non blocking Loading）是优化网页性能的关键技术，通过避免脚本阻塞页面渲染和其他资源的加载，提升用户体验。以下是实现无阻塞加载的常用方法及示例： 1\. 使用 属性 作用 ：异步加载脚本，下载完成后立即执行，不阻塞 HTML 解析。 适用场景 ：独立脚本，不依赖其他脚本或 DOM。 示例 ： 2\. 使用 属性 作用 ：异步加载脚本，但延迟...
最全的Map 和 WeakMap的区别
和 的区别及面试追问知识点 一、两者区别总结 （一）基本概念 和 均为 JavaScript 中用于存储键值对的数据结构，但在多个关键特性上有显著差异。 （二）键的类型限制 1. 键类型无严格限制，可接受基本数据类型（如字符串、数字、布尔值）以及引用数据类型（如对象、数组、函数）。 示例代码： 2. 键必须为对象，使用基本数据类型作为键会抛出错误。 示例代码： （三）垃圾回收机制 1. 对键和值采用强引用，只要 对象存在，其引用的键值对...
聊聊你知道的Vue与React的区别
文章主要介绍了 Vue 与 React 的区别，包括模板语法（Vue 类似 HTML，React 用 JSX）、组件通信、状态管理、生命周期、diff 算法、页面更新通知方式、监听方式等方面，还阐述了二者早期的问题及不同的解决方式。 1\. 模板语法 vs JSX Vue 使用类似于 HTML 的模板语法，例如： 标签中的模板。 模板示例（Vue） ： React 使用 JSX（JavaScript XML）, 它是一种将 HTML 直...
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 包括：协议、域名、端口、虚...