YiWei - freeCodeCamp.org

为什么 Vibe Coding 不会摧毁软件工程

YiWei — Wed, 09 Jul 2025 09:37:28 +0000

原文： Why Vibe Coding Won't Destroy Software Engineering

AI 正在以史无前例的速度颠覆所有行业。

曾经由一两家公司主导或非常“以人为本”的技术和行业正面临威胁。

Google 正在被 AI 搜索抢占市场，卡车司机可能很快就会成为历史，低技能文书工作每天都在流失。

这种颠覆会摧毁软件工程行业吗？我认为不会，我来告诉你为什么。

我们将讨论的内容

“Vibe Coding” 现象
AI 如何改变软件开发
生产力悖论
为什么人类工程师仍然至关重要
AI 作为“能力倍增器”
AI 时代的关键技能
前进之路

“Vibe Coding” 现象

如果你关注技术讨论，你可能已经看到过 “Vibe Coding” 这个术语——通过试验和错误、直觉和 AI 生成的代码片段来构建软件，而不需要深入的技术知识。

现代 AI 助手，如 GitHub Copilot 和 ChatGPT，可以根据简单的描述生成完整的函数、修复 bug 和创建组件。“Vibe Coders” 声称人类程序员很快就会变得过时。

从我的角度来看，这些 AI 工具更像是技能倍增器，而不是替代品。

它们帮助有才华的开发者工作得更快，同时暴露了技能不足的程序员的知识缺口。那些缺乏技术基础的程序员会遇到他们无法解决的问题，但将 AI 助手与实用的专业知识相结合的工程师将能够非常高效地工作。

AI 如何改变软件开发

软件行业正在快速普及基于大语言模型的 AI 编程工具，这些工具分析代码仓库以预测和建议下一步行动。

这些工具通过以下方式改变了日常编程工作：

根据你输入的内容建议完整的函数
根据普通语言描述创建 API 端点
消除了花在标准代码模式上的时间
自动化文档任务
快速处理重复逻辑

这种向 “vibe coding” 的转变加快了功能交付速度。程序员现在可以在不掌握每个技术细节的情况下构建软件——他们描述需求，获取 AI 建议，然后不断调整直至代码正常运行。

风险在于，开发者经常推送他们无法解释的代码。他们在构建过程中进展很快，但在系统崩溃或需要更改时却会遇到困难。

还有一种令人担忧的趋势是非程序员在销售完全通过 AI 构建的应用程序。最近，一位没有编程背景的人通过 AI 提示推出了一个付费服务，只是在几天后就面临了数据泄露，因为黑客利用了基本的安全漏洞。这很危险。它浪费了人们的钱，并暴露了他们的数据。想象一下，如果这种情况由于 “Vibe Coders” 的崛起而变得普遍？

对于任何考虑构建软件但不是软件工程师的人来说，有一些基本的安全级别需要考虑：

向 API 端点添加身份验证：人们可以扫描整个互联网上的开放端口和端点。如果他们可以在没有身份验证的情况下调用你的 API 端点，那么这可能会导致各种问题
不要以明文存储密码。这是一个大禁忌。如果你这样做并且你的数据库被泄露，那么这些密码将被所有人看到。而且，现实中人们会重复使用密码，所以这些密码将是他们在其他网站上的密码。
SSL：确保你的网站安全并且具有最新的 SSL 证书。在明文中传输数据很危险。
锁定未使用的端口：如果你托管后端服务，请确保未使用的端口被锁定，人们无法连接到它们。
如果你有允许上传文件的区域，请限制上传的文件类型。

以上仅是网站或产品安全防护的部分注意事项，实际需要考量的因素远不止于此。

生产力悖论

AI 助手显著提高了代码输出量——但数量并不等于软件工程中的价值。

这些工具在语法方面表现良好，但对系统架构、可扩展性问题和维护需求没有任何了解。就像打字速度不会创造出更好的小说一样，代码生成速度也不会产生更好的软件系统。

AI 适用于单个函数，但在架构决策、安全规划和长期支持需求方面却很难。没有适当的审查和理解，AI 生成的代码通常会成为明天的技术债务和维护负担。

想象一下这样的场景：开发者实现了一个 AI 创建的身份验证系统，它在隔离环境中有效，但在用户注册产品时会导致微妙的故障。找到并修复这些集成问题可能需要经验丰富的员工几天的时间——这抵消了最初节省的时间。这种做法很快就会导致资金损失和信任危机。

为什么人类工程师仍然至关重要

虽然 AI 工具在语法方面表现良好，但它们无法：

规划随着用户需求而增长的系统
创建可靠的部署和测试管道
预测不寻常但至关重要的故障情况
在性能和成本之间做出明智的权衡
找到不明显的安全漏洞

优秀的工程师不仅仅是编写代码。他们开发有助于整个团队的模式，选择合适的技术，并为成功和失败场景做计划。

软件创建涉及复杂的权衡：我们是否优先考虑速度或稳定性？灵活性或简单性？这些决策需要技术专业知识和商业知识。

我合作的最有价值的工程师花更多的时间思考而不是输入代码。他们考虑：需求如何演变？哪些压力点可能出现？系统如何从故障中恢复？

随着基础代码生成变得广泛可用，你的价值来自于理解系统交互。竞争优势将属于那些知道为什么某些方法会成功、它们可能在哪里失败以及如何构建弹性解决方案的人。

正如上所述，有一些事情 AI 无法做到。

AI 可以在简单的提示中创建解决方案来解决众所周知的问题。如果你使用此提示，例如：

这里是你可能得到的代码：

import json

def is_valid_json(input_string: str) -> bool:
    """
    Checks if the input string is valid JSON.

    Args:
        input_string (str): The JSON string to validate.

    Returns:
        bool: True if valid, False otherwise.
    """
    try:
        json.loads(input_string)
        return True
    except json.JSONDecodeError:
        return False

def main():
    user_input = input("Enter a JSON string to validate: ")
    if is_valid_json(user_input):
        print("✅ The input is valid JSON.")
    else:
        print("❌ The input is NOT valid JSON.")

if __name__ == "__main__":
    main()

非常基本。

我不会要求 AI 为我构建一个复杂的外汇交易平台。

我就不赘述全部回复内容了，简单来说就是它无法完成这个操作。

我想将其分解为一个稍微较小的金融交易平台子集：

现在，我会承认，这更接近了。这里是结果：

from fastapi import FastAPI, Request, HTTPException, Header
from pydantic import BaseModel, Field
from typing import Optional
import hmac
import hashlib
import logging

app = FastAPI()

# === CONFIGURATION ===
SHARED_SECRET = b"super_secure_shared_secret"  # Keep this secure

# === LOGGING SETUP ===
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger("ems.fix")

# === Pydantic Model for Execution Report (simplified) ===
class ExecutionReport(BaseModel):
    msg_type: str = Field(default="J", const=True)
    cl_ord_id: str  # Tag 11
    order_id: str   # Tag 37
    exec_id: str    # Tag 17
    exec_type: str  # Tag 150
    ord_status: str # Tag 39
    symbol: str     # Tag 55 (e.g., EUR/USD)
    side: str       # Tag 54 (1=Buy, 2=Sell)
    leaves_qty: float  # Tag 151
    cum_qty: float     # Tag 14
    avg_px: float      # Tag 6
    transact_time: str # Tag 60 (ISO8601 string)

# === Helper: HMAC Validator ===
def verify_signature(payload: bytes, signature: str) -> bool:
    computed = hmac.new(SHARED_SECRET, payload, hashlib.sha256).hexdigest()
    return hmac.compare_digest(computed, signature)

# === Endpoint ===
@app.post("/fix/execution-report")
async def receive_execution_report(
    request: Request,
    x_signature: Optional[str] = Header(None)
):
    body = await request.body()

    if not x_signature or not verify_signature(body, x_signature):
        logger.warning("Invalid or missing signature.")
        raise HTTPException(status_code=403, detail="Unauthorized")

    try:
        report_data = ExecutionReport.parse_raw(body)
        logger.info(f"Execution Report received: {report_data.dict()}")
        # ✅ Here, you'd handle order updates, booking, etc.
        return {"status": "ok", "message": "Execution Report received"}
    except Exception as e:
        logger.exception("Invalid payload format.")
        raise HTTPException(status_code=400, detail=f"Invalid FIX message format: {str(e)}")

但这仍然无法接近最终版本。即使你可以使用此代码作为交易系统的一部分，但除非你知道如何构建和架构整个软件系统，否则你将从哪里开始？你可以告诉客户他们可以发送“ExecutionReport”，但接下来呢？

关于“只需更擅长提示工程就能构建更庞大系统”的说法，我早已耳闻目见。但真正的效益从何而来？金融交易系统的复杂度远超人类理解范畴。要让提示工程足够完善，以便构建一个功能齐全、可扩展、安全且可扩展的系统（更别说调试能力）本身就是一项巨大的任务。所谓节省时间从何体现？这真的可行吗

我还没有看到任何证据表明有人在没有人类监督的情况下构建了这样一个复杂的系统，我不相信我们会在近期看到。

AI 作为“能力倍增器”

这些 AI 工具帮助放大现有的能力，而不是取代它们。有才华的开发者变得更加高效，而技能较弱的开发者则更快地生成问题。

优秀工程师使用 AI 来：

处理基本的实现任务
创建初始项目框架
比较不同的解决方案方法
突破具有挑战性的问题

同时，能力较弱的开发者使用 AI 来掩盖技能差距，实现他们不理解也不知道如何修改的解决方案。当这些实现失败时，他们缺乏独立修复它们的知识。

这扩大了技能差距。顶级工程师利用 AI 处理机械任务，同时专注于更高价值的思考。那些将 AI 用作学习替代品的人会在超出 AI 知识边界时遇到限制。

一个很好的例子是 AI 完美适合的东西是翻译逻辑：

假设我有一个 Python Dataclass 表示一个“内部用户”。我还有一个 Django ORM 表示相同的实体。如果我想将一个转换为另一个，我可以简单地将两个表示形式粘贴到 ChatGPT 中，并让它为我创建一个转换函数。请注意，转换函数还考虑到字段名称不完全匹配：

@dataclass
class InternalUser:
    id: str
    email: str
    hashed_password: str
    full_name: str
    role: UserRole
    status: AccountStatus
    created_at: datetime
    updated_at: datetime
    address: Optional[Address] = None
    preferences: Preferences = field(default_factory=Preferences)
    login_activity: LoginActivity = field(default_factory=LoginActivity)
    tags: List[str] = field(default_factory=list)
    notes: Optional[str] = None

