3个步骤手写实现欢迎页面，解决搭项目难痛点

刚学会语法就懵了？别慌，这是大多数人的通病。

你背熟了 if/else，搞懂了 for 循环，甚至能默写几个正则表达式。但让你从零搭一个项目，连入口文件在哪、样式怎么引入、组件怎么挂载都一头雾水。这种“懂代码但不会搭架子”的困境，比不会写代码更让人焦虑。

其实，问题的核心在于你只看了零件，没看组装说明书。

今天不聊那些花哨的框架配置，我们回归本源。通过手写实现一个最基础的欢迎页面，把前端工程的底层逻辑彻底跑通一遍。

这不仅仅是写几个 div 和 span，而是要理解浏览器是如何解析 HTML、CSS 如何计算布局、JS 如何接管交互。哪怕你用的是 React 或 Vue，底层的运行机制依然逃不出这套逻辑。只有把这套“地基”打牢，后面学框架才不会觉得飘在空中。

这篇文章，我会用实战的口吻，带你一步步拆解这个过程。不整虚的，直接上干货，看看一个最简单的页面背后，到底藏着多少细节。

1. 底层逻辑：浏览器到底在干嘛

很多人以为浏览器只是把 HTML 渲染出来就完事了，其实远不止如此。当你打开一个欢迎页面时，浏览器内部发生了一场精密的协作。

一句话原理：HTML 构建结构，CSS 处理样式，JavaScript 注入行为，三者通过 DOM 树与 CSSOM 树合成最终的渲染树。

类比解释：这就好比盖房子。

HTML 是钢筋水泥，决定了房子有几间房、门窗开在哪。
CSS 是装修涂料，决定了墙面刷什么颜色、地板铺什么材质。
JavaScript 是水电系统和智能家居，决定了灯能不能亮、门能不能自动开。

如果只有 HTML，你看到的就是一张黑白线稿；加上 CSS，房子才有颜色；加上 JS，房子才“活”了过来。在手写实现的过程中，我们必须清晰界定这三者的边界，不能把 JS 的逻辑硬塞进 HTML 里，也不能把样式逻辑散落在 JS 中。这种职责分离，是工程化的基石。

在掘金技术社区的技术文章里，经常能看到大牛强调“关注点分离”。这不是为了装高深，而是因为当项目变大后，耦合的代码就是维护的噩梦。哪怕是一个只有 100 行的欢迎页面，如果你把点击事件、样式变更、数据更新全揉在一起，一旦需求变更，改一个地方可能崩掉三个地方。

2. 代码拆解：从空文件到可交互

理论讲完了，现在动手。我们要手写实现一个具备基本交互的欢迎页面。不依赖任何框架，纯原生 HTML/CSS/JS，这样才能看清本质。

2.1 HTML：骨架搭建

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>手写欢迎页</title><link rel="stylesheet" href="style.css">
</head>
<body><main class="container"><h1 id="greeting">Hello, World!</h1><p class="subtitle">欢迎来到前端底层原理世界</p><input type="text" id="nameInput" placeholder="输入你的名字"><button id="greetBtn">打招呼</button></main><script src="script.js"></script>
</body>
</html>

逐行讲解：

<!DOCTYPE html>：声明文档类型，触发标准模式渲染。少了它，浏览器可能进入怪异模式，导致布局计算出错。
<meta name="viewport">：移动端适配的关键。没有这行，在手机上打开页面，文字会巨大无比，无法缩放。
<main>：语义化标签。比 <div> 更具意义，对 SEO 和屏幕阅读器更友好。
id 与 class 的使用原则：id 用于唯一标识（如 JS 需要操作的目标），class 用于样式复用。这里 greeting 和 greetBtn 必须用 id，因为 JS 要精准定位它们。

2.2 CSS：样式注入

/* style.css */
* {margin: 0;padding: 0;box-sizing: border-box;
}body {font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;background-color: #f0f2f5;display: flex;justify-content: center;align-items: center;height: 100vh;
}.container {background: white;padding: 2rem;border-radius: 8px;box-shadow: 0 4px 12px rgba(0,0,0,0.1);text-align: center;width: 300px;
}#greeting {font-size: 1.5rem;color: #333;margin-bottom: 0.5rem;
}.subtitle {color: #666;font-size: 0.9rem;margin-bottom: 1.5rem;
}#nameInput {width: 100%;padding: 0.5rem;margin-bottom: 1rem;border: 1px solid #ddd;border-radius: 4px;
}#greetBtn {background-color: #1890ff;color: white;border: none;padding: 0.5rem 1rem;border-radius: 4px;cursor: pointer;transition: background-color 0.3s;
}#greetBtn:hover {background-color: #40a9ff;
}

关键点：

box-sizing: border-box：这是现代 Web 开发的默认设定。它让元素的 width 包含 padding 和 border，避免了布局计算时的“宽度爆炸”问题。
flex 布局：display: flex 配合 justify-content 和 align-items，轻松实现水平垂直居中。这是比 margin: auto 更现代、更可控的方案。
transition：给按钮加个过渡效果，用户体验会立刻提升一个档次。细微的动效是专业感的来源。

