在当今快节奏的信息时代，前端开发行业的变化和进步非常迅速。作为前端开发者，获取优质信息并不断学习是保持竞争力的关键。

如何高效获取优质信息？在此之前，我们需要先解决一个问题 —— 什么样的信息才算做优质信息。

何为优质信息

优质信息通常拥有这三种特点： 权威性、实用性和及时性

• 权威性：各种官方文档和规范，如 W3C 规范、React 官方文档等。这些信息是权威的，可以提供准确和可靠的技术参考。
• 实用性：各种教程和社区分享，可以提供实用的技巧和问题解决方案。
• 及时性：最新的技术趋势和更新进展，能够帮助开发者跟上行业的最新动态，了解并学习新的前端开发方法和技巧。

下面，我将从官方信息和社区信息两个方向，梳理一些我认为优质的前端信息来源

后续只在飞书文档中更新，欢迎评论补充，一起维护~ ?

官方信息

采用三级索引结构，提高信息查询效率。

1. 前端基础
2. 应用框架
3. 工程能力
4. 专业领域

1. 前端基础

• W3C 规范：www.w3.org/TR/
• Whatwg 规范：spec.whatwg.org/
• Web 领域各项技术规范索引：The Web Platform: Browser technologies

1.1 编程语言

1.1.1 JavaScript

• ECMAScript 提案：github.com/tc39/ecma26…
• ECMAScript 规范：262.ecma-international.org/

1.1.2 HTML

• HTML 规范：html.spec.whatwg.org/multipage/

1.1.3 CSS

• CSS 2.2 规范：www.w3.org/TR/CSS22/

更多 CSS 子类规范可以到 W3C 中寻找

1.1.4 TypeScript

• 官网（学习资料）：www.typescriptlang.org/
• 官方博客（主要是更新说明，和下方内容有点重复）：devblogs.microsoft.com/typescript/
• 更新说明：Documentation – TypeScript 5.1

1.1.5 WebAssembly

• 官网：webassembly.org/
• 规范：webassembly.github.io/spec/
• WebAssembly 生态：github.com/WebAssembly

1.2 浏览器生态

1.2.1 Chrome

• Devtools 更新说明：developer.chrome.com/tags/new-in…
• 更新说明：chromestatus.com/
• Chrome 开发者团队 Blog：developer.chrome.com/blog/

1.2.2 Chromium

• Chromium 项目进展： blog.chromium.org/
• 开发者指南：www.chromium.org/developers/
• 项目架构介绍：www.chromium.org/developers/…

1.2.3 Safari

• 更新日志：Safari Release Notes | Apple Developer Documentation

1.2.4 V8

• 官网（博客、开发教程）：v8.dev/

1.3 网络相关

1.3.1 HTTP

• HTTP1.1 规范：datatracker.ietf.org/doc/html/rf…
• HTTP2.0 规范：datatracker.ietf.org/doc/html/rf…

2. 应用框架

2.1 UI 框架

2.1.1 React

• 官方博客：react.dev/blog
• 官方教程：react.dev/learn
• 更新日志：github.com/facebook/re…

2.1.2 Vue

• 官方文档：vuejs.org/
• 博客（主要是更新日志）：blog.vuejs.org/
• 更新日志：github.com/vuejs/core/…

2.2 开发框架

• Next: nextjs.org/
• Umi: umijs.org/

3. 工程能力

3.1 编译构建

• Vite
• Webpack
• Rollup
• Rspack
• Turbopack
• SWC
• Babel
• Bun

3.2 Monorepo

• Rush
• Nx
• Turborepo
• Lerna

3.3 包管理方案

• npm
• yarn
• pnpm: pnpm.io/

3.4 CSS 开发方案

• Sass: sass-lang.com/
• Less: lesscss.org/
• PostCSS: postcss.org/
• CSS Modules: github.com/css-modules…
• styled-components (css-in-js) : styled-components.com/
• tailwindcss (atom css) : tailwindcss.com/

3.5 工程质量

• ESLint: zh-hans.eslint.org/
• Prettier: prettier.io/

3.6 前端测试

• Jest: jestjs.io/
• puppeteer: pptr.dev/
• playwright: playwright.dev/
• …

4. 专业领域-跨端

4.1 Flutter

• 教程：docs.flutter.dev/
• 更新日志：docs.flutter.dev/release/wha…

4.2 React Native

• 官网：reactnative.dev/
• 更新日志：reactnative.dev/blog

4.3 Electron

• 官网：www.electronjs.org/
• 更新日志：www.electronjs.org/blog

5. 专业领域-服务端

5.1 运行时

5.1.1 Node

• nodejs.org
• 更新日志：nodejs.org/en/blog

5.1.2 Deno

• deno.com/runtime
• 更新日志：deno.com/blog/

5.2 服务端框架

• Koa: koajs.com/
• Express: expressjs.com/
• NestJS: nestjs.com/

5.3 服务部署

• PM2: pm2.keymetrics.io/
• midway: midwayjs.org/

6. 专业领域-xxx

社区信息

技术周刊（推荐）

周刊定义：固定周期（通常是一周）收集社区优质文章，生成一份带导读的文章列表。

周刊的文章已经过一轮筛选，一般来说相对优质，很少有标题党和广告。