class InternalUser(models.Model):
    id = models.CharField(primary_key=True, max_length=100)  # Use UUIDField if preferred
    email = models.EmailField(unique=True)
    hashedPassword = models.CharField(max_length=256)
    fullName = models.CharField(max_length=255)
    role = models.CharField(max_length=20, choices=UserRole.choices, default=UserRole.USER)
    status = models.CharField(max_length=20, choices=AccountStatus.choices, default=AccountStatus.PENDING)
    createdAt = models.DateTimeField(default=timezone.now)
    updatedAt = models.DateTimeField(auto_now=True)

    address = models.OneToOneField(Address, null=True, blank=True, on_delete=models.SET_NULL)
    preferences = models.OneToOneField(Preferences, on_delete=models.CASCADE)
    loginActivity = models.OneToOneField(LoginActivity, on_delete=models.CASCADE)

    tags = models.JSONField(default=list, blank=True)  # List of strings
    notes = models.TextField(null=True, blank=True)

    def __str__(self):
        return f"{self.fullName} ({self.email})"

from typing import Optional
from myapp.models import InternalUser as ORMInternalUser, Address as ORMAddress, Preferences as ORMPreferences, LoginActivity as ORMLoginActivity
from mydataclasses import InternalUser as DCInternalUser  # assuming your dataclass lives here


def convert_internal_user_to_model(dc_user: DCInternalUser) -> ORMInternalUser:
    # Create or update Address if provided
    orm_address: Optional[ORMAddress] = None
    if dc_user.address:
        orm_address = ORMAddress.objects.create(
            street=dc_user.address.street,
            city=dc_user.address.city,
            state=dc_user.address.state,
            postalCode=dc_user.address.postal_code,
            country=dc_user.address.country
        )

    # Create Preferences
    orm_preferences = ORMPreferences.objects.create(
        newsletterOptIn=dc_user.preferences.newsletter_opt_in,
        darkModeEnabled=dc_user.preferences.dark_mode_enabled,
        language=dc_user.preferences.language
    )

    # Create LoginActivity
    orm_login_activity = ORMLoginActivity.objects.create(
        lastLogin=dc_user.login_activity.last_login,
        loginAttempts=dc_user.login_activity.login_attempts,
        lastIpAddress=dc_user.login_activity.last_ip_address
    )

    # Create InternalUser
    orm_user = ORMInternalUser.objects.create(
        id=dc_user.id,
        email=dc_user.email,
        hashedPassword=dc_user.hashed_password,
        fullName=dc_user.full_name,
        role=dc_user.role.value,
        status=dc_user.status.value,
        createdAt=dc_user.created_at,
        updatedAt=dc_user.updated_at,
        address=orm_address,
        preferences=orm_preferences,
        loginActivity=orm_login_activity,
        tags=dc_user.tags,
        notes=dc_user.notes
    )

    return orm_user

这是一个基本的例子，但如果你将其扩展到整个内部数据模型，那么你将节省数小时的代码。

你甚至可以要求它为你创建测试函数的存根：

import pytest
from datetime import datetime
from yourmodule.dataclasses import InternalUser, Address, Preferences, LoginActivity, UserRole, AccountStatus
from yourmodule.conversion import dataclass_to_django_internal_user


@pytest.mark.django_db
def test_internal_user_conversion_basic_fields():
    # 测试基本字段（电子邮件、姓名等）是否正确复制
    pass


@pytest.mark.django_db
def test_internal_user_conversion_with_address():
    # 测试地址字段是否正确映射到 ORM 模型
    pass


@pytest.mark.django_db
def test_internal_user_conversion_with_preferences():
    # 测试偏好设置，如暗黑模式、新闻通讯订阅和语言
    pass


@pytest.mark.django_db
def test_internal_user_conversion_with_login_activity():
    # 测试登录尝试、最后一次登录和最后一次 IP 地址
    pass


@pytest.mark.django_db
def test_internal_user_conversion_with_tags_and_notes():
    # 测试标签列表和可选备注字段
    pass


@pytest.mark.django_db
def test_internal_user_conversion_with_missing_optional_fields():
    # 确保缺失的可选字段（如地址或最后一次登录）不会破坏转换
    pass


@pytest.mark.django_db
def test_internal_user_conversion_saves_correctly():
    # 保存所有相关模型和主 InternalUser 模型，并检查数据库
    pass

我并非建议你直接照搬这些测试用例而不加以思考，但这是一个很好的开始。

这些“苦差事”从来不是我们高薪聘请顶尖工程师的原因。它们只是完成项目的必要工序。人们不喜欢这些任务。它们无法带给人成就感。

AI 时代的关键技能

随着 AI 处理更多的编码任务，成功的工程师必须在人类判断仍然至关重要的领域发展自己的优势：

系统思维成为主要技能——了解组件交互，识别潜在故障，并为未来的增长设计。这项能力来自经验，而不是提示。

你应该在基础设施和部署流程方面建立专业知识。开发环境中有效但生产环境中失败的软件不会创造任何价值。因此，学习持续集成、监控系统和云平台功能。

