当前位置: 首页 > news >正文

我做了一个在线工具导航网站!

我做了一个在线工具导航网站!

大家好!最近,我一直想拥有一个属于自己的在线工具导航网站,把那些常用、好用的在线工具聚合在一起。最终的目标是:界面要足够漂亮、访问要足够快、维护要足够简单

经过一番折腾,我非常开心地向大家宣布,我的网站上线了!

在线体验地址: https://nav.maynor1024.live/
项目源码地址: https://github.com/xianyu110/online-tools-collection

在这里插入图片描述

这篇文章,我想和大家分享一下这个网站从一个简单的静态页面,一步步演进成一个高性能、易于维护的现代化 Web 应用的全过程。

一、最初的版本:一个巨大的 HTML 文件

一开始,我的想法很简单:用一个 index.html 文件,把所有的分类和工具链接都写进去。

这种方式虽然直接,但很快就暴露了两个致命的缺点:

  1. 性能瓶颈:随着工具越来越多,index.html 文件变得异常臃肿(超过 700 行代码!)。浏览器需要下载完这个巨大的文件才能开始渲染页面,导致 首次加载速度非常慢
  2. 维护噩梦:每次想增加或修改一个工具,都得在密密麻麻的 HTML 代码里找到相应位置,小心翼翼地进行修改,非常低效且容易出错。

我意识到,这种“一把梭”的写法必须被重构。

二、性能革命:数据与视图的分离

为了解决上面的问题,我进行了一次彻底的重构,核心思想是现代 Web 开发的基础:数据与视图分离

具体的改造分为三步:

第 1 步:数据提取为 JSON

我编写了一个一次性的 Node.js 脚本 (generate-json.js),利用 cheerio 这个库(可以理解为服务器端的 jQuery)来解析我那个巨大的 index.html 文件。

脚本智能地遍历原始 HTML 的 DOM 结构,将每个分类的标题、图标以及它包含的所有工具的名称、链接和图标提取出来,最终生成了一个结构清晰、内容干净的 tools.json 文件。这个文件成为了网站所有内容的“唯一真实来源”。

第 2 步:JavaScript 动态渲染

我彻底重写了 script.js 文件,新的脚本逻辑如下:

  • 页面加载后,使用 fetch API 异步请求 tools.json 文件。
  • 拿到数据后,通过 JavaScript 遍历 JSON 数组和对象。
  • 动态地创建出所有分类和工具列表的 HTML 元素。
  • 最后,将生成好的 HTML 代码 注入index.html 那个轻量级的骨架中。

这次重构带来了立竿见影的效果:index.html 的体积急剧缩小,浏览器几乎可以 瞬间完成加载和渲染,用户会立刻看到页面的整体框架,而工具数据则在后台悄无声息地加载并填充进来,用户体验大大提升。

第 3 步:非阻塞加载外部资源

网站使用了 Google Fonts,但它的加载会阻塞页面渲染。我通过给 <link> 标签加上 rel="preload"onload 事件处理,将字体文件改为 异步加载,进一步清除了渲染路径上的障碍。

三、现代化部署:GitHub + Vercel

代码优化完成后,我选择了 Vercel 作为部署平台。它与 GitHub 的无缝集成为我提供了堪称完美的自动化(CI/CD)工作流。

部署流程

  1. 将所有代码推送到 GitHub 仓库。
    在这里插入图片描述

  2. 在 Vercel 上,授权并关联我的 GitHub 仓库。

在这里插入图片描述

  1. 点击 “Deploy”。

就这么简单!Vercel 自动完成了所有部署工作。更棒的是,从此以后,我本地的任何代码修改,只要推送到 GitHub 的 main 分支,Vercel 就会自动重新部署网站,全程无需手动干预。

结语

从一个笨重的单文件页面,到一个数据驱动、动态加载、自动部署的现代化应用,这次实践让我对前端性能优化和工程化有了更深的理解。

最终的产品让我非常满意:它不仅看起来酷,而且 快如闪电,维护起来也异常轻松。如果你也对这个项目感兴趣,欢迎访问我的网站,或者去 GitHub 仓库看看源码!

  • 网站链接: https://nav.maynor1024.live/
  • 源码链接: https://github.com/xianyu110/online-tools-collection

感谢阅读!

http://www.dtcms.com/a/272854.html

相关文章:

  • Apache
  • 一招解决Win11桌面右键刷新BUG问题!
  • 高通跃龙IoT-IQ系列芯片深度解析:定位、特性与应用全景
  • 智能音视频-搭建可视化智能体
  • 机器学10——集成学习
  • 北京-4年功能测试2年空窗-报培训班学测开-第四十七天
  • 汽车功能安全-软件集成和验证(Software Integration Verification)【目的、验证输入、集成验证要求】9
  • Synopsys 逻辑综合之 MultiBit Flip-Flop 与 ICG
  • 【TCP/IP】9. 域名系统(DNS)
  • Agent自动化与代码智能
  • 【更新至2023年】1998-2023年各地级市第一产业占GDP比重数据(全市)
  • 防爬虫君子协定 Robots.txt 文件
  • jetson agx orin 刷机、cuda、pytorch配置指南【亲测有效】
  • 【AI】人工智能领域关键术语全解析
  • [C#] 使用TextBox换行失败的原因与解决方案:换用RichTextBox的实战经验
  • AI 智能体:开启自动化协作新时代
  • The 2023 ICPC Asia Hangzhou Regional Contest(G. Snake Move(最短路))
  • GoView 低代码数据可视化
  • Git保姆级入门实战:从安装配置到常用命令与常见错误解决
  • Shader面试题100道之(61-80)
  • 动态规划疑惑总结
  • Oracle大表数据清理优化与注意事项详解
  • 毫米波雷达守护银发安全:七彩喜跌倒检测仪重构居家养老防线
  • AI+低代码双引擎驱动:重构智能业务系统的产品逻辑
  • 二分查找篇——搜索旋转排序数组【LeetCode】一次二分查找
  • Datawhale AI 夏令营:基于带货视频评论的用户洞察挑战赛 Notebook(上篇)
  • C#集合:从基础到进阶的全面解析
  • 力扣-48.旋转图像
  • 文件追加模式:编写一个程序,向一个已存在的文件末尾追加内容。
  • ADVANTEST R4131 SPECTRUM ANALYZER 光谱分析仪