• CSS Weekly ：内容偏向 CSS
• JavaScript Weekly: The JavaScript Email Newsletter：内容偏向 JavaScript
• Node Weekly ：专注于 Node.js 技术
• Frontend Focus ：前端领域相关
• WWeb Weekly：前端领域相关
• sidebar.io：每天向前端开发者提供五个链接，涵盖设计、开发和用户体验等方面的内容
• 奇舞周刊 ：前端领域相关，主要是中文资源
• 分类：周刊 – 阮一峰的网络日志 ：技术相关，涉猎广泛
• MDX 前端周刊：由阿里的云谦在维护
• …欢迎补充

技术社区

• DEV Community: 前端相关，相对优质，主要关注 Top Weekly 的文章
• CSS-Tricks：前端相关，相对优质，主要关注 Popular this month 的文章
• Smashing Magazine：涵盖前端开发、设计和用户体验方面的内容
• Medium：涵盖技术、科学、艺术等领域知识，需要想查看前端技术文章，可以通过标签比如 frontend-development 找到，或者直接关注相关作者
• 前端 – 掘金：国内前端新人比较多的一个技术社区
• …欢迎补充

团队博客

• 美团技术团队
• 支付宝体验科技
• 字节 Web Infra 团队
• Taobao FED | 淘系前端团队： 貌似已停更
• AlloyTeam|腾讯全端 AlloyTeam 团队：貌似已停更
• 百度 FEX：貌似已停更
• 饿了么前端：貌似已停更
• …欢迎补充

个人博客

• Overreacted：React 核心成员 Dan Abramov 的博客
• Anthony Fu：Vue 核心成员 antfu 的博客
• 阮一峰的网络日志：涵盖各种技术知识，新手向，通俗易懂
• 张鑫旭：以 CSS 内容为主
• Gahing’s blog：本人博客（夹带私货 ?，欢迎关注/star
• 酷 壳 – CoolShell：左耳朵耗子的技术博客，R.I.P。
• W3cplus：大漠的博客，以 CSS、动画为主
• Barret 李靖 | 小胡子哥的个人网站：除了技术，还有生活
• …欢迎补充

公众号

推几个平时看的，可能会存在一些软文推广、广告、引流

• 字节前端 ByteFE
• ELab 团队
• 阿里巴巴终端技术
• ByteDance Web Infra
• 前端之巅
• 政采云技术
• 阿里开发者
• 奇舞精选
• code 秘密花园
• 前端精读评论
• 神光的编程秘籍
• 魔术师卡颂
• 前端从进阶到入院
• …欢迎补充

Twitter

可以获取一些最新资讯，紧跟潮流

• Addy Osmani： Google Chrome 工程师，关注前端性能优化、Web 开发工具和架构。
• Rachel Andrew：Google 的 Chrome DevRel 内容负责人，致力于 web.dev 和 developer.chrome.com。 CSS 工作组成员。
• Chris Coyier：CSS-Tricks 的创始人，关注前端开发、CSS、网站设计和用户体验。
• Andrew Clark：React 核心成员，Vercel 成员
• Dan Abramov：React 核心成员，关注 React、JavaScript 和前端开发。
  

  PS：更多 React 核心成员的 Twitter 可以从 Meet the Team – React 这边获取

• Evan You：Vue.js 的创作者和核心成员，关注前端开发、JavaScript 和 Vue.js 相关的话题
• Sarah Drasner：Vue.js 核心团队成员，Google Web Infra 工程总监，关注前端开发、CSS、动画和可视化。
  

  PS：更多 Vue 核心成员的 Twitter 可以从 Meet the Team | Vue.js 这边获取

• …欢迎补充

技术大会

• Google I/O
• WWDC：苹果开发者大会
• React Conf
• …欢迎补充

如何高效获取

上面提供了优质的信息源，下面将来谈谈如何高效的获取。

将从 思维方式 和 效率工具 两个角度来讲。

思维方式

高效的另一个说法是合理的精力管理，不是所有信息都要了解，也不是所有知识都要学习，更不是所有信息都能学到知识。

在获取到信息后，需要透过信息看到背后的知识，学习时切记：

• 多关注知识，少关注信息
• 切勿学而不用，工作相关的知识优先学
• 切勿学死知识，基础原理的知识重点学
• 减少过期知识摄入，多关注知识时效
• 尽量选难的知识点，越简单价值越小

效率工具

以前是怎么获取信息的？

1. 闲逛：看看公众号，刷下 Twitter ，或者阅读各大技术社区的热门文章。闲逛的缺点是关注范围太广，信噪比太低，通常闲逛 5 篇能有 1 篇文章有收获就算不错了。
2. RSS 订阅：订阅别人已经整理好的文章，通常相对优质，还提供文章总结方便按需阅读。缺点是仅订阅 RSS 可能会错漏其他优质文章，同时每个人的优质标准不一样，优质也不一定等于有用。

RSS 订阅 已经相对高效，但在 AIGC 时代，可以更极致一点。

目前在做的一个项目，待开源。读者也可以自己手动使用 ChatGPT 来做总结、分类、打分的工作。

整体链路为：收集信息-》整理信息-》消费信息，并通过反馈微调模型，让模型更懂自己，成为个人知识管理的好助手。

总结

本文介绍了前端优质信息的定义和获取方法。

优质信息应具备权威性、实用性和及时性，获取优质信息可以从官方信息和社区信息两个方面入手，可以参考本文提供的资源地址。

为了高效获取信息，本文提出了思维方式和效率工具两个角度的建议。在思维方式上，应该关注学习收益；在效率工具上，应该善用 AIGC 工具，提高信息获取效率。

总之，获取前端优质信息对于前端开发者来说至关重要，可以帮助在快节奏的前端领域中不断学习、成长和发展，应对未来更强的挑战。