你还应该掌握[ API 设计][https://www.freecodecamp.org/chinese/news/rest-api-design-best-practices-build-a-rest-api/]——系统之间的接口。良好设计的 API 使团队独立。糟糕的接口会造成瓶颈，影响每个人。

另一个关键技能是将安全性集成到整个开发过程中。单一疏忽可能会导致泄露，损害客户信任和商业声誉。

确保你发展与技术和非技术受众交流的能力。你将需要清晰地解释复杂的决策，跨越不同的利益相关者群体。

并研究 AI 工具的工作原理，以了解它们的局限性和优势，使你能够更有效地使用它们。

对于高级开发人员，指导变得越来越重要。新工程师需要获得“如何负责任地使用 AI” 这方面的指导——知道何时接受建议、何时质疑它们。

前进之路

软件领域正在经历一次重大的转变。AI 将生成更多代码，改变开发实践。这一转变带来了机遇和挑战。

最有价值的职位将属于擅长机器无法处理的任务的工程师。这些工程师将决定要构建什么、如何设计，以及如何平衡技术约束与商业目标。

“Vibe Coding”是一种有用的技术，适用于特定的需求——例如快速构建标准组件。但是，它并不能提供复杂系统开发的全面策略。

有才华的工程师将通过将常规工作委派给 AI，同时解决更具挑战性的问题来推进。技能较弱的工程师将在基本知识缺口变得明显时遇到困难。

关于如何有效运用 AI 技术，在采纳网络建议时务必保持审慎判断。这仍然是一个相对较新的领域，并且不断变化。

人们在线提供“免费提示”来生成代码。这些提示可能很好，也可能有问题。提示可能在他们使用时很好，但 AI 模型可能已经改变，也可能会产生不同的结果。要谨慎并使用你的最佳判断。

未来属于那些将 AI 视为协作工具而不是替代品的人。软件开发仍然是人类驱动的，现在得到了越来越强大的支持。

在他的空闲时间里，Ben 写他的技术博客 Just Another Tech Lead 和运营一个关于 SEO 的网站 SmoothSEO。

如何在 2025 年成为全栈开发工程师并获得工作

YiWei — Fri, 02 May 2025 12:52:25 +0000

原文： How to Become a Full-Stack Developer in 2025 (and Get a Job) – A Handbook for Beginners

每当我发布新文章时，我都会收到无数邮件和社交媒体私信，问我：「怎么才能像你一样成为全栈开发工程师？需要掌握多少 DSA？要多久能学成？」

我总是回答：「下次一定！」 —— 现在它来了！本指南将向你详解我成为全栈开发工程师的全部历程，并教你如何用同样的方法把任何想法变成实际产品。

我已将这套方法推荐给许多开发者，他们都对效果惊叹不已。现在，轮到你了。🚀

为什么选择全栈开发？

我选择全栈开发，是因为我的职业旅程始于前端开发，而随着时间的推移，我发现自己自然而然地转向了后端开发。

最初起步时，前端开发对我而言就像一场攻坚战。当时我完全是个新手，每个概念都显得艰深晦涩。但凭借耐心和持续的练习，我终于达到了能将任何设计稿转化为功能代码的水平。就在那时，React 正风靡业界。当我掌握了它的核心概念后，它便成为了我开发工具库中既直观又强大的利器。

随着我在前端开发方面越来越有信心，我开始探索更多领域。全栈开发最初让我感到不知所措，所以我决定循序渐进。我首先专注于精通前端，深入研究构建直观和响应式界面的细微之处。随着时间的推移，在我甚至考虑后端开发之前，我已经完成了多个项目——六个练习项目和二十多个客户项目。

转折点出现在我开始对 API 和数据库着迷的时候。我想了解数据如何在前端和后端之间流动，单一逻辑如何控制服务器行为，以及我添加的每个新功能如何塑造后端的响应。这既充满挑战又极具回报。我在调试、优化和让一切无缝协作中找到了乐趣。

在我找工作的过程中，我意识到：公司不仅仅在寻找前端开发者——他们同样重视能够处理后端开发的开发者。掌握后端技能不仅让我在求职中更具竞争力，也帮助我提升了前端能力。

那时我决定，我不会将自己局限于开发的某一方面。为了构建完整、可用于生产的应用程序，我致力于同时精通前端和后端，以确保我能够创造无缝、功能完善的数字体验。

现在，让我们深入了解技术细节，这样你也能实现这一目标。

什么是全栈开发（包括 DevOps）？

当我刚踏入编程世界时，我对网站的运作方式感到着迷。点击按钮、填写表单或观看网页上的动画展开，这一切都感觉近乎神奇。

但那时，我并不知道这些互动背后的复杂性。我从前端开发开始，学习如何设计和构建应用程序的可见部分——用户界面（UI）和用户体验（UX）。

前端：将想法变为现实

前端开发关乎用户看到和互动的一切。它涉及编写代码来设计布局、动画和交互元素，以创造无缝的用户体验。我从 HTML、CSS 和 JavaScript 开始，它们是 Web 的基础技术。但随着我构建了更多项目，我意识到现代前端开发已经远远超出了基本的网页。

就在那时，我发现了 React.js —— 一个 JavaScript 库，它使得构建动态、快速和可扩展的 Web 应用程序变得更加容易。与传统方法不同，React 使用基于组件的方法，UI 的每个部分（按钮、表单、导航栏）都是可重用且高效管理的。

在我学习 React 之后，我开始探索 Next.js，这是一个基于 React 构建的强大框架，它通过服务器端渲染（SSR）和静态站点生成（SSG）等功能增强了性能，使应用程序加载更快，并有助于它们变得更加 SEO 友好。

为了给我的应用程序设计样式，我超越了传统的 CSS，开始使用 Tailwind CSS，这是一个实用程序优先的框架，它允许我在不编写重复样式的情况下创建美观的设计。Tailwind 使我的工作流程更加高效，帮助我专注于设计而不会迷失在过多的 CSS 文件中。

但仅有前端是不够的。我想了解当我点击按钮或提交表单时，幕后发生了什么。这种好奇心引导我走向了后端开发。

后端：驱动幕后的逻辑

后端开发是任何应用程序的支柱。它处理数据存储、身份验证、业务逻辑以及与数据库和 API 的通信。我的后端开发之旅始于 Node.js，这是一个允许 JavaScript 在服务器上运行的运行时环境，使得使用单一编程语言构建功能齐全的应用程序成为可能。

随着我深入探索，我发现了 NestJS，这是一个渐进式的 Node.js 框架，为后端开发带来了结构和可扩展性。与传统的 Node.js 设置不同，NestJS 遵循一种受 Angular 启发的、有主见的架构，使后端代码更加模块化、可重用和可维护。

我还使用了 tRPC，这是一个现代框架，通过提供一种类型安全的方式让前端和后端无缝通信，从而无需使用 REST API。这减少了开发时间，提高了安全性，并确保了数据传输中的错误更少。

对于数据存储，我尝试了不同的数据库：

MongoDB – 一个 NoSQL 数据库，将数据存储在类似 JSON 的文档中，使其在处理非结构化或半结构化数据时非常灵活。
PostgreSQL – 一种关系数据库系统，以其健壮性、性能和处理复杂查询的能力而闻名。
Appwrite – 一种基于云的解决方案，提供实时数据同步、身份验证和无服务器后端服务，使其成为快速迭代应用程序的理想选择。我在我的移动应用项目中使用它来测试后端即服务 (BaaS)，其结果令我印象深刻。

与数据库打交道帮助我理解了高效数据建模的重要性以及后端服务如何与前端交互。但我的学习并未止步于此——我想超越开发，深入了解部署和云基础设施的世界。

DevOps 与云：让应用程序可扩展且可靠

构建应用程序是一回事，但确保它平稳运行、在高流量下扩展并保持安全是另一项挑战。这就是 DevOps 和云技术发挥作用的地方。

我学习了 Docker，这是一种容器化工具，允许应用程序在隔离的环境中运行，确保无论部署在何处，它们都能以相同的方式工作。接着是 Kubernetes，一个编排系统，可以自动化应用程序的部署和扩展，使基础设施管理变得无缝。

为了部署和托管我的应用程序，我探索了 AWS（Amazon Web Services），它提供云计算解决方案，用于托管数据库、服务器和整个应用程序，具有高可用性和安全性。理解云平台让我有信心处理生产就绪的部署，确保应用程序高效运行且无停机时间。

全栈开发人员的职责

回首过去，成为全栈开发人员的旅程就是掌握整个开发生命周期——从设计用户界面到管理数据库、优化性能和部署应用程序。

作为一名全栈开发人员，我的职责包括：

构建直观且响应迅速的用户界面，同时确保无缝的用户体验。
编写高效的后端逻辑来处理身份验证、数据处理和 API 通信。
优化应用程序的性能、安全性和可扩展性。
与团队协作以集成功能、修复错误和增强可用性。
紧跟最新技术，不断改进并在行业中保持领先。

AI 集成：推动开发的边界

随着 AI 开始改变技术格局，我对将其集成到应用程序中产生了兴趣。我探索了 CopilotKit 和 LangChain，这是一个将 AI 模型与现实世界应用程序连接起来的框架，可实现聊天机器人、自动化内容生成和智能决策等功能。AI 驱动的应用程序让我着迷，因为它们开启了无限的可能性——从预测分析到智能自动化。

更大的蓝图：超越纯粹的编码

成为一名全栈开发人员不仅仅是学习不同的技术。它关乎解决问题、系统设计和编码最佳实践。我必须理解所有这些部分如何协同工作——前端如何与后端通信，数据库如何存储和检索数据，服务器如何处理请求，以及如何优化一切以获得最佳性能。

我还认识到软件开发不是一个人的旅程。与设计师、后端工程师、DevOps 团队和客户的协作至关重要。编写干净、可维护的代码并遵循代码审查、文档和测试等最佳实践已成为我的第二天性。

全栈开发的魅力在于它不断发展。新的框架、工具和最佳实践层出不穷，适应变化正是这个领域的激动人心之处。最初只是对网站如何运作的好奇心，现在已经转变为构建复杂、可扩展和智能应用程序的热情。

我承担的每个项目都带来了新的挑战和学习机会，这正是我保持动力的原因。

全栈开发既关乎编码，也关乎解决现实世界的问题，创造有影响力的数字体验，并不断突破可能性的界限。

面向全栈开发人员的 DevOps

当我刚开始做开发人员时，我的重点完全是编写代码。我构建 Web 应用程序，确保流畅的用户体验，并与数据库打交道。但随着我不断进步，我越来越意识到开发仅仅是战斗的一半。真正的挑战在于当我必须部署我的应用程序、管理服务器并确保一切在生产环境中顺利运行时。

这就是 DevOps 为我改变一切的地方。

理解 DevOps

DevOps（Development + Operations 的组合）是一种思维模式，它弥合了开发人员和 IT 运维之间的鸿沟。它确保应用程序能够从开发人员的本地环境顺利迁移到实时服务器，并安全高效地运行。

最初，我在部署方面遇到了困难。编写代码是一回事，但设置服务器、配置环境和处理云资源则让人不知所措。我最初的部署经历令人沮丧——由于系统差异导致的错误、应用程序性能低下以及意外崩溃是家常便饭。

就在那时，我意识到我需要掌握三个基本的 DevOps 概念：

Linux – 服务器的支柱
云 – 可扩展性的关键
Docker – 部署的游戏规则改变者

Linux：服务器的核心

互联网的大部分运行在 Linux 之上——它是服务器、云平台和基础设施管理的支柱。但当我刚开始时，我几乎没有接触过 Linux 终端。一切看起来都很神秘——命令行令人生畏，我常常想知道为什么开发人员更喜欢它而不是简单的图形界面。

为什么 Linux 是 DevOps 的关键

与 Windows 或 macOS 相比，Linux 具有稳定、安全和高效的优势，是云部署的首选。学习 Linux 让我能够完全掌控服务器环境，使我可以：

使用 ls、cd、rm 等命令高效管理文件和目录；
通过 ps、kill、top 监控资源使用并控制系统进程；
借助 Shell 脚本自动化任务，减少手动操作；
通过 SSH、防火墙和用户权限保护服务器安全。

当我熟练掌握 Linux 后，我可以自信地搭建并管理自己的服务器，消除了部署障碍。但仅管理一台服务器还不够——我需要一个可扩展、灵活的环境来应对真实世界的应用场景。这时，云计算便派上用场。

云：突破单一服务器的限制

在了解云计算之前，我习惯将项目部署在共享主机上。虽然这对小型应用尚可，但它们缺乏可扩展性、可控性和性能。随着应用流量增长，我需要一种能够处理高并发、提供高可用性并支持按需计算能力的方案。

云计算为何改变一切

AWS（Amazon Web Services）、GCP（Google Cloud Platform）和 Azure 等云平台彻底改变了我的部署方式。与传统托管相比，云计算提供：

可扩展性 —— 根据需求即时增加或减少资源；
成本效益 —— 按使用量付费，避免不必要的开支；
全球可用性 —— 可在多个数据中心部署应用，提升性能。

我无需再担心物理服务器，而是可以启动虚拟机（AWS EC2、GCP Compute Engine）来托管应用；使用托管数据库（AWS RDS、Firebase、Azure 上的 PostgreSQL）而无需自行配置；并利用无服务器计算（AWS Lambda、Google Cloud Functions）处理轻量级、事件驱动的任务。

掌握云技术后，我不再畏惧部署。我能够自信地上线应用，使其轻松扩展，确保高可用性和可靠性。但仍有一个挑战：在不同环境中保持一致且快速的部署流程。

Docker：改变部署规则的利器

在学习 Docker 之前，我常遇到一个问题：代码在本地运行良好，但部署到服务器却失败。这是由于开发与生产环境在依赖、配置和操作系统上的差异造成的。

Docker 如何解决部署问题

Docker 通过引入容器化技术解决了这一痛点。它允许我将应用及其所有依赖打包到一个轻量级、可移植的容器中，同一容器可在任何地方运行——无论是笔记本电脑、云服务器还是 Kubernetes 集群。

使用 Docker，我可以：

将应用打包为 Docker 镜像，确保在各环境中表现一致；
借助 Docker Compose 无缝运行多服务应用（例如将 Node.js 后端、数据库和 Redis 缓存分别置于独立容器中）；
减少部署失败，因为所有依赖均已在容器内预配置。

当我熟练掌握 Docker 后，“只能在我电脑上运行”的问题不再出现。它简化了我的工作流程，让部署更快速、更安全、更高效。

DevOps 对我全栈之路的影响

学习 DevOps 让我从一名纯粹的开发者转变为部署专家。我不仅能编写代码，还能自如地使用 Linux 服务器部署应用，借助云计算高效扩展基础设施，并通过 Docker 与容器化实现无缝部署。

这不仅让我成为更优秀的全栈开发人员，也为我开启了 DevOps 岗位的大门，使我能够在开发与基础设施管理之间自由切换。

学习永无止境

DevOps 的世界广阔无垠，总有新东西值得学习：

Kubernetes — 用于容器编排
CI/CD 流水线 — 实现自动化部署
基础设施即代码（Terraform、Ansible） — 轻松管理云资源

但我最喜欢 DevOps 的一点在于它的影响力——它能让创意毫无阻碍地化为可扩展的线上应用。无论是个人项目还是高并发的生产系统，DevOps 都能确保我的应用不仅构建得好，而且部署得稳。

对于想要成长的开发者来说，DevOps 不是可选项，而是必修课。它连接了开发与实际运行，确保我们写下的软件不仅能在本机运行，也能在真实环境中稳定运行和成长。

如何学习全栈开发

当我刚开始编程时，面对林林总总的技术栈我感到不知所措。HTML、CSS、JavaScript、后端框架、数据库、DevOps——到底该从哪里下手？这一度像座难以逾越的高山。但当我把目标拆分成更小的步骤并逐一攻克时，一切逐渐变得清晰起来。

我附上了一张图片，展示了我如何学习并尝试各种技术。图片中的工具主要面向零基础的初学者，因此省略了很多细节。举例来说，如果我提到 React，就包含了诸如 props、状态管理、hooks 等核心概念的学习。

踏上成为全栈开发者的旅程既令人兴奋也可能令人不知所措。要学习的技术众多，因此拥有一条清晰的路线图至关重要。本文接下来的部分将拆解这条路线图中的每个组成部分，说明其重要性及核心概念。

前端开发

Web 浏览器基础

了解 Web 浏览器的工作原理是 Web 开发的基础。Chrome、Firefox、Safari 等浏览器通过处理 HTML、CSS 和 JavaScript 来渲染网页。了解它们的工作机制，有助于我们优化代码，以获得更好的性能、兼容性和用户体验。

需要掌握的要点：

浏览器如何解析并渲染 HTML、CSS 与 JavaScript
浏览器兼容性与开发者工具
网站性能优化技术

HTML – 构建网页结构

HTML（超文本标记语言）是每个网站的基石。它通过标题、段落、列表和链接等元素定义网页结构。编写语义化 HTML 能确保可访问性并提升 SEO。

重要概念：

HTML 元素与属性
表单及输入验证
无障碍最佳实践（ARIA 角色、语义标签）

CSS – 网页样式设计

CSS（层叠样式表）控制网页的外观，包括布局、颜色、字体和响应式设计。采用现代 CSS 技术可提升设计一致性并减少开发时间。

需要掌握的要点：

媒体查询 (Media Queries)： 根据屏幕尺寸调整布局
Flexbox、Grid 与盒模型 (Box Model)： 高效构建页面布局
CSS 框架（Tailwind CSS）： 通过原子化样式加速开发

JavaScript – 赋予交互性

JavaScript 是让网页动态化的脚本语言，可实现动画、表单验证和实时更新等交互元素。

核心概念：

DOM（文档对象模型）操作
事件处理（点击、键盘输入、悬停效果）
异步编程（变量、函数、Promises、async/await、fetch 请求）

我在另一篇指南中分享了这些重点，并通过构建一个中等规模的前端项目进行演示：如何构建 CSS 组件库并提升你的 Web 开发技能

你也可以查看 freeCodeCamp 全新测试版的「认证全栈开发者」课程，覆盖从 HTML、CSS、JavaScript 到数据库、Node.js、Python 等完整内容。

React – 构建 UI 组件

React 是一个用于创建交互、高效用户界面的 JavaScript 库，采用组件化架构，代码可复用且易维护。它通过 Hooks 与 Context API 提供强大的状态管理，并借助虚拟 DOM 提升渲染性能。

这里有一门热门课程可帮助你掌握 React 基础，另有这本手册用于巩固关键概念。

Tailwind CSS – 响应式 UI 开发

Tailwind CSS 是一款实用优先的 CSS 框架，提供丰富的预制类，快速构建界面而无需从零编写样式。

学习 Tailwind 时，请先巩固 CSS3 基础，再了解 Tailwind 配置文件以便自定义。Tailwind 的优势包括：大量工具类、内置断点支持响应式设计，以及高度可定制性。

在这门课程中，你将通过构建响应式产品卡项目学习 Tailwind 的基础。

性能测试 – 优化 Web 应用

确保流畅性能对用户体验至关重要。性能测试工具可帮助识别瓶颈并提升页面速度。

常用工具：

Lighthouse： 分析性能、可访问性和 SEO
WebPageTest： 测试加载时间和页面渲染速度
Chrome DevTools： 调试加载缓慢的元素和脚本

Next.js – 先进的 React 框架

Next.js 是一个功能强大的 React 框架，核心特性包括：

服务器端渲染（SSR）提升 SEO 与性能
静态站点生成（SSG）在构建时输出静态页面
基于文件的路由系统，免去复杂配置
内置 API Routes，提供后端能力
自动代码拆分与图像优化（懒加载、响应式图片）

Next.js 基于最新 React 特性且具备良好可扩展性，是众多领先公司构建高性能动态 Web 应用的首选。

以下课程可帮助你深入学习并实践 Next.js：

项目实战 – 在真实应用中运用知识

构建项目是提升前端开发技能的最佳途径。参与实际应用开发有助于整合不同技术，提高解决问题的能力。

项目点子：

天气应用程序： 使用 API 获取并显示实时天气数据。
聊天应用程序： 使用 WebSockets 实现实时消息传递。
任务管理器： 使用拖放功能动态管理任务。

后端开发

高级 JavaScript – 后端开发的核心概念

在深入研究后端技术之前，必须扎实掌握 JavaScript。有几个重要概念是精通这门语言的基础。

闭包是 JavaScript 中的一个关键概念。闭包允许函数即使在其执行完毕后，仍能记住并访问其外部作用域中的变量。这一能力对于维护数据隐私和管理应用程序内的状态特别有用。

Promises 是另一个基本概念。Promise 是一个 JavaScript 对象，代表一个异步操作的最终完成或失败。Promises 在管理诸如从数据库获取数据等任务时发挥着重要作用，可以避免阻塞其他任务的执行，确保应用程序更流畅、更高效地运行。

Async/Await 是一种更现代、更易读的处理 Promises 的方式。它允许开发者以类似于传统同步代码的方式编写异步代码，使其更易于理解和维护。

需要重点关注的关键主题包括理解 JavaScript 事件循环和执行上下文，这对于 JavaScript 如何管理和执行代码至关重要。此外，学习有效处理异步操作以及在异步函数中使用 try/catch 实现错误处理，是任何 JavaScript 开发者都应具备的关键技能。

复习 – 紧跟后端概念

技术发展迅速，定期复习所学知识对于巩固关键概念至关重要。需要重点回顾的一个领域是 API（应用程序编程接口），它促进了应用程序不同部分之间的通信。

理解 REST API 至关重要。REST（Representational State Transfer）API 遵循一套标准规则，通过 HTTP 方法实现前端和后端之间的通信。

GET 方法用于从服务器检索数据，例如加载用户个人资料。
POST 方法用于向服务器发送新数据，例如创建新账户。
PUT 方法用于更新服务器上的现有数据，例如编辑个人资料。
DELETE 方法用于从服务器删除数据，例如删除用户或帖子。

需要学习的关键主题包括设计 RESTful API、处理 API 请求和响应，以及理解请求头、请求体和状态码。这些技能对于应用程序不同组件之间的有效通信至关重要。

Node.js – 在服务器上运行 JavaScript

JavaScript 通常在 Web 浏览器中使用，但 Node.js 通过允许其在服务器上运行，扩展了其能力，从而能够开发后端应用程序。

Node.js 之所以成为一个强大的选择，有几个原因。它基于 V8 JavaScript 引擎构建，确保了快速高效的性能。此外，Node.js 采用了非阻塞 I/O 模型，使其能够同时处理多个请求而不会拖慢服务器。

这使得它特别适合需要实时交互的应用程序。此外，Node.js 轻量且高度可扩展，进一步增强了其在此类应用中的适用性。

需要学习的关键主题包括理解 Node.js 的事件驱动架构，这是其运行的基础。此外，熟练掌握 npm（Node Package Manager）对于安装和管理库至关重要。掌握如何使用 fs（文件系统）和 http 等内置模块，对于有效利用 Node.js 的功能也至关重要。这里有一个关于 Node.js + Express 的课程，可以帮助你入门。

Express.js – 简化后端开发

Node.js 提供了核心功能，但手动设置 Web 服务器可能很复杂。Express.js 是一个简化此过程的 Web 框架。

Express.js 提供了几个关键特性，使 Web 开发更加高效。其中一个特性是路由，它定义了不同的 API 端点如何处理请求。例如，向 /users 发送 GET 请求可能会检索用户列表，而向 /login 发送 POST 请求则可以处理用户登录。这种路由机制有助于组织和管理应用程序中的各种端点。

Express.js 的另一个重要特性是中间件。中间件函数在请求到达后端逻辑之前对其进行处理。这可以包括诸如身份验证之类的任务，即中间件在允许访问某些路由之前检查用户是否已登录。日志记录是中间件的另一个常见用途，它记录每个请求的详细信息以用于监控和调试。

Express.js 还提供了强大的错误处理能力。它能捕获和管理错误，确保应用程序即使在出现问题时也能平稳运行。这对于维护良好的用户体验和在开发过程中进行调试至关重要。

Express.js 通常用于 Web 开发中的各种任务。其主要用途之一是用户身份验证，这涉及处理登录和注册过程。这确保了只有授权用户才能访问应用程序的某些部分。

另一个常见用途是从数据库存储和检索数据。Express.js 可以与数据库交互以执行 CRUD 操作（创建、读取、更新、删除），从而更容易地管理应用程序内的数据。

此外，Express.js 还常用于处理文件上传和用户生成的内容。这可以包括处理用户上传到应用程序的图像、文档或其他文件。通过简化这些任务，Express.js 帮助开发者构建健壮且高效的 Web 应用程序。

后端开发中的安全性

为保护用户数据，可采用多种安全机制。其中一种有效方法是使用 JWT（JSON Web 令牌），这是一种基于令牌的身份验证系统。JWT 允许在不要求用户重复登录的情况下安全验证其身份，特别适用于维持用户会话状态，并确保只有经过认证的用户才能访问应用的特定部分。

另一项重要安全机制是 OAuth。OAuth 支持用户通过谷歌或 GitHub 等第三方服务登录，无需为应用单独创建账户。这种方式不仅简化了用户登录流程，还能借助可信服务商的认证系统提升安全性。

加密与哈希是保护敏感数据的关键手段。在将密码等数据存入数据库前，必须进行加密或哈希处理。加密会将数据转换为不可读的格式，只有通过特定密钥才能解密；而哈希则会将数据转化为不可逆的定长字符序列。这些技术能确保即使数据库遭到入侵，敏感数据仍处于安全状态。

学习实施这些安全机制时，需重点关注以下核心主题：

Express.js 的 API 开发与管理：Express.js 是构建 Node.js 网络应用及API的强大框架，掌握其 API 开发与管理能力是构建健壮、可扩展应用的基础。
认证与授权实现：认证用于验证用户身份，授权则决定用户可执行的操作。通过实施这些机制，可控制应用不同功能的访问权限。此处提供认证与授权的详细对比供深入探讨。
中间件在日志记录与请求验证中的应用：Express.js 的中间件能在请求到达主逻辑前进行处理。日志中间件可记录请求详情以辅助监控调试，请求验证中间件则能确保传入数据符合必填字段或格式要求，从而维护应用的完整性与安全性。

数据库 – 存储和管理数据

数据库对于存储和组织应用程序数据至关重要。数据库主要有两种类型：NoSQL 和 SQL。

MongoDB 是一种流行的 NoSQL 数据库，它以灵活的、类似 JSON 的文档形式存储数据。这种结构使其非常适合数据动态或非结构化的应用程序，因为其数据格式可能会随时间变化。MongoDB 以其易于扩展、高效处理大量数据的能力而闻名。这使其成为需要管理大量数据或要求高性能的应用程序的理想选择。

另一方面，像 MySQL 和 PostgreSQL 这样的 SQL 数据库使用具有预定义模式的结构化表。这些数据库最适合需要处理复杂数据关系的应用程序，例如金融交易或电子商务平台。SQL 数据库的结构化特性确保了数据的完整性并支持复杂的查询。

在使用数据库时，重要的是要了解如何根据项目的具体需求在 SQL 和 NoSQL 之间进行选择。每种类型的数据库都有其优势，并且更适合特定类型的应用程序。

例如，如果您的应用程序处理大量非结构化数据或需要高可扩展性，MongoDB 可能是更好的选择。但如果您的应用程序需要管理复杂的数据关系并确保数据完整性，那么像 MySQL 或 PostgreSQL 这样的 SQL 数据库会更合适。

另一个需要学习的关键主题是编写数据库查询以插入、更新和检索数据。无论您使用的是像 MongoDB 这样的 NoSQL 数据库还是 SQL 数据库，您都需要知道如何与数据库交互以执行这些操作。这涉及到理解数据库使用的查询语言以及如何构造查询以获取所需的数据。

了解如何将 Node.js 应用程序连接到数据库也很重要。Node.js 是用于构建服务器端应用程序的流行运行时环境，能够将其连接到数据库对于管理应用程序数据至关重要。这涉及到设置必要的数据库驱动程序并配置您的应用程序以与数据库通信。您将在这篇深入的教程中学习相关内容。

通过掌握这些主题，您将能够构建健壮且高效的应用程序，以满足广泛的数据管理需求。这篇文章实践了我们迄今为止讨论的许多与后端安全相关的概念，请务必阅读。

CORS – 管理跨域请求

CORS（跨域资源共享）是 Web 浏览器实现的一项安全功能，用于控制网页上的资源如何能从发起该资源的域之外的另一个域请求。这种机制对于防止未经授权访问敏感数据至关重要，同时允许合法的跨域请求。

浏览器如何强制执行 CORS 策略

浏览器通过一组 HTTP 标头来强制执行 CORS 策略，这些标头规定了是否允许来自一个源（域）的请求访问另一个源的资源。

当网页发出跨域请求时，浏览器首先使用 HTTP OPTIONS 方法发送一个预检请求（preflight request），以检查实际请求是否被允许。服务器响应相应的 CORS 标头，例如 Access-Control-Allow-Origin，它指定了允许的源。如果服务器允许该请求，浏览器则继续发送实际请求——否则，它将阻止该请求。

在 Express.js 应用程序中配置 CORS

要在 Express.js 应用程序中配置 CORS，您可以使用 cors 中间件。该中间件允许您指定允许访问您的 API 的源、允许的 HTTP 方法以及其他与 CORS 相关的设置。以下是在 Express.js 应用程序中设置 CORS 的基本示例：

const express = require('express');
const cors = require('cors');
const app = express();

// Use the cors middleware with default settings
app.use(cors());

// Or configure it with specific options
app.use(cors({
  origin: 'http://example.com',
  methods: 'GET,POST',
  allowedHeaders: 'Content-Type,Authorization'
}));

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

在此示例中，cors 中间件用于为 Express.js 应用程序中的所有路由启用 CORS。你可以自定义 origin、methods 和 allowedHeaders 以满足应用程序的要求。

正确 CORS 配置的重要性

正确的 CORS 配置对于维护 Web 应用程序的安全性至关重要。允许所有源或使用过于宽松的 CORS 设置可能会使你的应用程序暴露于安全漏洞，例如跨站请求伪造（CSRF）攻击。重要的是仅指定受信任的源，并将允许的方法和标头限制为应用程序正常运行所必需的范围。

.env 文件 – 管理敏感数据

数据库凭据和 API 密钥等敏感信息不应硬编码在代码库中。相反，它们存储在 .env（环境）文件中。

.env 文件示例：

DATABASE_URL=mongodb://username:password@server SECRET_KEY=mysecurekey

这确保了部署应用程序时的安全性和灵活性。

需要学习的关键主题：

在 Node.js 应用程序中使用环境变量
在生产环境中确保敏感数据的安全

HTTP 状态码 – 理解服务器响应

每个 API 请求都会返回一个 HTTP 状态码，指示请求是成功还是遇到问题。这些状态码对于理解 API 调用的结果以及调试可能出现的任何问题至关重要。

常见的 HTTP 状态码

状态码 200 OK 表示请求成功。它是成功 HTTP 请求的标准响应，表示请求的资源已找到并正确处理。例如，从数据库获取用户列表时，如果数据检索没有任何问题，服务器将响应 200 OK。

状态码 400 Bad Request 表示客户端发送了无效请求。当服务器由于语法不正确、请求结构格式错误或欺骗性路由而无法理解请求时，会发生这种情况。一个例子是向期望 XML 的 API 发送 JSON 有效负载，导致服务器以 400 响应拒绝该请求。

状态码 401 Unauthorized 表示需要身份验证。当请求缺少有效的身份验证凭据或提供的凭据不正确时，会返回此状态码。一个常见的例子是在未登录或提供无效 API 密钥的情况下尝试访问受保护的资源。

状态码 403 Forbidden 表示客户端无权访问请求的资源。虽然服务器理解该请求，但由于权限不足或访问限制而拒绝授权。例如，尝试在没有必要权限的情况下删除资源将导致 403 Forbidden 响应。

状态码 404 Not Found 表示请求的资源不存在。这可能是因为资源已被移动、删除或 URL 不正确。一个典型的例子是尝试访问数据库中不存在的用户个人资料。

状态码 500 Internal Server Error 表示后端发生错误。当服务器遇到阻止其处理请求的意外情况时，这是一个通用的错误响应。这可能是由于数据库连接失败或服务器端代码中的错误。

需要学习的关键主题

在 API 响应中处理不同的 HTTP 状态码对于构建健壮且用户友好的 API 至关重要。每个状态码都提供了对请求结果的洞察，正确的处理可确保更好的可靠性和可用性。

在 API 中，检查响应状态并相应地采取行动至关重要。例如，收到 401 状态码应提示用户重新登录，而 500 状态码可能需要显示用户友好的错误消息并记录错误以进行调试。

在 Express.js 应用程序中实现错误处理对于维护稳定性和安全性至关重要。正确的错误处理有助于快速识别和解决问题，从而带来更好的用户体验。

在 Express.js 中，你可以使用中间件来全局处理错误。自定义错误处理中间件可以捕获错误并将适当的响应发送给客户端。此外，内置的错误处理函数可以管理特定错误，例如验证失败或数据库错误。

测试 – 确保代码可靠性

测试有助于在错误影响用户之前捕获它们。测试有不同类型。单元测试检查单个函数和组件，以确保它们按预期工作。集成测试验证应用程序的不同部分是否能正确协同工作。流行的测试工具包括 Jest 和 Mocha，它们可以自动化测试并提高代码质量。

需要学习的关键主题包括为后端应用程序编写自动化测试，以及使用 Jest 或 Mocha 设置测试环境。

构建实际项目

巩固后端知识的最佳方法是参与实际项目。一些想法包括：

笔记应用程序： 允许用户通过身份验证创建、编辑和删除笔记。
电子商务网站： 管理产品列表、购物车和结账流程。
社交媒体平台： 实现用户个人资料、帖子、评论和实时消息等功能。

构建这些项目将有助于整合你所学的所有知识，并为实际应用做好准备。

需要学习的关键主题：

结合前端和后端构建全栈应用程序
将后端应用程序部署到云平台
使用系统设计来扩展应用程序
实施安全最佳实践

附加说明

DSA（数据结构与算法）

虽然可选，但扎实的 DSA 知识可以显著提高你解决问题的能力，并使你成为一名更称职的开发人员。

数组、链表、栈、队列、树和图等数据结构是高效组织和管理数据的基础。另一方面，算法为解决复杂问题提供了系统化的方法。

掌握 DSA 使你能够编写优化的代码，增强应用程序性能，并应对具有挑战性的编程任务。它还可以帮助你准备技术面试，因为面试中通常会问到 DSA 问题。

通过在 LeetCode、HackerRank 和 GeeksforGeeks 等平台上练习题目，你可以增强分析能力并精通各种算法技巧。

系统设计

系统设计的基础知识是必备的。它有助于你理解如何构建可扩展且高效的系统架构，这对任何全栈开发人员来说都是一项关键技能。系统设计涉及设计软件系统的架构，考虑可扩展性、可靠性、可维护性和性能等因素。

它包括理解系统的不同组件如何交互，数据如何在它们之间流动，以及如何处理故障和瓶颈。熟悉设计模式、数据库设计、缓存策略和负载均衡技术至关重要。

通过学习系统设计原则并结合实际案例进行练习，你可以学会构建能够处理大规模流量和数据处理需求的健壮且高效的系统。

实际项目

最后，确保构建至少五个解决实际问题的项目。整合全栈技能，包括 DevOps，将使你获得全面的理解并为工作做好准备。参与实际项目使你能够在实际场景中应用知识，获得实践经验，并建立强大的作品集。

选择涵盖不同领域的项目，例如电子商务平台、社交媒体应用程序、内容管理系统或数据分析仪表板。结合使用 React、Node.js、Django 和云服务等技术来展示你的多面性。

你还应该详细记录你的项目，包括你遇到的挑战以及如何克服它们。这不仅展示了你的技术技能，还展示了你的解决问题的能力和对细节的关注。

通过遵循这个工具包并不断练习，你将顺利成为一名熟练的全栈开发人员。编码愉快！

如何在你的开发中使用 AI

AI 正在彻底改变全栈开发人员构建、测试和维护应用程序的方式。通过集成 AI 驱动的工具，你可以加速工作流程，减少手动工作量，并专注于解决更复杂的问题。

通过以负责任且有效的方式拥抱 AI，你将在效率、生产力和创新方面获得显著优势。

以下是 AI 如何在你的开发过程中发挥关键作用：

1. 自动化重复性编码任务

编写样板代码、设置配置或重构重复逻辑可能会占用宝贵的时间。像 GitHub Copilot、ChatGPT 和 Tabnine 这样的 AI 工具可以：

自动生成函数模板和常用模式。
根据上下文建议代码补全。
将伪代码或自然语言描述转换为可工作的代码。
通过分析错误并提出修复建议来加速调试。

2. 增强项目开发

AI 可以在整个开发生命周期中提供帮助，从构思到部署。

AI 工具可以通过分析性能瓶颈并提出改进建议来帮助你优化代码。它还可以根据代码结构自动生成有意义的文档。

你可以使用 AI 根据你的用例创建优化的数据库模式，像 Galileo AI 这样的工具可以帮助你从草图或文本描述生成 UI 组件。

3. AI 驱动的测试工具

手动测试应用程序可能很耗时，但 AI 可以使这个过程更智能、更高效。

首先，AI 可以自动创建具有高覆盖率的单元测试、集成测试和功能测试。机器学习模型还可以在潜在的漏洞或错误引发问题之前识别它们。并且，当 UI 发生变化时，AI 可以更新测试用例，减少自动化测试中的维护工作。

4. 集成 AI 模型以实现智能功能

你可以将 AI 直接嵌入到你的应用程序中，以创建更智能的用户体验。有许多潜在的用例，包括：

聊天机器人和虚拟助手 – AI 驱动的聊天机器人（如 ChatGPT API）可以处理客户支持和用户查询。
推荐系统 – 机器学习模型可以根据用户行为推荐相关的产品、电影或内容。
预测分析 – AI 可以分析历史数据来预测趋势、优化库存或改进决策。

这里有一个课程，将教你在开发过程中使用 ChatGPT 等 AI 工具的基础知识。

开发中不应使用 AI 的情况

虽然 AI 很强大，但它并不总是最佳解决方案。在各种情况下，避免使用 AI 是有意义的。

首先，并非每个项目都需要 AI，它可能会引入不必要的复杂性。简单的 CRUD 应用程序（创建、读取、更新、删除）可以使用标准的编程技术高效地构建。过度使用 AI 进行工程设计可能会增加不必要的依赖并减慢开发速度。

此外，AI 生成的代码会增加维护开销。它有时可能难以预测或难以调试。如果 AI 编写的代码过于复杂，维护或扩展项目可能会成为一场噩梦。

另一个需要考虑的重要问题是你的应用程序是否处理敏感的用户数据（如医疗保健、银行或法律记录）。在这些情况下，AI 生成的解决方案可能会引入安全风险。务必确保 AI 工具符合 GDPR 或 HIPAA 等数据保护法规。

最后，虽然 AI 是一个有用的助手，但它不能替代你自己深入的、基于经验的编码知识。过度依赖 AI 而不理解代码背后的逻辑可能会导致糟糕的决策和难以修复的错误。

使用 AI 构建全栈项目

这些项目想法旨在激发灵感，而不是规定你的学习路径。探索任何让你兴奋的概念——只需确保你的项目符合以下原则：

首先，确保你的项目解决实际问题。专注于实际应用，而不仅仅是理论练习。你的项目应旨在以有意义的方式提高效率、可访问性或自动化程度。

你的项目还应尽可能独特（而不仅仅是克隆他人的项目）。避免直接复制 Netflix、Twitter 或 Spotify 等现有平台。相反，添加创新的元素，例如 AI 驱动的推荐、智能自动化或预测分析。

接下来，确保你遵循最佳编码实践。编写干净、可维护且文档齐全的代码。实施安全措施、适当的错误处理和优化的数据库查询。

并且不要忘记可扩展性和性能。设计你的架构以有效处理增长。使用微服务、缓存和基于云的解决方案来确保平稳的可扩展性。

最后，不要仅仅为了添加 AI 而添加 AI。确保 AI 增强用户体验或自动化有意义的任务（例如，AI 驱动的聊天机器人、情感分析或个性化推荐）。

这里有一个课程，教你如何使用 MERN 堆栈构建 AI 驱动的聊天应用程序。

AI 驱动的全栈项目该做与不该做

✅ 该做什么：

超越 CRUD 应用 – 超越基本的创建、读取、更新、删除操作，集成实时协作、AI 驱动的见解或自动化等高级功能。
关注用户体验 (UX) – 确保你的应用程序直观、易于访问且适合移动设备。
使用正确的技术栈 – 根据项目需求选择框架和工具，而不仅仅是追随潮流。例如：用于 SSR 的 Next.js，用于 AI 驱动 API 的 FastAPI，用于灵活数据处理的 MongoDB。
优先考虑安全性 – 实施身份验证、授权、速率限制和数据加密，以保护用户及其数据。
优化 AI 性能 – 如果使用 AI，请确保你的模型高效、轻量且可扩展。考虑使用 ONNX、TensorFlow.js 或基于云的推理服务来部署它们。

❌ 不该做什么：

避免过度工程化 – 不要不必要地使用复杂的技术栈。保持简单、模块化和高效。
不要只做另一个待办事项应用 – 专注于具有实际影响的项目，而不是通用的练习。
避免 AI 噱头 – 在没有明确目的的情况下添加 AI 会导致不必要的复杂性。确保它能增强功能。
不要忽视性能 – 优化不佳的 AI 或后端逻辑会拖慢用户体验。在需要时使用缓存（Redis）、索引和分页。
避免硬编码所有内容 – 使你的应用程序动态化，以便用户可以自定义体验，而不是依赖静态配置。

如何在 2025 年找到一份全栈开发工作

你已经学习了全栈开发，这是最受欢迎的技术技能之一。现在，是时候迈出下一步，争取高价值的工作机会了。以下是我成为 Web 和移动应用程序 MVP 开发者的具体做法。

建立一个强大的作品集

你的作品集是你在科技界的第一印象。它不仅仅是项目的集合——它是你技能、创造力和解决实际问题能力的证明。

一个结构良好的作品集应该简单、干净且易于浏览。与其列出通用项目，不如专注于能突出你构建智能解决方案专长的 AI 驱动应用程序。

一个强大的作品集应包括：

AI 驱动的项目：展示聊天机器人、推荐系统或自动化工具等 AI 驱动的应用程序，可以让你的个人资料脱颖而出。
实时链接：招聘人员和潜在雇主应该能够看到你的实际工作成果。在线托管你的项目可以增加可信度。
组织良好的 GitHub 仓库：编写干净、文档齐全的代码，并在 README 文件中提供清晰的说明。把它想象成一个迷你案例研究，解释项目的作用、你构建它的原因以及其他人如何使用或贡献它。

这里有一本手册，分享了许多创建出色作品集的技巧和策略。这里有一个有趣的教程，引导你构建自己的交互式终端风格作品集页面。在这门课程中，你将学习如何构建一个看起来像 2D 游戏的作品集。如你所见，你可以从中获得很多乐趣。

在哪里可以免费托管你的作品集？

托管服务在展示你的作品方面起着至关重要的作用。根据你构建的项目类型，以下是一些最佳的免费托管选项：

Vercel – 最适合 Next.js 项目，提供无缝部署。
GitHub Pages – 非常适合托管静态网站和个人作品集。
Netlify – 适合以 yoğun 前端为主的项目，易于部署并集成 CI/CD。

精心制作一份引人注目的简历

你的简历是你技术技能、项目经历和成就的快照。要保持简洁、切中要点、结构清晰，以便招聘人员快速浏览。避免不必要的冗余信息，专注于实际经验。

一份优秀简历的关键要素**：**

突出真实项目：避免列出虚假或不相关的经历。招聘人员更看重实际动手经验，而非理论知识。
使用项目符号：简历通常会经过 ATS（申请人跟踪系统）处理。使用项目符号组织信息可以提高可读性，增加通过初步筛选的机会。
基本板块：包括技能、项目、经验、教育和认证。
保持在一页：除非你有非常丰富的行业经验，否则单页简历是最佳选择。

优化 LinkedIn、GitHub 和 Twitter (X) 来建立你的影响力

你的在线形象和简历同样重要。招聘人员经常查看社交媒体来了解你的工作和贡献。优化你的个人资料，以反映你的技能并展示你的作品。

LinkedIn： 精心打造的 LinkedIn 个人资料是你的数字名片。它应包括：

一个有力的标题（例如“全栈开发人员 | AI 驱动的 Web 和移动应用程序”）。
详细的“关于”部分，说明你的技能、经验和项目。
定期发布帖子，分享见解、项目，并参与技术社区互动。

GitHub： 你的 GitHub 个人资料应反映你的编码能力。以下是如何让它脱颖而出：

置顶你最好的项目，让访问者能立即了解你的工作成果。
编写详细的 README 文件，包含项目说明、安装指南和用例。将其视为一个案例研究，展示你构建项目的原因和方式。

Twitter (X)： 参与技术讨论可以帮助你与行业专业人士建立联系。关注开发者，分享你的工作，并参与你所在领域的持续对话。

其他展示你知识的平台：

freeCodeCamp – 撰写高级编程教程和技术博客，活跃在论坛上，或为开源代码库做出贡献。
Dev.to – 分享编程见解，建立信誉。
Hashnode – 一个专注于开发者的博客平台，用于展示你的学习历程。

通过贡献开源项目建立信誉

参与开源贡献可以证明你在真实软件开发环境中工作的能力。这表明你能够与他人协作，编写可维护的代码，并遵循最佳实践。

如何开始：

找到一个你感兴趣的项目，从小处着手——修复 bug、更新文档或改进现有功能。
利用以下平台：
- GitHub – 探索热门仓库并做出贡献。
- Up For Grabs – 发现适合初学者的开源项目。
- First Timers Only – 非常适合需要指导的首次贡献者。

即使是很小的贡献也能对你的简历和作品集产生重大影响。这里有一份指南可以帮助你入门。还有这本完整的手册，详细介绍了为开源项目做贡献的过程。

巧妙求职：脱颖而出

大多数求职者涌向 LinkedIn Jobs 和 Indeed 等高流量平台，导致竞争异常激烈。与其与成千上万的申请者竞争，不如瞄准那些竞争较小但机会仍然很多的平台。

较少人用的求职平台

Wellfound (曾用名 AngelList Talent) – 最适合初创公司的工作。
GiniTalent – 工作匹配度极高。
Himalayas – 提供远程技术工作。
Turing – 提供独家全球远程职位。
Lemon.io – 面向顶级自由开发者。
Arc.dev – 为经验丰富的开发者提供高薪远程工作。

由于这些平台的用户基数较小，与拥有数百万申请者的饱和招聘网站相比，它们能增加你被注意到的机会。

通过采取战略性的求职方法、优化你的在线形象并建立令人印象深刻的作品集，你可以显著提高在科技行业找到一份好工作的机会。

freeCodeCamp 创始人 Quincy Larson 撰写了一本完整的书，介绍如何学习编程并找到一份开发者工作。

最后的思考：脱颖而出、积极主动、持续学习

保持你的作品集和 GitHub 更新，添加新项目。
在 LinkedIn 和 Twitter 上保持活跃——你的下一份工作可能来自人脉。
贡献开源项目以建立信誉。
有策略地申请——不要滥发简历；专注于高质量的申请。

👉 你已具备技能。现在，将自己置于机会能找到你的位置！ 🔥

我成为全栈开发者的学习资源

我的学习方法一直是实用和项目驱动的。在深入研究任何新技术之前，我首先确定我能用它构建什么。这不仅能让我保持动力，还能确保我专注于最相关的概念。

一旦有了项目想法，我就会研究能帮助实现它的核心技术。我不会迷失在无休止的教程中，而是寻找提供实践机会的结构化学习资源。freeCodeCamp 对我加强前端技能，特别是在 JavaScript 和 React 方面，起到了重要作用。

在后端开发方面，我探索了交互式学习平台和官方文档，以理解数据库、身份验证和 API 的工作原理。当我开始学习系统设计时，我意识到它需要一种不同的思维方式——专注于可扩展性、性能和可靠性。研究现实世界的架构和大规模应用程序帮助我将不同技术联系起来。

核心 Web 技术的首选资源

我更喜欢基于文本的学习，因为它允许我按照自己的节奏吸收概念。我使用过的一些最佳资源包括：

前端开发：

freeCodeCamp – 提供包含结构化课程的实践项目。
MDN 文档 – Web 技术的官方参考资料。
JavaScript.info – 深入探讨 JavaScript 概念。
学习编程 - 通过构建小型项目学习 Python 或 JavaScript。

后端开发：

Node.js 和 Express.js 文档 – 精通服务器端 JavaScript 的必备资料。
MongoDB 大学 – 实用的 NoSQL 数据库教程。

DevOps 与系统设计：

与传统开发不同，DevOps 旨在自动化工作流程、改善协作并确保无缝部署。它涉及不同的技术栈，但我专注于基础——Docker、云服务和 Linux 基础——以简化我的开发流程。

Docker: 我从 Docker 101（Docker 官方指南） 开始学习应用程序容器化。
云服务： 我使用 AWS 文档 (EC2) 来部署和扩展后端服务。
Linux： 由于 Linux 是 DevOps 的基础，我依靠 Linux Journey 和各种开源工具来加强我的命令行技能。虽然我已经使用 Linux 8 年了，但结构化的学习帮助我改进了工作流程和自动化技术。

系统设计：理解可扩展系统的工作原理

系统设计对于构建可靠、高性能的应用程序至关重要。我探索了：

免费的 GitHub 系统设计仓库 来掌握基础知识。
案例研究和现实世界架构 来理解大规模系统，你可以关注任何大型科技公司的工程博客，我个人偏好 Uber 的博客。
为了掌握高层概念，我学习了 Grokking System Design 课程。这是一个付费资源，我用它来加深对系统设计的理解。这不是强制性的，但它帮助我思考大规模架构。

通过将实践与真实案例研究相结合，我在 DevOps 和系统设计 方面打下了坚实的基础，使我的应用程序不仅功能齐全，而且具有可扩展性和生产就绪性。关于 JS 的一些重要知识点：

DSA 刷题：针对前端和全栈开发者的现实方法

老实说——数据结构和算法 (DSA) 可能会让人感到不知所措，特别是如果你的主要关注点是构建实际应用程序。许多开发者难以坚持 DSA 练习，我也不例外。我曾多次尝试强迫自己投入其中，但几分钟内就放弃了。

但是，虽然 DSA 可能不是开发中最令人兴奋的部分，但它对于技术面试仍然至关重要，尤其是在中大型公司。好消息是？你不需要掌握每一个主题——专注于几个关键概念通常足以通过大多数前端和全栈的编码面试。

DSA 刷题重点

如果你是前端或全栈开发者，你应该专注于与实际应用相符的解决问题技巧。以下是编码面试中经常出现的核心主题：

数组是数据结构和算法问题的基础。高效地操作数组至关重要，特别是在以处理数据列表为主的前端岗位。重要概念包括归并排序和快速排序等排序技术，二分查找和双指针法等搜索方法，以及滑动窗口技术等优化策略。Kadane 算法可用于查找最大子数组和，而前缀和与差分数组有助于解决区间查询问题。

字符串操作在 UI 驱动的应用程序和后端解析中起着至关重要的作用。许多实际问题需要处理和转换文本数据。关键概念包括字符串反转和旋转，KMP 算法和 Rabin-Karp 等模式匹配技术，以及处理字谜和回文。字符串压缩和编码技术有助于数据优化，而 Trie 数据结构广泛用于自动完成和拼写检查等应用。

对象和哈希表在 JavaScript 中是基础，因为其基于对象的结构。这些结构对于高效查找和缓存至关重要。基本主题包括理解哈希映射和哈希集之间的差异，通过链地址法或开放地址法处理冲突，以及实现 LRU 缓存。频率计数是优化问题的有用技术，图的邻接表对于高级系统设计概念很重要。

链表虽然在前端开发中不太常见，但由于其递归性质和内存效率，经常出现在编码面试中。关键主题包括单向链表和双向链表之间的差异，用于检测环路的快慢指针技术，以及合并两个排序链表。反转链表是一个经典问题，可以用迭代和递归两种方法解决。LRU 缓存的实现结合了链表和哈希映射，以实现高效的数据检索。

栈和队列在前端和后端应用程序中广泛使用。它们对于实现撤销/重做功能和请求处理等功能至关重要。重要概念包括使用数组或链表实现栈，验证平衡括号（用于 HTML 标签匹配和 JSON 验证等任务），以及设计最小/最大栈以实现常数时间检索最小值或最大值。队列和双端队列的实现，以及基于堆的优先队列，对于解决调度和任务管理问题很有价值。

树和图虽然不是日常前端任务的一部分，但在高级全栈和系统设计面试中扮演着至关重要的角色。二叉搜索树有助于优化数据库查询，而深度优先搜索 (DFS) 和广度优先搜索 (BFS) 是基本的遍历技术。Trie 通常用于搜索和自动完成功能。图遍历技术对于构建推荐引擎和社交网络至关重要，而 Dijkstra 算法广泛用于路由系统中的最短路径计算。

全栈面试中的高级 JavaScript 主题

除了数据结构和算法，现代技术面试还强调 JavaScript 的核心机制和高级概念。牢固掌握这些主题对于全栈职位至关重要，确保你能编写高效、可维护和优化的代码。

闭包和作用域是理解 JavaScript 函数执行、内存管理和封装的基础。关键概念包括词法作用域、函数提升以及使用闭包实现私有变量。闭包的实际应用，如防抖和节流，对于 Web 应用程序的性能优化至关重要。

异步 JavaScript 对于处理前端获取数据和后端管理请求等操作至关重要。理解事件循环、回调、微任务和宏任务对于编写非阻塞代码至关重要。Promises 和 async/await 简化了异步逻辑，而正确的错误处理、解决竞态条件以及利用 Promise.all() 和 Promise.race() 可以提高效率。

原型和面向对象的 JavaScript 在编写优化和可重用的代码方面发挥着关键作用。深入理解原型链、原型继承以及 ES5 和 ES6 类与继承之间的差异可确保更好的性能。认识到 ES5 和 ES6 类之间的区别并通过原型优化代码可以显著提高效率。

函数式编程概念在像 React 这样的现代 JavaScript 框架中广泛使用。理解纯函数、高阶函数和函数组合可以提高代码的可读性和可维护性。关键技术包括使用 map、filter 和 reduce 进行数组转换，使用柯里化函数进行部分应用，以及确保不可变性以避免意外的副作用。

内存管理和性能优化对于构建高性能应用程序至关重要。理解垃圾回收、识别和防止内存泄漏，以及利用 WeakMap 和 WeakSet 进行优化缓存有助于有效地管理内存。防抖和节流等性能技术可以提高响应速度，而优化 DOM 操作可以提高渲染速度。

掌握 DSA 和 JavaScript 的实用方法是将这些概念融入实际应用程序，而不是盲目地解决问题。与其随机刷 LeetCode，不如专注于滑动窗口和递归等模式。通过使用哈希表实现缓存、使用 Trie 优化搜索以及使用树和图构建后端系统，将 DSA 原则应用于实际项目中。

遵循结构化的学习计划可以提高一致性和记忆效果：

第 1-2 周： 专注于数组、字符串和哈希表。
第 3-4 周： 深入学习链表、栈和队列。
第 5-6 周： 攻克树、图和动态规划。

教学和分享知识可以巩固理解。向他人解释 DSA 问题、撰写技术博客或在 GitHub 上创建教程是巩固学习并为开发者社区做出贡献的绝佳方式。

问答

全栈开发需要多少 DSA 知识？

没有简单的答案。虽然你可能不会每天都实现数据结构和算法 (DSA)，但它们是软件开发中解决问题的支柱。扎实的 DSA 基础可以提高你编写高效代码、优化性能和应对复杂挑战的能力。

我需要多少数学知识？

对于一般的全栈开发，基本的算术——加、减、乘、除——就足够了。但是，如果你涉足机器学习、人工智能或游戏开发等专业领域，那么更高级别的数学（线性代数、概率论和统计学）就变得至关重要。

成为全栈开发者需要多长时间？

没有统一的时间表——这取决于先前的经验、学习速度和一致性。最好的方法是将其分解为可管理的部分并保持一致。就我而言，我每天投入大约 6 个小时，持续了几个月，才打下了坚实的基础，但这可能不适合你。这可能需要几个月到几年的时间，具体取决于你有多少时间可以用来学习。

我应该构建多少个项目？

与其构建几个小型、零散的项目，不如致力于开发一个集成了多个概念的、功能全面的应用程序。将其视为构建一个健壮的解决方案，而不是管理多个不完整的方案。

我需要购买课程吗？

这取决于你的学习风格。许多基础资源都是免费的，但结构化的付费课程可以提供深入的指导和责任感。我从免费资源开始，后来投资购买了付费课程以扩展我的知识，因为我发现很少有全面的免费材料涵盖高级主题。

我需要刷 DSA 题吗？

如果你的目标是 FAANG 级别的软件公司，那么是的，你需要深入学习 DSA，同时还要有好的项目和掌握一门编程语言。

我需要证书吗？

不需要，成为全栈开发者不需要任何证书，但拥有 freeCodeCamp 的认证总没有坏处。:)

