跳到主要内容

介绍

这个知识库来自于我这十年来身为前端开发的知识总结, 以及平时收集整理的一些觉得比较好的免费在线的开源的学习资料。

前端知识涉及范围广而且相对比较零散,随着互联网技术和应用的发展,前端行业涉及的知识体系也越来越大庞大,从底层的 JavaScript 语言规 范 ECMAScript, 到类型拓展 TypeScript , 再到应用框架诸如: Vue、React、Svelte, 以及这些技术框架背后涉及的工程化,还有最近兴起的 WebAssembly 技术,完全颠覆传 统的 Web 开发方式。甚至在后端服务开发上也出现前端开发的身影,从 Nodejs 这些年的应用 也看得出来,Serverless 无服务架构也受到越来越多的公司的欢迎。

要想学好前端,绝非易事啊!那么我们从哪该如何开始?

只有先理清前端的 知识体系 ,打好底层知识的基础,了解这些应用框架背 后的 实现原理 ,再结合平时开发的大量积累,不断拓宽和深入自己的知识网络,才 能在前端领域站稳脚跟。任凭互联网行业 如何内卷 ,又有何惧。

最后希望前端的同行,平时多做知识总结,慢慢沉淀出自己的知识库。输入过后更要输出,笔耕不辍。

下面的前端学习路径地图,来自 roadmap.sh

Frontend Developer Roadmap桌面端应用程序ElectronTauri代码检查和格式化PrettierESLintyarnHTML前端知识体系学习基础知识编写语义化的 HTML 代码表单及表单验证惯例和最佳实践CSS浮动定位显示方式盒子模型网格系统Flex 布局学习基础知识学习 CSS 布局操作响应式设计和媒体查询JavaScript语法和基本结构学习常见的 DOM 操作变量提升, 事件冒泡, 作用域,原型, Shadow DOM, 严格模式理解这些概念:学习 Fetch API / Ajax (XHR)ES6+ 和模块化 JavaScript网络互联网的运行原理?什么是 HTTP?浏览器的运行原理?什么是 DNS 以及它是如何工作的?什么��是域名?什么是网络托管服务?无障碍访问SEO 基础知识Git 的基本用法GitHub仓库托管服务创建 GitHub 账号学习如何使用版本控制系统了解什么是版本控制系统以及为什么要使用它包管理器npmBitbucketGitLab网络安全知识个人推荐选项不建议选项可随意不按路线图中的顺序进行学习可选项 - 在紫色选项直接选择CORSHTTPS内容安全策略OWASP 安全风险至少了解下面知识的一种:CSS 预处理器CSS ArchitectureBEM打包工具任务运行器npm scriptsWebpackWebpackRollupRollupParcelParcel模块打包器框架选择ReactAngularVue.js现代 CSS样式组件CSS 模块化Emotion(样式 JS 库)Apollo静态站点生成器GatsbyJSNext.jsNuxt.jsVuepressJekyllCSS 框架纯 CSS 框架不含任何 JS 框架代码的样式库默认组件BootstrapBulma这些测试工具足够满足你所有的测试需求react-testing-libraryJestCypress应用程序测试功能测试,并学习如何使用右边的测试�工具编写测试代码了解这几种测试的区别:单元测试集成测试类型检查工具TypeScript渐进式 Web 应用程序Service WorkersStorageLocationNotificationsDevice OrientationPaymentsCredentialsWeb Sockets学习 WPA 程序中各种不同 API 的使用Server Sent EventsPRPL PatternRAIL Model性能数据分析使用 Lighthouse使用 DevTools计算, 测量和性能提升服务端渲染 (SSR)ReactNext.jsAngularUniversalVue.jsNuxt.js移动端应用程序React NativeNativeScriptFlutterHugoIonicGraphQLRelay ModernWeb ComponentsHTML 模板自定义组件Shadow DOMPostCSSSass带样式的 JSXWebpackesbuildParcelViteEleventypnpmSvelteSolid JSPlaywrightRemixRemixFlutterAstroSvelteSvelte Kit身份验证策略JWT, OAuth, SSO, Basic Auth, Session Auth etc基于JavaScript 语言的 CSS 框架,更适合结合基于框架的 JavaScript 应用程序一起使用。TailwindMaterial UIMantineRadix UIChakra UIDaisyUI网页性能最佳实践

一些有用的学习资源:

  • FreeFrontend - 一些和前端技术(HTML,CSS,JavaScript (jQuery, React, Vue))相关的免费的资源,包含代码案例,代码演示和文章