- 博客(2184)
- 收藏
- 关注
RSS订阅转载 Vue 单页面首屏优化，打包后大小减少64M，加载速度快了13.6秒
大小、请求数、加载时间都大大减少注意优化后的时间chunk-vendors.js和app.js加载一共耗时1.59s，不是1.11+1.59,chunk-vendors的下载解析会阻塞app.js的下载解析，所以一共1.59s。前：image.png。
2024-08-20 17:27:35
14
转载 如何在 Vue 中捕获错误？
同时，通过与日志系统的集成和对异步操作的有效管理，你可以更全面地掌握应用的运行状况并快速定位和修复问题。在现代前端应用中，异步操作随处可见。在 Vue 3 中，你可以使用 `try...catch` 语句以及 `async`/`await` 语法来捕获异步操作中的错误。在这个示例中，所有发生在 Vue 组件内的未捕获错误都会由 `app.config.errorHandler` 处理器捕获。在这里，我们通过 `fetch` API 进行一个网络请求，并在 `try...catch` 语句中捕获可能的错误。
2024-08-20 17:23:54
2
原创 Vue 3 中如何处理大数据量渲染和优化？
Vue提供了`v-once`指令，允许你一次性地渲染数据，不再进行后续变化监听。对于那些不需要重复更新的静态内容，使用`v-once`可以显著减少渲染和更新过程的性能消耗。对于那些需要频繁更新的动画或滚动事件，使用`requestAnimationFrame`可以优化性能。它通过只渲染可见区域的数据条目，大幅减少了DOM元素的数量，从而提高渲染性能。尽量拆分复杂的计算属性和模板渲染逻辑，避免单一属性和函数承担过多渲染任务，提升代码的可读性和执行效率。## 2. 使用 `v-once` 指令。
2024-08-20 17:22:41
183
转载 10 分钟带你构建monorepo架构，前端通用自动化 CI/CD 方案
cli本质上就是一个命令行工具，通过和用户进行命令行交互来实现指定的功能。前端实现cli其实很简单：等等，关于如何开发一个强大的cli工具还有很多内容，我们在这里就不一一赘述了，大家可以从参考lerna 的cli，阅读它的源码，它的源码写的很优质，很好读。在package.json 中加上 bin 字段："bin": {},我们在 package.json 中配置了如上的命令，实际上就是注册了 cli 的命令是 frontend。
2024-08-20 17:20:55
1
转载 展示如何在Vue 3应用中使用渐进增强和降级策略，确保在低性能设备和低带宽环境下的可用性
本文将通过详细的代码示例，演示如何在Vue 3应用中实现渐进增强和降级策略，从而确保在低性能设备和低带宽环境下的可用性。在这个示例中，我们检测 `navigator.connection.effectiveType` 判断网络状况，如果发现是2G网络，就将需要加载的数据量降到最少，确保低带宽环境下的可用性。降级策略（Graceful Degradation）与渐进增强相对，它是从构建具有完整功能的应用开始，然后在较差环境中降低功能和优化性能，确保应用在这些环境下仍然可用。## 什么是渐进增强与降级策略？
2024-08-20 17:05:32
1
转载 Chrome 居然提供了可以直接调用 LLM 的 API！
易于部署：在浏览器分发模型时，浏览器会考虑设备的功能并管理模型的更新。使用硬件加速：浏览器的 AI 运行时经过优化，可充分利用可用硬件，无论是 GPU、NPU 还是回退到 CPU。允许多种实现策略，包括设备上的或基于云的模型，同时将这些细节对开发者进行抽象。，表示设备或浏览器支持 prompt 语言模型，但需要下载后才能使用。，表示设备或浏览器支持提示语言模型，无需任何下载步骤即可使用。另外，我们也无需承担自行部署模型的成本，也无需担心使用其他。，你还可以用类似的思路，基于非常简单的代码构建非常强大的。
2024-08-20 17:03:30
1
转载 NextJs 14 从入门到精通（长文预警）
在 NextJS 中，中间件允许在请求完成之前（在缓存内容和路由匹配之前）运行代码，然后，根据传入的请求，可以通过重写、重定向、修改请求或响应标头或直接响应来修改响应因此，我们可以通过中间件进行 Log 日志记录，权限/登录校验等在项目跟目录，创建 middleware.ts 文件「注意：middleware.ts 必须与app目录保持在同级，否则不生效」，血泪史啊，差点把电脑都砸了「如果有 src 目录，则 src/middleware.ts」
2024-08-20 17:00:28
1
转载 vue3中动态加载远程组件
这篇文章讲了在vue3中如何从服务端加载远程组件，首先我们需要使用方法定义一个异步组件，这个异步组件是可以直接在template中像普通组件一样使用。但是由于接收的组件必须是编译后的vue组件对象，而我们从服务端拿到的远程组件就是一个普通的vue文件，所以这时我们引入了包。包的作用就是在运行时将一个vue文件编译成vue组件对象，这样我们就可以实现从服务端加载远程组件了。
2024-08-20 16:40:18
1
转载 Vue 3 中如何处理大数据量渲染和优化？
Vue提供了`v-once`指令，允许你一次性地渲染数据，不再进行后续变化监听。对于那些不需要重复更新的静态内容，使用`v-once`可以显著减少渲染和更新过程的性能消耗。对于那些需要频繁更新的动画或滚动事件，使用`requestAnimationFrame`可以优化性能。它确保在屏幕刷新之前执行回调函数，从而提高渲染效率。它通过只渲染可见区域的数据条目，大幅减少了DOM元素的数量，从而提高渲染性能。尽量拆分复杂的计算属性和模板渲染逻辑，避免单一属性和函数承担过多渲染任务，提升代码的可读性和执行效率。
2024-08-16 09:40:38
8
原创 如何理解TCP/IP协议 TCP协议的主要功能是什么
TCP/IP协议（Transmission Control Protocol/Internet Protocol）是互联网通信的基础协议，它定义了电子设备如何连入因特网，以及数据如何在它们之间传输的标准。
2024-08-13 08:39:44
803
原创 知道有哪些常用的网络协议，分别有什么作用
这些协议在网络通信、电子邮件、安全通信和文件传输等方面起到了重要的作用。每种协议都有其特定的应用场景和优势，根据实际需求选择合适的协议进行网络通信是非常重要的。请注意，网络协议的选择和使用可能会受到网络环境、安全要求、性能需求等多种因素的影响，因此在选择协议时需要进行综合考虑。常用的网络协议有很多种，每种协议在网络通信中都扮演着不同的角色。
2024-08-13 08:39:33
274
原创 强缓存和协商缓存的区别
1. 缓存验证方式强缓存：基于资源的过期时间或缓存规则进行验证。当浏览器发起请求时，会先检查本地缓存中资源的有效期。如果资源未过期，浏览器直接从本地缓存中获取资源，不发送请求到服务器1。这意味着在缓存有效期内，浏览器与服务器之间不会发生任何交互2。 协商缓存：基于资源的实体标签（ETag）或最后修改时间（Last-Modified）进行验证。当浏览器发起请求时，会发送资源的实体标签和最后修改时间等信息到服务器。服务器通过比较请求头中的信息与资源的当前状态进行验证。如果资源未发生变化，服务器返回304
2024-08-13 08:39:18
392
原创 TCP和UDP的区别是什么说一说TCP 的三次握手，以及为什么它是可靠的说一说OSI 七层模型
每一层均有自己的一套功能集，并与紧邻的上层和下层交互作用。在顶层，应用层与用户使用的软件进行交互；在OSI参考模型的底端是携带信号的网络电缆和连接器4。每一层都确保数据以一种可读、无错、排序正确的格式被发送。OSI（开放系统互连）参考模型将网络结构划分为七层，从下到上依次为：物理层、数据链路层、网络层、传输层、会话层、表示层和应用层4。
2024-08-13 08:37:46
215
原创 vite为什么比webpack快，追问了为什么webpack不基于esmodule
总之，Vite之所以比Webpack快，主要是因为其采用了不同的构建机制和优化策略，特别是利用了现代浏览器对ES Module的原生支持和按需编译的策略。而Webpack的设计初衷和历史背景决定了它需要进行一定程度的打包和转换工作，以适应不同的构建需求和环境。随着ES Module的普及和浏览器对其原生支持的增强，Webpack也在不断更新和优化，以更好地支持ES Module。然而，Webpack的设计和架构决定了它仍然需要进行一定程度的打包和转换工作，以确保代码能够在不同的环境中正确运行。
2024-08-12 09:01:46
271
原创 new 一个对象或者函数的时候，它中间发生了什么事情？原理是什么？
继承：通过原型链实现继承，使得新对象能够访问构造函数原型上定义的属性和方法。封装：通过this关键字在构造函数内部封装对象的状态和行为。构造函数：是一个特殊的函数，用于初始化新创建的对象。原型：每个函数都有一个prototype属性，它是一个对象，包含可以由特定类型的所有实例共享的属性和方法。
2024-08-12 09:01:23
202
原创 了解storybook吗，为什么用vitepress搭建官网，做出一些决策的出发点是什么
Storybook是一个用于开发、测试和演示用户界面（UI）组件的工具。Storybook可以与多种前端框架（如React、Vue、Angular等）一起使用，并且支持多种语言和样式预处理器1。综上所述，选择Storybook和VitePress分别用于UI组件开发和官网搭建，是基于它们各自在开发效率、代码质量、文档生成、团队协作以及快速启动、部署和定制性等方面的优势而做出的决策。VitePress是一个由Vite和Vue组成的强大的静态网站生成器（SSG），以其简单、强大和快速的特点而受到青睐。
2024-08-12 09:01:08
280
原创 js阻塞dom解析如何解决
在JavaScript中，如果脚本执行时间过长或者脚本位置不当，可能会阻塞DOM的解析和渲染，导致页面加载缓慢或用户体验不佳。
2024-08-12 09:00:54
399
原创 浏览器的最大请求数量是多少，为什么这么设计？
浏览器的最大请求数量并不是一个固定的值，它受到多种因素的影响，包括浏览器类型、HTTP版本（如HTTP 1.1、HTTP 2等）、以及是否对同一域名进行请求等。
2024-08-12 09:00:37
222
原创 requestAnimationFrame是宏任务还是微任务？
在JavaScript的事件循环中，宏任务（macro-task）和微任务（micro-task）是两种不同类型的任务，它们分别有不同的执行时机和优先级。的回调函数会在浏览器下一次重绘之前被调用，这通常发生在所有宏任务和微任务完成之后。但是，它并不直接参与宏任务或微任务的队列管理。的行为在某些方面与宏任务和微任务相似（比如它们都是在某个时间点之后执行），但它并不属于这两者中的任何一个。既不是宏任务也不是微任务，它属于浏览器提供的一个用于在下次重绘之前调用指定函数更新动画的方法。
2024-08-12 09:00:20
188
原创 type和interface区别
type：使用type关键字定义，它可以为任何类型创建一个新的名字（别名）。这包括基本类型、联合类型、元组、映射类型等。interface：使用interface关键字定义，它专门用于定义对象的结构，包括对象的属性、方法等。type和interface在定义类型时各有优势，选择哪个取决于具体的使用场景和需求。在定义对象类型时，如果需要利用接口的继承、合并等特性，可以选择interface；在定义基本类型、联合类型、元组等复杂类型时，type则更为灵活和方便。
2024-08-12 09:00:04
317
原创 浏览器点刷新按钮，重新输入URL和按F5的区别
点刷新按钮和按F5在大多数情况下都会触发页面的重新加载，并且都会检查缓存。它们之间的主要区别在于用户操作的明确性和可能导致的浏览器行为差异（尽管这种差异可能很小）。重新输入URL后按回车则被视为一个新的请求，浏览器通常会忽略之前的缓存，并直接向服务器发送请求。请注意，具体的行为可能因浏览器的具体实现和用户设置而异。为了获取最新的资源，用户可以选择进行强制刷新（如Ctrl+F5），这样可以明确地绕过缓存。
2024-08-12 08:59:16
251
原创 浏览器怎么再开一个线程，这边答出了web worker，pwa 和 浏览器插件中用到的service worker 还有 webAssembly
Web Worker：直接在浏览器后台线程中运行JavaScript代码。：虽然不直接运行JavaScript代码，但在后台处理网络请求和缓存，对PWA特别有用。：允许高效执行其他语言编写的代码，可以与Web Worker结合使用以提高性能。每种技术都有其特定的应用场景和优势，开发者可以根据实际需求选择最合适的技术来实现目标。
2024-08-12 08:58:45
235
原创 Next.js
Next.js 是一个使用 React 构建单页应用程序（SPA）的开源 JavaScript 框架。它由 Vercel（原 Zeit）公司开发，并自推出以来得到了广泛的关注和使用。
2024-08-12 08:58:21
339
原创 websocket和http的区别
综上所述，WebSocket和HTTP在协议类型、通信方式、连接建立与保持、通信实时性与效率、协议状态以及使用场景等方面存在显著的区别。在选择使用哪种协议时，需要根据具体的应用场景和需求来决定。WebSocket和HTTP是两种在网络通信中常用的协议，它们之间存在一些显著的区别。
2024-08-12 08:58:06
263
原创 vuex和pinia的区别
Vuex和Pinia都是Vue.js的状态管理工具，但它们在设计和使用上存在差异。Vuex是一个更完整的状态管理库，提供了丰富的功能和良好的社区支持，适合大型和复杂的项目。而Pinia则是一个轻量级的状态管理库，专注于提供一个简单的API来管理应用程序的状态，适合初学者和快速开发项目。在选择时，可以根据项目的具体需求和使用的Vue版本来决定使用哪一个。
2024-08-12 08:57:50
588
原创 websocket的你是用来做什么，说说具体的做法
WebSocket 是一种网络传输协议，主要用于在客户端和服务器之间实现全双工通信。它允许服务器主动向客户端发送消息，并且双方可以在任何时候发送和接收数据，而不需要像 HTTP 那样每次都需要客户端发起请求。WebSocket 的主要用途包括开发实时网络应用程序，如在线聊天、股票交易、游戏等12。注意：在实际应用中，还需要考虑心跳机制、错误处理、重连机制等因素，以确保 WebSocket 连接的稳定性和可靠性。
2024-08-12 08:56:39
298
原创 express模块可以做什么
总之，Express模块为Node.js Web开发提供了强大的支持和灵活性，使开发者能够更快速地构建高效、可靠的Web应用程序和API。然而，值得注意的是，由于Web开发领域的快速发展，建议开发者在使用Express时参考最新的官方文档和社区资源，以获取最新的信息和最佳实践。Express模块是一个基于Node.js平台的快速、开放、极简的web开发框架。它提供了丰富的功能和灵活性，使开发者能够轻松构建Web应用程序和API。
2024-08-12 08:56:25
409
原创 单元测试是什么？你用什么做的单元测试？
这些单元通常是类中的方法或函数，并且测试是在隔离的环境中进行的，以确保测试的准确性和可重复性。例如，对于Web应用程序，还可以考虑使用Selenium进行端到端测试，虽然这不是典型的单元测试，但它对于验证Web应用程序的完整性和功能非常有用。在编写单元测试时，应该遵循一些最佳实践，如编写清晰的测试用例、确保测试的独立性、编写可重复和可维护的测试代码等。：用于Python编程语言的测试框架。：Java的另一个单元测试框架，它提供了比JUnit更丰富的功能，如分组测试、参数化测试、数据驱动测试等。
2024-08-12 08:56:08
306
原创 事件循环在浏览器环境和Node环境中有哪些不同？
总结来说，浏览器环境和Node环境中的事件循环在执行环境、宏任务和微任务的实现、事件循环的阶段、I/O操作以及定时器的处理等方面都存在差异。了解这些差异对于开发人员来说是很重要的，因为它们可以帮助我们更好地理解和优化自己的代码。事件循环在浏览器环境和Node环境中有一些关键的不同点，这些不同点主要源于它们各自的设计目标、运行环境以及支持的API。
2024-08-09 11:10:05
262
原创 IOS和安卓的兼容性问题
IOS和安卓的兼容性问题主要源于它们各自使用不同的操作系统和开发框架。以下是关于这两个平台兼容性问题的一些关键点：操作系统差异：应用程序兼容性：数据和文件传输：技术挑战和解决方案：市场占有率和用户基础：未来趋势：请注意，以上信息仅供参考。在开发跨平台应用程序时，建议开发者仔细研究目标平台的技术文档和最佳实践，以确保应用程序的兼容性和用户体验。同时，也需要关注市场动态和技术发展趋势，以便及时调整开发策略。
2024-08-09 11:05:46
254
原创 AI有幻觉，你是怎么理解AI的幻觉的
这种错误可以被视为AI的一种“幻觉”，因为它并非基于真实世界的逻辑或规律，而是由于模型的局限性所导致的。综上所述，AI的“幻觉”是指AI系统在处理信息、生成响应或执行任务时，由于数据偏差、模型局限性、上下文缺失或对抗性攻击等原因而产生的错误或误导性结果。：近年来，对抗性攻击成为了AI安全领域的一个重要问题。AI的“幻觉”是一个有趣的概念，它并非指AI本身像人类一样有主观感受或情感体验，而是指AI在处理信息、生成响应或执行任务时，可能会基于不完整、错误或误导性的数据，产生不符合实际或预期的结果。
2024-08-09 11:00:05
385
原创 TCP与UDP的区别
综上所述，TCP和UDP在连接性、可靠性、速度和效率、数据包大小以及适用场景等方面存在显著的区别。了解这些区别有助于根据实际需求选择合适的协议进行数据传输，以确保数据的安全、稳定和高效传输。TCP（传输控制协议）和UDP（用户数据报协议）是计算机网络中常用的两种传输层协议，它们在多个方面存在显著的区别。
2024-08-09 10:55:37
193
原创 知道http2吗？聊一下http
HTTP/2（超文本传输协议第2版，最初命名为HTTP 2.0）是HTTP协议的第二个主要版本，用于万维网。HTTP/2是HTTP协议自1999年HTTP 1.1发布后的首个更新，主要基于SPDY协议1。
2024-08-09 10:54:25
392
原创 webpack如何处理不同类型的文件
Webpack 是一个静态模块打包器，它通过分析项目的文件依赖关系，然后生成一组包含所有文件和依赖的“打包文件”。Webpack 本身主要理解 JavaScript，但通过各种加载器（loader）和资源模块（asset module），它能够处理多种不同类型的文件。
2024-08-09 10:44:24
243
原创 webpack打包过程
Webpack的打包过程是一个复杂但高度可配置的过程，它能够将多个JavaScript、CSS、图片等资源文件打包成一个或多个bundle文件，以便在浏览器中快速加载。此外，Webpack的打包性能也受到多种因素的影响，如项目规模、资源数量、插件和加载器的使用等。因此，在实际开发中，需要根据项目情况合理配置Webpack，以优化打包性能和结果。需要注意的是，Webpack的打包过程是高度可配置的，开发人员可以通过修改配置文件和编写自定义插件来扩展Webpack的功能，以满足不同项目的需求。
2024-08-09 10:41:39
388
原创 webworker多线程可以避免阻塞，那为什么不把js所有的内容都放到webworker运行
虽然 Web Workers 确实能够在 Web 应用程序中实现多线程，有效避免长时间运行的任务阻塞主线程（UI 线程），但并非所有 JavaScript 内容都适合或应该被放到 Web Workers 中运行。因此，虽然 Web Workers 是一种强大的多线程技术，但并不意味着所有 JavaScript 代码都应该或能够放在其中运行。如果所有的 JavaScript 代码都放在 Web Workers 中，那么即使是简单的数据传递或 UI 更新也会变得复杂且可能性能不佳。
2024-08-09 10:37:27
260
原创 一个10g的文件怎么分片，怎么确定合适的分片的大小，分片hash过程怎么优化
对于一个大文件（如10GB的文件）的分片处理，选择合适的分片大小是一个重要的考虑因素，它会影响上传/下载的效率、内存使用和存储管理。下面将详细介绍如何分片、如何确定合适的分片大小，以及分片哈希过程的优化方法。
2024-08-09 09:40:30
307
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人