学习很重要，但如果不通过构建项目来实践，知识仍然是理论性的。通过实际项目应用所学知识，才能真正巩固你的技能。

最后的说明

成为一名全栈开发者不仅仅是学习编码——它关乎构建、部署和扩展实际应用程序。随着人工智能的兴起，全栈开发的未来更加令人兴奋，那些及早适应的人将拥有优势。

如果你对全栈开发是认真的，那就一步一个脚印地开始，构建项目，在有意义的地方集成人工智能，并且永不停止学习。🚀

结论

全栈 + AI + DevOps = 终极开发者技术栈 🔥

通过掌握这些技能，你可以将任何想法转化为现实世界的产品，获得高薪工作，甚至创办自己的科技企业。

现在轮到你了——你接下来要构建什么？在评论中告诉我或私信我！👇

以上就是我分享的全部内容。如果你觉得这篇文章有帮助，欢迎分享并与我联系。我随时乐于接受新的机会：

在 X 上关注我：Prankur 的 Twitter
在 LinkedIn 上与我联系：Prankur 的 LinkedIn
在 Github 上关注我：Prankur 的 Github
查看我的作品集：Prankur 的作品集

访问网站时会发生什么？网络运行原理详解

YiWei — Thu, 28 Nov 2024 05:22:07 +0000

