去年帮一个开咖啡馆的网页朋友改网站，首页加载花了6.8秒。制作用Chrome DevTools一查，毕业首页那张1200×800的论文店面照片没做任何压缩，文件大小3.2MB。网页朋友说这照片是制作设计师给的“高清原图”，他觉得清楚点好。毕业我把图片转成WebP格式，论文尺寸缩到800×533，网页文件变成186KB，制作加载时间降到1.4秒。毕业他盯着秒表看了半天，论文说了句“原来问题在这儿”。网页这件事说明一个很朴素的制作问题：网页制作里，性能往往不是毕业技术不够先进，而是基本操作没做到位。

HTML结构写得好不好，直接决定后面CSS和JavaScript要填多少坑。我见过不少学生作业，div一层套一层，打开源码像看迷宫。有个学弟做电商产品页，光产品列表就用了七层div嵌套，问他为什么，他说“老师没教过用ul和li”。语义化标签不是摆设，header、nav、main、article、section、footer这些元素浏览器和搜索引擎都能读懂。用对标签，屏幕阅读器用户能顺畅浏览，SEO效果也比一堆无意义的div强。我自己的习惯是先把内容结构用语义标签搭出来，再考虑样式和交互。

CSS布局这块，Flexbox和Grid已经足够应付绝大多数场景。2019年之前大家还在用float和position硬撑，现在没必要了。上个月做一个后台管理界面，侧边栏固定宽度、主内容区自适应，用Grid三行代码搞定：display: grid; grid-template-columns: 240px 1fr;。以前得算宽度、清浮动、处理IE兼容，现在浏览器支持率超过97%，放心用。不过响应式断点别照搬Bootstrap那套，什么576、768、992、1200，实际项目里按内容需要设两三个断点就够了。我一般看内容在什么宽度开始挤得难受，就在那里加断点。

JavaScript交互要克制。很多网页一打开，弹窗、轮播、滚动动画全在跑，CPU占用率直接拉满。有个做培训的客户，首页放了三个自动轮播、两个悬浮客服、一个倒计时弹窗，手机打开烫得能煎蛋。后来砍到只剩一个手动切换的轮播，页面流畅度明显改善。事件监听记得用事件委托，别给每个列表项单独绑click。DOM操作能少则少，需要频繁更新的地方用DocumentFragment或者虚拟DOM思路，虽然手写虚拟DOM不现实，但至少别在循环里反复查DOM。

工具链方面，Vite现在比Webpack舒服太多。冷启动基本秒开，热更新也快。我拿一个中等规模的项目试过，Webpack dev server启动要12秒，Vite不到2秒。当然老项目迁移成本高，新项目直接上Vite没毛病。代码格式化用Prettier，配合ESLint，团队协作时能省掉很多无谓的争吵。Git提交前跑一遍lint-staged，把问题拦在本地。

最后说个细节。网页制作论文里经常讨论“用户体验”，但很多人忽略了一个基本事实：用户来你的网页是来办事的，不是来欣赏设计的。按钮够大、文字够清楚、链接别藏太深、表单别问一堆没必要的信息。我见过一个注册页面要填14个字段，包括“公司规模”和“年采购预算”，而它只是个卖手工皂的小店。少即是多，这句话在网页制作里永远不过时。