web前端知识点总结

web前端知识点总结

一个按钮点击后没反应，端知十有八九是识点事件绑定写在了DOM渲染之前。这种低级错误我犯过不止一次，总结后来才养成把script标签放在body末尾的端知习惯，或者干脆加个DOMContentLoaded监听。识点前端这行，总结坑多，端知但大部分坑都有规律。识点

HTML：别只把它当骨架

很多人觉得HTML简单，总结随便写写就行。端知但你试试用纯div搭页面，识点屏幕阅读器读出来就是总结一堆“分组”，视障用户直接懵。端知语义化标签不是识点摆设——nav、main、总结aside、article，这些标签自带无障碍属性，浏览器和辅助工具都能识别。还有form里的label，加上for属性关联input，点击文字就能聚焦输入框，体验差距很明显。

再说一个容易忽略的：meta viewport。移动端页面如果没这行，浏览器默认按980px宽度渲染，用户看到的就是缩小的桌面版。加上<meta name="viewport" content="width=device-width, initial-scale=1">，页面才会按设备实际宽度布局。

CSS：布局方案选对了，少写一半代码

float布局的时代已经过去了，但还有人在用。Flexbox处理一维排列，Grid处理二维网格，这两个现在浏览器支持率都超过97%。我最近做一个后台管理系统的侧边栏+主内容区，用Grid三行代码搞定：display: grid; grid-template-columns: 240px 1fr;。换成float加清除浮动，至少十行，还容易出问题。

选择器权重也值得说道。!important能不用就不用，一旦用多了，后面想覆盖就得叠更多!important，代码变成军备竞赛。我见过一个项目里同一属性写了四个!important，最后没人敢动那部分样式。

响应式方面，媒体查询不是唯一方案。clamp()函数现在很好用，比如font-size: clamp(16px, 2vw, 24px)，字体大小随视口平滑变化，不用写一堆断点。

JavaScript：异步是绕不过去的坎

回调地狱这个词现在提得少了，因为Promise和async/await基本普及。但异步的本质没变——JS是单线程的，耗时操作得交给事件循环。理解宏任务和微任务的执行顺序，能帮你避开很多“为什么console.log顺序不对”的困惑。

举个实际例子：setTimeout(() => console.log('A'), 0)和Promise.resolve().then(() => console.log('B'))，输出顺序是B然后A。因为微任务队列在每次宏任务结束后清空，Promise的then属于微任务，优先级更高。面试常考，实际调试也常遇到。

闭包也是个老生常谈的话题。循环里用var声明变量绑定事件，所有回调拿到的都是最终值——这是经典陷阱。换成let，每次迭代创建新绑定，问题消失。或者用IIFE包一层，但let显然更简洁。

框架和工具：别被生态绑架

React、Vue、Angular三选一，其实选哪个都能干活。关键是理解组件化思维和状态管理。我见过Vue项目里把状态全塞在data里，组件通信靠一层层props往下传，改一个数据要动五个文件。这种时候该上Vuex或Pinia了，别硬撑。

构建工具方面，Vite现在起步比Webpack快太多。冷启动基本秒开，热更新也是毫秒级。新项目没历史包袱的话，直接上Vite。Webpack配置复杂但生态成熟，老项目继续用也没问题。

最后说一句：前端技术更新快，但核心就那么些——DOM操作、事件模型、异步编程、浏览器渲染原理。把这些吃透，学新框架就是看文档的事。追新之前，先看看手里的项目到底需不需要。