原文： What Happens When You Visit a Website? How the Web Works Explained

在这篇文章中，我将引导你了解使用浏览器访问网站时发生的整个过程。

无论你是刚接触 web 开发还是已经有一些经验，这篇文章都将帮助你更好地理解网络及其核心技术的工作原理。

资源定位：URL

每个存储在服务器上的资源都可以通过其对应的 URL 被客户端定位。以下是一个有效 URL 的示例：

你可能已经知道 URL 是什么，但让我们详细看看它的每个组成部分:

协议类型： URL 的第一部分表明应该使用哪种协议来获取资源。网站可以使用 HTTP 和 HTTPS 协议，我们稍后会详细介绍。协议类型后面的 : 用来分隔 URL 的下一部分。
授权：这部分由域名和端口号组成，用冒号分隔。只有当 web 服务器不使用 HTTP 协议的标准端口(HTTP 用 80，HTTPS 用 443)时，端口才是必需的。域名前的 // 表示授权的开始。
资源路径：这是 web 服务器上资源的抽象或物理路径。
参数：一组键/值对，为返回请求的资源添加额外选项。它们用 & 分隔，每个 web 服务器都有自己处理参数的方式。这部分以 ? 开始。
锚点：如果存在，以 # 开始，由浏览器处理以显示返回文档的特定部分。例如，它可以指向 HTML 文档中的特定部分。

