网站
快来分享你的内容吧～
01-30 16:18·后端现在 AI 开发网站的能力已经非常强了。但为啥我用 AI 搓出来的网站一股子 AI 味儿？而这些网站看起来干净很多呢？这就是接下来我要分享的。查看全文加油鸭：太棒了！把“AI味儿”讲得这么透彻又实用，干货密度拉满，鱼皮老师这波分享真的帮开发者破局了～11419分享- 2025-11-28·后端有了这些工具，网站数据分析其实没有那么复杂，关键是要根据需求选择合适的方案，把时间省下来做产品才是正道。查看全文加油鸭：这么全面的数据分析工具分享太实用了！从流量监控到错误追踪一应俱全，干货满满值得收藏~525分享
- 2025-11-17·后端
- 2025-09-19·后端大家最近访问我们网站可能会遇到很多莫名其妙的 Bug。这是因为最近我们网站前端正在进行技术升级，为了保险起见，我们选择 灰度发布，结果翻车了。查看全文骑猪南下皮皮虾：有点好奇的是，不全量上线是因为要看用户接受程度吗？751分享
- 2025-09-12·后端
- 2025-07-16·后端我们都知道 AI 现在写代码越来越溜了，慢慢地替代了我们程序员写代码的部分工作；但其实，AI 的能力不止于此，利用 MCP，它甚至可以直接帮我们把网站部署上线！查看全文达耳闻：太鸡毛强了吧，那以后前端工程师的饭碗怎么办啊😱18417分享
- 2025-04-02·后端
- 2024-12-04·后端
7个神级技巧，彻底去除网站的 AI 味儿！
大家好，我是程序员鱼皮。 先做个小测试，下面这几个网站，你能看出哪些是 AI 做的吗？    公布答案：**全都是 AI 做的！**  是不是觉得有点意外？ “为啥我用 AI 搓出来的网站一股子 AI 味儿？而这些网站看起来干净很多呢？” 这就是接下来我要分享的： - 什么是 AI 编程的 AI 味儿？ - 为什么网站会有 AI 味儿？ - 怎么去除网站的 AI 味儿？ 点个收藏，我们开始~ ⭐️ 推荐观看本文对应视频版，效果更明显：https://bilibili.com/video/BV1QF6EBiErM ## 什么是 AI 味儿？ 所谓的 AI 味儿，就是那种一眼就能看出是 AI 生成的网站，界面样式和内容风格都千篇一律。  1）配色死板：蓝紫渐变色用到吐。 2）布局死板：首屏放个大标题，下面三个卡片并排。 3）字体死板：基本上就是 Inter、Roboto 等几种固定的字体。 4）Emoji 泛滥：什么 🐟4️⃣🐶 之类的，满屏幕都是表情图标。 5）内容空洞：基本没有真实图片，文字风格也比较刻板。 用户看这些网站时就一个感觉：我在跟机器人聊天。  ## 为什么网站会有 AI 味儿？ 说了这么多问题，到底为啥会这样？ 核心原因就俩字：**求稳**。 举个例子，为啥 AI 那么爱用蓝紫渐变色？ 因为 AI 的训练数据里，很多现代网站采用 Tailwind 样式库，而这个库的默认主色调就是蓝紫色。AI 在学习数亿行代码时，这些颜色出现的频率是最高的，于是 AI 就认为 “现代化网站 ≈ 蓝紫色渐变”。  并且 AI 学会了一个生存法则：**用最常见的 = 最不容易出错**。 所以当你让 AI “开发一个现代化的网站” 时，AI 为了求稳，就会选择使用蓝紫渐变色。 **那怎么破局？** 很简单，从 “请求者” 变成 “指挥官”。 不要只说需求：给我做个网站 而是要明确要求：用深灰色背景、手绘图标、不对称布局、拒绝蓝紫色。 用强有力的约束条件，逼着 AI 偏离它的舒适区。  ## 怎么去除网站的 AI 味儿？ 下面分享我总结的 7 个方法，保证让你的网站摆脱 AI 味儿。 ### 方法 1、让 AI 参考真实网站 最简单粗暴的一招，你看到好看的网站，直接让 AI 学。 有 4 种具体的做法： 1）如果你使用 Cursor 或者 Claude Code 等 AI 编程工具，或者利用 [Firecrawl MCP](https://www.firecrawl.dev/)，让 AI 能够直接读取网页。  你只需要跟 AI 说： ```markdown 请访问 ai.codefather.cn，提取它的配色方案、字体选择和布局结构，然后生成类似风格的网站。 ``` AI 会自己去看那个网站，然后学着做。  2）如果 AI 大模型支持图片理解，你还可以把网页截图提供给 AI，搭配文字能让 AI 还原网站更准确。  效果如图：  3）如果你用的 AI 大模型不支持图片理解、纯文本理解又不到位，可以先利用 **截图转代码** 工具，比如 [Screenshot to Code](https://github.com/abi/screenshot-to-code)。  把喜欢的网站截个图，上传上去，它直接给你转成代码。  然后你再把代码喂给 AI，让它参考着做。  准确度会高很多，抄样式肯定不如抄代码来的直接。  4）此外，还可以直接套用现成的网站模板或者 GitHub 上的开源项目。 推荐几个不错的网站模板资源： - [HTML5 UP](https://html5up.net/)：免费的响应式网站合集，极简风格 - [WordPress 官方主题库](https://cn.wordpress.org/themes/)：1 万多个免费主题，啥类型都有 - [Start Bootstrap](https://startbootstrap.com/)：Bootstrap 生态的免费网站模板库 - [Colorlib](https://colorlib.com/wp/free-wordpress-themes/)：提供不少免费的网站模板，设计精美 这些网站模板都有源代码，你选个不错的下载下来，把代码丢给 AI 让它去改改内容就好了，样式基本准确还原。  ### 方法 2、设计优先开发 这个方法特别适合做大项目。 简单来说，就是 **不要上来就让 AI 梭哈整个项目**。 比如传统做法是这样的：帮我做一个包含用户系统、后台管理的完整 SaaS 平台。 然后 AI 哗啦哗啦给你生成几十个文件，结果做完后发现页面风格不对，重新返工，浪费 Tokens。  推荐的做法是 **拆分步骤**，先让 AI 做个前端网站 Demo，纯静态页面就好。对设计满意了之后，再让 AI 基于 Demo 代码，用同样的风格开发完整项目。 你像我生成出下面这种破玩意，肯定是不能让 AI 继续开发的！  这里推荐一个很强大的 AI 设计工具 [Google Stitch](https://stitch.withgoogle.com/)。 你只需要输入一段描述，它就能生成专业的界面原型。  甚至你在纸上画个草图，拍照上传，它都能识别出来转成代码。  你还可以人工修改设计的主题风格，或者人工标注要修改的部分，让 AI 帮你快速调整。  设计完成后，导出文件或下载代码，再喂给 Cursor 等 AI 编程工具继续开发。这样风格就定下来了，不会跑偏。  当然，如果你会用 [Figma](https://www.figma.com/) 这种更专业的设计工具，你可以先在 Figma 里把网站设计得清清楚楚。  然后搭配 [Figma MCP](https://github.com/GLips/Figma-Context-MCP) 扩展，让 AI 直接读取你的 Figma 设计文件，按照设计生成代码。  此外，还有个工具叫 [Onlook](https://www.onlook.ai/)，号称为设计师准备的 Cursor，可以让设计师直接可视化编辑网页代码，设计和开发无缝衔接。  ### 方法 3、丰富网站图片 一般 AI 生成的网站是没有图片的，我们可以通过添加图片让网站更个性化。 没必要让 AI 从 0 开始生图，只要告诉 AI 去主动找图、到哪里找图就好。 图片资源主要包括插画、图标、真实照片和占位图这几类。 1）插画库 [unDraw](https://undraw.co/)：有非常多免费的 SVG 插画，而且可以自定义颜色。  2）图标库 [Iconify](https://iconify.design/)：20 多万个免费矢量图标  3）真实照片 [Pexels](https://www.pexels.com/)：免费高质量图库，还提供了 API 快速搜索图片  4）占位图 [Picsum Photos](https://picsum.photos/)：直接用 URL 指定图片尺寸，每次刷新都是不同的真实照片  如果你的 AI 编程工具支持网页读取，可以直接让 AI 从这些网站搜索图片： ```markdown 我要开发一个摄影作品集网站 请根据需要，为网站搜索并集成图片资源： 1. 插画：使用 undraw.co，搜索与网站内容相关的插画 2. 图标：使用 Iconify 图标库 3. 真实照片：使用 Pexels 搜索真实照片 4. 占位图：使用 Picsum Photos 作为临时占位图 ``` 这下，生成的网站看起来成熟多了吧？  ### 方法 4、提示词约束 就算不搞那些花里胡哨的工具，只要跟 AI 对话时，把你的要求说清楚，一样能让网站变专业。 Claude 官方的 Cookbook 中有篇文章 [Frontend Aesthetics](https://platform.claude.com/cookbook/coding-prompting-for-frontend-aesthetics)（前端美学），专门讲怎么避免让 AI 生成具有 AI 味儿的通用设计。  下面讲几个我自己常用的提示词技巧。 #### 1）反向提示 不要只说 “要什么”，更要说 “不要什么”。 ```plain 设计禁止清单： ❌ 紫色/靛蓝色渐变 ❌ 纯平背景色（必须有噪点或渐变） ❌ Hero + 三卡片布局 ❌ 完美居中对齐 ❌ 高深的专业名词和无意义的空话 ❌ Emoji 作为功能图标 ❌ 线性动画 ease-in-out ``` 你把这些禁止项写清楚，AI 就不敢乱来了。 #### 2）角色设定 给 AI 定个人设，比如： ```markdown 你是一位资深独立设计师，专注于《反主流》的网页美学。 你鄙视千篇一律的 SaaS 模板，认为软件界面应该有触感和灵魂。 你的创意边界： - "现代但不要紫色" → 可以试试深灰+橙色 - "极简但要有温度" → 用大留白+手绘插画 - "科技感但不要冰冷" → 用深色+暖色点缀 ``` 这样 AI 就知道，它不是在做标准答案，而是在做有个性的设计。 #### 3）拒绝空洞文案 AI 特别喜欢写那些 “听起来很厉害但啥也没说” 的文案。 你得明确告诉它文案的要求： ```plain 网站的文字内容必须做到： - 具体化："每天节省 2 小时重复劳动"（不要说"提升生产力"） - 口语化："用起来就像呼吸一样自然"（不要说"卓越的用户体验"） - 带情绪："再也不用在 10 个群里找文件了"（不要说"高效协作"） - 甚至可以挑衅："别再假装你会看完那些 PPT 了" ``` 这样文案就会更有人味儿了。 #### 4）语境注入 AI 老是生成通用设计，是因为它不知道你要传达什么 “感觉”。 所以我们可以尝试 **先给 AI 喂情绪，再提设计**。 比如你要做个具有科技感的博客网站，可以这么说： ```markdown 先阅读这段话：《黑客与画家》 - 编程语言是用来思考的 现在根据这种冷静、理性的情绪设计博客首页： - 配色：深灰+冷蓝 - 布局：理性、有序 - 感觉：沉思的、专注的 ``` AI 会把视觉参数（颜色、间距、字体）和文本的情感特征（冷静、理性）对齐，生成有特定氛围的设计。  就像给演员说戏，不是告诉他演得开心一点，而是让他回忆一段开心的记忆，情绪自然就出来了。 #### 5）复用提示词 前面讲了这么多约束条件，你不能每次都重复人工编写一遍吧？ 所以要保存提示词为项目规则文件 [AGENTS.md](https://agents.md/)，便于多次复用。 [AGENTS.md](https://agents.md/) 是一个开放标准，让不同的 AI 工具都能读取同一份规则文件，主流的 AI 编程工具（Cursor、Claude Code、Windsurf 等）都支持。  比如这里我给大家准备了一套提示词模板，包含了前面讲的所有技巧： ```markdown # 项目设计规则（AGENTS.md） ## 角色设定 你是一位资深独立设计师，专注于 "反主流" 的网页美学。 你鄙视千篇一律的 SaaS 模板，追求每个像素都有温度。 ## ❌ 绝对禁止项 ### 配色禁止 - 紫色/靛蓝色/蓝紫渐变（#6366F1、#8B5CF6） - 纯平背景色（必须有噪点纹理或渐变） - Tailwind 默认色板 ### 布局禁止 - Hero + 三卡片布局 - 完美居中对齐 - 等宽多栏（必须不对称） ### 文案禁止 - 高深的专业名词和无意义的空话 - Lorem Ipsum 占位文本 - 被动语态和长句 ### 组件禁止 - Shadcn/Material UI 默认组件（必须深度定制） - Emoji 作为功能图标 - 线性动画（ease-in-out） ## ✅ 必须遵守项 ### 文案风格 - 口语化，像朋友聊天 - 具体化，有数字和场景 - 可以幽默、自嘲、甚至挑衅 - 每句话不超过 15 个字 ### 图片系统 - 图标：使用 Iconify 图标库（https://iconify.design） - 占位图：使用 Picsum Photos（https://picsum.photos） - 真实图片：使用 Pexels 搜索（https://www.pexels.com） - 插画：使用 unDraw（https://undraw.co） ``` 保存这个文件为 `AGENTS.md`，放在项目根目录，以后每次跟 AI 对话，它都会自动读取这个文件，按照你的要求来工作。  举个例子，输入跟之前一毛一样的需求 “帮我做个动漫视频网站”，有了规则文件后，效果立竿见影！  ### 方法 5、Agent Skills 如果你觉得自己写提示词太麻烦，还有个更省事的办法 —— **Agent Skills**。 简单来说，Agent Skills 就是别人封装好的专业技能包，你直接在 AI 编程工具中安装就能用，让 AI 学会各种专业技能，比如制作 PPT、整理 Excel 表格等等。  如果想让 AI 开发的网站更精美独特，可以用下面 2 个 Skills。 #### Frontend-design 这是 Anthropic 官方出品的 [前端设计技能](https://github.com/anthropics/skills/tree/main/skills/frontend-design)，可以教 AI 生成专业设计感网站。 用法很简单，以 Claude Code 为例。 首先打开 Claude Code 并输入命令，添加官方技能市场： ```plain /plugin marketplace add anthropics/skills ```  这就像是在你的 AI 助手里开通了一个技能商店，接下来你就可以从商店中获取技能了。  在 Claude Code 中输入命令，安装官方提供的技能包： ```plain /plugin install example-skills@anthropic-agent-skills ```  这个 example-skills 包含了一堆官方示例技能，包括前端设计、网页测试、动图制作等等。  装完之后，你就可以直接让 AI 使用这些技能了。 比如你输入：帮我开发个人作品集网站。 AI 会主动问你：我发现你安装了前端设计技能，需要用它来生成更具设计感的页面吗？  确认之后，AI 会利用技能生成代码，告别蓝紫渐变、生成独特风格的精美页面。  不用每次都给 AI 输入一大堆相同的提示词，装一次技能就行了。 #### UI UX Pro Max [UI UX Pro MAX](https://ui-ux-pro-max-skill.nextlevelbuilder.io/) 是我现在用下来最顺手的去 AI 味儿技能了，专门用于提升 AI 的设计能力。  它支持几乎目前所有主流的 AI 编程工具，比如 Claude Code、Cursor、VS Code、Codex 等等。 用法很简单，首先按照 [开源仓库文档](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) 的指引，安装官方提供的命令行工具： ```bash npm install -g uipro-cli ```  然后进入到你的项目目录下，根据使用的 AI 工具执行对应的命令。比如我这里用 Cursor： ```bash uipro init --ai cursor ```  它会自动把技能安装到 Cursor 的配置目录里。 接下来，当你让 AI 开发一个网站时，可以使用斜杠命令手动触发技能，或者让 AI 自动识别技能。  1）AI 会根据你的需求识别出产品类型和需要的页面类型  2）然后调用 `search.py` 搜索脚本，在 data 目录里进行多维度搜索，找到适合的配色、字体、布局风格  3）综合搜索结果，生成完整的设计方案（主色调、字体组合、间距规范等）  4）最后，再按照设计方案生成代码  这样一来，生成的界面既专业又有设计感。  AI 不需要把所有规则都背下来，而是用到哪个查哪个，这就是 Agent Skills 的精髓。 ### 方法 6、反 AI 味儿组件库 前面提到，AI 为了保险，默认会选最主流的组件库，比如 Tailwind CSS、Shadcn UI 等。 这些库虽然专业，但也最容易产生 AI 味儿。 所以我们可以反其道而行之，明确告诉 AI 用一些 **小众但有特色** 的组件库。 比如 [Aceternity UI](https://ui.aceternity.com/) 这个库专门做那种炫酷效果，什么闪光粒子（Sparkles）、极光背景（Aurora Background）、流星效果（Meteors），都是高计算量的视觉组件。  AI 很难从零写出这么复杂的效果，但你直接让 AI 用这个库，几行代码就能搞定。 要注意，对于这些相对小众的组件库，AI 可能不太熟悉用法。建议安装 Context7 插件，可以实时查询最新文档。  或者直接把官方文档地址发给 AI 让它参考： ```plain 必须使用 Aceternity UI 设计网站 你需要阅读官方文档来了解最新的使用方法：https://ui.aceternity.com/components ``` 网站的逼格立刻就上去了，完全不像 AI 生成的。  还有很多我觉得有特点的 UI 组件库： - [Magic UI](https://magicui.design/)：150+ 动画组件，专门做微交互、流光边框、文字渐变 - [DaisyUI](https://daisyui.com/)：30+ 主题，有 cyberpunk、retro、cupcake 等风格 - [Brutalist UI](https://brutalistui.site/)：粗野主义风格，粗边框、硬阴影、高对比 - [Glass UI](https://ui.glass/)：玻璃拟态效果，半透明、模糊背景 - [ikun-ui](https://github.com/ikun-svelte/ikun-ui)：基于 Svelte.js 和 UnoCSS 的组件库 - [Radix UI](https://www.radix-ui.com/)：无样式原语组件，完全自定义 - [Mantine](https://mantine.dev/)：100+ 组件，功能丰富 像我练习时长两年半，最喜欢 [ikun-ui](https://github.com/ikun-svelte/ikun-ui) 了~  ### 方法 7、自主配色（扩展知识） 如果你想让网站更独特，完全走自己的路，那就得人工设计配色方案了。 这个方法适合有设计基础的朋友，可以用一些快速生成个性化配色的工具，比如： - [Coolors](https://coolors.co/)：主流的配色生成器，按空格键随机生成，支持导出多种格式 - [Adobe Color](https://color.adobe.com/)：Adobe 官方的专业配色工具  生成好配色后，把色值告诉 AI，让它严格按照你的配色方案来设计。这样出来的网站，配色绝对独特。 ## 实战案例 前面我讲的这些方法是可以结合使用的。下面分享几个实战例子，大家可以感受下效果。 ### 案例 1、个人技术博客 #### 优化前 直接输入提示词： ```markdown 开发个人技术博客网站首页 ``` 效果是这样的，一眼 AI……  #### 优化后 使用 `AGENTS.md` 提示词规则 + UI UX Pro Max 技能： ```markdown 开发个人技术博客网站首页 ``` 得到的网站更有极客范儿，内容更充实。   ### 案例 2、SaaS 产品落地页 #### 优化前 直接输入提示词： ```markdown 开发 SaaS 产品《服务器运维监控平台》的落地页 ``` 效果是这样的，又是蓝紫配色，一眼 AI……  #### 优化后 使用 `AGENTS.md` 提示词规则 + UI UX Pro Max 技能 + 语境注入 + 反 AI 味儿组件库： ```markdown 开发 SaaS 产品《服务器运维监控平台》的落地页 先阅读这段话感受氛围：《黑客帝国》你选择蓝色药丸还是红色药丸？ 必须使用 Aceternity UI 设计网站 你需要阅读官方文档来了解最新的使用方法：https://ui.aceternity.com/components ``` 网站背景变成了代码雨，也更像一个专业产品介绍页：   ### 案例 3、健身 APP 落地页（移动端） #### 优化前 直接输入提示词： ```markdown 开发健身 APP 落地页（移动端） ``` 效果…… 这啥玩意，不评价了……  #### 优化后 使用 `AGENTS.md` 提示词规则 + UI UX Pro Max 技能 + 反 AI 味儿组件库： ```markdown 开发健身 APP 落地页（移动端） 必须使用 IKun UI 设计网站 你需要阅读官方文档来了解最新的使用方法：https://ikun-ui.netlify.app ``` 这下得到的页面更真实可用了，对比还是非常明显的吧！  ## 最后 看到这里你应该意识到，现在 AI 开发网站的能力已经非常强了。 有朋友觉得 AI 生成的效果不理想，可能只是因为没给它足够明确的指令。 就像一个厨师，你只说做个好吃的，他为了保险只能做最大众化的家常菜。但你说 “多放辣椒、不要花椒、多放豆瓣酱”，他就能做出你想要的味道。 **记住，AI 是工具，你才是主导者。** 学会了或者学废了的朋友们，点个赞吧~ 你可以在我免费开源的[《AI 编程零基础入门教程》](https://github.com/liyupi/ai-guide)中学到更多 AI 编程技巧。  ## 更多 💻 编程学习交流：[编程导航](https://www.codefather.cn/) 📃 简历快速制作：[老鱼简历](https://www.laoyujianli.com) ✏️ 面试刷题神器：[面试鸭](https://www.mianshiya.com) 📖 AI 学习指南：[AI 知识库](https://ai.codefather.cn/)
10个免费的网站分析工具，竟然比付费的更香？
学妹问我：鱼皮 gie gie，你们团队这么多网站产品，都是怎么做数据分析的啊？  其实有很多现成的免费资源，可以让你不费吹灰之力搞定各种数据分析场景。 - 网站流量统计 - 前端错误监控 - 用户行为分析 - 自定义业务分析 - 后端应用监控分析 - 后端资源监控分析 - 后端自定义指标分析 干货较多，建议收藏~ > ⭐️ 推荐观看视频版：https://bilibili.com/video/BV1CkUDBiEMR ## 网站分析保姆级教程 先说说最基础的 **网站流量分析**。你肯定想知道每天有多少人访问你的网站、他们从哪来、在哪个页面待得最久对吧？ 可以使用百度统计、51.LA 网站统计或 Google Analytics，只需要给你的网站文件添加一段代码就能轻松接入。  然后就能看到访客数量和趋势、分析访客的来源、分析页面的访问情况等等：  可以帮你了解用户的偏好、获取页面优化的思路。  如果你做的是小程序，那就更简单了，比如微信小程序直接用官方自带的数据分析就行。  如果你想分析别人的网站流量，怎么办呢？ 可以用 Similarweb 或者 AI TDK 这类工具，输入网址就能看到对方的流量估算、访问来源和热门关键词，做竞品分析和 SEO 搜索引擎优化的时候特别好用。  光知道用户的正常使用情况还不够，万一你的网站按钮点不动了，用户那边疯狂报错，你这儿却一无所知，那就尴尬了，说不定会影响收入！所以 **前端错误监控** 必不可少。 Sentry 是业界主流的开源前端监控，它能帮你捕获和统计各种代码报错。  还能记录用户的系统环境和具体报错信息，便于你排查和修复 Bug。  不过免费版存在限制，或者得自己搭建服务器部署开源代码。所以我们团队用的是国内的灵雀应用监控，也是一段代码就能接入，能够实时捕获前端的各种异常报错，查看具体的错误信息等等。  有时候光知道哪里出错了还不够，你还想知道用户到底是怎么操作的？为什么会触发这个错误？或者为什么用户不愿意付费？这时候就得上 **用户行为分析** 工具了。 我直接掏出微软 100% 免费的 Clarity，能录制用户的真实操作回放。  像我们团队的 [模拟面试产品 - 面多多](https://ai.mianshiya.com/) 就在用它，用户点击了哪里、滚动到哪里、在哪个按钮上犹豫不决，全都一清二楚。  还能通过热度地图快速分析用户的喜好，从而帮助优化产品功能按钮的布局，降低产品的使用难度，发现很多凭空根本想不到的问题。  前面说的这些工具提供的都是通用指标，但每个产品的业务逻辑不一样，有些你特别关心的数据，比如付费转化率、功能使用频次等，光靠现成工具可能拿不到，这时候就得上 **自定义业务分析** 了。 刚开始我有点想当然，直接就为一些大家耳熟能详的商业 BI 产品付费了，但后来发现对于小团队来说，其实没必要花那个钱，直接搭建开源的 DataEase 或 Superset 就挺香的，可以对接 MySQL 数据库等各种自己业务的数据源，然后根据需求来配置、拖拖拽拽就能做出各种可视化图表和看板。  实在碰到特别个性化的需求，还可以自己搭建看板。现在有了 AI 加持，配合 ECharts 图表库，写几句提示词就能生成可视化看板，真的轻松多了。  说完前端，咱后端的数据分析也不能落下啊。 用户访问你的网站，背后都是一个个接口在提供数据，怎么知道接口是否正常？有没有优化空间呢？这时就需要后端的 **应用监控分析** 了。 像我们团队在用 ARMS 应用实时监控服务，能帮你全面监控应用的性能，快速发现出错或者速度较慢的接口。  还能进一步查看错误详情，甚至是分析接口的完整调用链，能快速定位问题。  除了应用层面，服务器、数据库、缓存这些 **资源的监控分析** 也很重要，如果它们都跑在云上，那就直接用云服务商自带的监控看板就行，各种指标一目了然。  要是你想统一监控分析更个性化的指标，那就得请出 Prometheus + Grafana 这对王炸组合了。Prometheus 负责采集各种自定义指标数据，为开发者带来监控的火种。  Grafana 则负责把这些数据变成炫酷的可视化大屏。看着一堆实时变化的图表，我仿佛掌控着整个系统的脉搏，恍惚间有种成为科幻电影里男猪脚的感觉~  --- OK 就分享到这里，其实还有很多不错的开源项目，比如 SkyWalking、Zipkin 来管理应用性能，ELK 来集中分析日志等等。  有了这些工具，网站数据分析其实没有那么复杂，关键是要根据需求选择合适的方案，把时间省下来做产品才是正道。 如果本文对你有帮助，点个赞吧，感激不尽！  ## 更多 💻 编程学习交流：[编程导航](https://www.codefather.cn/) 📃 简历快速制作：[老鱼简历](https://www.laoyujianli.com) ✏️ 面试刷题神器：[面试鸭](https://www.mianshiya.com) 📖 AI 学习指南：[AI 知识库](https://ai.codefather.cn/)
颜色网站为啥都收费？自己做个要花多少钱？
你是小阿巴，一位没有对象的程序员。 <p align="center"><img src="https://pic.code-nav.cn/post_picture/1601072287388278786/E1NmppnZrP7GhZZa.webp" alt=""></p> 这天深夜，你打开了某个颜色网站，准备鉴赏一些精彩的视频教程。 结果一个大大的付费弹窗阻挡了你！  你心想：可恶，为啥颜色网站都要收费啊？ <p align="center"><img src="https://pic.code-nav.cn/post_picture/1601072287388278786/21zQvJ9u4MbZvk1O.webp" alt=""></p> 作为一名程序员，你怎能甘心？ 于是你决定自己做一个，不就是上传视频、播放视频嘛？ 这时，经常给大家分享 AI 和编程知识的 `鱼皮` 突然从你身后冒了出来：天真！你知道自己做一个要花多少钱么？ <p align="center"><img src="https://pic.code-nav.cn/post_picture/1601072287388278786/WhVXbwKpTn3x9Sxn.webp" alt=""></p> 你吓了一跳：我又没做过这种网站，怎么知道要花多少？ 难道，你做过？ 鱼皮一本正经：哼，当然…… 没有。 不过我做过可以看视频的、技术栈完全类似的 [编程学习网站](https://www.codefather.cn/)，所以很清楚这类网站的成本。  你来了兴趣：哦？愿闻其详。 鱼皮笑了笑：那我就以 [编程导航](https://www.codefather.cn/) 项目为例，从网站开发、上线到运营的完整流程，给你算算做一个视频网站到底要花多少钱。还能教你怎么省钱哦~ 你点了个赞，并递上了两个硬币：好啊，快说快说！ ------ **鱼皮特别感谢朋友们的支持，你们的鼓励是我持续创作的动力 🌹！**  ⚠️ 友情声明：以下成本是基于个人经验 + 专业云服务商价格的估算（不考虑折扣），仅供参考。 ⭐️ 推荐观看本文对应视频版：https://bilibili.com/video/BV1nJCxBmEmi ## 服务器 想让别人访问你的网站，首先你要有一台服务器。 你点点头：我知道，代码文件都要放到服务器上运行，用户通过浏览器访问网站，其实是在向服务器请求网页文件和数据。  那服务器怎么选呢？ 鱼皮：服务器的配置要看你的网站规模。刚开始做个小型视频网站，可以用入门配置的轻量应用服务器**（比如 2 核 CPU、2G 内存、4M 带宽）**，一年几百块就够了。  等后续用户多了，服务器带宽跟不上了再升级。比如 4 核 CPU、16G 内存、14M 带宽，一年差不多几千块。  你：几百块？比我想的便宜啊。 鱼皮：没错，国内云服务现在竞争很激烈、动不动就搞优惠。 但是要注意，如果你想做 “那种网站”，就要考虑用海外服务器了（好处是不用备案）。 咳咳，我们不谈这个…… ## 数据库 有了服务器，还得有数据库，用来存储网站的用户信息、视频信息、评论点赞这些数据。 你：这个简单，数据库不就是 MySQL、PostgreSQL 这些嘛，装在服务器上不就行了？  鱼皮：是可以的，但我更建议使用云数据库服务，比如阿里云 RDS 或者腾讯云的云数据库。 你：为啥？不是要多花钱吗？ 鱼皮：因为云数据库更稳定，而且自带备份、容灾、监控这些功能，你自己搞的话，还要费时费力安装维护，万一数据丢了可就麻烦了。  你：确实，那得多少钱？ 鱼皮：入门级的云数据库（比如 2 核 4G 内存、100GB 硬盘）包年大概 2000 元左右。后面用户多了、数据量大了，就要升级配置（比如 4 核 16G），那一年就要 1 万多了。不过那个时候你已经赚麻了……  ## Redis 鱼皮：对了，我还建议你加个 Redis 缓存。 你挠了挠头：Redis？之前看过你的 [讲解视频](https://www.bilibili.com/video/BV1a1sgzfE5d/)。这个是必须的吗？  鱼皮：刚开始可以没有，但如果你想让网站数据能更快加载，强烈建议用。 你想啊，视频网站用户一进来都要查看视频列表、热门推荐这些，如果用 Redis 把热点数据缓存起来，响应速度能快好几倍，还能帮数据库分摊查询压力。  你：确实，网站更快用户更爽，也更愿意付费。那 Redis 要多少钱？ 鱼皮：Redis 比数据库便宜一些。入门级的 Redis 服务一年大概 1000 元左右。  你松了口气：也还行吧，看来做个视频网站也花不了多少钱啊！ ## 对象存储 鱼皮：别急，接下来才是重点！ 我问问你，视频文件保存在哪儿？ 你不假思索：当然是存在服务器的硬盘上！ 鱼皮哈哈大笑：别开玩笑了，一个高清视频动不动就几百 MB 甚至几个 G，你那点儿服务器硬盘能存几个视频？  而且服务器带宽有限，如果同时有很多用户看视频，服务器根本撑不住！ 你：那咋办啊！ 鱼皮：更好的做法是用 **对象存储**，比如阿里云 OSS、腾讯云 COS。 对象存储是专门用来存海量文件的云服务，它容量几乎无限、可以弹性扩展，而且访问速度快、稳定性高，很适合存储图片和音视频这些大文件。  你：贵吗？ 鱼皮：存储本身不贵，100GB 一年也就几十块钱。但 **真正贵的是流量费用**！ 用户每看一次视频，都要从对象存储下载数据，这就产生了流量。 如果一个 1 GB 的视频被完整播放 1000 次，那就是 1000 GB 的流量，大概 500 块钱。 你看那些视频网站，每天光 1 个视频可能就有 10 万人看过，价格可想而知。  你惊讶地说不出话来：阿巴阿巴…… <p align="center"><img src="https://pic.code-nav.cn/post_picture/1601072287388278786/8nXg0j6H3lpECrOe.webp" alt=""></p> ## 视频转码 鱼皮接着说：这还不够！对于视频网站，你还要做 **视频转码**。因为用户上传的视频格式、分辨率、编码方式都不一样，你需要把它们统一转成适合网页播放的格式，还要生成不同清晰度的版本让用户选择（标清、高清、超清）。  你：啊，那不是要多存好几个不同清晰度的视频文件？ 鱼皮：没错，而且转码本身也是要钱的！ 一般按照清晰度和视频分钟数计费。如果你上传 1000 个小时的高清视频，光转码费就得几千块！  ## CDN 加速 你急了：怎么做个视频网站处处都要花钱啊！有没有便宜点的办法？ 鱼皮笑道：可以用 CDN。 你：CDN是啥？听着就高级！ 鱼皮：CDN 叫内容分发网络，简单说就是把你的视频缓存到全国各地的服务器节点上。用户看视频的时候，从最近的节点拿数据，不仅速度更快，而且流量费比对象存储便宜不少。  你眼睛一亮：这么好？那不是必用 CDN！ 鱼皮：没错，一般建议对象存储配合 CDN 使用。  而且视频网站 **一定要做好流量防刷和安全防护**！ 现在有的平台自带了流量防盗刷功能：  此外，建议手动添加更多流量安全配置。 1）设置访问频率限制，防止短时间被盗刷大量流量  2）还要配置 CDN 的流量告警，超过阈值及时得到通知  3）还要启用 referer 防盗链，防止别人盗用你的视频链接，用你的流量做网站捞钱。  如果不做这些，可能分分钟给你刷破产了！ 你：这我知道，之前看过很多你破产和被攻击的视频！ 鱼皮：我 ***！  ## 视频点播 你：为了给用户看个视频，我要先用对象存储保存文件、再通过云服务转码视频、再通过 CDN 给用户加速访问，感觉很麻烦啊！  鱼皮神秘一笑：嘿嘿，其实还有更简单的方案 —— **视频点播服务**，这是快速实现视频网站的核心。 只需要通过官方提供的 SDK 代码包和示例代码，就能快速完成视频上传、转码、多清晰度切换、加密保护等功能。  此外，还提供了 CDN 内容加速和各端的视频播放器。  你双眼放光：这么厉害，如果我自己从零开发这些功能，至少得好几个月啊！ 鱼皮：没错，视频点播服务相当于帮你做了整合，能大幅提高开发效率。 但是它的费用也包含了存储费、转码费和流量费，价格跟前面提到的方案不相上下。  你叹了口气：唉，主要还是流量费太贵了啊…… ## 网站上线还要准备啥？ 鱼皮：讲完了开发视频网站需要的技术，接下来说说网站上线还需要的其他东西。 你：啊？还有啥？ 鱼皮：首先，你得有个 **域名** 给用户访问吧？总不能让人家记你的 IP 地址吧？  不过别担心，普通域名一年也就几十块钱（比如我的 [codefather.cn](https://www.codefather.cn/) 才 38 / 年）。  当然，如果是稀缺的好域名就比较贵了，几百几千万的都有！ 你：别说了，俺随便买个便宜的就行…… 鱼皮：买了域名还得配 **SSL 证书**，因为现在做网站都得用 HTTPS 加密传输，不然浏览器会提示 “不安全”，用户看了就跑了。  刚开始可以直接用 [Let's Encrypt](https://letsencrypt.org/zh-cn/) 提供的免费证书，但只有 3 个月有效期，到期要手动续期，比较麻烦。  想省心的话可以买付费证书，便宜的一年几百块。  你：了解，那我就先用免费的，看来上线也花不了几个钱。 鱼皮：哎，可不能这么说，网站正式上线运营后，花钱的地方可多着呢！尤其是安全防护。 ## 安全防护 做视频网站要面对两大安全威胁。第一个是 **内容安全**，你总不能让用户随便上传违规视频吧？万一上传了不该传的内容，网站直接就被封了。 你紧张起来：对啊，我人工审核也看不过来啊…… 怎么办？  鱼皮：可以用内容审核服务。视频审核包含画面和声音两部分，比文字审核更贵，审核 1000 小时视频，大概几千块。  你：还有第二个威胁呢？ 鱼皮：第二个是最最最难应对的 **网络攻击**。做视频网站，尤其是有付费内容的，特别容易被攻击。DDoS 流量攻击想把你冲垮、SQL 注入想偷你数据、XSS 攻击想搞你用户、爬虫想盗你视频……  你：这么坏的吗？那我咋防啊！ 鱼皮：常用的是 Web 应用防火墙（WAF）和 DDoS 防护服务。Web 防火墙能防 SQL 注入、XSS 攻击这些应用层攻击，而 DDoS 防护能抵御大规模流量冲击。  但是这些商业级服务都挺贵的，可能一年就是几万几十万……  你惊呼：我为了防止被攻击，还要搭这么多钱？！ 鱼皮笑了：好消息是，有些云服务商会提供一点点免费的 DDoS 基础防护，还有相对便宜的轻量版 DDoS 防护包。  我的建议是，刚开始就先用免费的，加上代码里做好防 SQL 注入、XSS 这些安全措施，其实够用了。等网站真做起来、有收入了，再花钱买商业级的防护服务就好。  你点了点头：是呀，如果没收入，被攻击就被攻击吧，哼！ 鱼皮微笑道：你这心态也不错哈哈。除了刚才说的这些，随着你网站的成熟，还可能会用到很多第三方服务，比如短信验证码、邮件推送、 等等，这些也都是成本。 ## 总成本 讲到这里，你应该已经了解了视频网站的整个技术架构和成本。  最后再总结一下，如果一个人做个小型的视频网站，一年到底要花多少钱？  你看着这个表，倒吸一口凉气：视频网站的成本真高啊…… <p align="center"><img src="https://pic.code-nav.cn/post_picture/1601072287388278786/CpYJKCxWmgYMl4rr.jpg" alt=""></p> 鱼皮：没错，这还只是保守估计。如果你的网站真火了，每天几万人看视频，一年光流量费就得有几十万吧。 而且刚才说的都只是网站本身的成本，如果你一个人做累了，要组个团队开发呢？ 按照一线城市的成本算算，前端开发 + 后端开发 + 测试工程师 + 运维工程师，再加上五险一金，差不多每月要接近 10 万了。 你瞪大眼睛：那一年就是一百万？  鱼皮：没错，人力成本才是最贵的。 你：好了你别说了，我不做了，我不做了！我现在终于理解为什么那些网站都要收费了…… 鱼皮：不过说实话，虽然成本不低，但那些网站收费真的太贵了，其实成本远没那么高，更多的是利用人性赚取暴利！ 所以比起花钱看那些乱七八糟的网站，把钱和时间投资在学习上，才是最有价值的。 你点了点头：这次一定！再看一期你的教程，我就睡觉啦~  ## 更多 💻 编程学习交流：[编程导航](https://www.codefather.cn/) 📃 简历快速制作：[老鱼简历](https://www.laoyujianli.com) ✏️ 面试刷题神器：[面试鸭](https://www.mianshiya.com) 📖 AI 学习指南：[AI 知识库](https://ai.codefather.cn/)
我代表编程导航，向大家道歉！
对不起，我代表编程导航，向大家道歉！  大家最近访问网站可能会遇到很多莫名其妙的 Bug。  幸运的话，还可能会看到 “薛定谔的网站”！ 诶，一会儿新页面、一会儿老页面、一会儿又来个报错，不知道你们遇到没有？ > 具体的 Bug 表现可以看：https://bilibili.com/video/BV1NgpqzQETJ  怎么回事儿呢？ 最近我们网站前端正在进行技术升级，为了保险起见，我们选择 **灰度发布**，先让一小部分用户使用新版本，而不是全量上线。  但是无奈我们目前使用的项目部署平台不支持按比例灰度发布。  为了降低灰度的实现成本，团队心生一计：既然用户访问网站时，要先通过 DNS 服务器解析域名为 IP 地址。  那我只需要在 DNS 解析这边动动手脚，给同一个域名配置 2 条相同类型的解析记录，一条指向新网站、一条指向老网站，再设置不同的权重，这样就通过 DNS 轮询的方式分配了流量。  过程如图：  **结果翻车了！** 哪怕是同一个用户、同一台电脑访问我们的网站，都有可能出现一会儿新页面、一会儿老页面的情况，用户体验很差；而且由于新老网站技术栈不兼容，还出现了一些奇奇怪怪的 Bug。  这是因为 DNS 轮询本质上是 **随机分配**，无法绑定用户身份。哪怕同一台电脑，DNS 缓存过期后再次解析，也可能拿到新网站服务器的 IP，导致版本切换。  不过目前这个问题应该已经解决了，大家可以帮我试试看。 > 编程导航：[codefather.cn](https://codefather.cn/)  解决办法很简单，我们临时更改了 DNS 解析规则的线路类型，将某一运营商（比如电信）的用户统一解析到新版本，其他用户解析到老版本。这样避免了完全随机的情况，解决了同一用户反复切换的问题，达到了按用户群体灰度的效果。  我承认基于 DNS 实现灰度并不优雅，也导致了一些线上 Bug。理想情况下应该根据用户 ID、Cookie 等标识进行一致性分流，可以利用网关、容器编排、或者 CDN 等技术实现灰度。  但标准的灰度方案需要更复杂的基础设施和更高的成本，对于俺们小团队来说，在资源有限的情况下，还是选择了一个 “看似可行” 的简单方案，结果聪明反被聪明误了。  把这次的事故分享出来，也是希望能给同样是小团队的朋友们一些参考。 你们遇到过类似的情况吗？有什么更好的方案推荐？  ## 更多 💻 编程学习交流：编程导航：https://www.codefather.cn/ 📃 简历快速制作：老鱼简历：https://laoyujianli.com ✏️ 面试刷题神器：面试鸭：https://mianshiya.com 📖 AI 学习指南：AI知识库：https://ai.codefather.cn/
我看到了 17 年前的 GitHub，竟然长这样？！
2025 年，世界最大的同性交友平台 GitHub 迎来了第 10 亿个代码仓库 —— [shit](https://github.com/Red-Killer/shit)  真想不到，现在的 GitHub 竟然如此抽象。 我是 2017 年才第一次接触到 GitHub，应该算是比较晚的了，你们都是几几年认识 GitHub 的呢？  当年我对 GitHub 的印象就是一个资源很多的代码网站，而如今网站上五花八门、无奇不有，连 [菜谱](https://github.com/Anduin2017/HowToCook) 都能找到。  那么你是否好奇？**最早的 GitHub 是什么样的？最早的一批热门项目又是什么？** 下面我就带大家坐上时光机，一起回到 17 年前，看看 GitHub 的前世今生！ ⭐️ 推荐观看视频版：[https://bilibili.com/video/BV1UKHyzkEi2](https://www.bilibili.com/video/BV1UKHyzkEi2/) ------ 打开 [时光倒流机器网站](https://web.archive.org/)，输入你想查看的目标，然后我们就获得了 GitHub 的人生档案。  ## 2008-2009 初生阶段 - 大道至简 2008 年，伴随着第一声啼哭，GitHub（本名 “给特哈布”）诞生。那会儿我还在打 DNF 呢~ ### 2008 年：最初的模样 先看下 [第一个快照版本](https://web.archive.org/web/20080514210148/http://github.com/) ，不知道是网站本身没样式还是爬虫没抓到，第一个版本看起来非常赤裸。  页面上有句话：`no longer a pain in the ass` ，这句话怎么翻译？ 看来 GitHub 从一开始就很有个性啊！ 有趣的是，GitHub 刚开始就有付费策略了（Pricing） 看看最初的登录页面，这跟我刚开始学前端的时候写的差不多：  看看那时最热门的项目是什么？  啥啥啥，这都是啥啊？ 第一名的项目竟然是 Ruby，一个编程语言，而且大多数项目都是 Ruby 相关的。 我发现当年最火的这些项目我几乎都不认识，有没有见多识广的朋友？ 可见那时的 GitHub 还是纯正的技术社区，都是技术人中的技术人在使用。 那会儿还有个公共的推送广场，所有人的动态都在这里展示，非常有社区感。  到了 [2008 年 8 月](https://web.archive.org/web/20080828150139/http://github.com/)，主页突然就好看了！这可能是我最理想的主页设计，比现在精简太多了，你们觉得呢？  这时出现了一个很吸引我的项目 —— Git 牛比！  哦，原来是 gitnub，是一个用 Ruby 编写的类似 Gitk 的应用程序，这可是 18 年前的史诗级项目啊！ ### 2009 年：快速成长 2009 年，GitHub 留了很大一块区域给品牌宣传，展示了已经采用 GitHub 作为首选代码托管平台的公司。  今年有很多次抓取页面时都出现了 404 找不到页面：  随便点进一个看看，原来那个时候就有小章鱼 logo 了，经典流传。  到了 2009 年底，GitHub 已经有近 15 万开发者了，`仓库按钮` 变成了 `探索 GitHub` 按钮。  这时终于出现了一个超越 Ruby 的项目 —— MaNGOS！  原来这是一个开源的魔兽世界私服模拟器项目，果然游戏是程序员的第一生产力。 不过这个时间段还是 Ruby 项目比较多，但是也出现了一些网页项目，比如经典的 Jekyll 静态网站生成器。 ## 2010-2012 儿童阶段 - 快速发展 ### 2010 年：里程碑时刻 2010 年 7 月 26 日，GitHub 突破了 100 万个仓库！这是一个重要的里程碑。  到了年底，已经有 50 万用户了。这时 GitHub 的界面更简洁了：  这难道就是早期企业级项目的样子吗？大大的横幅广告就不说了，甚至还有空间专门标注 Git 和 GitHub 的读音？！难道是读错的人太多了？ 这一年的 GitHub 探索页面有了更多仓库的趋势。  在 仓库页面中，我看到了很多熟悉的项目，像 Linux、Git、jQuery、Python 的框架 Django、PHP、MongoDB、Redis、PostgreSQL、Node.js、Java 的 Groovy。这些项目相信很多程序员朋友不陌生了吧？很多项目现在也是主流，看来当年已经是神仙打架了。  从 2010 年的语言统计来看，Ruby 和 JavaScript 应该是当时最受欢迎的编程语言，还有一些语言也初露锋芒，Java 那年还只是个小卡拉米。  ### 2011-2012年 20 11 年 1 月 28 日 这天，应该是太火爆了，出现了服务器异常。 话说这尼玛是什么图标？  到 11 年底，GitHub 已经有 100 多万用户，超越了 SourceForge、Google Code 等，成为最大的开源托管平台！  也是在 2011 - 2012 年，Web 项目开始发力。当时比较火的项目就是各种 Web 框架，比如 Bootstrap；还有一些小工具像 Homebrew、Oh-my-zsh 也很容易火起来。  ## 2013-2016 青少年阶段 - 技术盛世 ### 2013年 2013 年 1 月，据说这时 GitHub 用户数达到了 300 万，仓库数接近 500 万。 但是！就在 GitHub 一帆风顺的时候，发生了一件震惊程序员圈的大事。也就是当年有名的网络封锁事件，就不细说了。 从今年的语言排行榜来看，发现 Java 开始伟大了！  ### 2014-2015年：完全起飞 从 [2014](https://web.archive.org/web/20140701000000*/github.com) 这一年的网站收录情况也能看出，GitHub 完全起飞了！  这一年，[GitHub 主页](https://web.archive.org/web/20140101042850/https://github.com/) 又一次进行了优化，界面开始现代化，越来越有内味儿了。  也是这段时间，GitHub Pages 进行了改版。GitHub Pages 让每个人都可以轻松创建自己的网站，这个功能到现在都很流行。 改版前：  改版后：  2014 - 2015 年，GitHub 的探索页面在不断更新：  这一年，趋势页面代替了原有的仓库页面，我们发现热门项目 **似乎有一些不一样了**。。。  ### 2016年：新的趋势 到了 2016 年，GitHub 应该已经有 1000 万用户和 2000 万个仓库，企业版功能也开始出现。主页改版重点突出了 GitHub Enterprise，说明企业用户越来越重要。  看下 2016 年的 GitHub 项目排行榜，发现热门项目确实有些不一样了，资源类、教程类项目开始占据榜首。GitHub 貌似被挖掘出了新的作用。。。  ## 2017-2022 青年阶段 - 爆发增长 ### 2017年：重要的一年 大事来了！ 2017 年，GitHub 迎来了一个很重要的人！ 也就是在下，程序员鱼皮。  虽然刚开始我只是把 GitHub 当成可以白票的资源站和网盘来用，但如今我仍然记得别人第一次 star 我项目时的激动。 2017 年这个时候的主页，应该很多朋友并不陌生了。  这一年主页多了 Marketplace，这是一个应用商店，开发者可以在这里找到各种工具和服务来改进自己的开发流程。  ### 2018年：微软收购 2018 年，微软宣布以 75 亿美元收购 GitHub。当时很多开发者抵制这个行为，因为以前微软给人的感觉是反对开源，觉得这次收购是居心不良。 我想微软这个行为也是因为看到了开源的价值，而且发现 GitHub 的受众远远不止程序员。。。 这时的开源项目，几乎已经被各种各样的学习教程、知识总结霸榜了。还有很多奇奇怪怪的东西，比如 12306 智能刷票：  找工作黑名单：  还有 LeetCode 刷题指南等等：  从这里大家也能发现，是咱们国人开始发力了！ 背后的原因我想也是和公众号等自媒体的发展有关，毕竟 GitHub 是引流的好地方。 ### 2019年 2019 年，GitHub Actions 正式发布，可以看到主页多了 GitHub Actions 模块。这是一个强大的 CI/CD 工具，可以自动化软件工作流程。  应该也是这一年吧，GitHub 宣布私有仓库免费，个人用户可以无限创建任意数量的私有仓库。我记得当时还在自己搭 GitLab 呢，这个操作直接把我拉回 GitHub 了。 ### 2020年 2020 年 GitHub 的主页新增了 Team 功能，那年的情况大家也都清楚，可以看到 GitHub 对团队协作的重视，也能更好地和 GitLab 等竞品竞争。  这一年还发生了一件大事。GitHub 公布了一项代码存档计划，**要把代码埋入北极地下 250 米深的永久冻土层， 希望将代码保存 1000 年**。 当时看到这个消息还有点小激动，想想自己写的屎山可以作为文物遗臭千年，我又多肝了几百行代码。  ### 2021 - 2022年：AI时代来临 2021 年主页更加现代化，还新增了 Codespaces 云端开发环境功能，可以让开发者在浏览器中直接编码。  值得一提的是，这个时候，GitHub 已经有 6500 万开发者，**相当于整个英国的人口总数**！ 这一年，GitHub 和 OpenAI 合作推出了 GitHub Copilot AI 助手，这个时候就已经明示程序员即将进入 AI 辅助编程的新时代了。 2022 年，GitHub 达到了 8300 万开发者！增长速度恐怖如斯！  2022 年底，主页再次大改版，更加现代化。此时的 GitHub 早就不是一个简单的代码托管平台了，而是集在线编程、协作、部署发布、监控运维一体的超级程序员开发平台。  ## 2023 至今 壮年阶段 - 全民 GitHub 接下来的故事大家也就清楚了，如今 GitHub 注册用户数突破 1.5 亿，托管的代码仓库超过 10 亿个，稳坐开源第一把交椅。 而且 GitHub 一直在朝着 AI 风口去发展，几乎每个页面都能看到 AI 的影子。  ------ 原来不知不觉已经过去这么多年了，这些年 GitHub 在发展，技术生态也在持续进步。如果把 2008 年那个敲 Ruby 代码的程序员，拉到 2025 年，看到 AI 帮写代码，估计会以为自己穿越到了科幻电影里。 只不过 GitHub 早就不是一个纯粹的技术社区了。时代变了，编程技术普及了，现在你能在 GitHub 上找到各种学习资源、开发工具、生活指南，甚至连表情包和菜谱都有？！ 那么问题来了：**你更怀念以前那个简单纯粹的 GitHub，还是更喜欢现在这个包罗万象的 GitHub 呢？** OK，以上就是本期内容，如果你觉得比较有趣，记得点赞关注哦~  ## 更多 💻 编程学习交流：编程导航：https://www.codefather.cn/ 📃 简历快速制作：老鱼简历：https://laoyujianli.com ✏️ 面试刷题神器：面试鸭：https://mianshiya.com 📖 AI 学习指南：AI知识库：https://ai.codefather.cn/
开心网、快播、千千静听...我用 AI 给这些逝去的网站建了座 “墓园”
大家好，我是程序员鱼皮，分享个有点儿意思的项目，我用 AI 制作了一个 `互联网数字墓园` ！用于纪念那些曾经辉煌的互联网产品。  有这个想法挺突然的，前几天我上网冲浪的时候刷到了人人网，结果发现人人网在 2024 年 12 月就正式停止服务了，心里突然五味杂陈。想想当年还是小学生的我，为了玩开心农场专门注册人人网，每天定闹钟偷菜的日子，那种快乐现在的 00 后、10 后估计都体会不到了吧。 然后我就在想，互联网发展这么多年，有多少曾经陪伴我们的网站和应用都悄无声息地消失了？这些数字时代的记忆，总得有个地方好好保存吧。于是我就萌生了一个想法 —— 做一个数字墓园，专门记录那些已经关闭的互联网产品。 整个网站从设计、收集素材再到开发，我完全用 AI 来制作，1 小时内搞定。我选择了墓园这个主题，黑灰色调，还加了一些微妙的动画效果，营造出一种纪念氛围。 说实话，做出来的效果比我预想的还要好，因此我还专门部署上线、并且搞了个域名：https://gualeme.cn（挂了么），大家也可以访问看看，说不定你的 DNA 就动了~  网站收录了从 2009 年到 2024 年间关闭的各种国内外网站和应用，按年份排序，每个产品都有简单的介绍和具体的逝世日期。  > 注意，由于是 AI 生成，可能存在信息不准确的情况，还请指正。 > > 代码开源：https://github.com/liyupi/better-coder/tree/master/dead-web 比如我来提几个国内的经典产品，那可真是一代人的青春记忆。 1）人人网 作为中国版 Facebook，承载了多少 80 后 90 后的青春？当年我在上面玩各种小游戏，乐此不疲，那个时候的社交真的是简单而纯真，可惜最终还是在 2024 年 12 月 2 日和我们正式告别了。  2）千千静听 这是我印象中用过的第一款音乐播放器，我还记得当时用它听得第一首歌是千里之外。那个简洁的界面，还有当时算是黑科技的歌词同步显示功能，陪伴了多少人的学生时代。2013 年被百度收购后改名百度音乐，算是以另一种形式继续存在着，但那个纯粹的千千静听时代确实结束了。  3）土豆网 2005 年成立的土豆网，喊出 “每个人都是生活的导演” 这个口号，在那个还没有抖音快手的年代，土豆网就是我们分享视频、展示创意的主要平台。它也是我人生中第一次上传视频的平台，还记得当时我把自己拍的小段子和游戏录屏传上去，期待着播放量突破 10 来着。 2012 年后，土豆和优酷合并，2017 年又彻底被优酷吸收。从独立品牌到完全消失，土豆网的衰落过程也拖了好几年，估计现在的小朋友都没听说过这个网站了。  4）腾讯微博 2010 年推出，凭借 QQ 庞大的用户基础快速起量，2011 年注册用户数甚至超过了新浪微博。但微信的崛起彻底改变了游戏规则，腾讯发现微信比微博更符合自己的战略布局，于是腾讯微博就被战略放弃了。2014 年开始基本就是 “植物人” 状态，直到 2020 年才正式宣布停止服务。  5）快播 所有倒闭的产品中，最让人唏嘘的可能就是快播了。2014 年 4 月 Qvod 服务器关闭，相关人员也被判刑。至于为什么倒闭和判刑，我就不多说了，懂得都懂。快播在技术上确实是创新的，只是用错了地方。  还有其他的网站，比如移动的飞信、虾米音乐、还有天涯社区等等，就不展开说了。每个消失的产品背后都有各自的故事，虽然它们已经衰落了，但它们在互联网发展史上留下的印记是抹不掉的，也承载了我们这一代人的青春。 上面这些网站有勾起你的回忆么？你觉得哪个产品最可惜呢？欢迎评论区留言分享吧~ ## 更多 💻 编程学习交流：[编程导航](https://www.codefather.cn/) 📃 简历快速制作：[老鱼简历](https://laoyujianli.com) ✏️ 面试刷题神器：[面试鸭](https://mianshiya.com)
让 AI 帮我部署网站，太方便了！
大家好，我是程序员鱼皮，今天分享一个用 AI 提升效率的神技巧~ 以前，我们开发一个网站，需要先提出需求、再设计方案、再写代码开发、最后部署上线。我们都知道 AI 现在写代码越来越溜了，慢慢地替代了我们程序员写代码的部分工作；但其实，AI 的能力不止于此，利用 MCP，它甚至可以直接帮我们把网站部署上线！ 好好好，合着我 **只要提个一句话需求，写代码和部署都不用我来干了**，让我退化是吧？  下面就来带大家实操一下，让 AI 帮我生成并部署个人博客网站，1 分钟学会~ ## 利用 MCP，让 AI 部署网站 ### 准备工具 我们需要用到的工具包括： - Cursor：AI 编程工具，负责调用 AI 生成代码 - EdgeOne Pages MCP：能够将网站快速部署到 CDN 并生成公开访问链接的服务 什么是 EdgeOne Pages MCP 呢？ 拆解一下这几个单词： EdgeOne 是腾讯云提供的 CDN 加速服务，可以把用户的网站资源缓存到离用户最近的边缘节点，提升网站性能。  EdgeOne Pages 是基于这个 CDN 的网站部署服务，可以让你轻松地将网站部署到 CDN 上，并且得到公开访问地址，**完全不需要自己搭建服务器**。  MCP 则是目前很火的模型上下文协议，让 AI 模型能够轻松地使用各种工具来增强能力，完成更复杂的任务。  EdgeOne Pages MCP 的作用就显而易见了 —— 给 AI 提供网站部署工具，这也是一个比较热门的 MCP：  ### 快速实战 #### 1、开通 Pages 服务 首先到 [EdgeOne 控制台](https://console.cloud.tencent.com/edgeone/pages) 开通 Pages 服务：  开通服务后，默认进入了项目管理页面，我们先不急着创建项目：  由于等下要通过 MCP 完成网站部署，所以要先获取 API Token，作为调用服务的凭证：  #### 2、配置 MCP 新建一个项目文件夹 `yupi-blog`，在 Cursor 中打开，然后进入设置，添加 MCP 服务：  将这段配置复制粘贴到 MCP 配置文件中： ```json { "mcpServers": { "edgeone-pages-mcp-server": { "command": "npx", "args": ["edgeone-pages-mcp"], "env": { // 可选，如需部署文件夹或 ZIP 压缩包，则 API Token 必填 "EDGEONE_PAGES_API_TOKEN": "", // 可选，置空将会创建一个新的 Pages 项目，填入已有的项目名则会更新该项目 "EDGEONE_PAGES_PROJECT_NAME": "" } } } } ``` 注意要把 API Token 改成你自己的，并且把注释删除掉，否则会报错：  正常情况下，你会看到 MCP 服务成功加载，绿了绿了！  这个服务提供了 2 个工具： - deploy_html：部署 HTML 内容到 EdgeOne Pages，返回公开访问 URL - deploy_folder_or_zip：部署文件夹或 ZIP 文件到EdgeOne Pages，返回公开访问 URL 注意，这个 MCP 服务需要 NPX 工具才能在本地成功启动。NPX 可以直接运行 NPM 包中的命令而无需全局安装，常用于执行脚手架工具和一次性命令。 如果你没有 NPX 命令、或者 Node.js 版本过低（最好不要低于 20），都会导致工具无法加载。  这时，你只需要到官网安装 Node.js，会自动帮你安装 NPM 和 NPX 工具：  如果没有自动安装 NPX 工具，那就用 NPM 包管理工具安装 NPX： ```shell npm i -g npx ``` #### 3、生成并部署网站 准备好 MCP 服务后，下面来生成网站，输入下列提示词，让 AI 帮我生成个人博客网站： ```markdown 帮我根据程序员鱼皮的 GitHub 生成个人博客网站，极客风格，简洁大气；生成完成后部署网站 @https://github.com/liyupi ``` 查看 AI 的思考过程，它已经想到要使用 EdgeOne Pages 去部署网站了：  很快网站就生成并部署完成，可以看到 AI 调用了 MCP 部署 HTML 的工具，得到了访问地址：  直接打开网址就看到效果了，不要太方便！  不过目前生成的网站比较简单，就一个 HTML 页面，甚至没有在本地创建代码文件。 #### 4、部署网站目录 再来尝试一个更复杂的项目吧，使用下面的提示词，让 AI 利用前端框架开发多页面网站： ```markdown 帮我根据程序员鱼皮的 GitHub 生成个人博客网站，极客风格，简洁大气； 需要包含多个页面，要求使用 Vue 框架模块化开发； 生成完成后部署网站 @https://github.com/liyupi/ ```  这次要等待的时间会比较久，鱼皮建议大家趁这个时间接杯水，起来活动活动。最近久坐不动，我感觉自己的肩膀已经硬如磐石了。  我们会发现，虽然生成了一大堆代码，但是并没有自动部署，只是给出了部署建议：  看一下 AI 的思考过程，原来是使用部署工具失败了：  经过我的测试发现，如果想部署网站目录或压缩包，最好先在 Pages 网页版创建一个项目，然后让 MCP 把网站文件传到这个项目内。 那就先利用官方提供的例子，随便部署一个网站：  修改项目的名称为 `yupi-blog`，直接点击 “开始部署” 就好：  等待部署中，30 秒左右就好了：  项目部署成功后，我们修改 Cursor MCP 的配置，填入刚刚创建的项目名称：  然后再跟 AI 对话，让它帮我部署网站目录：  可以看到这次 AI 成功执行了部署工具，并且得到了访问地址：  看下网站效果，还不错吧，很有科技感！  不过要注意，生成的网站默认使用 **临时域名**，有效期比较短：  如果你有域名的话，建议配置一下自定义域名，就可以无限期访问啦~  怎么样，是不是很简单？ 等能够轻松在手机上使用 MCP 的时候，试想一下，你走在路上跟朋友聊天，朋友向你推荐了一位博主 —— 程序员鱼皮，你只需要跟 AI 说一句话，2 分钟后，就能给朋友访问介绍这个博主的网站，跟变魔术似的。  值得一提的是，EdgeOne Pages 目前应该是免费的，真香了。  不过即使有一天不免费了、或者增加了限制，我们也有替代方案，提前收藏一下，说不定以后会用得上~ ### 其他替代方案 替代方案就是使用 `Vercel` 这样一个网站部署工具，作用和 Pages 类似，也能一键部署网站并得到访问地址。不过国内访问它的速度可能比较慢，你懂的。  Vercel 提供了命令行工具，可以让我们通过一行命令把自己的项目部署到平台。先用 NPM 安装 Vercel CLI 工具： ```shell npm i -g vercel@latest ``` 然后，直接在想部署的项目文件夹下输入 `vercel` 命令，就能部署当前项目了：  让 AI 完成自动部署的方法也很简单，你只需要在提示词中告诉 AI “你可以使用 vercel 命令行工具完成网站部署”，聪明如它，一定能帮你完成任务。 ------ OK，以上就是本期分享，学会的话记得给鱼皮点赞哦~  ## 更多 💻 编程学习交流：编程导航：https://www.codefather.cn/ 📃 简历快速制作：老鱼简历：https://laoyujianli.com ✏️ 面试刷题神器：面试鸭：https://mianshiya.com 📖 AI 学习指南：AI知识库：https://ai.codefather.cn/
我救了一个网站，性能提升了1500 多倍！
这是一个加载慢慢慢慢慢到不行的网站，据说是由一位低级程序员鱼皮开发的，等了几分钟都没加载完：  你能想到多少种办法，来拯救这个网站的加载速度呢？ 我能想到 **至少 12 种**，如果你能想到更多方法，先受我一拜，你真的很厉害；如果你想到的方法比我少，那么这期内容，一定会让你有收获。 下面我们就来聊聊《网站性能优化》。 ## 如何测量网站性能？ 衡量网站性能的指标非常多，比如首屏加载时间、白屏时间、可交互时间等等。  但这里为了帮助大家理解，我们主要关注用户最直观能感受到的 **网站加载时长**。 怎么测量网站加载时长呢？ 最简单的方法就是按 F12 打开浏览器的开发者工具，切换到 Network 网络面板，刷新页面就能看到每个资源的加载时间了。  当然，还有更专业的网站性能分析工具，在本期的最后会分享。 ## 网站性能优化的关键 虽然网站性能优化的方法非常多，但思路很简单。 问个问题，大家都收过快递吧？快递是怎么送到你家的呢？ 首先，商家从仓库把商品打包，然后通过物流网络和快递员配送到你手里，你拆开包裹就能使用了。 访问网站也是一样的：**从服务器获取到网站文件，然后在浏览器中加载**。 要让网站访问更快，我们可以从三个方向来优化： - 网站传输更快 - 网站体积更小 - 网站加载更快 下面我们就按照这些方向，来优化现在这个要加载 3 分多钟的辣鸡网站，看看最后能优化到多少秒。  ## 一、网站传输优化 想要更快获取到网站文件，我们可以按照网站文件传输的路径 **服务器 => 网络传输 => 客户端** 进行优化。 ### 升级服务器配置 毫无疑问，从服务器获取网站文件是需要网络的，服务器带宽越大，网速越快，网站文件下载越快。 所以如果你不知道怎么优化网站性能，最简单粗暴的方法就是加钱！升级服务器的带宽！ 比如我把 2M 带宽的小水管升级到 8M，网站加载时长就从 3 分钟优化到了 40 秒，速度优化了 4 倍多！  不过一般来说，对于个人小网站，1-5M 就够用了，毕竟带宽挺贵的。 有同学会问了，光升级带宽就够了么？升级内存、CPU、硬盘有没有用？ 这就要看你网站的类别了，对于纯静态网站来说，服务器要做的就是把网站文件发送出去，这个过程主要受带宽限制。但如果你的网站有复杂的后端逻辑，那 CPU 和内存就很重要了。 ### CDN 缓存加速 如果用户离我们的网站服务器较远，传输网站文件的时间就会更长，很影响体验。 如何解决这个问题呢？我们不妨类比一下网购，平台会在全国建立区域仓库，提前把热门商品分配到各地仓库，用户下单后从最近的仓库发货，而不是都从总仓发货，就能更快收货。 这就是 CDN 内容分发网络的原理，提前从源服务器获取到网站文件并缓存到全国各地的节点，用户访问时就可以直接从最近的节点获取资源。不仅延迟更低，而且能同时支持更多用户的访问。  我们使用云服务平台配置一下 CDN，指定原始网站服务器作为源站。  然后设置缓存，可以只缓存图片等媒体资源，也可以缓存整套网站文件，这里我全都要。  试一下效果，首次访问会比较慢，因为 CDN 节点还没有缓存，需要从网站服务器拉取文件；之后速度就飚起来了，直接从 40 秒优化到了 6 秒，性能优化了 6 倍多！效果显著。  不过 CDN 可是把双刃剑，按流量计费，鉴于我被刷了上万元流量费的血泪经验，建议 CDN 能不用就不用，即使要用 CDN 也要做好访问频率限制、用量封顶配置和监控告警。  ### 浏览器缓存 除了 CDN 外，但还有一个更彻底的优化方案：**让网站文件根本不用传输**！ 这就是 **浏览器缓存** 的作用，将已经请求过的网站文件存储到用户本地，下次再访问网站时，都不用去找服务器了，直接从本地加载资源。 我们可以通过 Web 服务器的 HTTP 缓存头配置或者 CDN 的浏览器缓存过期配置来更改缓存策略，更新不频繁的网站缓存时间可以设置长一些。  我这里设置为 1 小时，效果很明显，直接从 6 秒优化到了 1.69 秒，不过理论上还可以更快。  这样一来，我们就形成了一个完整的网站缓存体系：**CDN 缓存解决地理距离问题，浏览器缓存解决重复访问的问题**。实际情况下两种方法建议结合使用。 ### 升级 HTTP 协议 此外，想要升级网站传输的速度，可以升级请求协议到 HTTP/2。 相比于 HTTP/1.1，HTTP/2 最大的改进是 **多路复用**。HTTP/1.1 虽然可以建立多个连接，但每个连接内的请求必须按顺序处理，容易产生队头阻塞问题。而 HTTP/2 在单个连接上就能同时处理多个请求，真正实现了并行传输。 升级 HTTP/2 的方式很简单，只需要在 Web 服务器（比如 Nginx）添加配置： ```nginx server { listen 443 ssl http2; # 开启HTTP/2支持 server_name your-domain.com; ssl_certificate /path/to/cert.pem; ssl_certificate_key /path/to/key.pem; # 其他配置... } ``` 如果你用的是 CDN，只需要在 CDN 配置页面一键开启 HTTP/2 即可：  测试一下效果，这次没有用到本地缓存，网站加载时长也从 6 秒缩短到了 1.6 秒，性能优化了 3 倍多！  仅仅点了一下按钮，速度就上来了，是不是没想到？ 那你可能问了，现在不是还有 HTTP/3 吗？ HTTP/3 确实更先进，它基于 QUIC 协议，有更快的连接建立速度、更好的多路复用性能和更少的队头阻塞问题，但兼容性和稳定性还需要时间验证，选用 HTTP/2 就足够了。 至此，在没有改变网站本身的情况下，我们就已经把网站加载时间优化到了秒级！ ## 二、网站体积优化 如果把网站文件当做货物，体积越小，自然传送越快。 如何优化网站文件体积呢？ 核心就 2 个字 —— **压缩**。 ### 网站资源压缩 首先可以压缩网站引用的媒体资源，比如图片、音视频、字体文件等等。 很多朋友都知道这个道理，但是经常忽略。不信打开浏览器控制台看看你们自己的网站，有哪些资源可以进一步优化呢？ 对很多网站来说，图片是消耗流量较多的一类资源，因此我们性能优化时，要重点关注图片。 只需要把 JPG 和 PNG 的图片统一压缩为 WebP（或 AVIF）格式，这样就能减少 20% 以上的文件体积；想追求更高的压缩比例，还可以调整图片压缩的质量，一般 80% 左右对原图的影响是可以接受的。 举个例子，我让 AI 通过编写 Python 脚本批量压缩网站内的图片，总体积直接减少了 20 多倍！  再次访问网站时，相比之前从服务器加载耗时 40 秒，这次直接缩短到了 2 秒！竟然跟使用 CDN + HTTP 2 的效果旗鼓相当，优化了 20 倍！  而且不仔细看的话，你能分辨出来优化前后图片的区别么？  需要注意的是，如果你的网站允许用户自主上传图片，一定要在后端服务器对这些图片进行压缩，否则可能就会出现下图这种惨状：一个用户头像都消耗了 5M 流量。  ### 网站代码压缩 除了引用的资源外，网站代码本身也是可以压缩的。 代码压缩的原理很好理解，去掉代码中的空格、注释、换行，把变量名缩短就可以了。举个例子：  虽然网站代码压缩的工具网上一抓一大把（比如 [Minifier](https://www.minifier.org/) 和 [JSCompress](https://jscompress.com)），但一般我们不需要手动压缩代码。对于独立的 CSS 和 JS 脚本文件，可以直接使用 [官方提供的 Min 压缩版本](https://www.bootcdn.cn/)。  而对于目前主流的 Vue / React 前端工程化项目，一般会使用打包工具（比如 Vite / Webpack）自动对代码文件进行优化、压缩和打包。 比如经典的 Tree Shaking（摇树优化），就像摇树一样，通过静态分析，把代码中没用到的地方 “摇” 掉，从而减小 JS 文件体积。 来试试看，我的网站项目使用了 Vite 作为打包工具，添加这么一段配置，然后构建和部署项目。  对比一下，效果立竿见影！原本 363 KB 的代码，压缩后只有 159 KB，减少到了一半！  网站加载时长也进一步缩短到了 1.62 秒，又优化了 20%。  ### Gzip 传输压缩 除了手动压缩外，还可以在网站传输时利用 Gzip 实现自动压缩。 它的原理也很简单，浏览器和服务器之间有个约定： 1）浏览器请求网站时通过请求头告诉服务器：“我支持 gzip 压缩”。 示例 Accept-Encoding 请求头： ```markdown GET /index.html HTTP/1.1 Host: codefather.cn Accept-Encoding: gzip, deflate, br ``` 2）服务器收到这个请求，如果开启了 gzip 压缩，会把文件压缩后再发送，并且通过响应头告诉浏览器：“这是压缩过的”。 示例 Content-Encoding 响应头： ```markdown HTTP/1.1 200 OK Content-Type: text/html Content-Encoding: gzip Content-Length: 1024 ``` 3）浏览器收到文件后，会自动进行解压。 让我们测试一下，开启 gzip 的方式很简单，只需要在 Web 服务器中添加配置： ```nginx # 开启gzip压缩 gzip on; # 启用gzip压缩的HTTP版本 gzip_http_version 1.1; # 压缩级别 (1-9) # 1: 最快压缩，压缩率最低 # 9: 最慢压缩，压缩率最高 # 6: 平衡压缩速度和压缩率的推荐值 gzip_comp_level 6; # 小于1KB的文件不压缩 # 小文件压缩后可能反而变大，且消耗CPU资源 gzip_min_length 1024; ``` 然后我们利用 CURL 工具分别发送不开启 Gzip 和开启 Gzip 的两个请求： ```shell # 开启 Gzip - 详细版 curl -H "Accept-Encoding: gzip" -w "Gzip: %{size_download} bytes" -o /dev/null -s http://love.codefather.cn/assets/index-d746a13e.js # 不开启 Gzip - 详细版 curl -H "Accept-Encoding: identity" -w "原始: %{size_download} bytes" -o /dev/null -s http://love.codefather.cn/assets/index-d746a13e.js ``` 发现开启 Gzip 压缩后，文件大小能减少一半多！  但由于我们网站的代码文件体积本来就不大，所以开启 gzip 后的优化效果不会那么明显，但仍然建议开启。 ## 三、网站加载优化 前面我们优化了网站传输和网站体积，HTML 等网站文件能更快到达用户浏览器。但浏览器接下来还需要加载脚本、图片等大量资源，并且动态请求后端数据。 这个过程也是可以优化的，也是最有意思的，我们可以通过很多策略来优化网站的加载速度。 ### 加载策略 首先是几种典型的加载策略，目标是 **让用户在合适的时机获得合适的内容**。 #### 1、延迟加载 **懒加载** 是最常用的延迟加载技术，核心思想很简单：用户看不到的内容就先不加载。这种策略特别适合长页面和图片较多的网站。 比如我们通过 HTML 图片标签自带的 lazy 属性实现懒加载： ```html <img src="image.jpg" loading="lazy" alt="懒加载图片"> ``` > 如果想实现更严格的懒加载，可以采用 Intersection Observer 来观察图片是否进入视窗 测试一下效果，首屏只用了 339 毫秒就加载完成了，加载时长又缩短了 5 倍！  当用户滚动页面到对应的位置时，图片才开始加载，不仅大幅减少了首屏加载时间，而且节约了流量。  #### 2、按需加载 利用 **代码分割** 技术，可以把原本庞大的代码包拆分成多个小模块，根据用户实际需要的功能来加载对应代码。 比如之前网站所有页面的 CSS 和 JS 文件是合并在一起的，现在可以按照页面分割成多个小文件，访问哪个页面就加载哪个页面的代码： ```javascript // 传统方式：一次性加载所有页面代码 import UserProfile from './UserProfile.vue' // 代码分割：访问页面时才加载对应代码 const UserProfile = () => import('./UserProfile.vue') ``` 这样一来，访问网站首页时，只按需加载和首页有关的部分代码，减少了网站首次加载的文件体积，首屏加载速度就能大幅提升，缩短到 162 毫秒，又优化了 1 倍！  之后当访问其他页面时，才会加载对应的网站文件。 #### 3、分层加载 这个策略的核心是 **先快后好**，先让用户立即看到内容，再根据情况提升质量，避免用户等待的焦虑感。常见的实现方式有 2 种。 首先是 **缩略图**。在列表页显示低清小图，用户点击某个感兴趣的内容后再加载高清大图，这样几乎不影响用户体验，又节省了流量。实现方法很简单，为每个高清原图额外生成一个缩略图，不同的页面加载不同的图片就好。 这样一来，首屏加载的资源更小，加载时长缩短到了 118 毫秒，又优化了 25%！  还有一种更高级的策略 —— **渐进式加载**，先加载低质量内容，再自动加载高质量内容。比如图片会先显示一个模糊的预览，然后逐渐变清晰。这样用户不会看到空白区域和页面错位，浏览体验更丝滑。  #### 4、预加载 这个策略的核心是 **预判用户需求**，在用户需要访问之前就把资源准备好，让体验更流畅。 只需要一行代码，就能指定预加载的资源： ```html <link rel="prefetch" href="next-page.js"> ``` 举个典型的场景，比如用户浏览博客网站的文章列表时，可以预加载几篇文章详情页，这样用户点击时几乎秒开。  但我建议使用预加载前，最好先对网站的结构和访问情况进行分析，关键是要把握好度。预加载太少效果不明显，预加载太多又会产生流量浪费。就像你提前为客人准备了第二天的饭，结果人家当天就走了。 ### 请求优化 除了几种加载策略外，还有个比较高级的技巧 —— **请求合并**。 当你要多次调用后端接口来请求数据时，由于浏览器对同一域名有并发请求数限制（一般是 6 个左右），可能会产生请求排队和阻塞，导致数据加载耗时过长。这时，我们可以让后端提供一个聚合接口，一个接口返回某个页面需要的所有数据。不过这需要你跟后端关系不错，否则你就只能自己搭个 Node.js 中间层来做请求聚合了。 请求网站小图标也是类似的，与其一个个请求图标文件，不如利用 **CSS 雪碧图** 特性，把所有小图标合并为一张图片，然后在前端利用 CSS 的 `background-position` 来加载图片的指定位置。  这样只需要请求 1 次，就达到了同样的效果，网站的加载时长也会进一步缩短。  ## 性能分析关键 通过前面分享的这些网站优化技巧，最终我们网站的加载时间竟然 **从 180 秒优化到了 118 毫秒**，性能提升了 1500 多倍！效果还是非常炸裂的，弱网环境也能很快访问网站。 **但这就是极限了么？** 可别忘了，我们的体积优化和加载优化并没有使用 CDN 进行演示，那如果我们同时开启 CDN 和 HTTP 2，效果又如何呢？ 结果可能让大家失望了，经过我的多次测试，**性能并没有明显的提升**。我们对网站本身的优化越多，传输数据量就更小，再加上各种不稳定因素，CDN 在提速方面的效果可能就没那么明显了。这就是为什么我建议大家先对网站本身进行优化，CDN 还是要谨慎使用。 虽然方法教给大家了，怎么合理运用这些方法进行优化，是需要大家持续探索的。记住，性能优化一定是 “**针对具体场景，先分析再优化**”。因此我们也一定要准备一些网站性能分析的工具，我一般会优先使用浏览器开发者工具内置的 Lighthouse，使用很方便。点击一键分析，就能帮你进行全面的网站性能评估，还给出了很多优化建议，有一些不正是我们今天分享到的方法么？  此外，还有一些免费工具也可以试试看： - [GTmetrix](https://gtmetrix.com/) - 详细的瀑布图分析 - [WebPageTest](https://www.webpagetest.org/) - 全球多节点测试  ## 最后 OK 以上就是本期内容，虽然这并不是所有的网站优化方法（还有后端优化、Web Workers、Service Worker、WebAssembly 等等），但已经能够覆盖绝大多数优化场景了。大家可以按照上面提到的方法，一步步按需优化自己的网站。 这篇文章鱼皮总共写了 5000 多字，如果对你有帮助，记得 **点赞收藏** 支持一下！大家反馈不错的话，我后续会继续分享 **后端性能优化的一条龙服务**，绝对干货满满，学编程和 AI 的朋友记得关注鱼皮，我们下期见。 ## 更多 💻 编程学习交流：编程导航：https://www.codefather.cn/ 📃 简历快速制作：老鱼简历：https://laoyujianli.com ✏️ 面试刷题神器：面试鸭：https://mianshiya.com 📖 AI 学习指南：AI知识库：https://ai.codefather.cn/
被运营商卡脖子了。。。你们的短信也发送失败了么？
大家好，我是鱼皮，最近难受的一批，万万没想到，身为一名程序员，让我最痛恨、最无奈的事情还是发生了。。。 最近，很多使用我们面试鸭和编程导航的用户反馈收不短信验证码，导致无法登录 APP、或者绑定手机号。 <img src="https://pic.code-nav.cn/post_picture/1601072287388278786/GD81Kuf6ev06fyL8.webp" alt="" width="100%" /> 刚开始我以为只是偶发情况，就没太在意，交给我团队的开发同学去处理了。 我们使用的是腾讯云短信发送服务，于是问了下官方客服，了解到腾讯云签名不再支持网站、公众号、小程序了，会被运营商拦截，需要改成公司的签名。 <img src="https://pic.code-nav.cn/post_picture/1601072287388278786/73N1H4zLMo2qClNj.webp" alt="" width="100%" /> 于是我们很快就修改了，然而面试鸭和编程导航修改签名后好了一周左右，到 3 月 21 号开始，有少量用户反馈收不到短信验证码；到 3 月 27 号开始发送失败率急剧增加，都是运营商签名未报备拦截的错误。 这个问题的影响有多严重呢？今天拉了一下数据，竟然有 **高达 50% 的用户** 都收不到短信了！  问了下客服，竟然还是签名问题。头疼的是，客服也没有给我们一个合理的解决方案，把锅甩给了运营商，要我们在运营商侧重新报备，预计 5 个工作日。 <img src="https://pic.code-nav.cn/post_picture/1601072287388278786/fsHY3J3vCUJk0XrR.webp" alt="" width="100%" /> 5 个工作日？这个时间对于互联网业务来说，真是有亿点点漫长啊！ 这种感觉是最难受的，明明自己没改代码、没写 Bug，程序莫名其妙地就出现了问题，典型的 “被卡脖子了”。 但我们也不能坐以待毙，就想着能不能找一个备份方案，比如换一个云服务？于是去网上做了一些调研。 1）发现用腾讯云短信服务的其他用户也有此问题：  2）用阿里云短信服务一样有这个问题，所以哪怕我们修改代码来调阿里云的服务，也于事无补： <img src="https://pic.code-nav.cn/post_picture/1601072287388278786/oI5p9fMC9zW6HquN.webp" alt="" width="100%" /> 网上吐槽短信服务的帖子还挺多的，毕竟很多公司的业务受到了影响。不过生气归生气，想必这些云服务商的工作人员心里也不好受，大家都是被卡脖子了。 <img src="https://pic.code-nav.cn/post_picture/1601072287388278786/BgsgY6n2eV6tF8Zy.webp" alt="" width="100%" />  我们也调研了其他大厂的云服务，得到的结论都是一致的 —— 都要新增签名进行报备，等个一周左右才能使用。 阿里云： <img src="https://pic.code-nav.cn/post_picture/1601072287388278786/yeuODAehloXyzFcM.webp" alt="" width="100%" />  火山引擎： <img src="https://pic.code-nav.cn/post_picture/1601072287388278786/it0RwLTz0W0ed3pE.webp" alt="" width="100%" /> 百度云：  京东云：也需要报备，不过那边客服说提交签名审核 + 报备只要 2 天左右。 <img src="https://pic.code-nav.cn/post_picture/1601072287388278786/pnMtNRqrlFG1lcQX.webp" alt="" width="100%" />   最后给个我们的调研总结吧，帮大家节省时间了。除了京东云，报备要 2 个工作日，其他的添加签名 + 运营商报备都需要一周左右。 运营商实名报备是 23 年的 **工信管函【2023】794号** 的要求，今年开始逐渐强制执行（尤其 **315 工信部通报 "垃圾短信" 问题** 后），所有企业短信必须在完成运营商侧实名制报备流程后方可发送。  针对垃圾短信，三大运营商承诺整改： <img src="https://pic.code-nav.cn/post_picture/1601072287388278786/PTM6nqEqFzokrMTf.webp" alt="" width="100%" /> 当然，我们也不会干等着，毕竟马上就假期了，所以决定临时通过修改前端界面，来引导用户暂时不要使用和绑定手机号相关的功能，防止用户一脸懵逼。还是希望服务能够尽快恢复呀！ ## 更多 💻 编程学习交流：[编程导航](https://www.codefather.cn/) 📃 简历快速制作：[老鱼简历](https://laoyujianli.com) ✏️ 面试刷题神器：[面试鸭](https://mianshiya.com)
网站刚上线，就被 DDoS 攻击炸了！
今天是一个值得纪念的日子，你打开一罐可乐，看着自己刚刚上线的小网站，洋洋得意。 这是你第一次做的网站，上线之后，网站访问量突飞猛进；没过多久，你就拿到了千万的风投，迎娶了女神，走上了人生巅峰。。。 害，原来是喝醉了啊。。。你发现刚才那一切竟然都是你的幻想！ 这时你突然收到了一封邮件： <p align="center"><img src="https://pic.code-nav.cn/migrate_image/ff57edb20fb2fd154d9d82bccdd39d91.webp" alt="" width="100%" /></p> 你：？？？ <p align="center"><img src="https://pic.code-nav.cn/migrate_image/a16b46450fdcaba3d93903c341748e44.webp" alt="" width="206px" /></p> 虽然你之前就听说过 DDoS 攻击，但没想到这么快就发生在了自己的头上。 DDoS（分布式拒绝服务）攻击是一种通过制造大量恶意流量打向目标服务器，导致其资源耗尽、服务中断或无法正常响应用户请求的网络攻击方式。 曾经你以为，DDoS 没什么可怕的，大不了攻击时网站不提供服务，攻击结束后再重启服务不就好了？ 但现实给了你一巴掌，没想到云服务器平台直接把你的服务器 **封禁了 12 小时** ！你脊背有些发凉了：攻击者只需攻击几十秒，竟然就能让你的服务器老老实实瘫痪半天。 你不甘心，决定运用你学过的专业知识进行反击。 <p align="center"><img src="https://pic.code-nav.cn/migrate_image/25f7fc632b6d2f36fae80514fb950cd2.webp" alt="" width="318px" /></p> 你给服务器程序增加了一个请求 IP 黑白名单，并且能够对每个 IP 的请求频率进行统计，只要发现单个 IP 请求过快过多，系统就会自动把该 IP 拉黑，就不用处理该 IP 的请求了。 <p align="center"><img src="https://pic.code-nav.cn/migrate_image/26c0f4611fa7db2d6f7f9e5fe7c3381f.webp" alt="" width="100%" /></p> 你信心满满，又开始了对未来的幻想。。 结果没多久，你又收到了同样的邮件，你的服务器 IP 又被封堵了！而且这次 **封禁了 24 小时** ！ <p align="center"><img src="https://pic.code-nav.cn/migrate_image/c6e64ea0052b5efb372f2ab5ec905a5c.webp" alt="" width="100%" /></p> 坏了，你意识到自己犯了一个错误。DDoS 攻击根本不需要向你的应用程序发送恶意请求，而是可以通过直接发送大量的网络流量（比如 UDP 包、ICMP 请求等）到服务器，从而消耗服务器的带宽和资源。也就是说，攻击的目标是直接影响服务器的网络层和传输层，不需要经过应用层。 那一瞬间，你发如雨下，突然意识到，自己的后端技术学得再好，有什么用？DDoS 来了，自己还是没办法解决。 不过你不甘心，天将降大任于斯人也，必先苦其心志劳其筋骨，伤其服务器。。。你继续搜索防御方案，发现 Cloudflare 提供了免费的、号称不限量的 DDoS 防护服务！于是你满怀希望地将它接入网站。 之后，有些用户访问网站时，就会看到这朵小黄云，减少了机器请求攻击： <p align="center"><img src="https://pic.code-nav.cn/migrate_image/c5b3d70905622403d82ebc6b38829406.png" alt="" width="100%" /></p> 这下，你长呼了一口气，让攻击者和 Cloudflare 斗智斗勇吧~ <p align="center"><img src="https://pic.code-nav.cn/migrate_image/f58c6fed804ae8498406d09e235e7b4f.webp" alt="" width="248px" /></p> 可没想到，接下来的几天，不断有用户反映：猪站长啊，你这网站打开速度也太慢了！ 原来免费版本的 Cloudflare 在国内的节点数量有限，要从国外节点加载网站文件，导致国内用户访问速度变慢了。 于是你在网上查了一些攻略，发现有一些开源仓库确实可以找到国内优选的加速节点，但对网络运营商还是有一定限制，而且谁知道这些节点又能撑多久呢？ <p align="center"><img src="https://pic.code-nav.cn/migrate_image/0ebecd8f063d32a5755c23dd0536d0a3.webp" alt="" width="100%" /></p> 正当你犹豫不决时，你又又又又又收到了服务器封堵的邮件！ 你一脸懵逼：不是已经接入 CloudFlare 防护了么？ 等等，攻击者已经知道了服务器本身的 IP 地址，完全可以绕过 CloudFlare，直接攻击到服务器啊！ 这就好比你造了一面墙，但攻击者直接绕过去： <p align="center"><img src="https://pic.code-nav.cn/migrate_image/e052fa293cc3ea72d7d18b91efa18162.webp" alt="" width="100%" /></p> 你有些头痛了，干脆一不做二不休，花点儿钱上更好的防护服务？于是你上网搜了一下大公司专业的高防服务器，发现价格竟然在几万 ~ 几十万不等！ <p align="center"><img src="https://pic.code-nav.cn/migrate_image/0dc06ff51a7ec9655bc424cde5c2c46b.webp" alt="" width="100%" /></p> 你看了看自己 “薄如蝉翼” 的钱包，瞬间放弃了这个念头。 你开始怀疑是不是自己选错了方向，或者该做的也许并不是去拼防护，而是去做点儿别的事情？ 首先，你想到了切换一个平台作为源站，只要保证服务器不会因为攻击而导致长时间封禁，这样即使被攻击了也能快速恢复。但是换到哪个平台呢？这时你想到了你的好朋友鱼皮，他曾经也用了一些平台，比如 Vercel。但你听说，他当时在 Vercel 上的网站因为被攻击得太严重，直接被平台封禁了账号，属实是老倒霉蛋了。 通过调研，你发现可以使用云托管之类的容器部署平台，可以将应用程序部署到多个不同的节点上，被封禁的概率小了很多。 但治根不治本，你想了想，只要保护好自己的源站服务器 IP 地址不被泄露，是不是就可以了呢？ 于是，你更换了个新的服务器 IP。这次，不直接将网站域名解析到服务器 IP，而是接入了一个大厂的 CDN 服务，将域名解析到 CDN 服务，再让 CDN 服务从你的服务器获取网站文件。这样一来，攻击者无法直接得到服务器的 IP 地址，只能看到 CDN 节点的 IP。 <p align="center"><img src="https://pic.code-nav.cn/migrate_image/1ce8017c15db580c1eea7f26dabcec40.webp" alt="" width="100%" /></p> CDN 一般是按照流量计费的，不出意外的话，价格比高防可低了太多。 那如果，出意外了呢？ 没过几天，你发现自己的云服务账户欠费了！ <p align="center"> <img src="https://pic.code-nav.cn/migrate_image/297279f9ce7b6f1708f4e2690998adb8.webp" alt="=" width="100%" /></p> 原来，攻击者疯狂请求你的 CDN 盗刷流量，产生了高额的流量费用。 第一次使用 CDN 的你，根本没有料到这点。后来，鱼皮给你推荐了他写过的一篇文章 [《我被刷几万元的血泪经验。。。》](https://mp.weixin.qq.com/s/-cCGb7E14ZrhZ0Ag44hnug?token=70787607&lang=zh_CN) ，看完后你才意识到：乱用 CDN，钱包两行泪啊！ 这次，你给 CDN 配置了单 IP 访问频率限制、最大消耗流量的限制和自动告警，比如 5 分钟内流量超过 5 G 时，就自动停止 CDN 服务。 <p align="center"><img src="https://pic.code-nav.cn/migrate_image/00c81d1df167971769ddb0b1fbdff229.webp" alt="" width="100%" /></p> 这样一通操作之后，你又恢复了些信心。但没想到，接下来等待你的，是一场无休止的攻击循环。 攻击者攻击了你的 CDN => 触发 CDN 的用量封顶防护，自动关闭服务 => 你重新打开 CDN 服务、并且通过 CDN 配置拉黑了之前攻击者的 IP => 攻击者又使用新的 IP 攻击 CDN。。。 <p align="center"><img src="https://pic.code-nav.cn/migrate_image/0d05f801433123a7f1cd0aaaa9df8a67.webp" alt="" width="196px" /></p> ## 你的选择 你的故事还没有结束，接下来，你会怎么做呢？ - A. 怒砸巨款，买一年的 DDoS 安全防护 - B. 关闭网站，不做了 - C. 找专业人士求助 - D. 找警察叔叔求助 - E. 想办法拉赞助 ## 你的结局 **A. 怒砸巨款，买一年的 DDoS 安全防护** 你决定不再 “省小钱，吃大亏”，干脆砸几万块钱，买一个更加专业的防护服务。你的网站终于在大流量攻击下依然稳定运行，用户也稳定增长，但一年后，你的网站只盈利了不到 1 万，血亏！ **B. 关闭网站，不做了** 看到 DDoS 攻击一波又一波地袭来，你虽然无数次尝试过调整策略，但身心俱疲，最后你决定放弃，关掉这个网站。 虽然稍有不甘，但你意识到，想一个人做好、运营好网站真的太不容易，你也更加理解鱼皮曾经的感受，选择加入鱼皮，帮他一起开发 [编程导航](https://www.codefather.cn/) 。 **C. 找专业人士求助** 你意识到自己的网络安全知识是缺斤少两的，于是决定请一位专家来帮你做 DDOS 防护。专家跟你说了很多的专业名词和理论，什么零信任架构、IDS、IPS、态势感知、流量清洗、蜜罐之类的，但最终并没有给你实质性的帮助，因为你也没有足够的资金去实现那些理论。 **D. 找警察叔叔求助** 你认为攻击者已经触犯了法律，于是决定报警。但没想到，由于你并没有受到巨大的金额损失，警方表示对此案件的关注度较低。而且 DDoS 攻击通常是由大量分布在全球各地的受害主机发起的，很难被追踪和定位。 你很难过，但也意识到了，这才是现实。 **E. 想办法拉赞助** 既然解决不了 DDoS 问题，何不去找找投资者或合作伙伴，拉个 “大力支持” 的赞助？说不定他们会为你提供免费的 DDOS 防护服务呢！ 于是，你将网站开源，持续写文章介绍自己的网站。最终被一位年轻的富二代看上，他不仅没有给你提供赞助，还直接让公司的程序员搬走了你的开源代码，自己上线了个网站。 从此，网络上总会看到一个郁郁寡欢的年轻人，嘴里念念有词：“我抄你们码！” --- 当然，还有更多的选择和结局，留给评论区的人才们讨论吧~ 如果你喜欢这篇文章的话，记得点赞支持哦！ ## 更多 💻 编程学习交流：[编程导航](https://www.codefather.cn/) 📃 简历快速制作：[老鱼简历](https://laoyujianli.com) ✏️ 面试刷题神器：[面试鸭](https://mianshiya.com)