打开任何一个网页,端技你看到的术包东西——按钮、图片、端技动画、术包下拉菜单——背后都是端技前端技术在撑着。说白了,术包前端就是端技浏览器里跑的那一整套东西。它不只是术包“把页面画出来”这么简单,涉及的端技技术栈比很多人想的要杂。
最底层三样东西:HTML、术包CSS、端技JavaScript。术包这三个是端技地基,没有它们,术包网页根本不存在。端技HTML负责结构,告诉浏览器“这里是个标题,那里是个列表”;CSS管样式,颜色、间距、字体、布局全靠它;JavaScript负责行为,点击、滑动、数据请求都归它管。三者各司其职,但实际写代码的时候经常缠在一起。
HTML这些年变化不算剧烈,HTML5带来了一批语义化标签,比如 <header>、<article>、<video>,让页面结构更清晰。但真正让人头疼的是兼容性——你以为所有浏览器都认这些标签?现实是,老项目里还能看到一堆 <div id="header"> 这种写法。
CSS的复杂度被严重低估了。很多人觉得CSS就是调调颜色、改改边距,实际上它有一套完整的布局体系:Flexbox、Grid、定位、层叠上下文、响应式媒体查询。写CSS最怕的不是不会,而是“改了这里崩了那里”。一个 z-index 没设对,弹窗就被遮住了;一个 overflow 没处理好,页面就出现莫名其妙的滚动条。预处理器如Sass、Less能帮上忙,但它们只是工具,核心还是对CSS本身的理解。
JavaScript才是前端真正的主战场。ES6之后,语言本身进化速度明显加快——箭头函数、解构赋值、Promise、async/await、模块化,这些东西现在已经是日常。但光会语法不够,你还得懂DOM操作、事件循环、闭包、原型链。面试问“事件循环”不是刁难人,是因为它直接决定了异步代码的执行顺序,写错了就是bug。
框架层面,React、Vue、Angular三足鼎立。React用JSX把HTML写进JS里,Vue模板语法更接近传统HTML,Angular则是大而全的重型方案。国内Vue的占有率很高,尤其是中小型项目。但框架只是工具,底层还是JavaScript。我见过不少人Vue用得很溜,却说不清楚 v-model 背后的双向绑定原理,遇到复杂状态管理就卡住了。
构建工具也是前端技术的一部分。Webpack、Vite、Rollup,这些名字你可能不陌生。它们负责打包、压缩、转译、热更新。Vite这两年势头很猛,冷启动速度比Webpack快一个量级,开发体验好很多。但配置这些东西本身就有学习成本,尤其是Webpack的loader和plugin机制,第一次看配置文件基本是懵的。
再往上走,还有TypeScript。它给JavaScript加了类型系统,大项目里几乎成了标配。类型检查能在编译阶段抓出不少低级错误,但写起来确实比纯JS啰嗦。有人爱它,有人嫌它烦,这个争论短期内不会停。
别忘了还有跨端方案。React Native、Flutter、Uni-app,这些技术让前端开发者能写移动端应用。原理不同,但目标一致:用一套代码覆盖多个平台。实际效果嘛,各有各的坑,但确实省人力。
最后提一下性能优化和工程化。懒加载、代码分割、CDN、缓存策略、Lighthouse跑分,这些不是“高级话题”,而是日常工作中绕不开的东西。一个页面加载超过三秒,用户就跑了,这不是夸张,是统计结果。
前端技术栈还在长。每年都有新东西冒出来,但核心始终是那三样。框架会换,工具会更新,对浏览器行为、网络协议、代码组织的理解不会过时。