当你在浏览器地址栏中输入 URL 时，会发生一些让你能够访问网站并与其内容交互的事情。让我们详细了解每一个过程。

匹配 IP 和 URL：DNS 解析

虽然作为人类我们更喜欢由单词组成的域名，但计算机之间使用 IP 地址进行通信。IP 地址由数字组成，对人类来说更难记忆。域名系统（DNS）就是将域名和 IP 地址关联起来的系统。

当你输入 URL 时，浏览器首先会查看本地缓存，检查是否已存储 DNS 查询结果。然后，它还会检查操作系统缓存。

如果没有存储结果，浏览器将调用 DNS 解析器来尝试找到域名对应的 IP 地址。

什么是 DNS 解析器？

解析器通常由你的互联网提供商的 DNS 定义。尽管这是大多数人使用的默认设置，但你可以将其更改为 Google、Cloudflare 或其他任何你想要的服务。

同样，提供商的 DNS 可能在其缓存中存储了域名的结果，如果没有，它会询问根 DNS 服务器。

什么是根 DNS 服务器？

根 DNS 服务器是实际驱动整个互联网的系统。它由分布在全球的十三个服务器组成。它会用请求域名的相关顶级域服务器来响应解析器的查询。

此时，DNS 解析器会缓存该顶级域服务器的 IP，这样就不必再次向根 DNS 服务器询问。

