乐趣区

2018你成长了么?一份给你的前端技术清单

2018 眼看就要过去了,今年的你相较去年技术上有怎样的收获呢?
记得年初的时候我给自己制定了一个学习计划,现在回顾来看完成度还不错。但仍有些遗憾,一些技术点没有时间去好好学习。
在学习中我发现,像文章这样的知识往往是碎片化的,而前端涉及到的面很多,如果不将这些知识有效梳理,则无法形成体系、相互串联。最后有一种东懂一块,西了解一点的感觉。因此,我结合工作体会抽象出了一些前端基础技术能力,并将这段时间学习或产出的一些不错的内容根据这些能力进行整理,形成了一份前端技术清单(github 地址)。
不论你是正在自学前端遇到了瓶颈,还是对某些技术熟练掌握但某些还未涉足,都希望这份清单能对你有所帮助。
由于个人精力有限,一些技术点的归纳可能有失偏颇,或者目前并未纳入进来,因此 github 上的清单内容 也会不断更新。目前只包含纯前端基础内容,NodeJS、客户端泛前端、小程序、可视化等内容先留着坑吧。
清单内容↓↓↓
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
CSS 布局指南

CSS 中的各类换行处理方式 [英]:处理经典的换行问题
浏览器将 rem 转成 px 时有精度误差怎么办?
精准操控的滚动体验,浅谈新标准 Scroll Snap
如何完美实现一个非 button 元素的按钮 [英]
巧用 CSS Grid 来创建横向滚动容器 [英]
如何处理内联元素中的空隙 [英]
CSS Stacking Context 里那些鲜为人知的坑

1.3. 浏览器

浏览器的工作原理

现代浏览器内部是如何运行的:

Chrome 浏览器概览
浏览时发生了什么?
渲染进程的内部工作原理
compositor 是如何来提高交互性能的?

完整的页面生命周期 API 介绍 [英]
四个新的观察者:Intersection / Mutation / Resize / Performance (Observer)
渲染引擎工作方式及优化建议 [英]
浏览器内核渲染:重建引擎
跨域解决方案汇总

2. 工程化与工具
软件规模的扩大带来了工程化的需求,前端也不例外。随着 NodeJS 的出现,前端工程师可以使用熟悉的 JS 快速开发所需的工具。工具链生态的繁荣也是前端圈繁荣的一个写照。
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 插件手册

2.6. CSS 预处理与模块化

CSS 进化史 [英]
CSS 模块化方案系列

3. 性能优化
性能优化其实就是在理解浏览器的基础上“因地制宜”,因此可以配合 1.3 节“浏览器”部分进行理解。
强烈推荐把 Google Web 上性能优化 Tab 中的文章都通读一遍,其基本涵盖了现代浏览器中性能优化的所有点,非常系统。下面也摘录了其中一些个人认为非常不错的篇幅。
3.1. 加载性能

PRPL 模式 [英]
图片懒加载完全指南 [英]
使用 Intersection Observer 来懒加载图片 [英]
图片与视频懒加载的详细指南 [英]
使用 Application Shell 架构来实现秒开应用 [英]

3.2. 运行时性能

避免大型、复杂的布局和布局抖动 [英]
什么导致强制同步布局(reflow)?[英]
如何诊断强制同步布局 [英]
无线性能优化:Composite
如何不择手段提升 scroll 事件的性能
使用 passive event listener 来提高滚动流畅性 [英]

节流和去抖(throttle & debounce):

JavaScript 函数节流和函数去抖应用场景辨析
underscore 函数去抖的实现

requestIdleCallback – 一个强大而神器的 API:

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 中的跨站安全问题

5. 自动化测试
自动化测试是软件工程的重要部分之一,但却极容易被忽视。

2018 前端自动化测试综述 [英]
测试你的前端代码(介绍篇)[英]

5.1. 单元测试

测试你的前端代码(单元测试篇)[英]
Fakes、Mocks 以及 Stubs 概念明晰
测试覆盖(率)到底有什么用?

5.2. 端到端测试 (E2E)

测试你的前端代码(E2E 测试篇)[英]
什么是一个好的 E2E 测试?[英]
平衡单元测试和端到端测试
对过多的 E2E 测试说“不”[英]

5.3. 其他

测试你的前端代码(集成测试篇)[英]
测试你的前端代码(可视化测试篇)[英]

6. 框架与类库
如果说基础知识是道,那框架与工具可能就是术;学习与理解它们,但千万不要成为它们的奴隶。
6.1. React

React 底层揭秘 [英]
你所需要知道的 React 细节
React Fiber 架构
React 16 Fiber 源码速览

React 是怎样炼成的:React 早期的进化之路

从零开始实现一个 React:

1. JSX 和虚拟 DOM
2. 组件和生命周期
3. diff 算法
4. 异步的 setState

「react 技术栈」单页应用实践快速入门

6.2. Vue

深入浅出 – vue 变化侦测原理
Vue 模板编译原理

6.3. Redux

重新设计 Redux [英]:Rematch
如何用 GraphQL 来替代 Redux [英]
解读 Redux 的设计思路与用法
(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 的现在与未来

8. 业务相关
在业务中往往还有一些与“业务无关”的场景需求,不论是什么业务几乎都会遇到;因此,在变与不变中,我们更需要去抽象出这些问题。
8.1. 数据打点上报

如何精确统计页面停留时长
揭开 JS 无埋点技术的神秘面纱

8.2. 前端监控

前端异常监控解决方案研究
监控平台前端 SDK 开发实践
把前端监控做到极致
前端监控系统探索总结

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:高屋建瓴,适合阅读与思考

退出移动版