前端学习路线

https://www.cloudflare.com/en-gb/learning/dns/what-is-dns/
域名系统 (DNS) 是 Internet 的电话簿。人类通过域名（如 nytimes.com 或 espn.com）在线访问信息。 Web 浏览器通过 Internet 协议 (IP) 地址进行交互。 DNS 将域名转换为 IP 地址，因此浏览器可以加载 Internet 资源

什么是域名？

https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_domain_name
名是用于访问网站的唯一且易于记忆的地址，例如“google.com”和“facebook.com”。借助 DNS 系统，用户可以使用域名连接到网站。

什么是主机？

https://www.youtube.com/watch?v=htbY9-yggB0
虚拟主机是一种在线服务，可让您将网站文件发布到互联网上。因此，任何可以访问互联网的人都可以访问您的网站。

JavaScript 框架
React

https://reactjs.org/

https://reactjs.org/tutorial/tutorial.html

React 是最流行的用于构建用户界面的前端 JavaScript 库。 React 还可以使用 Node 在服务器上渲染，并使用 React Native 为移动应用程序提供动力。

Redux

https://redux.js.org/

https://redux.js.org/introduction/getting-started

Redux 是 JavaScript 应用程序的可预测状态容器。它可以帮助您编写行为一致、在不同环境（客户端、服务器和本机）中运行并且易于测试的应用程序。最重要的是，它提供了出色的开发人员体验，例如实时代码编辑与时间旅行调试器相结合。

当然状态管理方面目前也有 Mobx 与 Recoil 等有力的竞争者。

上述的是 React 生态，此外 JavaScript 社区还有 Vue 与 Angular 等其他非常有竞争力的框架。

CSS 框架
Styled Components

https://github.com/styled-components/styled-components
利用标记的模板文字（最近添加到 JavaScript）和 CSS 的强大功能，styled-components 允许您编写实际的 CSS 代码来设置组件的样式。它还删除了组件和样式之间的映射——将组件用作低级样式构造！

CSS Modules

http://www.ruanyifeng.com/blog/2016/06/css_modules.html
给 CSS 加入了局部作用域与模块依赖

Sass

http://www.ruanyifeng.com/blog/2012/06/sass.html
为 CSS 加入编程元素，被称为 CSS 预处理器

TailwindCSS

https://tailwindcss.com/
供一系列辅助类，直接为 HTML 标记添加这些预设的辅助类就可以快速完成一组专业的网站。

构建相关
Webpack

https://webpack.js.org/
Webpack 是一个模块打包器。它的主要目的是捆绑 JavaScript 文件以在浏览器中使用，但它也能够转换、捆绑或打包几乎任何资源或资产。

除了 Webpack，目前前端圈比较火的还有：

为库打包的更佳选择：Rollup

基于浏览器 ESM 的 Bundless 解决方案：Vite

Npm scripts

http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html
组合 Yarn、Npm、Pnpm 等包管理一起使用，来便捷的执行一系列脚本

Babel

http://www.ruanyifeng.com/blog/2016/01/babel.html
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行

开发规范
BEM

https://en.bem.info/

https://juejin.cn/post/6844903672162304013

块、元素、修饰符方法（通常称为 BEM）是 HTML 和 CSS 中类的流行命名约定。由 Yandex 团队开发，其目标是帮助开发人员更好地理解给定项目中 HTML 和 CSS 之间的关系。

JavaScript Style Guide

https://github.com/airbnb/javascript
编写 JavaScript 最合理的方法之一

经历上面的一阵狂风乱炸的洗礼之后，你现在已经能够理解如下知识了：

网页是如何运行的

如何使用框架（JS、CSS 框架）、现代的前端工程化集合工具辅助你高效的编写界面

在编写代码的时候，遵守相关的规范，写出更容易让其他人读懂的代码

将你的代码使用版本控制系统 Git 来追踪，并通过 Github 将你的代码分析给其他程序员学习

让网页被更多人使用
如果你想让你的网站被更多人使用，甚至是你要开发一款产品，完成你的创业目标，那么你可能还需要一些额外的知识辅助你。

在这个阶段你需要了解的知识点如下：

确保你的网站安全：HTTPS、Cors、内容安全策略等

确保的应用尽可能少 BUG：TypeScript、Jest、Cypress、Enzyme、React Testing Library

让用户在没有网的情况下也能使用：PWA、Storage、Web Socket、Service Workers 等

让你的网站被更快的访问：Lighthouse、Devtools、Performance Metrics、RAIL Model、PRPL Pattern

让你的网站能更好的被索引：SSR

让你的应用分散在各个平台：React Native、Flutter、Electron