什么是顶级域名服务器？

顶级域（TLD）服务器存储用户所查找域名的权威域名服务器的 IP 地址。

在 URL www.exampleurl.com 中，顶级域是 .com。有不同类型的顶级域，如通用顶级域（.com 或 .org）、通常由两个字母 ISO 国家代码表示的国家代码顶级域等。

TLD 返回请求域名的权威域名服务器。DNS 解析器会再次缓存结果，这样以后就不必再回来请求。

权威域名服务器

此服务器包含将域名映射到 IP 地址的 DNS 记录。每个域名都有多个域名服务器。

此时不涉及缓存，因为权威域名服务器是最高权威机构，也是 DNS 解析链的最后一环。

如果 IP 地址可用，权威域名服务器会用域名的 IP 地址响应 DNS 解析器查询。如果不可用，则会返回错误。然后，DNS 解析器存储 IP 并将其发送回客户端浏览器。

一旦 DNS 查询完成且浏览器获得 IP 地址，它就可以尝试与服务器建立连接。

建立连接：TCP/IP 模型

客户端和服务器之间的连接使用传输控制协议（TCP）和互联网协议（IP）建立。这些协议是万维网和其他互联网技术（如电子邮件）背后的主要协议，它们决定了数据如何在网络上传输。

TCP/IP 模型是一个用于组织互联网和其他网络通信中不同协议的框架。TCP/IP 的主要责任是将数据分成数据包并将其发送到最终目的地，确保数据包可以在通信的另一端重新组装。

