前端技术清单
学习文章的知识往往是碎片化的。而前端涉及到的面很广,这些知识如果不进行有效梳理,则无法相互串联、形成体系。因此,我结合工作体会将抽象出了一些前端基础能力,并将看过、写过的一些不错的文章进行整理,形成了一份(纯)前端技术清单。
不论你是正在自学前端,还是对前端某些技术熟练掌握但某些还未涉足,我都希望这份清单能帮助你 review 一些前端的基础能力。
- 0. 年度报告
- 1. 基础拾遗
- 1.1. JavaScript
- 1.2. CSS
- 1.3. 浏览器
- 2. 工程化与工具
- 2.1. webpack
- 2.2. Gulp
- 2.3. Linter
- 2.4. 静态类型(Typescript/Flow)
- 2.5. Babel
- 2.6. CSS预处理与模块化
- 3. 性能优化
- 3.1. 加载性能
- 3.2. 运行时性能
- 3.3. 前端缓存
- 3.4. 性能调试与实践
- 3.5. 性能指标
- 4. 安全
- 4.1. XSS
- 4.2. CSRF
- 4.3. CSP
- 4.4. HTTPS
- 4.5. 安全实录
- 4.6. 代码保护
- 4.7. JS沙盒
- 4.8. 其他
- 5. 自动化测试
- 5.1. 单元测试
- 5.2. 端到端测试 (E2E)
- 5.3. 其他
- 6. 框架与类库
- 6.1. React
- 6.2. Vue
- 6.3. Redux
- 6.4. RxJS
- 7. 新技术/方向
- 7.1. PWA
- 7.2. CSS Houdini
- 7.3. Web Components
- 7.4. 微前端(Micro Frontends)
- 7.5. HTTP/2
- 7.6. WebAssembly
- 7.7. 小程序
- 7.8. Serverless
- 8. 业务相关
- 8.1. 数据打点上报
- 8.2. 前端监控
- 8.3. A/B测试
- 8.4. “服务端推”
- 8.5. 动效
- 9. 其他
0. 年度报告
- 2018 前端工具调查报告
- 2018 JavaScript 调查报告
1. 基础拾遗
1.1. JavaScript
- You-Dont-Know-JS [英]
- JavaScript 基础运行机制:
- JS 引擎、运行时与调用栈概述 [英]
- V8 引擎简介 [英]
- 内存管理与4中常见的泄漏 [英]
- Event Loop(面试里总会有一题 Event Loop…):
- 从 Event Loop 规范探究 JavaScript 异步及浏览器更新渲染时机
- 异步之 Event Loop [英]
- NodeJS 中的 Event Loop、Timers 与
process.nextTick()
[英] - Tasks、Microtasks、Queues 与Schedules [英]
- Web Workers 及其5个常见使用场景 [英]
- 如何避免 async/await 地狱 [英]
- “回调地狱”的解决思路汇总
1.2. CSS
- You-Need-to-Know-CSS
- CSSOM 及其相关浏览器 API 使用指南 [英]
- CSS布局指南
- CSS 中的各类换行处理方式 [英]:处理经典的换行问题
- 浏览器将rem转成px时有精度误差怎么办?
- 精准操控的滚动体验,浅谈新标准 Scroll Snap
- 如何完美实现一个非
button
元素的按钮 [英] - 巧用 CSS Grid 来创建横向滚动容器 [英]
- 如何处理内联元素中的空隙 [英]
- CSS Stacking Context 里那些鲜为人知的坑
- 在 (S)CSS 中实现主题功能的 4½ 种方法
1.3. 浏览器
- 浏览器的工作原理
- 现代浏览器内部是如何运行的:
- Chrome浏览器概览
- 浏览时发生了什么?
- 渲染进程的内部工作原理
- compositor是如何来提高交互性能的?
- 完整的页面生命周期 API 介绍 [英]
- 四个新的观察者:Intersection / Mutation / Resize / Performance (Observer)
- 渲染引擎工作方式及优化建议 [英]
- 浏览器内核渲染:重建引擎
- 跨域解决方案汇总
2. 工程化与工具
2.1. webpack
- webpack 中的 Chunk 关系图算法 [英]
- webpack 进阶系列文章
- 编译优化:
- 如何提升大型项目中 webpack 的性能 🎥 [英]
- 运行时优化:Separating a Manifest [英]
- 在 webpack 中使用 <link rel=”prefetch/preload”> [英]
- 如何更好使用 webpack tree-shaking
- 关于 webpack 编译缓存的讨论:
- mzgoddard’s comment
- [spec: webpack 5] - A module disk cache between build processes
2.2. Gulp
- Gulp 4 简介 [英]
- 基于Gulp的多页面应用实践指南
2.3. Linter
- JS Linter 进化史
- 为何要在项目汇总使用 ESLint [英]
2.4. 静态类型(Typescript/Flow)
- Typescript 总体架构 [英]
- 为什么要在 JavaScript 中进行静态类型检查:
- 第一部分
- 第二、三部分
- 第四部分
2.5. Babel
- Babel 用户手册
- Babel 插件手册
- 如何通过 Babel 实现你的自定义 JS 语法
2.6. CSS预处理与模块化
- CSS 进化史 [英]
- CSS 模块化方案系列
3. 性能优化
强烈推荐把 Google Web 上性能优化 Tab 中的文章都通读一遍,其基本涵盖了现代浏览器中性能优化的所有点。笔者也梳理了一份「前端性能优化指南 🚀」,可以帮助大家系统地了解和学习前端性能优化。
下面也摘录了其中一些个人认为非常不错的文章。
3.1. 加载性能
- PRPL 模式 [英]
- 图片懒加载完全指南 [英]
- 使用 Intersection Observer 来懒加载图片 [英]
- 图片与视频懒加载的详细指南 [英]
- 使用 Application Shell 架构来实现秒开应用 [英]
3.2. 运行时性能
- 避免大型、复杂的布局和布局抖动 [英]
- 什么导致强制同步布局(reflow)? [英]
- 如何诊断强制同步布局 [英]
- 无线性能优化:Composite
- 如何不择手段提升scroll事件的性能
- 使用 passive event listener 来提高滚动流畅性 [英]
- 节流和去抖(throttle & debounce)
- JavaScript 函数节流和函数去抖应用场景辨析
- underscore 函数去抖的实现
- requestIdleCallback
- requestIdleCallback使用入门 [英]
- Idle Until Urgent [英]:requestIdleCallback的妙用
3.3. 前端缓存
- Web 缓存简介:以购买牛奶的为例 [英]
- 大话前端缓存 [英]
- 缓存(一)—— 缓存总览:从性能优化的角度看缓存
- 缓存(二)—— 浏览器缓存机制:强缓存、协商缓存
- 缓存(三)—— 数据存储:cookie、Storage、indexedDB
3.4. 性能调试与实践
- 使用 Chrome DevTools 提升页面速度 [英]:Chrome DevTools实操讲解
- 了解 DevTools 中的 Resource Timing
- 淘宝新势力周H5性能优化实战
- 优化打包策略来提升页面加载速度
- Chrome DevTools 中你可能不知道的调试技巧
- 前端性能测量 [英]
3.5. 性能指标
- 以用户为中心的前端性能指标 [英]:前端性能指标的来龙去脉
- DOMContentLoaded:
- 你不知道的 DOMContentLoaded
- Deciphering the Critical Rendering Path [英]
- FP (First Paint):
- Chrome的First Paint
- FCP (First Contentful Paint):
- First Contentful Paint Explained [英]
- First Contentful Paint [英]
- FMP (First Meaningful Paint):
- Chrome 中的 First Meaningful Paint
- Time to First Meaningful Paint
- TTI (Time to interactive):
- Time to Interactive Explainer
- 衡量用户体验的新标准
- TTFB (Time To First Byte):
- TTFB,以及页面加载的时间节点
- FID (First Input Delay):
- First Input Delay
- Speed Index:
- WebPagetest: Speed Index
4. 安全
- 8大前端安全问题上篇
- 8大前端安全问题下篇
- 概念讲解:编码、加密、哈希与混淆 [英]
- 常见 Web 安全攻防总结
4.1. XSS
- 如何防止XSS攻击?
4.2. CSRF
- 如何防止CSRF攻击?
- Site Isolation [英]:Chrome的新特性
4.3. CSP
- Content Security Policy 入门教程
- Content Security Policy (CSP) [英]
4.4. HTTPS
- 图文还原 HTTPS 原理
- 浅谈有赞全站 HTTPS 推进
4.5. 安全实录
- About
rel=noopener
[英]:打开一个新页面是如何带来安全隐患的 - 一种新型的“钓鱼”方式 [英]
- 一个媒体文件请求引发的跨站风险 [英]
- Mitigating Spectre [英]: Chrome 中的跨站安全问题
4.6. 代码保护
- JavaScript 混淆安全加固
- 前端核心代码保护技术面面观
4.7. JS沙盒
- 如何在 Web 上实现一个插件系统 [英]
- 如何安全地运行用户的 JavaScript 脚本
4.8. 其他
- 一些安全相关的HTTP响应头
5. 自动化测试
- 2018 前端自动化测试综述 [英]
- 测试你的前端代码(介绍篇)[英]
5.1. 单元测试
- 测试你的前端代码(单元测试篇)[英]
- Fakes、Mocks 以及 Stubs 概念明晰
- 测试覆盖(率)到底有什么用?
5.2. 端到端测试 (E2E)
- 测试你的前端代码(E2E 测试篇)[英]
- 什么是一个好的 E2E 测试?[英]
- 平衡单元测试和端到端测试
- 对过多的 E2E 测试说“不” [英]
5.3. 其他
- 测试你的前端代码(集成测试篇)[英]
- 测试你的前端代码(可视化测试篇)[英]
- 关于 Property Based Testing 的介绍 [英]
6. 框架与类库
6.1. React
- 手把手教你如何实现一个简易的 React [英]
- React 底层揭秘 [英]
- 你所需要知道的 React 细节
- React Fiber 架构
- React 16 Fiber 源码速览
- React 是怎样炼成的:React早期的进化之路
- 从零开始实现一个React:
- 1. JSX和虚拟DOM
- 2. 组件和生命周期
- 3. diff算法
- 4. 异步的setState
- 「react技术栈」单页应用实践快速入门
- React 生命周期图示
6.2. Vue
- 深入浅出 - vue变化侦测原理
- Vue 模板编译原理
6.3. Redux
- 重新设计 Redux [英]:Rematch
- 如何用 GraphQL 来替代 Redux [英]
- 解读 Redux 的设计思路与用法
- (Redux)应用构建的三个原则 [英]
- React-Redux 的发展历史与实现 [英]
6.4. RxJS
- ReactiveX 官网:宝石图真的非常形象易读
- 响应式编程,是明智的选择
- 图解RxJS [英]
- 调试RxJS:Tooling [英]
- 调试RxJS:Logging [英]
7. 新技术/方向
7.1. PWA
- PWA 学习与实践系列
- Service Worker 入门简介 [英]
- PWA 在 iOS 平台上的特殊问题 [英]
- 在你的 PWA 中小心使用 iOS 的 meta 标签 [英]
- 饿了么的 PWA 升级实践
- 离线指南
- Android 中的 WebAPKs [英]
- Pinterest 的 PWA 实践 [英]
- 异步 HTTP Cookies API [英]:赋能Service Worker
7.2. CSS Houdini
- 认识 Houdini 与 CSS Paint API [英]
- 用 Houdini 来拯救 CSS Polyfill [英]
7.3. Web Components
- Web Components 基本概念和用法
- Web Components 指南 [英]
- Shadow DOM 使用简介
- HTMLUnknownElement 与 HTML5 自定义元素的故事
7.4. 微前端(Micro Frontends)
- 微前端主页 [英]
- 微前端的那些事儿
- 技术雷达之「微前端」- 将微服务理念扩展到前端开发
7.5. HTTP/2
- HTTP/2 幕后原理
- 全面介绍的 HTTP/2 [英]
- HTTP/2 主页:
- HTTP/2 协议 [英]
- HPACK: HTTP/2 Header压缩 [英]
7.6. WebAssembly
- WebAssembly 官网
- WebAssembly 现状与实战
- WebAssembly 系列:
- 一、生动形象地介绍 WebAssembly
- 二、JavaScript Just-in-time (JIT) 工作原理
- 三、编译器如何生成汇编
- 四、WebAssembly 工作原理
- 五、为什么 WebAssembly 更快?
- 六、WebAssembly 的现在与未来
7.7. 小程序
- 微信,支付宝小程序实现原理概述
- 小程序底层实现原理及一些思考
7.8. Serverless
- Serverless 给前端带来了什么
- 基于 Serverless 的淘宝前端研发模式升级
- Serverless,将给前端发展带来大变革的技术?
- Why Netflix Rolled Its Own Node.js Functions-as-a-Service for its API Platform
8. 业务相关
8.1. 数据打点上报
- 如何精确统计页面停留时长
- 揭开JS无埋点技术的神秘面纱
8.2. 前端监控
- 前端异常监控解决方案研究
- 监控平台前端SDK开发实践
- 把前端监控做到极致
- 前端监控系统探索总结
- 60 天急速自研-搭建前端埋点监控系统
8.3. A/B测试
- Twitter的A/B测试实践:
- 一、为什么要测试以及测试的意义
- 二、技术概述
- 三、检测和避免 A/B Test中 bucket不平衡问题
- 四、A/B Test中使用多个控制的启示
- Netflix A/B Test 实验平台实践 [英]
- 指导方法
- 实验中容易遇到的七种问题 [英]
- 实验的七个准则 [英]
- 小流量如何进行AB测试
- 案例分享
- 大众点评AB测试框架Gemini
- 新浪新闻客户端AB测试与灰度发布
- 天猫App A/B测试实践
- 工具
- AB测试样本数量计算器
- AB测试结果有效性分析工具
8.4. “服务端推”
- 各类“服务器推”技术原理与实例
- 长连接/websocket/SSE等主流服务器推送技术比较
- Comet:基于 HTTP 长连接的“服务器推”技术
- 深入 WebSockets、HTTP/2 SSE [英]
- WebSocket 应用安全问题分析
8.5. 动效
- 动画设计的12个原则🎥 [英]
- 贝塞尔曲线扫盲
- 动画:从 AE 到 Web
- 最全最好用的动效落地方法:
- 基础知识
- 落地方式
9. 其他
- Recursion? We don’t need no stinking recursion!:如何将一些递归改为循环
- Turning your web traffic into a Super Computer:通过 Web Worker 和 WebSocket 来将全世界的电脑连接成超级计算机
- Designing very large (JavaScript) applications:高屋建瓴
- Building a professional design tool on the web:如何使用 Web 技术来创建一个设计/渲染系统
- Crafting Interpreters:详细介绍了如何实现一个解释器
本文链接:https://my.lmcjl.com/post/5137.html
展开阅读全文
4 评论