内容摘要：打开任何一个网页，你看到的东西——排版、颜色、按钮、动画——背后都是三样东西在干活：HTML、CSS、JavaScript。没有例外。 HTML是骨架。它告诉浏览器“这里有个标题，那里有个段落，下面放

打开任何一个网页，网页你看到的前端东西——排版、颜色、网页按钮、前端动画——背后都是网页三样东西在干活：HTML、CSS、前端JavaScript。网页没有例外。前端

HTML是网页骨架。它告诉浏览器“这里有个标题，前端那里有个段落，网页下面放张图”。前端就这么简单。网页但很多人写HTML有个毛病：什么都用div。前端导航栏用div，网页按钮用div，连文字也用div包一层。然后加一堆class去控制样式。能跑，但语义丢了。浏览器不知道哪个是导航，屏幕阅读器读不出来，搜索引擎也懵。我见过一个页面，里面47个div，嵌套了9层。打开DevTools的时候我愣了三秒。用nav、button、header、article这些标签，不费什么事，但后续维护和SEO都省心。

CSS负责长相。它的问题不在难写，在于难管。一个项目做半年，样式文件基本变成垃圾场。有人用BEM命名法，有人上CSS Modules，有人干脆Tailwind一把梭。没有银弹。我自己的经验是：小项目随便写，超过20个页面就得定规矩。不定规矩，三个月后你自己都不敢删任何一行CSS——因为你不知道删了会崩哪里。

Flexbox和Grid出来之前，布局靠float和position硬撑。那会儿写个三栏等高布局，得用负margin或者padding补偿的hack。现在？display: grid; grid-template-columns: 1fr 2fr 1fr; 一行搞定。但老代码里那些float还在跑，你还得看得懂。

JavaScript是肌肉。它让页面动起来，也最容易出事。

早年间jQuery一统天下，$(‘.btn’).click() 走天下。现在原生API已经够用：document.querySelector、addEventListener、fetch。框架换了一茬又一茬，React、Vue、Svelte、Solid……本质都在解决同一个问题：数据变了，界面怎么跟着变。React用虚拟DOM做diff，Vue用响应式追踪，Svelte编译时直接生成操作DOM的代码。选哪个？看团队。一个人维护的项目上React有点重，小页面用原生加个Alpine.js就够了。

有个事值得单独说：性能。用户等3秒就走，这不是吓唬人。但性能优化不是无脑上CDN、压缩图片、开gzip就完事。先测。打开Lighthouse跑一遍，看看瓶颈在哪。我遇到过首屏加载慢，查了半天是某个第三方统计脚本同步加载，卡了1.2秒。改成async，直接掉到0.3秒。也遇到过CSS选择器写太深，.a .b .c .d .e 这种，浏览器从右往左匹配，每次都遍历一遍。改成加个class，渲染时间砍一半。

兼容性是个老话题，但没消失。2024年了，你依然可能遇到客户要求支持IE——虽然微软自己都埋了。更常见的是Safari的坑：日期格式解析、flex gap、100vh在移动端地址栏的抖动。写代码时多留个心眼，测试时多开几个浏览器。Chrome上跑通不等于没问题。

工具链这块，十年前是Grunt、Gulp，后来Webpack一统江湖，现在Vite成了新宠。Vite快，真的快。冷启动秒开，热更新几乎无感。但配置起来也有坑，尤其是和旧库混用的时候。我的态度是：能用默认配置就别折腾。见过有人花两天配Webpack，就为了让打包体积少3KB。不值。

最后聊点实在的。前端门槛低，HTML+CSS+JS三天就能写出能看的页面。但天花板高。浏览器渲染原理、事件循环、内存管理、网络安全（XSS、CSRF）、无障碍访问……每个方向都能钻很深。别急着追新框架。把原生JS的this、闭包、原型链搞明白，比会写十个框架的Hello World有用得多。

浏览器地址栏里敲个URL，到页面完整呈现，中间发生的事比你想象的多。DNS解析、TCP握手、HTTP请求、服务端渲染或静态返回、HTML解析、CSS阻塞、JS执行、布局、绘制、合成。前端开发就是在这一长串链条里找平衡：快、稳、好看、好维护。四个都想要？慢慢磨。