2.3 JavaScript：行为控制

// script.js
document.addEventListener('DOMContentLoaded', function() {const greetingEl = document.getElementById('greeting');const inputEl = document.getElementById('nameInput');const btnEl = document.getElementById('greetBtn');btnEl.addEventListener('click', function() {const name = inputEl.value.trim();if (name) {greetingEl.textContent = `Hello, ${name}!`;} else {greetingEl.textContent = '请输入名字';inputEl.focus();}});// 回车键支持inputEl.addEventListener('keypress', function(e) {if (e.key === 'Enter') {btnEl.click();}});
});

逐行讲解：

DOMContentLoaded：确保 DOM 树构建完成后再执行 JS。如果在 <head> 中引入脚本且未加 defer，JS 可能找不到下面的元素。
const：现代 JS 的标配。只要变量不重新赋值，就用 const，它比 var 更安全，作用域更清晰。
trim()：去除用户输入前后的空格，防止出现“Hello, ”这种尴尬情况。
e.key === 'Enter'：提升用户体验的小细节。用户习惯回车提交，如果没这个功能，会显得产品很“业余”。

3. 流程描述：从加载到渲染

代码写完了，但浏览器内部是怎么运行的？我们用文字+伪代码描述一下这个手写实现背后的流程。

1. 网络请求阶段- 浏览器解析 HTML，发现 <link> 和 <script>- 并发请求 style.css 和 script.js- 下载完成后，开始解析2. 解析与构建阶段- HTML Parser: 解析 HTML，构建 DOM Tree- CSS Parser: 解析 CSS，构建 CSSOM Tree- JS Parser: 解析 JS，等待执行3. 执行与合成阶段- DOM Tree + CSSOM Tree -> Render Tree- 注意：如果 JS 修改了 DOM 或 CSS，Render Tree 需要重建- Layout: 计算每个节点的几何位置（盒子模型）- Paint: 将节点绘制到内存缓冲区4. 交互阶段- 用户点击按钮- 触发 click 事件- JS 执行：读取 input，修改 h1 的 textContent- DOM 变更 -> Render Tree 更新 -> Layout -> Paint- 用户看到文字变化

避坑指南：很多新手在这里容易犯一个错误：同步阻塞。如果在 HTML 中，<script> 标签放在 <body> 中间，且没有 defer 或 async 属性，浏览器会暂停 DOM 解析，直到 JS 执行完毕。如果这个 JS 文件很大，页面就会长时间白屏。

解决方案：

将 <script> 放在 <body> 底部（本文采用的方式）。
使用 defer 属性：<script defer src="script.js">。脚本会在 DOM 解析完成后、DOMContentLoaded 事件前执行。
使用 async 属性：脚本下载和执行是异步的，不保证顺序，适合独立的第三方库。

对于手写实现的简单项目，放在底部是最直观、最不容易出错的方案。

4. 实战验证与进阶思考

现在，你有了三个文件：index.html, style.css, script.js。在 VS Code 中打开 index.html，右键选择“在浏览器中打开”。

你应该能看到：

页面中央有一个白色卡片。
默认显示 "Hello, World!"。
输入你的名字，点击按钮，文字变为 "Hello, [你的名字]!"。
如果没输入，提示 "请输入名字" 并聚焦输入框。
按回车键，也能触发打招呼。

这就是一个完整的、可运行的前端最小闭环。

进阶技巧：

模块化：当逻辑变多时，把 JS 拆分成多个文件，使用 ES Modules (import/export) 管理依赖。
错误处理：给 addEventListener 加上 try-catch，或者使用全局错误监听 window.onerror，避免页面因 JS 报错而瘫痪。
性能监控：利用 performance API 监控页面加载时间，虽然对于欢迎页面来说意义不大，但这是养成好习惯的开始。

为什么强调“手写”？ 因为框架是黑盒。当 Vue 报错 Cannot read property of undefined 时，如果你不懂 DOM 操作原理，你就只能盲猜。但如果你亲手写过 document.getElementById，你就知道问题出在哪一层。

在掘金技术社区的很多进阶教程中，都会建议初学者先脱开框架，用原生 JS 实现一遍常见功能。比如手写一个简易的 Tab 切换、手写一个轮播图。这个过程痛苦，但回报巨大。它让你从“调用者”变成“理解者”。

5. 总结与互动

通过手写实现这个简单的欢迎页面，我们其实覆盖了前端开发的几个核心支柱：

结构：HTML 的语义化与结构规范。
表现：CSS 的盒模型、Flex 布局、过渡动画。
行为：JS 的 DOM 操作、事件监听、状态管理。
工程：文件分离、加载顺序、职责单一。

别小看这几个文件。它们是万丈高楼的基石。当你未来使用 React 的 useState 时，你会想起这里的 textContent 修改；当你使用 CSS-in-JS 时，你会想起这里的 class 切换；当你使用 Webpack 时，你会想起这里的 <script src> 加载顺序。

懂原理，才能不被框架绑架。

现在，轮到你动手了。不要只看不练。把代码敲一遍，改几个颜色，加个功能，看看浏览器控制台有什么反应。

还有什么不懂的？评论区留言挨个回。 比如：