浏览器地址栏里敲下回车那一瞬间发生的端知事，比大多数人想象的端知要复杂得多。一个HTML文件从服务器传到本地，端知浏览器得先把它解析成DOM树，端知再算样式、端知排布局、端知绘制像素，端知中间任何一步卡住，端知用户看到的端知白屏时间就会变长。前端工程师每天打交道的端知，本质上就是端知这条链路上的一切。

HTML管结构，端知CSS管表现，端知JavaScript管行为——这话刚入行就听腻了，端知但真到项目里，端知界限往往没那么清楚。比如一个下拉菜单，HTML负责语义，CSS负责展开动画，JS负责键盘可访问性，三者得配合。我见过有人用纯CSS写交互，也见过有人用JS生成整页DOM，结果SEO一塌糊涂。工具是死的，怎么用看场景。

说到CSS，很多人觉得它简单，写起来才发现坑不少。浮动清除、盒模型差异、选择器权重冲突，这些问题十年前就存在，现在换了Flex和Grid，老毛病没了，新问题来了。比如flex: 1和flex: auto的区别，不查文档真容易搞混。还有层叠上下文，一个z-index不生效，可能查半天才发现是父元素开了transform。这些细节不写代码是记不住的。

JavaScript这边，ES6之后语法糖越来越多，箭头函数、解构、可选链，写起来是爽了，但运行时该报错还是报错。异步编程从回调到Promise再到async/await，本质没变，都是处理事件循环。有次我调试一个接口请求，明明await了，拿到的还是Pending，后来发现是忘了在函数前面加async。这种低级错误，再老的司机也犯过。

框架方面，React、Vue、Angular三分天下，现在Svelte和Solid也来凑热闹。React的JSX把HTML塞进JS里，Vue的模板语法更接近传统前端，选哪个看团队习惯。但别指望框架能解决所有问题——状态管理、路由、构建工具，该配的还得配。我见过一个项目用Vuex管全局状态，结果所有组件都往store里塞，最后store比组件还复杂。工具是为人服务的，别被工具牵着走。

性能优化是个老生常谈的话题，但真正做起来，得从加载、渲染、交互三个维度拆。加载层面，代码分割、懒加载、CDN缓存；渲染层面，减少重排重绘、用will-change提示浏览器；交互层面，防抖节流、虚拟列表。有个细节：requestAnimationFrame比setTimeout更适合做动画，因为前者跟着浏览器刷新率走。这些点单个看都不难，组合起来就是经验。

浏览器兼容性现在比十年前好多了，但IE的阴影还在。有些公司内部系统还绑着IE11，前端得写polyfill、加前缀、降级处理。我上次用Array.prototype.flat，在Chrome跑得好好的，到IE直接报错，最后手动写了个递归。这种事不遇到一次，永远记不住。

工具链这块，Webpack、Vite、Rollup各有各的适用场景。Vite开发时用ESBuild预构建，启动快得离谱，但生产打包还是走Rollup。Webpack配置复杂，但插件生态成熟。选工具得看项目规模，小项目用Vite省心，大项目用Webpack稳当。别为了追新而追新，稳定比时髦重要。

最后说句实在的，前端知识更新快，但底层原理变化慢。DOM、事件循环、HTTP缓存、浏览器渲染流程，这些搞懂了，学新框架就是看文档的事。反过来，只学框架不学原理，遇到问题只能靠猜。我见过有人用React三年，还不知道setState是异步的。这不是框架的错，是学习路径的问题。