- 博客(285)
- 资源 (1)
- 收藏
- 关注
RSS订阅转载 新一代 Web 预渲染技术
(LCP)（最大内容渲染）占据着最重要的位置，这个指标也很好理解，也就是一个网页当前视口中可见的最大元素的渲染时间。很好理解，就是当我们还没有访问页面是提前对页面进行渲染，等到我们真正访问页面时就不需要再花费额外的时间去渲染页面了。的方式，对于一些拥有静态内容的页面，比如博客，一般要预渲染的页面都是固定的 ，可以用静态配置。这种方式类似，会提前获取未来需要加载的页面所需的资源，但不会完全预渲染页面，也不会执行。不同的是，预渲染的请求在 Network 看板里是没办法直接看到的，因为它们是在。
2023-09-18 21:41:11
1270
原创 跨站 和 SameSite
Cookie 的 SameSite 属性可以让 Cookie 在跨站请求时不会被发送，从而可以阻止跨站请求伪造攻击（CSRF）。之前默认是 None，Chrome80 后默认是 Lax。
2023-08-30 23:43:15
150
原创 HTML中的字符串转义
这是一个简单的转义，只会把跟 html 有冲突的标签进行转义。'<': '<','>': '>','"': '"',"'": '''防止用户输入恶意篡改，Vue，JSX 默认情况下不用处理，插入的文本都是按照字符串处理。Vue中用v-html引入的内容要做转义。
2023-08-15 22:51:52
971
原创 远程 web 项目调试工具
其调试面板只支持查看基本类型的数据和对象字面量；记录了日志输出和网络请求的行为，但其中网络请求的详细数据无法查看；报错不展示堆栈详情等等，整体而言提供的功能比较粗糙。且只支持通过公网访问，数据安全无法保障。功能齐全，跟谷歌的调试面板差不多。
2023-08-10 22:54:30
190
原创 剪切、复制、粘贴事件
但是 div 不是表单元素，不能直接通过 focus() 来使其聚焦，需要在div元素上增加 contenteditable=“true” 先使其变成可编辑元素（该类元素可以使用focus来聚焦），然后给div绑定onmouseenter和onmouseleave方法，鼠标移入时使其聚焦，移出时失焦，这样就能在鼠标移入div区域时粘贴触发onpaste事件。粘贴事件的 event 提供了一个 clipboardData 属性，该属性包含了剪切板数据，可以设置和读取剪切板内容。
2023-08-09 23:23:03
485
原创 axios 多个请求loading管理
每当一个请求结束， loadingCount 减 1，并判断 loadingCount 是否为 0，如果为 0，则关闭 loading；每当发起一个请求，打开 loading，同时 loadingCount 加 1；这样即可解决多个请求下有某个请求提前结束，导致 loading 关闭的问题。解决方案：增加一个 loadingCount 变量，用来计算请求的次数。预期效果：多个请求并发时，所有请求完成后才关闭loading。
2023-07-08 13:30:20
339
原创 vite+vue3+ts 报错和解决办法汇总
在 tsconfig.node.json 文件的 compilerOptions 添加配置 "allowSyntheticDefaultImports": true。这将告诉TypeScript使用Node.js的模块解析方式来查找模块。下配置 "moduleResolution": "node"这时你可以重启一下VSCode就不会报错了。文件的 compilerOptions。在 tsconfig.app.json。
2023-06-15 23:08:24
2010
原创 .editorconfig 配置
有人会问：既然项目已经使用了 eslint 和 prettier，为什么还需要 EditorConfig？为什么需要 EditorConfig？.editorconfig 是一个用于定义和维护跨不同编辑器和开发环境的一致编码样式的文件。它可以确保整个团队在使用不同编辑器时遵循相同的编码规范，以提高代码的一致性和可读性。尽管 ESLint 和 Prettier 可以处理一些代码风格问题和格式化要求，但它们的主要目的是不同的：ESLint 是一个强大的静态代码分析工具，用于检查代码中的潜在问题和
2023-06-11 22:14:20
739
原创 浏览器网页闪退原因分析
浏览器中网页闪退可能由多种原因引起。以下是一些可能的原因：内存问题：如果浏览器占用过多内存，系统可能会强制关闭某些页面或整个浏览器以保护系统的稳定性。扩展或插件冲突：某些浏览器扩展或插件可能与网页的代码或其他扩展产生冲突，导致网页闪退。不兼容的网页元素：有时，网页上的特定元素（如脚本、样式或媒体）可能与浏览器不兼容，导致网页崩溃或闪退。缓存问题：缓存是浏览器用于存储网页数据的临时存储区域。如果缓存数据损坏或过期，浏览器可能无法正确加载网页，从而导致闪退。
2023-06-04 09:57:35
8009
翻译 Vue虚拟列表插件vue-virtual-scroller之中文文档
是一个高度可定制的虚拟滚动列表插件，它可以在大量数据下提供高性能的渲染和滚动。它可以处理各种类型的数据，例如列表、表格、瀑布流等，并且支持水平和垂直滚动，也支持动态列表项。vue-virtual-scroller的API和事件系统也非常丰富，可以让开发者轻松地自定义滚动逻辑和交互效果。
2023-05-21 18:30:24
10506
4
原创 Chrome浏览器https网站里http资源加载报错
今天遇到这么一个问题，我们的网站是https的，Chrome浏览器在加载一个http的图片时报错：仔细查看报错的图片路径，发现图片路径的http协议被Chrome浏览器强制改成了https。
2023-05-06 21:28:41
3034
原创 AI 编程
这是默认的模式，查看用户以前的代码或代码注释，为用户生成下一行代码。按下 ALT+T 进入提示模式，会给你提供一些代码解释，代码总结。使用提示 (Prompt) 模式，需要选中想要获得解释的代码，过一会儿，代码下方就会出现英文功能解释。一个版面正常编写代码，另一个版面显示建议的代码片段。）的功能自动生成代码，也可以根据已有的代码自动生成后续代码，补全当前行或生成后续若干行，帮助你提高编程效率。：如果是公司的项目，安装 CodeGeeX 扩展程序弹出下面的提示框最好选择“拒绝”，以免引起不必要的麻烦。
2023-04-26 22:53:08
776
原创 幽灵空白节点
图片下面为什么会有空白间隙呢？因为内联元素默认都是和 a 的下边缘基线对齐，基线和底部是有一段距离的，所以图片下面有一段间隙。为什么 div 内只有一张图片，没有别的内联元素，图片底部也会有空白间隙呢？在 HTML5 规范中有这样一句话：每个行框盒子都以一个具有元素的字体和行高属性的零宽度行内框开始。我们称这个假想的盒子为"支柱"。就是说每个行框盒子前面有一个“空白节点”。
2023-04-18 23:23:39
751
原创 vue cli 4 添加、移除typescript
移除 .eslintrc.js extends 里的 '@vue/typescript/recommended'步骤一：移除npm依赖。将所有ts文件改为js。
2022-11-03 11:35:01
1631
转载 前端实现 Excel 导入和导出功能
以上只是实现了简单的单个导入、导出功能，可以将其完善为批量操作，但是要注意批量操作带来的耗时性，将对应的耗时部分通过 webworker等方式处理，这样页面就不需要一直等待当前的操作完成。另外，如果有要求在导出 Excel时有表格样式（如：行列宽高设置等）可以通过来实现。给我实现一个前端的 Excel 导入和导出功能 - 掘金。
2022-10-19 00:30:55
2106
转载 browser-sync（监测文件修改，自动刷新浏览器）
在当前需要调试目录下，打开命令行窗口，输入命令：，这样就会根据当前目录启动一个小的服务器，这个目录下的所有文件只要修改，访问的地址就会自动刷新。需要到监测的文件夹下。
2022-10-08 11:17:25
1319
原创 单例 Promise 和 Promise 缓存
单例 Promise 就是只会有一个 Promise，接口也就只会请求一次。这里，我们将 Promise 放入缓存中，然后将其返回给调用方。最终，获取用户信息接口只会调用一次。最后的效果：连续点击按钮，但最终只会调用一次获取用户信息的接口。
2022-09-07 00:02:51
359
原创 standard-version（发版与 Changelog 自动化）
我们就可以使用 standard-version 进行版本管理自动化，包括更新 CHANGELOG.md，以及使用 。它也会自动修改 package.json 里的 version。在使用 之前，需要遵循 Conventional Commit Specifications 来进行标准化的 commit message 编写。这是因为 是基于 commit 类型来更新版本号的（feature 会更新 minor, bug fix 会更新 patch, BREAKING CHANGES 会更新 major
2022-07-14 00:00:00
3939
转载 commitizen ~ git 提交信息标准化
1. 安装2. 设置 changelog adapter：3. 在 package.json，中增加如下脚本：首先我们 文件，然后 ，此时 commitizen 会通过 CLI 对我们进行询问：选择提交类型后，会需要我们填写详细信息： 总结：概括起来就是：本来我们用 git commit -m "xxx" 这一条指令就能提交完成的提交操作改成用终端提示什么我们填什么进行提交信息规范化。...
2022-07-13 22:56:41
363
转载 浏览器的5种观察器
该观察器自动"观察"目标元素与根元素交叉区域的变化。默认根元素为文档视口，此时交叉区域的变化决定了用户在当前视口能否看到目标元素，因此它经常被用于“元素可见性”观察。比如：图片懒加载、无限滚动、广告曝光量统计等。兼容性：IE不支持1. 创建观察器实例2. 定义观察到目标元素与根元素交叉区域变化时的回调函数 callback(entries, observer)。entries数组中,每个成员都是一个IntersectionObserverEntry对象,如果同时有两个被观察的对象的可见性发生变化，en
2022-06-21 23:32:42
467
原创 如何监听DOM元素尺寸的变化？
window 有 resize 事件，我们可以联想到 iframe 也有 resize 事件。我们在要监听尺寸变化的 DOM 元素内添加一个 iframe，iframe 设置 width、height 都为 100%，并绑定 resize 事件就可以监听了。
2022-06-20 23:14:33
1056
转载 .gitignore Git 会忽略的配置文件
除了 .gitignore 以外，很多工具都有 ignore 文件，比如 .eslintignore, .prettierignore 等等。它们的语法都是跟 .gitignore 一样的。现在我们来看一下 .gitignore 的一些基础语法。转载自：ESlint Prettier Git 中使用 ignore忽略文件的规则解释_胡聊前端的博客-CSDN博客_prettier忽略文件......
2022-06-07 23:11:53
424
1
原创 node内存溢出：JavaScript heap out of memory
今天在给项目 build 的时候，出现了以下报错：这是 node 内存溢出的报错。我们知道 node.js 是基于 V8 引擎，V8 引擎有内存限制。在《深入浅出nodejs》书中说明，默认内存限制，64位系统约为1.4GB，32位系统约为0.7GB。如何解决这个问题呢？那就是扩大内存。node --max-old-space-size=1700 test.js // 单位为MB// 或者node --max-new-space-size=1024 test.js // 单位为KB
2022-05-30 22:43:25
684
转载 GitHub Actions 是什么？
一、GitHub Actions 是什么？大家知道，持续集成由很多操作组成，比如抓取代码、运行测试、登录远程服务器，发布到第三方服务等等。GitHub 把这些操作就称为actions。很多操作在不同项目里面是类似的，完全可以共享。GitHub注意到了这一点，想出了一个很妙的点子，允许开发者把每个操作写成独立的脚本文件，存放到代码仓库，使得其他开发者可以引用。如果你需要某个action，不必自己写复杂的脚本，直接引用他人写好的action即可，整个持续集成过程，就变成了一个action...
2022-05-23 23:08:43
550
原创 vue-lazyload — 懒加载图片和组件
仅支持 Vue2，不支持 Vue3安装依赖包npm i vue-lazyload -S在 main.js 使用插件import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload, { preLoad: 1.3, // 预加载高度的比例 error: require('./assets/error.gif'), loading: require('./assets/loading.gif'), attempt: .
2022-05-03 13:16:29
370
原创 js【剪切、复制、粘贴】功能实现
针对现代浏览器实现（Navigator.clipboard）Navigator.clipboardAPI可以用来访问系统剪贴板，可以实现【剪切、复制、粘贴】功能。该 API 被设计用来取代使用 document.execCommand() 的剪贴板访问方式，不兼容 IE。使用 Navigator.clipboardAPI时会弹出用户授权弹窗。如果用户没有授予权限，则不允许读取或更改剪贴板内容。let clipBoard = navigator.clipboard;// 写入文本至操作系..
2022-03-21 00:22:21
2417
原创 什么是 Vite？
一、什么是 ViteVite 是 vue 的作者尤雨溪在开发 vue3.0 的时候开发的一个 web 开发构建工具。由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。二、Vite 和 Webpack 区别Vite 优势：vite 开发服务器启动速度比 webpack 快 webpack 会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。 vite 在启动开发服务器时不需要打包，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快。当浏览器请求某个模块时
2022-03-06 22:01:04
19002
1
原创 微前端笔记
如上图就是采用single-spa实现微前端的整体流程：资源模块加载器：用来加载子项目初始化资源。我们将子项目的入口js构建成umd格式，然后使用模块加载器远程加载，通常会使用SystemJs（不是必须）通用模块加载器来进行加载。子应用资源配置表：用来记录各个子应用的入口资源url信息，以便在切换不同子应用时使用模块加载器去远程加载。因为每次子应用更新后入口资源的hash通常会变化，所以需要服务端定时去更新该配置表，以便框架能及时加载子应用最新的资源。注意：single-spa本身是不支....
2022-03-03 22:45:11
288
转载 什么是微前端
一、什么是微前端？微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。微前端借鉴了微服务的架构理念，将一个庞大的前端应用拆分为多个独立灵活的小型应用，每个应用都可以独立开发、独立运行、独立部署，再将这些小型应用联合为一个完整的应用。微前端既可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性，相比一整块的前端仓库，微前端架构下的前端仓库倾向于更小更灵活。二、特性技术栈无关主框架不限制接入应用的技术栈，子应用可自主选择技术栈 独立开...
2022-03-01 22:08:27
22483
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人