- 博客(99)
- 收藏
- 关注
RSS订阅
原创 前端性能优化（实践篇）
前端开发中随着项目体积的增加，代码也会以一定数量级增加，所生成的静态资源文件也会随之增多，加上一般质量的网络，很容易出现较长时间的白屏问题，影响用户体验。本文侧重于加载性能方面给出了一些具体的白屏优化措施：主要分为网络层面和代码优化方面。前者有使用h2、使用CDN、域名分片、gzip压缩、缓存策略等，后者分别结合了webpack和vite提供了代码分割、代码压缩、异步（动态）加载、懒加载、图片优化并充分利用打包工具自身的tree shaking特性。
2025-04-28 14:14:09
1205
原创 需要掌握的前端安全概念以及实操
在前端开发领域，安全问题如同隐藏在代码深处的暗礁，稍有不慎就可能让产品陷入漏洞风险。尤其是在面试场景中，面试官往往会跳出概念考核，直击「如何在实际开发中落地安全防护」的核心能力。作为高频考点的等安全问题，不仅需要理解原理，更要掌握与主流框架（如 Vue、React、Next.js）深度结合的实践方案。下文就将的技术栈:Vue、React、Next.js，谈一谈总结到的解决方法。
2025-04-28 10:12:25
962
原创 那个男孩长大了。
那时候我都很理智的沟通交流，相处。因为尊重他人，学会换位思考，细心照顾，一直是我与人交往的准则。但这一次我好像忘记了，都是用感性去交往
2025-03-20 16:24:17
735
原创 这是写在春天的故事
这个爱情故事好像是个悲剧，你说的是婚姻。爱情没有悲剧，对爱者而言，爱情怎么会是悲剧呢。结尾是什么，等待，之后呢，没有之后。或者说，等待的结果呢？等待就是结果。那，不是悲剧吗？春天万物复苏，但对于我来说，春天它是个悲剧。–改写一段名言作为开头。以前我觉得爱情是一个人向另外一个人奔赴的结果，后来我发现爱情是单相思，是一厢情愿，是一个苦果，没苦硬要去吃的结果。 我想象的爱情，它是单纯的，是美好的，因为一个女孩喜欢上一座城市，因为一个女孩喜欢她爱吃的食物，也因为喜欢一个女孩，诗和远方有了重新的定义，她在的城市便是我
2025-03-18 07:09:11
983
原创 2024年终总结来啦 - 从页面布局到“项目设计“思想的转变
总的来说：2024年，从刚开始的只关注前端页面的技术实现，到全面思考页面布局、项目设计、产品设计，工具的设计与实现，由点到线到面的一种过程，以及对未来AI时代的思考。往后还有很长的路要走，走着虽然很艰辛，但我会继续努力，不断提升自己，在技术的道路上稳步前行，提升自己，同时也不忘记享受生活的每一刻，发现生活中的小美好。希望我的这些经历和思考，能给同样在迷茫中探索的人一些启发。最后：岁不声不响，你且不慌不忙。在凡俗的烟火里，愿以素心，阅来日方长。祝大家新年快乐，万事如意，心想事成~
2025-01-22 21:18:26
847
原创 浅谈目前我开发的前端项目用到的设计模式
设计模式很多，看到一个需求，项目，我们去开发的时候，肯定是做一个整体的设计进行开发，而在这次我项目中，我也做了一个整体的设计，为什么要设计，一个是我们要跟安卓进行交互，一个是参与的人员也是比较多，三四个前端的参与进来，如果不做整体的设计的规划，每个人都有自己的命名习惯，而且一些重复的的业务代码，进行了重复的造轮子使用，所以，就会用到了一些设计模式，规避这些重复的问题。
2024-12-20 15:12:19
779
原创 前端性能优化（理念篇）
对于性能优化，应该是先掌握一些基本的概念，然后如何进行性能分析，而且不同的项目采用的方式不同，项目的大小，也采用的方案不同，如果项目比较小，你采用了大型项目的配置，反倒最后适得其反。
2024-12-13 14:35:46
772
原创 一天打造！超实用的企业级别图标组件库
在使用阿里图标库中，我灵感来了，那我也可以靠它快速的实现一个图标组件库。有多快，一天不到就开发完成，你只需要，准备好你的svg图标。安装wsksvg工具，然后自动化转成组件，我特地做了集成，专门把生成的组件，自动导入一个index.ts文件中，这样你直接配置打包，找个打包工具打包工具不就可以了嘛？
2024-11-16 11:16:57
1247
原创 异步处理之async/await使用技巧分享
是非常强大的语法糖，是处理异步问题的一种简洁、高效的方式。虽然它并非“最终解决方案”，但与Promise配合使用，确实能极大地简化异步编程的复杂性。从字面上理解，async表示一个函数是异步的，await则用来等待一个异步操作完成。二者结合使用，使得代码看起来更加同步化，从而提高了可读性和维护性。虽然有一些缺点，比如无法直接处理Promise的raceall等原生方法，或者调试时的不便，但它仍然是现代JavaScript中非常强大的工具。通过合理的使用技巧，可以极大地提升代码的可读性与可维护性。
2024-11-13 09:31:11
1021
原创 react-native webview怎么加载前端打包出来的SPA静态文件
遇到问题一定不要抓瞎，一定要找到问题所在，如果是常见问题报错，可以直接搜出来，如果还是解决不了，一定要会调试，根据调试出来的信息进行解决，看看官网，看看有没有人跟你遇到一样的问题。如果都没有，就针对你的报错问题，进行排除解决，因为如果是跨端开发，你要排除是安卓问题，还是后台问题，再看看是否是前端的问题，再去解决对应的前端问题，前端搞跨端一定要懂调试，调试，调试，不能抓瞎，不管搞什么，都应该懂调试！！！觉得不错的话，可以点个攒，也可以关注我，后续会持续更新关于React-native的文章哦。欢迎讨论。
2024-11-12 16:30:48
1031
原创 Nginx部署前端需要了解的知识
Nginx 是强大的反向代理服务器，适合部署前端应用程序。通过合理配置，可以提高应用的性能、安全性和可扩展性。
2024-10-30 10:16:40
1345
原创 App相关技术以及打包
平时小伙伴们自己的博客网站只能在浏览器打开，但是有时候你想要制作自己独立个人博客app，宣传并推广自己的app，打造个人ip。如何把自己的web博客网站打包成安卓app？
2024-10-27 13:05:51
1087
原创 开发网站建设遵循 SEO 应注意事项
SEO 虽然需要时间和精力，但它绝对是提升网站流量和知名度最有效的方法之一。只要你愿意投入，就能看到显著的成效,开发的时候就应注意这些事项。
2024-10-27 10:42:16
595
原创 今天不分享技术，分享秋天的故事
这个爱情故事好像是个悲剧，你说的是婚姻。爱情没有悲剧，对爱者而言，爱情怎么会是悲剧呢。对春天而言，秋天是它的悲剧吗。结尾是什么，等待，之后呢，没有之后。或者说，等待的结果呢？等待就是结果。那，不是悲剧吗？不，是秋天。一入秋，领导就让我开发一款设备通话功能，同时也引发了我对于功能产品化的思考。领导让我开发个设备通话功能，借助的是第三方插件通话，我说弄好了，等联调就好了，他说没你想的那么简单，要把它进行产品化。当他说，这玩意要收钱的时候，我都愣住了，不就一个通话功能嘛，这玩意还要收钱？然后转念一想，企业搞这玩意
2024-10-25 21:21:02
1041
原创 Node.js I/O 多路复用
I/O 多路复用是一种同时监视多个 I/O 源（如文件描述符、网络套接字等）的技术，它允许单个进程同时处理多个 I/O 操作，而无需使用多线程或多进程。这种技术能够显著提高程序的效率和性能，特别是在处理大量并发连接的网络应用中。
2024-10-17 10:15:05
1136
原创 QUIC：革新网络传输的新一代协议
QUIC的出现标志着网络协议领域的一次重大突破。它不仅融合了TCP、TLS和HTTP/2的优点，还通过创新的设计解决了这些传统协议的诸多问题。本文将深入探讨QUIC协议的方方面面，包括其起源、核心特性、工作原理、优势、面临的挑战，以及在现实世界中的应用和未来发展前景。
2024-10-10 11:29:27
2197
原创 为什么 TCP 协议有粘包问题
为什么这么设计（Why’s THE Design）是一系列关于计算机领域中程序设计决策的文章，我们在这个系列的每一篇文章中都会提出一个具体的问题并从不同的角度讨论这种设计的优缺点、对具体实现造成的影响。如果你有想要了解的问题，可以在文章下面留言
2024-10-09 11:32:03
1154
原创 wsksvg - 优化升级，支持多进程处理文件和 SVG 图像转化
在不断发展的前端技术中，图像的优化和处理始终是提升应用性能的关键。wsksvg插件的最新版本在之前的基础上进行了重大升级，现支持多进程处理文件以及将 SVG 图像转化为多种其他格式的图片。这一功能的引入不仅提升了处理效率，还大幅度增强了插件的灵活性和适用性。wsksvg是一款旨在简化图像优化和处理的工具。新版本实现了多进程文件处理，使得大批量图像处理时的性能得到显著提升。此外，用户现在可以轻松将 SVG 图像转换为 PNG、JPG、JPEG、WEBP 和 GIF 等格式。无论是开发者还是设计师，
2024-09-25 17:31:11
1017
原创 网站性能优化：如何高效预加载大型静态资源
通过不同的方式实现 Chrome 和 Safari 的大文件预加载，结合 CDN 的缓存策略，可以显著提升用户体验。对网站进行全面的性能优化，确保用户享受到流畅的访问体验是至关重要的。
2024-09-20 17:16:44
1392
原创 Android WebView & H5 Hybrid 混和开发
移动互联网发展至今，Android开发模式在不断更迭， 目前主要有三种开发模式 ：原生开发、Hybrid开发以及跨平台开发。移动终端的开发主要分为两大阵营， Android(Java、Kotlin) 研发与 IOS(Swift)研发。多种技术栈混合开发App， 在Android中主要指Native与前端(JavaScript)技术的混合开发方式。同一个技术栈， 同一套代码可以在不同的终端上运行，极大的缩减了研发成本， 比如当下比较火的Flutter。
2024-09-18 20:09:32
2789
1
原创 Rollup 插件机制深入学习
rollup 的源码全都糅杂在一个库中，阅读起来着实头大，模块、工具函数管理的看起来很随意。而且我们无法直接移植它的任何工具到我们的项目中，相比起来，webpack 的插件系统封装成了一个插件tapable就很利于我们学习和使用。Rollup 的插件和其他大型框架大同小异，都是提供统一的接口并贯彻了约定优于配置的思想。和 webpack 相比，rollup 的插件系统自称一派且没有区分 plugin 和 loader。
2024-09-14 11:35:28
1190
原创 typescript 学习笔记
TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准。TypeScript 由微软开发的自由和开源的编程语言。TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。
2024-09-05 20:15:57
1250
原创 wsksvg - 支持SVG、JPEG、GIF、PNG、WebP格式图片的优化
上一篇文章介绍了wsksvg插件的开发思路和灵感，而本篇则详细阐述了wsksvg扩展功能，以及技术的介绍。通过wsksvg插件，开发者可以高效地优化 PNG、JPG、JPEG、WEBP 和 GIF 图像，同时对 SVG 文件进行深入处理，包括优化、生成 Vue 和 React 组件以及转换为 Base64 编码格式。这些功能不仅简化了图像管理流程，也提升了应用的性能和用户体验。结合上一篇文章的开发背景，本篇提供了具体的技术实现和配置选项。以及扩展，相对于之前来说更灵活。
2024-09-05 10:00:37
879
原创 wsksvg — SVG 转换与优化工具
wsksvg它不仅能过，实现对svg的优化，包括png,jpg图片的优化，还能够自动将SVG文件转换为格式化的无状态React组件或Vue组件，支持单文件处理，也支持批量处理，只需要一个安装和一条指令，大大提高开发效率，增加底层打工人的摸鱼的时间。
2024-08-30 17:12:59
1297
原创 前端网站优化-Brotli 压缩
通常我们都希望浏览网站网页的速度越快越好，这样也意味着，下载内容的数据越少越好。越少的数据量，会消耗更少的下载时间，就能让用户得到更快的网页载入。
2024-08-23 15:11:16
1636
原创 设备通话解决方案-voip小程序音视频通话
对于这个唤醒，基本上是无解的。因为这跟系统的调度机制有关，与技术无关。目前看到就是，大公司与手机厂商进行合作，加入白名单，才可以做到，或者自己重写安卓系统某些机制，如电话手表这些。还有一种方案就是设备可以支持手机插卡，但这个也是极其不方便的，因为一台设备可以多个人使用。
2024-07-01 16:19:55
3122
4
原创 迷茫下是自我提升
谁的青春不迷茫，迷茫下只能是顺势而为，不断提升自己。迷茫中不忘初心，坚持心中得所想，不断进步。当然特别迷茫得时候，去吹吹海风，去看看路上得风景，说不定哪一天风告诉了你答案，你一瞬间就明白了自己想要什么样得人生。最近宫崎骏，新出了一部动漫《你想活出怎样得人生》看看别人得人生，说不定也有你想有得答案。每个人想法都是不一样得，想要得人生也不一样。有点鸡汤了哈，言而总之，迷茫下还是要提升自我，不管是前端，还是其它得都好。
2024-04-06 21:05:12
1758
3
原创 H5嵌入小程序适配方案
本文是针对是把h5应用嵌入其它平台得流程。不是单独taro发布一个小程序，单独打包成app得流程，是从一个主平台直接进入一个子系统得嵌入适配方案。
2024-01-21 00:01:18
4076
1
原创 react hooks 对工作中常用到业务进行hooks再次封装成自己的hook库。
工作中难免很多的重复的业务，或者场景react hooks 无法满足的，那我们可以封装成自己的react hooks 库,学习中遇到的也可以进行一个封装，日积月累，就会多起来了嘛。
2023-07-18 18:04:30
807
原创 使用android studio将网站打包成apk(可以直接使用替换为自己的网站连接即可)
这是一个适用于Android Studio的模板项目，可让你在几分钟内创建一个android webview应用程序。你可以使用它为您的网站创建一个简单的应用程序，或作为基于 HTML5 的 android 应用程序的起点。
2023-07-04 12:52:24
5856
3
原创 一个基于dumi搭建的react组件库,特别的开源组件项目,主要用于学习
在日常开发中，肯定会积累许许多多的业务组件在项目内，部分可以作为公共组件被抽离到公共组件库，但大部分或许与业务强相关，或许带有接口请求，并不适合抽离为公共组件，但仍需要有一个地方去展示这些组件的效果和用法，dumi 除了单独作为组件库文档外，也是支持和项目集成，展示项目内的业务组件的。
2023-04-05 22:54:20
2025
1
原创 一个使用 react+vite4+ts+react-router-dom6v Hooks Admin搭建的轻量级后台管理模板。
一个使用 react+vite4+ts+react-router-dom6v Hooks Admin搭建的轻量级后台管理模板。
2023-03-03 22:21:52
2475
2
原创 react 使用 mqtt
MQTT 主要应用在物联网等场景，WebSocket 因为有配套的浏览器API，主要应用在 Web 开发领域。但两者均为通用的应用层协议，可以在任何相关的场景使用。 MQTT和WebSocket都是面向报文的二进制传输协议。WebSocket更简单，更灵活；MQTT相对复杂，但功能强大。大家可以根据自己的使用场景按需选择。
2023-03-02 17:15:00
2072
原创 传输指令ssh,sftp,scp
对于传输指令还是需要进行一定的了解，可以帮助我们可以通过指令的方式，与服务器进行文件的传输。当然我还是比较喜欢图形可视化工具。不过指令的传输还是要了解的。
2023-03-01 17:25:33
3270
原创 高质量前端之自动化测试
测试可以让开发者站在**用户的角度**考虑问题，通过测试的手段，确保组件的每个功能都可以正常地运行。在编写单元测试时，很大情况下会对组件代码进行反复的调整，通过不断的打磨，避免了开发时考虑不周到的情况，从而提高组件的质量。对于变动不频繁的业务模块，也是同样的道理。
2023-02-24 14:59:34
1233
原创 前端本地存储数据库存储之IndexedDB
IndexedDB数据库没有我们想象的那么复杂，了解了它的几个基本概念，上手还是很快的，无非就是增删改查等等，虽然可能开发中用的少，但是了解一下不至于真正用到的时候两眼抓瞎。
2023-02-24 14:44:10
2444
原创 前端开发规范
作为一名合格的前端开发工程师，良好的代码编写规范是必须具备的。其实对于必要的约束直接采用eslint进行一个约束就好了，代码的统一风格采用 pretter进行一个格式化的统一。主要是命名上的统一，这个要大家共同参与才能维护的。
2022-12-05 09:06:26
1047
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人