1.2. CSS
-
CSS 中的各类换行处理方式 [英]:处理经典的换行问题
1.3. 浏览器
软件规模的扩大带来了工程化的需求,前端也不例外。随着 NodeJS 的出现,前端工程师可以使用熟悉的 JS 快速开发所需的工具。工具链生态的繁荣也是前端圈繁荣的一个写照。
2.1. webpack
-
编译优化:
-
关于 webpack 编译缓存的讨论:
-
[spec: webpack 5] - A module disk cache between build processes
2.2. Gulp
2.3. Linter
2.4. 静态类型(Typescript/Flow)
-
为什么要在 JavaScript 中进行静态类型检查:
2.5. Babel
2.6. CSS预处理与模块化
性能优化其实就是在理解浏览器的基础上“因地制宜”,因此可以配合1.3节“浏览器”部分进行理解。
强烈推荐把 Google Web 上性能优化 Tab 中的文章都通读一遍,其基本涵盖了现代浏览器中性能优化的所有点。笔者也梳理了一份「前端性能优化指南 🚀」,可以帮助大家系统地了解和学习前端性能优化。
下面也摘录了其中一些个人认为非常不错的文章。
3.1. 加载性能
3.2. 运行时性能
-
节流和去抖(throttle & debounce)
-
requestIdleCallback
-
Idle Until Urgent [英]:requestIdleCallback的妙用
3.3. 前端缓存
3.4. 性能调试与实践
-
使用 Chrome DevTools 提升页面速度 [英]:Chrome DevTools实操讲解
3.5. 性能指标
-
以用户为中心的前端性能指标 [英]:前端性能指标的来龙去脉
-
DOMContentLoaded:
-
FP (First Paint):
-
FCP (First Contentful Paint):
-
FMP (First Meaningful Paint):
-
TTI (Time to interactive):
-
TTFB (Time To First Byte):
-
FID (First Input Delay):
-
Speed Index:
很多安全风险老生常谈,但是往往到出现问题时,才会被重视或者意识到。
4.1. XSS
4.2. CSRF
-
Site Isolation [英]:Chrome的新特性
4.3. CSP
4.4. HTTPS
4.5. 安全实录
-
About
rel=noopener
[英]:打开一个新页面是如何带来安全隐患的 -
Mitigating Spectre [英]: Chrome 中的跨站安全问题
4.6. 代码保护
4.7. JS沙盒
4.8. 其他
自动化测试是软件工程的重要部分之一,但却极容易被忽视。
5.1. 单元测试
5.2. 端到端测试 (E2E)
5.3. 其他
如果说基础知识是道,那框架与工具可能就是术;学习与理解它们,但千万不要成为它们的奴隶。
6.1. React
-
React 是怎样炼成的:React早期的进化之路
-
从零开始实现一个React:
6.2. Vue
6.3. Redux
-
重新设计 Redux [英]:Rematch
6.4. RxJS
前端领域新技术、新方向层出不穷,这里汇总一些新技术方向;作为开发者需要多了解但是不要盲从
7.1. PWA
-
异步 HTTP Cookies API [英]:赋能Service Worker
7.2. CSS Houdini
7.3. Web Components
7.4. 微前端(Micro Frontends)
7.5. HTTP/2
7.6. WebAssembly
-
WebAssembly 系列:
7.7. 小程序
7.8. Serverless
在业务中往往还有一些与“业务无关”的场景需求 —— 不论是什么业务几乎都会遇到;因此,在变与不变中,我们更需要去抽象出这些问题。
8.1. 数据打点上报
8.2. 前端监控
基础学习:
前端最基础的就是 HTML , CSS 和 JavaScript 。
网页设计:HTML和CSS基础知识的学习
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。
CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
动态交互:JavaScript基础的学习
JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。
在业务中往往还有一些与“业务无关”的场景需求 —— 不论是什么业务几乎都会遇到;因此,在变与不变中,我们更需要去抽象出这些问题。
8.1. 数据打点上报
8.2. 前端监控
基础学习:
前端最基础的就是 HTML , CSS 和 JavaScript 。
网页设计:HTML和CSS基础知识的学习
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。
[外链图片转存中…(img-ijw4SnB4-1718857725262)]
CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
[外链图片转存中…(img-2EZhkq0q-1718857725264)]
动态交互:JavaScript基础的学习
JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。