这个过程遵循四层模型，数据在一个方向上传输，到达目的地后再反向传输：

传输层确保应用程序可以通过建立数据通道来交换数据。它还建立了网络端口的概念，这是一个为应用程序需要的特定通信通道分配的编号数据通道系统。

TCP/IP 模型的传输层包括互联网上最常用的两个协议：TCP 和用户数据报协议（UDP）。

TCP 包含一些功能，使其在大多数基于互联网的应用程序中普遍存在，所以我们重点讨论它。

TCP 连接如何工作？

TCP 允许数据可靠且有序地传输到目的地。它是一个面向连接的协议，这意味着发送者和接收者必须在实际建立连接之前就连接参数达成一致。这个过程被称为握手程序。

TCP 三次握手

握手是客户端和服务器建立安全连接并确保双方同步和准备好开始交换消息的方式。

TCP 握手包括三个步骤：

客户端通过发送 SYN（同步）数据包通知服务器它想建立连接。这个数据包指定后续段将开始的序列号。
服务器收到 SYN 并用 SYN-ACK（同步-确认）段响应。它包括服务器的序列号和对客户端序列号的确认(加一)。
客户端用 ACK 消息响应，确认服务器的序列号。此时，连接已建立。

开始交换：客户端-服务器通信

一旦建立 TCP 连接，客户端和服务器就可以使用 HTTP 协议开始交换消息。

什么是 HTTP 协议？

超文本传输协议（HTTP）是 TCP/IP 套件中最广泛使用的应用层协议，但它被认为是不安全的，导致向 HTTPS 转变，HTTPS 在 TCP 之上使用 TLS 进行数据加密。稍后你会看到更多相关细节。

浏览器将首先向服务器发送 HTTP 请求消息，请求以 HTML 文件形式获取网站的副本。HTTP 协议可以传输 HTML、CSS、JS、SVG 等文件。

HTTP 请求/响应

HTTP 消息有两种类型：

请求：由客户端发送到服务器以触发操作。
响应：由服务器发送到客户端作为对先前请求的答复。

消息是纯文本文档，按照通信协议（在本例中是 HTTP）确定的精确方式构建。

HTTP 请求包含三个部分：

请求行：包括请求方法，这是定义要执行的操作的动词。在我们这篇博文中讨论的情况下，浏览器将发出 GET 请求从服务器获取页面。请求行还将包括资源位置(在本例中是 URL)和使用的协议版本。
请求头：一组键值对。其中两个是必需的。Host 表示目标域名，Connection 除非必须保持打开，否则总是设置为 close。请求头总是以空行结束。
请求正文：是一个可选字段，允许向服务器发送数据。

服务器将用 HTTP 响应回复请求。响应包括有关请求状态的信息，可能包括请求的资源或数据。

HTTP 响应的结构包括以下部分：

状态行：包括使用的协议版本、状态代码和状态文本，以及状态代码的人类可读描述。
响应头：一组键值对，可以是应用于整个消息的通用标头、提供服务器状态附加信息的响应标头或描述消息数据格式和编码（如果存在）的表示标头。
响应正文：包含请求的数据或资源。如果客户端不期望数据或资源，响应通常不会包含主体。

当服务器批准网页请求时，响应将包含 200 OK 消息。其他现有的 HTTP 响应代码包括：

404 未找到
403 禁止
301 永久移动
500 内部服务器错误
304 未修改
401 未授权

响应还将包含 HTTP 标头列表和响应主体，包括请求页面对应的 HTML 代码。

HTTPS

超文本传输协议安全版（HTTPS）并不是一个不同的协议，而是 HTTP 的扩展。它通常被称为基于传输层安全（TLS）的 HTTP。让我们看看这具体是什么意思。

HTTP 是浏览器和服务器之间大多数通信使用的协议，但它缺乏安全性。通过 HTTP 发送的任何数据都可能被网络上的任何人看到。当连接涉及敏感数据时，这尤其危险，比如登录凭证、财务信息、健康信息等。

HTTPS 的主要目的是确保数据隐私、完整性和身份识别。这意味着确保数据只能被预期的接收者访问，不能被中间人截获或修改。同时，发送者和接收者都可以通过合法的权威机构确认其身份。

在 HTTPS 中，通信使用 TLS 协议加密，该协议依赖于非对称公钥基础设施。它结合了两个密钥：一个公钥和一个私钥。服务器共享其公钥，客户端可以用它加密消息，而这些消息只能用服务器的私钥解密。

为建立加密通信，客户端和服务器必须启动另一次握手。在握手期间，它们就使用的 TLS 版本以及在连接期间如何加密数据和相互认证达成一致，这一组规则被称为密码套件。

这个握手或 TLS 协商在建立 TCP 连接后开始，包括以下步骤：

客户端问候：浏览器发送一个包含所有支持的 TLS 版本和密码套件的问候消息。
服务器问候：服务器回应选定的密码套件和 TLS 版本，以及包含服务器公钥的 SSL 证书。
认证和预主密钥：客户端通过相应的可信机构验证服务器的 SSL 证书，然后使用服务器的公钥（之前在证书中共享）创建预主密钥并与服务器共享。
预主密钥解密：预主密钥只能使用服务器的私钥解密。如果服务器能够解密它，客户端和服务器就可以就会话使用的共享主密钥达成一致。
客户端更改密码规范：客户端使用共享主密钥创建会话密钥，并向服务器发送所有先前交换的记录，这次使用会话密钥加密。
服务器更改密码规范：如果服务器生成正确的会话密钥，它就能解密消息并验证收到的记录。然后服务器发送记录以确认客户端也有正确的密钥。
安全连接建立：握手完成。

一旦握手完成，客户端和服务器之间的所有通信都由会话密钥进行对称加密保护，浏览器就可以发出网站的第一个 HTTP GET 请求。

第一字节时间

一旦浏览器的请求被批准，服务器将发送 200 OK 消息以及响应头和请求的内容。因为是网站，内容很可能是 HTML 文档。

数据在客户端和服务器之间传输时被分成一系列小数据块，称为数据包。这使得在需要时很容易替换损坏的数据块，也允许数据往返于不同位置，使多个用户能够更快且同时访问数据。

当客户端发出第一个请求时，作为响应到达的第一个数据包标志着第一字节时间（TTFB），它表示从请求发起到接收到第一块数据作为响应所经过的时间。这包括 DNS 查询、建立连接的 TCP 握手，以及如果请求通过 HTTPS 发送则包括 TLS 握手所需的时间。

从数据到像素：关键渲染路径

关键渲染路径（CRP）是浏览器执行的一系列步骤，用于将从服务器接收回来的数据转换为屏幕上的像素。它包括创建文档对象模型（DOM）和 CSS 对象模型（CSSOM、渲染树和布局。

构建 DOM 树

当第一块数据到达时，浏览器开始解析 HTML。解析意味着分析并将一段输入代码转换为特定运行时可以解释的语法和表示。在这种情况下，浏览器组装接收到的数据包并解析 HTML，构建文档的节点树表示，称为 DOM 树。

文档中的每个 HTML 标签都在 DOM 树中表示为一个节点。节点根据它们在文档中的层次位置连接到 DOM 树，每个节点的表示包含关于该标签的所有相关信息。

对于以下 HTML 代码：




    
    
    What Really Happens When You Navigate to a Website


    
        
            What Really Happens When You Navigate to a Website
        

        
            Intro
            
                Before entering into the details of every step included in the process let's review some of the basic concepts we will be discussing throughout the blog.
            
            
                The Internet is a huge network of interconnected computers. The World Wide Web (aka web) is built on top of that technology, as well as other services such as email, chat systems, or file sharing.
            

            Computers connected to the internet are either:
            
                
                    Clients, the web user's devices and the software that those devices use to access the web.
                
                
                    Servers, computers that store web pages, sites, or apps and the files they need to be displayed in the user's web browser or devices.
                
            
        
    

    
        © 2024

生成的 DOM 树如下所示：

在解析 HTML 时，浏览器会对遇到的资源发出额外请求。CSS 文件和图片是非阻塞资源，这意味着解析器会在等待请求资源的同时继续其任务。但如果遇到