- 博客(100)
- 收藏
- 关注
RSS订阅原创 Vite 3 + Vue 3 异步加载路由后挂载 APP 实例：解决生产环境页面空白问题
在使用 Vite 3 和 Vue 3 开发应用时，异步加载路由是一个常见的做法，但在某些情况下，这种方式可能会导致生产环境下页面出现空白。
2024-09-27 15:59:20
750
原创 localhost 自动被 redirect 到 https 地址的问题
不知道为什么, 前端项目启动以后自动将http://localhost重定向到了https://localhost, 我并没有添加任何 hsts 的中间件, 所以并不是这个原因, 而且代码之前是好使的, 但是由于我安装了某个证书后, 导致出现了这个问题。
2024-09-27 10:52:49
847
原创 HTTP跨域请求时为什么要发送options请求
HTTP跨域请求时为什么要发送options请求? options是跨域请求之前的预检查，浏览器自行发起的，无需我们干预，不会影响实际的功能
2024-09-13 17:19:31
564
原创 WebSocket和HTTP协议有什么区别
WebSocket，支持端对端通信，可由client发起，也可由sever发起，用于消息通知、直播间讨论区、聊天室、协同编辑
2024-09-13 09:49:01
701
1
原创 webpack原理简述
通过分析模块之间的依赖，最终将所有模块打包成一份或者多份代码包 (bundler)，供 HTML 直接引用。实质上，Webpack 仅仅提供了 打包功能 和一套 文件处理机制，然后通过生态中的各种 Loader 和 Plugin 对代码进行预编译和打包。webpack 是一种模块打包工具，可以将各类型的资源，例如图片、CSS、JS 等，转译组合为 JS 格式的。经过构建阶段之后，webpack 得到足够的模块内容与模块关系信息，之后通过。在 webpack 函数执行完之后，就到主要的构建阶段，首先执行。
2024-09-13 09:46:24
1824
原创 移动端适配方案
移动端适配，设计师交付的设计稿宽度是750px，设计稿上一个标题的fontSize标注尺寸是32px。(32/750)*100% = 4.27% ，换句话说这个标题的字号占屏幕宽度的占比是4.27%，不管任何屏幕都是如此。vw是相对单位，1vw表示屏幕宽度的1%。假设设计稿尺寸是750px，页面有一个按钮，按钮文字标注大小28px，按钮高度标注为48px，宽度为120px，边框为1px不缩放。对于任何需要等比缩放的元素，在写CSS设置样式时直接换算成vw即可，尺寸 = 100vw*设计稿标注大小/设计稿宽度
2024-09-10 17:21:33
1358
原创 前端开发中 em/px/rem/vh/vw区别
前端开发中 em/px/rem/vh/vw区别？传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性；从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm等一些新的计量单位；利用这些新的单位开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等
2024-09-09 11:15:14
1761
原创 验证码的作用，为什么要存在验证码？
验证码的作用，为什么要存在验证码？背景：在现代网络应用中，验证码被广泛使用以实现人机识别和减轻服务器负担。常见的验证码为以下几类：图形验证码：通过展示一个随机生成的图形，要求用户输入对应的文字或数字来判断用户是否为真实用户；滑块验证码：用户需要在一个包含滑块的图形上，通过滑动滑块到指定位置或者旋转某个图形直到合适的位置来完成验证；短信验证码：用户在注册或登录过程中输入手机号码，并请求发送验证码到手机，然后用户通过查看手机短信来获取验证码。语音验证码
2024-09-08 12:08:57
2925
原创 MongoDB 中的原子操作：确保数据一致性的利器
MongoDB 的原子操作是确保数据库数据一致性和完整性的关键手段。它们能够在多个并发操作中保证数据的一致性，避免数据丢失或错误。通过合理使用这些操作，可以提高数据库的稳定性和可靠性，确保应用程序的正常运行。理解并掌握 MongoDB 中的原子操作，将有助于在设计和开发高效、稳定的应用程序时避免常见的陷阱和挑战。
2024-09-07 22:46:05
1080
原创 浏览器和nodejs事件循环（Event Loop）有什么区别？
浏览器和nodejs事件循环（Event Loop）有什么区别？setTimeoutI/OUIPromise页面渲染之后页面渲染之前DOMDOM类型优先级类型分为6个，优先级从高到底执行setTimeoutpollI/O优先级最高，setTimeout比优先级高。
2024-09-06 09:41:03
1550
原创 requestIdleCallback和requestAnimationFrame有什么区别?
requestIdleCallback和requestAnimationFrame有什么区别? requestAnimationFrame每次渲染完在执行，高优先级，requestIdleCallback空闲时才执行，低优先级，都是宏任务，要等待DOM渲染完后在执行
2024-09-05 11:25:46
328
原创 如何实现网页多标签tab通讯?
如何实现网页多标签tab通讯?通过websocket:无跨域限制,需要服务端支持，成本高,通过localStorage 同域通讯,通过SharedWorker通讯.SharedWorker是WebWorker的一种,WebWorker可开启子进程执行JS，但不能操作DOM,SharedWorker可单独开启一个进程，用于同域页面通讯,SharedWorker兼容性不太好，调试不方便，IE11不支持
2024-09-05 11:23:22
230
原创 js延迟加载的方式有哪些?
js延迟加载的方式有哪些 ? 使用 XMLHttpRequest 对象加载 JavaScript 脚本，并将其注入到页面中。这种方式可以在页面加载过程中异步加载脚本。延迟加载（Deferred Loading）是一种优化网页性能的技术，可以延迟加载页面中的资源（如脚本、样式表、图片等），从而加快页面的初始加载速度。这些工具通常提供了更多的功能和配置选项，例如按需加载、懒加载、预加载等。这些延迟加载的方式可以根据具体的需求和场景选择合适的方式来优化页面加载性能，提升用户体验。
2024-09-04 14:02:11
413
1
原创 cookie、session、Token 及 WebStorage 的区别
cookie、session、Token 及 WebStorage 的区别，sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。性能好，从本地读数据比通过网络从服务器上获得数据快得多，本地数据可以及时获得，再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示。
2024-09-04 10:30:46
515
原创 谈谈 JS 中new的原理与实现
谈谈 JS 中new的原理与实现，new 关键词的主要作用就是执行一个构造函数、返回一个实例对象，在 new 的过程中，根据构造函数的情况，来确定是否可以接受参数的传递。
2024-09-03 10:17:58
722
原创 JavaScript 模块化
JavaScript 模块化，js 中现在比较成熟的有四种模块加载方案：CommonJS 、AMD 、CMD 、 ES6 使用的 import 和 export 的形式
2024-09-03 10:12:12
1377
原创 JS 对象深浅拷贝
JS 对象的深浅拷贝，如果属性是引用数据类型，复制的就是内存中的地址，如果其中一个对象改变了这个内存中的地址，肯定会影响到另一个对象。将一个对象从内存中完整地拷贝出来一份给目标对象，并从堆内存中开辟一个全新的空间存放新对象，且新对象的修改并不会改变原对象，二者实现真正的分离。方法其实也是浅拷贝，所以连接一个含有引用类型的数组时，需要注意修改原数组中的元素的属性，因为它会影响拷贝之后连接的数组。类型的对象，但是如果到了对象的第二层属性 obj1.a.b 这里的时候，前者值的改变也会影响后者的第二层属性的值
2024-09-03 09:57:48
3016
原创 meta 标签：自动刷新/跳转
meta 标签：自动刷新/跳转，上面的代码会在 5s 之后自动跳转到同域下的 page2.html 页面。我们要实现 PPT 自动播放的功能，只需要在每个页面的 meta 标签内设置好下一个页面的地址即可。假设要实现一个类似 PPT 自动播放的效果，你很可能会想到使用 JavaScript 定时器控制页面跳转来实现。
2024-09-02 09:39:51
551
原创 如何高效操作DOM ？
如何高效操作DOM？浏览器在渲染页面时会将 HTML 和 CSS 分别解析成 DOM 树和 CSSOM 树，然后合并进行排布，再绘制成我们可见的页面。如果在操作 DOM 时涉及到元素、样式的修改，就会引起渲染引擎重新计算样式生成 CSSOM 树，同时还有可能触发对元素的重新排布和重新绘制。如果采用字符串拼接的形式，先将 1 万个 div 元素的 html 字符串拼接成一个完整字符串，然后赋值给。比如下面的测试代码，循环读取一百万次 DOM 中的 body 元素的耗时是读取 JSON 对象耗时的 10 倍。
2024-09-02 09:37:37
710
原创 从输入URL 到网页显示的完整过程
从输入URL 到网页显示的完整过程，网络请求，解析：字符串 => 结构化数据，渲染：Render Tree 绘制到页面
2024-09-01 17:48:13
233
原创 JS内存泄露如何检测？场景有哪些？
JS内存泄露如何检测？场景有哪些？内存泄漏：当一个对象不再被使用，但是由于某种原因，它的内存没有被释放，这就是内存泄漏。1. 垃圾回收机制对于在JavaScript中的字符串，对象，数组是没有固定大小的，只有当对他们进行动态分配存储时，解释器就会分配内存来存储这些数据，当JavaScript的解释器消耗完系统中所有可用的内存时，就会造成系统崩溃。内存泄漏，在某些情况下，不再使用到的变量所占用内存没有及时释放，导致程序运行中，内存越占越大，极端情况下可以导致系统崩溃，服务器宕机。
2024-09-01 17:40:33
1095
原创 优化 Webpack 打包体积的思路
优化 Webpack 打包体积的思路，引入如 UglifyJsPlugin 等代码压缩插件，可以有效地压缩 JavaScript 代码，减小文件体积。这样不仅减少了打包体积，还利用了 CDN 的缓存优势，提高加载速度。配置中选择合适的选项，以确保开发阶段能够提供足够的错误追踪信息，同时不会增加过多的打包体积。：检查并移除不必要的插件，根据环境区分开发和生产配置，避免将调试工具打包到生产环境中。
2024-09-01 16:36:19
682
原创 浏览器缓存方式分为哪些？
浏览器缓存分为强缓存和协商缓存。当客户端请求某个资源时，获取缓存的流程如下先根据这个资源的一些 http header 判断它是否命中强缓存，如果命中，则直接从本地获取缓存资源，不会发请求到服务器；当强缓存没有命中时，客户端会发送请求到服务器，服务器通过另一些 request header 验证这个资源是否命中协商缓存，称为 http 再验证，如果命中，服务器将请求返回，但不返回资源，而是告诉客户端直接从缓存中获取，客户端收到返回后就会从缓存中获取资源；
2024-09-01 16:30:10
1130
原创 常见web安全及防护原理
请注意，以上示例仅为了说明XSS攻击和CSRF攻击的原理，并非真实的攻击代码。或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点。请注意，为了有效地防止XSS和CSRF攻击，应采用综合的安全措施，并进行定期的安全审查和测试。表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。比如：攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取。发送GET请求，将页面中的Cookie信息发送给攻击者控制的服务器。
2024-09-01 16:04:46
1268
原创 CSS优化实践
CSS优化实践，在构建高性能网站时，CSS的优化是不可忽视的环节。通过以下几个实践方法，你可以显著提升页面加载速度和响应能力，从而为用户提供更流畅的体验。本文将详细介绍一些有效的CSS性能优化技巧。
2024-08-31 20:57:12
844
原创 HTML5 为什么只需要写 ＜!DOCTYPE HTML＞
HTML5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为。而 HTML4.01 基于 SGML ,所以需要对 DTD 进行引用，才能告知浏览器文档所使用的文档类型。这个 DTD 提供了规范的文档结构和规则，以确保浏览器正确解析和显示文档。
2024-08-31 20:49:28
571
原创 理解HTTP请求方法：GET、POST、PUT 等
理解HTTP请求方法：GET、POST、PUT 等，在现代Web开发中，理解不同HTTP请求方法的用途及其特点是至关重要的。每种请求方法都承担着特定的角色，在客户端和服务器之间的通信中发挥着关键作用。包括GET、POST、PUT，以及一些不太常用的方法，如HEAD、DELETE、OPTIONS、TRACE和CONNECT。
2024-08-31 20:41:15
1049
原创 如何进行网站性能优化：从内容到服务器、前端与图片的全面指南
如何进行网站性能优化? 在当今竞争激烈的互联网环境中，网站性能优化变得尤为重要。快速的加载时间不仅能提升用户体验，还能提高搜索引擎排名。以下是从内容优化、服务器配置、前端技术、Cookie处理到图片优化等方面的全面指南，以帮助你提升网站的整体性能。
2024-08-31 20:36:49
1188
1
原创 HTTP状态码及其含义
HTTP状态码及其含义，在互联网通信中，HTTP状态码用于指示请求的处理结果。了解这些状态码对于诊断和调试网络问题至关重要。了解这些状态码有助于更好地理解服务器响应，并进行有效的故障排除。
2024-08-31 20:32:43
625
原创 什么是防抖和节流？
什是防抖和节流？在进行窗口调整（resize）、滚动（scroll）以及输入框内容校验等操作时，若事件处理函数频繁调用，可能会给浏览器带来极大负担，从而导致用户体验变差。为了优化性能，我们可以使用防抖（debounce）和节流（throttle）技术来控制函数的调用频率，从而提高应用的效率和流畅度。它们的核心思想是通过设置时间间隔来限制函数的执行时机。
2024-08-31 20:30:18
946
原创 Chrome 插件 MV3 配置清单
开发过 Chrome 插件经历的朋友应该知道，需要在根目录添加一个配置清单，清单内容需要根据需要添加，每次开发时基本需要去翻配置文档，但 Chrome 开发文档繁杂难找，每次查起来都要花费不少时间，所以整理一份清单表格作为参考使用。
2024-07-26 13:46:13
1188
原创 nvm install node Could not retrieve https://npm.taobao.org/mirrors/node/latest/SHASUMS256.txt.
一、问题描述在使用nvm install 时遇到以下错误：二、解决方案由于镜像地址更新，所以需要分别更新node和npm镜像，执行以下命令：再次执行nvm install 命令：正常安装。
2024-06-03 16:31:02
223
转载 Apache Bench 使用
如果提示ab: invalid URL，可能是URL最右边缺少/，例如 http://www.example.com 需要改为http://www.example.com/；result.html中会打印每次请求的请求头信息，请求总数较大时，重定向结果输出时可以不指定-v参数；"application/json"， 使用前者服务器可能会返回400 bad requests;postfile注意使用正确的编码格式，否则请求参数服务器端可能无法识别；调试请求时，对接口返回的中文字符的支持不友好，会显示乱码；
2023-12-22 23:19:44
169
原创 vue项目使用js监听浏览器关闭、刷新、后退事件
在Web应用开发中，我们经常会遇到这样的需求：在用户执行关键操作，如提交表单、支付交易等过程中，突然关闭、刷新或者后退浏览器，可能会导致操作未完成或者数据丢失。为了提高用户体验和保证应用数据的完整性，我们需要合理地使用JavaScript来监听浏览器关闭、刷新、后退事件，并作出相应处理。事件是在页面即将卸载时触发的，这通常发生在用户关闭或刷新页面之前。事件，如果不是非常必要，最好不要使用，因为它可能会影响用户体验。在Vue项目中，如果你使用。在使用上述事件时，我们应当小心谨慎，避免阻碍用户的正常操作。
2023-12-04 14:49:08
10882
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人