前端开发者这个称呼听起来好像就是把设计稿切成页面可真入了行你会发现它包着的东西远比想象中多要会写页面还得懂浏览器兼容、性能优化、工程化配置、交互动效偶尔还得处理后端同事甩过来的奇怪问题。我入行前三年一直觉得巨佬离自己很远后来有一天整理浏览器书签把自己日常高频访问的网站归了归档才想明白一个道理人和人的差距很多时候不在于脑子里存了多少代码而在于收藏夹里有多少靠谱的入口。这篇就把我自己这几年真正高频使用、觉得值得放进收藏夹的41个网站按用途整理出来。我从画静态页面干到带项目、做性能优化几乎每个阶段都用得上这41个网站里的某几个组合。不管你是刚入门、刚转行还是干了几年感觉在原地踏步都可以拿这个清单自查一遍哪些已经在收藏夹里哪些还很陌生。陌生不可怕可怕的是根本不知道它的存在。1. 文档与标准最容易被忽视却最该打好的底子很多新人喜欢在搜索引擎里找答案搜出来的博客质量参差不齐有的还是五六年前的写法照着抄完发现浏览器根本不吃那套。我的经验是遇到问题先查权威文档比看十篇转载博客都强。文档类网站是我收藏夹里最早建立起来的一批。1.1 MDN 和 Can I use验证一个API能不能用的标准答案MDN Web Docsdeveloper.mozilla.org几乎是前端开发者最该刻进DNA的网站。它覆盖了HTML、CSS、JavaScript、Web API的全部官方文档每个API都有语法说明、示例代码、浏览器兼容性表格甚至还有polyfill建议。我查这个API可以用于生产环境吗这种问题时第一个动作就是打开MDN对应的页面翻底部的兼容性表。很多实际的坑比如某个API在iOS Safari的旧版本上有bug、某个CSS属性在Firefox里需要加前缀MDN的兼容性表格里直接就有标注。Can I usecaniuse.com则是一个纯粹的浏览器支持查询器。它的数据源和MDN互补界面更直观输入一个特性名它会按浏览器版本列出支持情况还会给出全球使用率的统计。前端圈子里流行一句话如果一个特性的Can I use全绿你才能放心用如果有红要么加polyfill要么换方案。我实际做移动端项目时使用率数据特别关键——比如某个API虽然IE不支持但你的用户群根本不碰IE那就不用为IE兜底。这个网站教会我的是兼容性不是全都要支持而是你的用户需要什么就支持什么。1.2 JavaScript.info、TS 文档、TC39搭建完整知识体系JavaScript.infojavascript.info是我见过的把JS语言特性讲得最透彻的免费电子书。它从变量、函数讲到原型、异步、模块化每一个章节都有可运行的例子和练习题。跟很多教程不同它讲的是语言本身而不是某个框架怎么用所以不会过时。我当年系统刷了一遍之后再看框架源码里的很多写法都通透了。TypeScript 官方文档typescriptlang.org可能很多人觉得不就是查类型语法嘛但真正把它读透的人不多。TypeScript 文档里的Handbook部分尤其是Type Manipulation那一章把泛型、条件类型、映射类型、模板字面量类型讲得极其细致。配合官方的TypeScript Playground你可以一边写类型一边看编译后的JS代码这是理解类型体操最好的方式。我自己写复杂业务组件时很多类型定义都是从文档里的例子改出来的。ECMAScript 规范tc39.es/ecma262是另一个容易被忽略的高价值入口。其实日常开发不需要通读规范但API的准确行为、边界情况只有规范说了算。我建议收藏TC39的Proposals页面它列出了正在提案中的新特性以及阶段Stage 0到Stage 4。看到某个语法在Stage 3你就知道它可以用了但要加编译插件看到Stage 4说明已经定稿下一版规范就会包含它。这个页面让我养成了提前感知语言演进的习惯不至于每次新特性落地都一脸懵。2. 在线编码与调试十分钟从想法到可复现案例写代码最怕什么最怕别人问你你这个bug能复现吗你支支吾吾说在我电脑上是好的。在线编码工具解决了这个问题不需要本地环境打开浏览器就能跑代码、分享链接、让别人直接看到现象。这类网站我平时用得非常勤。2.1 六个在线工具的定位与真实体感CodePen是最出名的前端Demo社区尤其适合CSS效果、单页面小游戏、SVG动画这类视觉展示型代码。它的社区氛围特别好首页全是世界各地开发者提交的酷炫效果点进去能看到源码是偷师CSS技巧的高频去处。我用它做过很多次效果可行性验证——比如一个复杂的布局方案不确定行不行先建个Pen验证再说不污染项目。CodeSandbox主打完整项目级别的在线开发体验。它能在浏览器里跑React、Vue、Angular等脚手架项目支持npm依赖安装和自动部署。过去我和同事沟通一个复杂组件bug时直接把整个项目上传到CodeSandbox对方打开链接就能复现效率比截图高十倍。它的缺点是项目一大就会卡尤其是安装依赖的时候内存占用比较感人。StackBlitz同样是在线IDE但体验比CodeSandbox顺滑不少。它基于WebContainers技术把Node.js环境都搬到了浏览器里秒开项目、秒装依赖。我用它写一些独立的小工具组件或者验证Vite工程里的问题体感非常接近本地VS Code。JSFiddle是老牌在线工具了界面朴素但很稳。它的定位是快速验证一段JS逻辑不需要React/Vue这类框架纯HTML/CSS/JS跑起来就行。遇到一个算法问题、一段正则、一次异步调用的结果不确定时我习惯直接打开JSFiddle然后粘贴代码运行。regex101是正则表达式调试神器。左边写正则中间填测试文本右边实时展示匹配结果、分组信息、甚至每个步骤的匹配过程。它还能生成多种语言的正则代码片段。我至今记得刚学正则时对着(?)这种前瞻写法一头雾水是regex101一步步展示了匹配过程才彻底搞懂。JSON格式化工具json.cn这个说实话不是技术含量多高的网站但胜在实用粘贴一串压缩过的JSON它能帮你格式化、校验合法性、转义、压缩、甚至生成Go/Java等语言的结构体。我在联调接口时天天用后端返回的JSON结构乱七八糟时先丢进去格式化再对着字段看。2.2 我的日常调试流程先小后大能复现再说这些工具用熟了之后慢慢会形成一套个人工作流。我解决一个bug时通常分三步走先最小化复现。把问题代码抽出来去掉业务依赖和无关样式放进CodePen或JSFiddle里能稳定复现才说明问题被隔离了。再对照预期。打开MDN查API文档对照自己的调用方式看是不是参数用错了、返回值和预期不一致。最后问对人。复现链接准备好后不管是发内部群还是去Stack Overflow提问别人打开链接一目了然不用猜来猜去。这个流程看起来简单但能帮你省掉大量来回沟通的成本。很多人提问为什么没回复不是别人不想帮忙是你连复现条件都没给清楚。3. 设计与灵感前端不只是写逻辑更是做视觉载体很多前端开发者忽视设计能力的积累觉得那是UI设计师的事。但真到了实际工作中你会发现设计稿没标注的地方需要自己补设计稿交付延迟时老板催着要页面甚至小公司根本没有专职UI。这时候会逛设计站点、能从优秀作品中提炼视觉规则的人天然就多一层竞争力。3.1 逛设计站不是在抄是在学为什么这么设计Dribbbledribbble.com是被前端圈称为追波的设计作品社区大量UI设计师在上面发作品包括界面设计、插画、动效、品牌设计。我逛Dribbble的习惯是带着问题去比如卡片式布局的阴影怎么打更高级仪表盘数据页怎么排版更清爽搜到的不是答案而是思路。真正落地时还要结合自己的业务场景调整。Awwwardsawwwards.com是专门评选优秀网站设计的平台拿到Awwwards认证的站点通常交互、动效、视觉都极其出色。这个网站适合用来提升整站审美看别人如何组织信息架构、如何安排页面节奏、如何让动效服务于内容而非炫技。我筹备项目视觉方案时会专门花时间逛Awwwards把触动人心的页面存下来总结它们共性的设计语言。Behancebehance.net是Adobe旗下的作品集社区作品完整度更高很多设计师会放完整的项目拆解包括设计过程、情绪板、原型图。看这些过程文档对前端特别有帮助——你能理解一个界面是怎么从需求推导出来的为什么这个按钮放在这里、为什么用这个间距体系而不只是看到一个结果。Land-bookland-book.com是落地页灵感库专门收录各种产品官网、营销页面。前端开发做官网首页、活动页时land-book是很好的参考来源看别人的首屏文案、视觉焦点、滚动叙事怎么设计比自己闭门造车强太多。Mobbinmobbin.com收录了大量移动端App的完整页面截图按App名称、组件类型、页面类型分类。做H5活动页或者小程序页面时我会先去Mobbin搜同类型App的页面设计看看成熟的交互模式长什么样尤其是表单页、个人中心页、列表页这些高频场景基本上翻一遍就能找到灵感。Godlygodly.website是一个高质量的网页设计合集收录标准比Awwwards接地气一些每个作品都标注了使用的技术栈或者视觉特点。它是我快速找现代网页设计趋势的地方比如Glassmorphism、大字号排版、复古像素风等等Godly上的案例更新频率很高。3.2 素材与配色让页面有质感的速成路径设计灵感之外素材库也是前端生产力的一部分。Unsplashunsplash.com是我最常用的免费高清图库图片质量极高且基于CC0协议可免费商用。Pexelspexels.com同样提供免费图片和视频素材我偶尔做视频背景时去上面搜素材。这两个站点的共同点是搜索质量高、图片尺寸大、授权清晰商用不担心被告。IconFonticonfont.cn是阿里出的矢量图标库是我管理小图标的首选。它支持图标搜索、批量下载SVG、直接生成字体图标文件还能建立自己的项目库方便团队共享。Font Awesomefontawesome.com是老牌图标字体库胜在覆盖面广需要一些通用图标时直接引它的CDN就能用。Google Fontsfonts.google.com是字体选择神器支持预览、对比、生成嵌入代码并且自动按需子集化加载字体不用自己处理字体格式转换。国内用户如果网络环境受限可以用本地静态资源的方式引入字体文件处理方式其实很简单有兴趣的可以搜一下字体子集化的原理。Coolorscoolors.co是配色方案生成器我每次拿不定配色时的救场工具。它能一键生成一套协调配色还能锁定某个主色再去探索搭配。做项目给客户选色时我经常先出几套Coolors配色方案让客户挑比纯靠嘴说这个红色更好看高效得多。4. 动效与交互库让页面活起来之前先想清楚动效是前端进阶的重要方向但也是最容易翻车的地方。动效做得太花哨用户操作路径变复杂做得太生硬又显得页面死板。我在项目里沉淀下来一套动效选型的思路配合几个常用的动效库基本能覆盖大多数业务场景。4.1 五个武器库各自的适用战场GSAPgreensock.com/gsap是我心中JS动效库的首选。它最强大的地方是时间线控制你可以把多个元素的动画编排在一个时间线上精确控制先后顺序、重叠、缓动。GSAP的生态也很全ScrollTrigger、SplitText、MorphSVG这些插件解决了滚动动效、文字逐字出现、SVG形变等高频需求。它的性能在复杂动效下依然很稳不像某些库一跑就掉帧。Three.jsthreejs.org是WebGL三维框架适合做3D场景、粒子效果、产品展示这类沉浸式体验。我自己不常做3D但需要处理全景看房、3D商品展示时Three.js是绕不开的选择。它官网的示例库本身就是最好的学习资料几乎每个示例都带有代码面板可以直接改参数观察效果。Swiperswiperjs.com是最常用的移动端滑动库。它的优势在于对移动端手势的兼容处理非常成熟——惯性滚动、多指缩放、循环播放、自动轮播都是做好的直接调参就行。我做移动端H5轮播图从来不会自己写手势逻辑一律用Swiper省时省心还稳。Animate.cssanimate.style是一个纯CSS的预置动画库通过给元素加上对应的class就能实现淡入、弹跳、翻转、旋转等几十种动画。它的价值在于快速见效做活动页急着上效果时先套用Animate.css看个大概后续有需要再改自定义动画。Hover.cssianlunn.github.io/Hover收录了大量hover悬停效果从图标抖动到按钮渐变都封装成了现成的CSS类。我一般在写通用组件、做按钮样式统一时参考它的实现挑几个合适的效果微调后直接融入项目。它不是必需的库但作为灵感源和实现参考很值得收藏。4.2 我的动效实现顺序样式在前性能兜底做动效我给自己定了三条铁律第一能用CSS完成的效果绝不用JS库。第二用库之前先想清楚交互目的动效是辅助理解、引导注意力的不是装饰。第三性能优先优先使用transform和opacity这类不触发重排的属性实在复杂的动效才考虑上GSAP这类库。举个实际场景做一个列表项的淡入出场效果最简单的方案是给每个子项加transition配合延时实现完全不需要引入任何库。只有当出现滚动到某个区域再触发一系列交互动画多个元素组成复杂时间线编排时我才会把GSAP请出来。这样项目体积小页面流畅代码也容易维护。5. 性能与兼容性上线的最后一公里页面做出来只是第一步真正上线后用户访问卡不卡、功能崩不崩才是考验前端功力的地方。这一块必须靠工具量化不能靠感觉。5.1 用数据说话性能报告怎么读PageSpeed Insightspagespeed.web.dev是Google提供的性能检测工具输入URL就会给出移动端和桌面端的性能评分涵盖FCP、LCP、CLS、INP等核心指标还会直接给出优化建议。我做性能优化时第一步永远是跑一次PageSpeed把评分和诊断项截下来作为基准。WebPageTestwebpagetest.org比PageSpeed更专业支持选择全球不同节点、模拟不同网络速度、设置设备类型并提供完整的资源加载瀑布图。它能让你清楚地看到哪个请求阻塞了渲染、哪个图片体积超了、哪个脚本执行时间太长。我遇到过明明用了懒加载但首屏依然很慢的情况WebPageTest的瀑布图一看发现是某个第三方统计脚本在首屏同步执行换掉之后首屏直接快了一秒多。这两个工具的定位不同PageSpeed Insights适合日常快速体检WebPageTest适合深度分析。我通常先跑PageSpeed拿到整体判断再针对重点问题去WebPageTest上挖细节。对比下来你会发现性能优化的核心思路其实很朴素减少请求数、压缩资源体积、优化加载顺序、避免阻塞渲染。5.2 兼容性测试土办法和洋办法搭配BrowserStackbrowserstack.com提供云端真机和浏览器测试服务覆盖大量版本的Windows、macOS、iOS、Android设备组合。它的价值在于在没有真机的情况下验证真实环境比如某个样式在旧版Chrome上变了形我本地模拟不出来就扔到BrowserStack上开一台对应版本的系统实测。土办法也有土办法的用处。我现在开发时习惯Chrome、Firefox、Edge各开一个窗口做基本验证再用DevTools的设备模拟调主要移动端尺寸。对于小改动这些土办法就够用只有涉及重要页面更新或者用户反馈了某个具体设备的问题才动用BrowserStack。毕竟云端真机是付费服务不能随手乱开。6. 学习进阶与面试从会做到懂为什么工作一两年后的瓶颈期大多来自会做但不理解为什么。会调API、会写组件但遇到没见过的场景就手足无措。这个阶段需要系统性的学习和刻意练习。6.1 一份可持续的自学路线roadmap.shroadmap.sh是我逢人必推的学习路线图网站。它按前端、后端、DevOps、AI等方向画出了完整的技能树标出每个阶段该学什么、学到什么程度。我每年年初都会对照前端路线图自查一遍哪些技能点已经掌握哪些还在补哪些已经过时。它还提供交互式的to-do列表可以记录进度很适合做年度学习规划。30 seconds of code30secondsofcode.org收录了大量短小精悍的代码片段每个都配了清晰的解释和示例。它是碎片时间学习神器刷完一个数组去重理解了隐藏在代码背后的原理刷完一个防抖节流再也不会用错地方。它的分门别类做得也好按JavaScript、CSS、React、Python等区分方便按需查阅。You Dont Know JSgithub.com/getify/You-Dont-Know-JS是Kyle Simpson写的一套开源JS丛书。它对闭包、this、原型链、异步与性能的讲解是我见过最透彻的。当时我一口气读完《作用域与闭包》和《this与对象原型》很多之前好像懂了但又说不清的概念彻底通了。这套书在GitHub上开源免费阅读网上也有中文翻译版不过建议有条件还是啃原版原版的表达更精准。6.2 面试刷题的姿势与前端转后端的路径LeetCodeleetcode.com是算法刷题平台大厂面试绕不开。我的建议是别盲目追求题量按专题刷更有效数组、链表、树、动态规划、回溯把每个专题的基础题刷透比漫无目的地刷一百道混个眼熟强。我在准备跳槽面试时每天固定刷三道题并且坚持写解题思路哪怕只是简单注释效果比光看不练好太多。张鑫旭的博客zhangxinxu.com是国产CSS领域的质量标杆。张鑫旭老师写文章特别接地气每个CSS属性、每个布局技巧都追根溯源还配大量动图演示。我做CSS遇到样式问题时的第一反应就是去搜他的博客基本上都能找到温和而详尽的解释。他的站点文章已经积累了几百篇精华区的CSS世界系列值得反复读。阮一峰的网络日志ruanyifeng.com不只是技术教程更是一个持续更新的科技视野窗口。他写的ES6教程是国内很多人入门JS的起点他的每周科技周刊则汇总了本周值得读的科技文章、工具和观点。我每周五固定刷一篇周刊用它保持对行业动态的敏感度。这几年经常看到有人讨论前端开发者该不该学后端我自己也经历过这个阶段。我的看法是不用急着二选一先把前端技能夯实再顺着自己的业务需要往上游延伸。如果你选的是Java方向完全可以参考roadmap.sh上的后端路线图从Java基础语法、Spring Boot框架、MySQL、Redis这些模块按顺序推进。前端转后端最大的优势不是技术起点而是你早就有了一套找资料、看文档、提问题、快速验证的方法论。本书单里的在线工具和社区资源放到Java学习里照样是利器。7. 社区与问答问问题也是一门手艺技术人不可能一个人闭门造车学会高效提问、高效获取信息是职业发展的重要能力。高质量的社区和问答平台能帮你省下大量自己摸索的时间。7.1 提问前先做三件事Stack Overflowstackoverflow.com是所有程序员的老朋友但很多人不会用。它的核心规则是提问前先搜同一个问题大概率已经被问过无数遍了搜到了就直接看答案搜不到再发新问题。发问题时记得提供最小的复现代码、完整的报错信息、已经尝试过的方案这三样缺一不可。我每次提问都按这个格式准备回复率和回复质量明显高很多。GitHubgithub.com不只是代码托管平台还是一个巨大的学习资源库。你可以通过阅读知名项目的源码学习工程化写法通过Issues了解一个库的已知问题和设计取舍通过Discussions参与技术讨论。遇到一个库的用法问题我先去Issues里搜很多文档没写清楚的边界情况在Issues里都有讨论。学会用GitHub的搜索语法比如限定仓库名、路径、时间范围也是前端进阶的一项硬技能。7.2 高质量信息源怎么挑Hacker Newsnews.ycombinator.com是国外极客圈的核心信息源每天的热榜技术话题质量很高。它不像社交媒体那样充斥着情绪化内容讨论氛围理性、信息密度大。我习惯每天花十分钟扫一眼排行里面经常能看到关于新技术、新工具、新理念的深度讨论是对中文技术社区内容的一个补充。DEV Communitydev.to是一个氛围友好的开发者博客社区很多一线开发者在上面分享实战经验。它的文章质量比一般的技术号高不少因为作者大多是真在做项目的工程师。我收藏了不少我在生产环境遇到的坑这个库的内部原理类的文章都是教科书里不会写但实际很有用的知识。顺手整理一个收藏夹也是能力从收藏夹里挑出这41个网站的过程等于是把过去几年的工作习惯翻了一遍。真要说因为有这些网站就成了巨佬那是玩笑话但这些网站确实在无数个关键时刻帮我快速定位了问题、补齐了盲区。比收藏更重要的是使用收藏了但从来不用它们就只是几个URL而已。最后分享一个小技巧我每周末都会花半小时翻一下本周收藏的网页能用得上立刻试用用不上就删掉。收藏夹从几百条精简到几十条之后效率反而高了很多。信息爆炸的时代筛选信息的能力比囤积信息重要一百倍。希望这份清单能帮你少走几步弯路也欢迎你在实践后回来交流看看哪几个网站对你帮助最大。