2018 眼看就要过去了，今年的你相较去年技术上有怎样的收获呢？记得年初的时候我给自己制定了一个学习计划，现在回顾来看完成度还不错。但仍有些遗憾，一些技术点没有时间去好好学习。在学习中我发现，像文章这样的知识往往是碎片化的，而前端涉及到的面很多，如果不将这些知识有效梳理，则无法形成体系、相互串联。最后有一种东懂一块，西了解一点的感觉。因此，我结合工作体会抽象出了一些前端基础技术能力，并将这段时间学习或产出的一些不错的内容根据这些能力进行整理，形成了一份前端技术清单（github 地址）。不论你是正在自学前端遇到了瓶颈，还是对某些技术熟练掌握但某些还未涉足，都希望这份清单能对你有所帮助。由于个人精力有限，一些技术点的归纳可能有失偏颇，或者目前并未纳入进来，因此 github 上的清单内容 也会不断更新。目前只包含纯前端基础内容，NodeJS 、客户端泛前端、小程序、可视化等内容先留着坑吧。清单内容↓↓↓0. 年度报告2018 前端工具调查报告2018 JavaScript 调查报告1. 基础拾遗温故而知新，不知则习之，是以牢固根基。1.1. JavaScriptYou-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. CSSYou-Need-to-Know-CSSCSS布局指南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. webpackwebpack 中的 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 processes2.2. GulpGulp 4 简介 [英]基于Gulp的多页面应用实践指南2.3. LinterJS Linter 进化史为何要在项目汇总使用 ESLint [英]2.4. 静态类型（Typescript/Flow）Typescript 总体架构 [英]为什么要在 JavaScript 中进行静态类型检查：第一部分第二、三部分第四部分2.5. BabelBabel 用户手册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、indexedDB3.4. 性能调试与实践使用 Chrome DevTools 提升页面速度 [英]：Chrome DevTools实操讲解了解 DevTools 中的 Resource Timing淘宝新势力周H5性能优化实战优化打包策略来提升页面加载速度Chrome DevTools 中你可能不知道的调试技巧前端性能测量 [英]3.5. 性能指标以用户为中心的前端性能指标 [英]：前端性能指标的来龙去脉DOMContentLoaded:你不知道的 DOMContentLoadedDeciphering the Critical Rendering Path [英]FP (First Paint)：Chrome的First PaintFCP (First Contentful Paint)：First Contentful Paint Explained [英]First Contentful Paint [英]FMP (First Meaningful Paint)：Chrome 中的 First Meaningful PaintTime to First Meaningful PaintTTI (Time to interactive)：Time to Interactive Explainer衡量用户体验的新标准TTFB (Time To First Byte)：TTFB，以及页面加载的时间节点FID (First Input Delay)：First Input DelaySpeed Index：WebPagetest: Speed Index4. 安全很多安全风险老生常谈，但是往往到出现问题时，才会被重视或者意识到。8大前端安全问题上篇8大前端安全问题下篇概念讲解：编码、加密、哈希与混淆 [英]常见 Web 安全攻防总结4.1. XSS如何防止XSS攻击？4.2. CSRF如何防止CSRF攻击？Site Isolation [英]：Chrome的新特性4.3. CSPContent 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. ReactReact 底层揭秘 [英]你所需要知道的 React 细节React Fiber 架构React 16 Fiber 源码速览React 是怎样炼成的：React早期的进化之路从零开始实现一个React：1. JSX和虚拟DOM2. 组件和生命周期3. diff算法4. 异步的setState「react技术栈」单页应用实践快速入门6.2. Vue深入浅出 - vue变化侦测原理Vue 模板编译原理6.3. Redux重新设计 Redux [英]：Rematch如何用 GraphQL 来替代 Redux [英]解读 Redux 的设计思路与用法(Redux)应用构建的三个原则 [英]6.4. RxJSReactiveX 官网：宝石图真的非常形象易读响应式编程，是明智的选择图解RxJS [英]调试RxJS：Tooling [英]调试RxJS：Logging [英]7. 新技术/方向前端领域新技术、新方向层出不穷，这里汇总一些新技术方向；作为开发者需要多了解但是不要盲从7.1. PWAPWA 学习与实践系列Service Worker 入门简介 [英]PWA 在 iOS 平台上的特殊问题 [英]在你的 PWA 中小心使用 iOS 的 meta 标签 [英]饿了么的 PWA 升级实践离线指南Android 中的 WebAPKs [英]Pinterest 的 PWA 实践 [英]异步 HTTP Cookies API [英]：赋能Service Worker7.2. CSS Houdini认识 Houdini 与 CSS Paint API [英]用 Houdini 来拯救 CSS Polyfill [英]7.3. Web ComponentsWeb Components 基本概念和用法Web Components 指南 [英]Shadow DOM 使用简介HTMLUnknownElement 与 HTML5 自定义元素的故事7.4. 微前端（Micro Frontends）微前端主页 [英]微前端的那些事儿技术雷达之「微前端」- 将微服务理念扩展到前端开发7.5. HTTP/2HTTP/2 幕后原理全面介绍的 HTTP/2 [英]HTTP/2 主页:HTTP/2 协议 [英]HPACK: HTTP/2 Header压缩 [英]7.6. WebAssemblyWebAssembly 官网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：高屋建瓴，适合阅读与思考