让你的网站也能够处理更复杂的动效：WebAssembly 等

Web 安全
HTTPS

https://www.cloudflare.com/en-gb/learning/ssl/what-is-https/

https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https

https://developers.google.com/web/fundamentals/security/encrypt-in-transit/enable-https

HTTPS 是一种在 Web 服务器和浏览器之间发送数据的安全方式。

CORS

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
跨域资源共享 (CORS) 是一种基于 HTTP 标头的机制，它允许服务器指示除其自身之外的任何来源（域、方案或端口），浏览器应允许从中加载资源。

CSP（内容安全策略）

https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

https://developers.google.com/web/fundamentals/security/csp

内容安全策略是一种计算机安全标准，用于防止在受信任的网页上下文中执行恶意内容而导致的跨站点脚本、点击劫持和其他代码注入攻击。

测试工具
Jest

https://jestjs.io/
Jest 是一个令人愉快的 JavaScript 测试框架，专注于简单性。它适用于使用以下项目的项目：Babel、TypeScript、Node、React、Angular、Vue 等等！

React Testing Library

https://github.com/testing-library/react-testing-library
完备的 React DOM 的测试辅助库

Cypress

https://www.cypress.io/
对应用进行端到端测试

Enzyme

https://github.com/enzymejs/enzyme
测试 React 的辅助库

类型检查工具
TypeScript

https://www.typescriptlang.org/

https://www.typescriptlang.org/docs/

https://www.typescriptlang.org/docs/handbook/intro.html

TypeScript 是一种基于 JavaScript 的强类型编程语言，可为您提供任何规模的更好的工具。

离线使用
Web 最新的 Progressive Web Apps （PWA）技术，使得 Web 网站可以像 App 一样，拥有离线使用、推送通知等功能。

PWA 主要包含下面几个部分：

Storage

WebSockets

Service Workers

Location

Notifications

Device Orientation

Payments

Credentials

主要的参考学习资源如下：

https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps

https://github.com/GoogleChrome/workbox

性能相关
Web 性能是加载时间和运行时的客观测量和感知用户体验。 Web 性能是指网站加载、变得交互和响应所需的时间，以及在用户交互期间内容的流畅程度。

性能涉及到计算、衡量与改进性能，主要涉及下面这些知识点：

PRPL Pattern

RAIL Model

Performance Metrics

Lighthouse

Devtools

主要的参考学习资源如下：

https://developer.mozilla.org/zh-CN/docs/Web/Performance

https://web.dev/

SEO 相关
SEO（Search Engine Optimization）—— 搜索引擎优化，目的是帮助我们的网站在Google或者Baidu搜索的时候排名会提升靠前。

Next.js

https://nextjs.org/

https://nextjs.org/docs/getting-started

https://www.freecodecamp.org/news/the-next-js-handbook/

Next.js 是一个构建在 Node.js 之上的开源开发框架，支持基于 React 的 Web 应用程序功能，例如服务器端渲染和生成静态网站。

多平台
React Native

https://reactnative.cn/

https://github.com/facebook/react-native

使用 React 来开发移动端应用，如 Android 或 iOS。

Flutter

https://flutter.cn/

https://flutter-io.cn/

Flutter 为应用开发带来了革新：只要一套代码库（Dart），即可构建、测试和发布适用于移动、Web、桌面和嵌入式平台的精美应用

Electron

https://www.electronjs.org/

https://wizardforcel.gitbooks.io/electron-doc/content/tutorial/tutorial.html

Electron（原名为Atom Shell）是GitHub开发的一个开源框架。它通过使用Node.js（作为后端）和Chromium的渲染引擎（作为前端）完成跨平台的桌面GUI应用程序的开发。Electron现已被多个开源Web应用程序用于前端与后端的开发，著名项目包括GitHub的Atom和微软的Visual Studio Code。

高性能应用
WebAssembly

https://developer.mozilla.org/zh-CN/docs/WebAssembly

https://juejin.cn/post/7035991254257106958

WebAssembly是一种新的编码方式，可以在现代的网络浏览器中运行－它是一种低级的类汇编语言，具有紧凑的二进制格式，可以接近原生的性能运行，并为诸如C / C ++等语言提供一个编译目标，以便它们可以在Web上运行。它也被设计为可以与JavaScript共存，允许两者一起工作。

当你学完了这个部分的内容，基本上已经是算是一位高阶的前端工程师了，能够在任何大厂胜任各种研发工作，当然能够坚持到这里不容易，需要持续的努力，加油??
————————————————

原文链接：https://blog.csdn.net/qq_46416934/article/details/126096998