<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[乐辞的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/qq_45503196</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; qq_45503196]]></copyright><item><title><![CDATA[Vite 3 + Vue 3 异步加载路由后挂载 APP 实例：解决生产环境页面空白问题]]></title><link>https://blog.youkuaiyun.com/qq_45503196/article/details/142595793</link><guid>https://blog.youkuaiyun.com/qq_45503196/article/details/142595793</guid><author>qq_45503196</author><pubDate>Fri, 27 Sep 2024 15:59:20 +0800</pubDate><description><![CDATA[在使用 Vite 3 和 Vue 3 开发应用时，异步加载路由是一个常见的做法，但在某些情况下，这种方式可能会导致生产环境下页面出现空白。]]></description><category></category></item><item><title><![CDATA[localhost 自动被 redirect 到 https 地址的问题]]></title><link>https://blog.youkuaiyun.com/qq_45503196/article/details/142588060</link><guid>https://blog.youkuaiyun.com/qq_45503196/article/details/142588060</guid><author>qq_45503196</author><pubDate>Fri, 27 Sep 2024 10:52:49 +0800</pubDate><description><![CDATA[​
不知道为什么, 前端项目启动以后自动将http://localhost重定向到了https://localhost, 我并没有添加任何 hsts 的中间件, 所以并不是这个原因, 而且代码之前是好使的, 但是由于我安装了某个证书后, 导致出现了这个问题。]]></description><category></category></item><item><title><![CDATA[HTTP跨域请求时为什么要发送options请求]]></title><link>https://blog.youkuaiyun.com/qq_45503196/article/details/142215845</link><guid>https://blog.youkuaiyun.com/qq_45503196/article/details/142215845</guid><author>qq_45503196</author><pubDate>Fri, 13 Sep 2024 17:19:31 +0800</pubDate><description><![CDATA[HTTP跨域请求时为什么要发送options请求? options是跨域请求之前的预检查，浏览器自行发起的，无需我们干预，不会影响实际的功能]]></description><category></category></item><item><title><![CDATA[WebSocket和HTTP协议有什么区别]]></title><link>https://blog.youkuaiyun.com/qq_45503196/article/details/142202286</link><guid>https://blog.youkuaiyun.com/qq_45503196/article/details/142202286</guid><author>qq_45503196</author><pubDate>Fri, 13 Sep 2024 09:49:01 +0800</pubDate><description><![CDATA[WebSocket，支持端对端通信，可由client发起，也可由sever发起，用于消息通知、直播间讨论区、聊天室、协同编辑]]></description><category></category></item><item><title><![CDATA[webpack原理简述]]></title><link>https://blog.youkuaiyun.com/qq_45503196/article/details/142202155</link><guid>https://blog.youkuaiyun.com/qq_45503196/article/details/142202155</guid><author>qq_45503196</author><pubDate>Fri, 13 Sep 2024 09:46:24 +0800</pubDate><description><![CDATA[通过分析模块之间的依赖，最终将所有模块打包成一份或者多份代码包 (bundler)，供 HTML 直接引用。实质上，Webpack 仅仅提供了 打包功能 和一套 文件处理机制，然后通过生态中的各种 Loader 和 Plugin 对代码进行预编译和打包。webpack 是一种模块打包工具，可以将各类型的资源，例如图片、CSS、JS 等，转译组合为 JS 格式的。经过构建阶段之后，webpack 得到足够的模块内容与模块关系信息，之后通过。在 webpack 函数执行完之后，就到主要的构建阶段，首先执行。]]></description><category></category></item><item><title><![CDATA[移动端适配方案]]></title><link>https://blog.youkuaiyun.com/qq_45503196/article/details/142061110</link><guid>https://blog.youkuaiyun.com/qq_45503196/article/details/142061110</guid><author>qq_45503196</author><pubDate>Tue, 10 Sep 2024 17:21:33 +0800</pubDate><description><![CDATA[移动端适配，设计师交付的设计稿宽度是750px，设计稿上一个标题的fontSize标注尺寸是32px。(32/750)*100% = 4.27% ，换句话说这个标题的字号占屏幕宽度的占比是4.27%，不管任何屏幕都是如此。vw是相对单位，1vw表示屏幕宽度的1%。假设设计稿尺寸是750px，页面有一个按钮，按钮文字标注大小28px，按钮高度标注为48px，宽度为120px，边框为1px不缩放。对于任何需要等比缩放的元素，在写CSS设置样式时直接换算成vw即可，尺寸 = 100vw*设计稿标注大小/设计稿宽度]]></description><category></category></item><item><title><![CDATA[首屏加载缓慢之添加loading效果问题]]></title><link>https://blog.youkuaiyun.com/qq_45503196/article/details/142060405</link><guid>https://blog.youkuaiyun.com/qq_45503196/article/details/142060405</guid><author>qq_45503196</author><pubDate>Mon, 09 Sep 2024 15:34:01 +0800</pubDate><description><![CDATA[首屏加载缓慢之添加loading效果问题]]></description><category></category></item><item><title><![CDATA[前端开发中 em/px/rem/vh/vw区别]]></title><link>https://blog.youkuaiyun.com/qq_45503196/article/details/142054032</link><guid>https://blog.youkuaiyun.com/qq_45503196/article/details/142054032</guid><author>qq_45503196</author><pubDate>Mon, 09 Sep 2024 11:15:14 +0800</pubDate><description><![CDATA[前端开发中 em/px/rem/vh/vw区别？传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性；从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm等一些新的计量单位；利用这些新的单位开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等]]></description><category></category></item><item><title><![CDATA[验证码的作用，为什么要存在验证码？]]></title><link>https://blog.youkuaiyun.com/qq_45503196/article/details/142006012</link><guid>https://blog.youkuaiyun.com/qq_45503196/article/details/142006012</guid><author>qq_45503196</author><pubDate>Sun, 08 Sep 2024 12:08:57 +0800</pubDate><description><![CDATA[验证码的作用，为什么要存在验证码？背景：在现代网络应用中，验证码被广泛使用以实现人机识别和减轻服务器负担。常见的验证码为以下几类：图形验证码：通过展示一个随机生成的图形，要求用户输入对应的文字或数字来判断用户是否为真实用户；滑块验证码：用户需要在一个包含滑块的图形上，通过滑动滑块到指定位置或者旋转某个图形直到合适的位置来完成验证；短信验证码：用户在注册或登录过程中输入手机号码，并请求发送验证码到手机，然后用户通过查看手机短信来获取验证码。语音验证码]]></description><category></category></item><item><title><![CDATA[Vue 3.5 新特性解析]]></title><link>https://blog.youkuaiyun.com/qq_45503196/article/details/141961004</link><guid>https://blog.youkuaiyun.com/qq_45503196/article/details/141961004</guid><author>qq_45503196</author><pubDate>Sat, 07 Sep 2024 22:46:25 +0800</pubDate><description><![CDATA[在Vue 3.5中，几个新特性值得关注，它们将极大简化和增强你的开发体验。让我们逐一深入了解这些特性。]]></description><category></category></item><item><title><![CDATA[MongoDB 中的原子操作：确保数据一致性的利器]]></title><link>https://blog.youkuaiyun.com/qq_45503196/article/details/141961591</link><guid>https://blog.youkuaiyun.com/qq_45503196/article/details/141961591</guid><author>qq_45503196</author><pubDate>Sat, 07 Sep 2024 22:46:05 +0800</pubDate><description><![CDATA[MongoDB 的原子操作是确保数据库数据一致性和完整性的关键手段。它们能够在多个并发操作中保证数据的一致性，避免数据丢失或错误。通过合理使用这些操作，可以提高数据库的稳定性和可靠性，确保应用程序的正常运行。理解并掌握 MongoDB 中的原子操作，将有助于在设计和开发高效、稳定的应用程序时避免常见的陷阱和挑战。]]></description><category></category></item><item><title><![CDATA[H5页面如何进行首屏优化]]></title><link>https://blog.youkuaiyun.com/qq_45503196/article/details/141951347</link><guid>https://blog.youkuaiyun.com/qq_45503196/article/details/141951347</guid><author>qq_45503196</author><pubDate>Fri, 06 Sep 2024 09:43:49 +0800</pubDate><description><![CDATA[H5页面如何进行首屏优化? 路由懒加载、服务端渲染SSR、分页、图片懒加载lazyLoad]]></description><category></category></item><item><title><![CDATA[浏览器和nodejs事件循环（Event Loop）有什么区别？]]></title><link>https://blog.youkuaiyun.com/qq_45503196/article/details/141950974</link><guid>https://blog.youkuaiyun.com/qq_45503196/article/details/141950974</guid><author>qq_45503196</author><pubDate>Fri, 06 Sep 2024 09:41:03 +0800</pubDate><description><![CDATA[浏览器和nodejs事件循环（Event Loop）有什么区别？setTimeoutI/OUIPromise页面渲染之后页面渲染之前DOMDOM类型优先级类型分为6个，优先级从高到底执行setTimeoutpollI/O优先级最高，setTimeout比优先级高。]]></description><category></category></item><item><title><![CDATA[requestIdleCallback和requestAnimationFrame有什么区别?]]></title><link>https://blog.youkuaiyun.com/qq_45503196/article/details/141926411</link><guid>https://blog.youkuaiyun.com/qq_45503196/article/details/141926411</guid><author>qq_45503196</author><pubDate>Thu, 05 Sep 2024 11:25:46 +0800</pubDate><description><![CDATA[requestIdleCallback和requestAnimationFrame有什么区别? requestAnimationFrame每次渲染完在执行，高优先级，requestIdleCallback空闲时才执行，低优先级，都是宏任务，要等待DOM渲染完后在执行]]></description><category></category></item><item><title><![CDATA[如何实现网页多标签tab通讯?]]></title><link>https://blog.youkuaiyun.com/qq_45503196/article/details/141926284</link><guid>https://blog.youkuaiyun.com/qq_45503196/article/details/141926284</guid><author>qq_45503196</author><pubDate>Thu, 05 Sep 2024 11:23:22 +0800</pubDate><description><![CDATA[如何实现网页多标签tab通讯?通过websocket:无跨域限制,需要服务端支持，成本高,通过localStorage 同域通讯,通过SharedWorker通讯.SharedWorker是WebWorker的一种,WebWorker可开启子进程执行JS，但不能操作DOM,SharedWorker可单独开启一个进程，用于同域页面通讯,SharedWorker兼容性不太好，调试不方便，IE11不支持]]></description><category></category></item><item><title><![CDATA[js延迟加载的方式有哪些?]]></title><link>https://blog.youkuaiyun.com/qq_45503196/article/details/141892112</link><guid>https://blog.youkuaiyun.com/qq_45503196/article/details/141892112</guid><author>qq_45503196</author><pubDate>Wed, 04 Sep 2024 14:02:11 +0800</pubDate><description><![CDATA[js延迟加载的方式有哪些 ? 使用 XMLHttpRequest 对象加载 JavaScript 脚本，并将其注入到页面中。这种方式可以在页面加载过程中异步加载脚本。延迟加载（Deferred Loading）是一种优化网页性能的技术，可以延迟加载页面中的资源（如脚本、样式表、图片等），从而加快页面的初始加载速度。这些工具通常提供了更多的功能和配置选项，例如按需加载、懒加载、预加载等。这些延迟加载的方式可以根据具体的需求和场景选择合适的方式来优化页面加载性能，提升用户体验。]]></description><category></category></item><item><title><![CDATA[cookie、session、Token 及 WebStorage 的区别]]></title><link>https://blog.youkuaiyun.com/qq_45503196/article/details/141856348</link><guid>https://blog.youkuaiyun.com/qq_45503196/article/details/141856348</guid><author>qq_45503196</author><pubDate>Wed, 04 Sep 2024 10:30:46 +0800</pubDate><description><![CDATA[cookie、session、Token 及 WebStorage 的区别，sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。性能好，从本地读数据比通过网络从服务器上获得数据快得多，本地数据可以及时获得，再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示。]]></description><category></category></item><item><title><![CDATA[谈谈 JS 中new的原理与实现]]></title><link>https://blog.youkuaiyun.com/qq_45503196/article/details/141854311</link><guid>https://blog.youkuaiyun.com/qq_45503196/article/details/141854311</guid><author>qq_45503196</author><pubDate>Tue, 03 Sep 2024 10:17:58 +0800</pubDate><description><![CDATA[谈谈 JS 中new的原理与实现，new 关键词的主要作用就是执行一个构造函数、返回一个实例对象，在 new 的过程中，根据构造函数的情况，来确定是否可以接受参数的传递。]]></description><category></category></item><item><title><![CDATA[JavaScript 模块化]]></title><link>https://blog.youkuaiyun.com/qq_45503196/article/details/141852852</link><guid>https://blog.youkuaiyun.com/qq_45503196/article/details/141852852</guid><author>qq_45503196</author><pubDate>Tue, 03 Sep 2024 10:12:12 +0800</pubDate><description><![CDATA[JavaScript 模块化，js 中现在比较成熟的有四种模块加载方案：CommonJS 、AMD 、CMD 、 ES6 使用的 import 和 export 的形式]]></description><category></category></item><item><title><![CDATA[JS 对象深浅拷贝]]></title><link>https://blog.youkuaiyun.com/qq_45503196/article/details/141852081</link><guid>https://blog.youkuaiyun.com/qq_45503196/article/details/141852081</guid><author>qq_45503196</author><pubDate>Tue, 03 Sep 2024 09:57:48 +0800</pubDate><description><![CDATA[JS 对象的深浅拷贝，如果属性是引用数据类型，复制的就是内存中的地址，如果其中一个对象改变了这个内存中的地址，肯定会影响到另一个对象。将一个对象从内存中完整地拷贝出来一份给目标对象，并从堆内存中开辟一个全新的空间存放新对象，且新对象的修改并不会改变原对象，二者实现真正的分离。方法其实也是浅拷贝，所以连接一个含有引用类型的数组时，需要注意修改原数组中的元素的属性，因为它会影响拷贝之后连接的数组。类型的对象，但是如果到了对象的第二层属性 obj1.a.b 这里的时候，前者值的改变也会影响后者的第二层属性的值]]></description><category></category></item></channel></rss>