{"id":13701028,"url":"https://github.com/alienzhou/frontend-tech-list","last_synced_at":"2025-04-14T08:55:33.877Z","repository":{"id":37470644,"uuid":"155887224","full_name":"alienzhou/frontend-tech-list","owner":"alienzhou","description":"📝 Frontend Tech List for Developers 💡","archived":false,"fork":false,"pushed_at":"2020-03-07T12:24:05.000Z","size":32,"stargazers_count":3571,"open_issues_count":2,"forks_count":498,"subscribers_count":150,"default_branch":"master","last_synced_at":"2025-04-07T01:11:14.749Z","etag":null,"topics":["css","frontend","html","javascript","list","pwa","security","tech"],"latest_commit_sha":null,"homepage":"https://www.alienzhou.com/projects/frontend-tech-list/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alienzhou.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-11-02T15:41:38.000Z","updated_at":"2025-04-02T16:10:38.000Z","dependencies_parsed_at":"2022-07-14T11:30:45.250Z","dependency_job_id":null,"html_url":"https://github.com/alienzhou/frontend-tech-list","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alienzhou%2Ffrontend-tech-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alienzhou%2Ffrontend-tech-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alienzhou%2Ffrontend-tech-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alienzhou%2Ffrontend-tech-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alienzhou","download_url":"https://codeload.github.com/alienzhou/frontend-tech-list/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248852110,"owners_count":21171839,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","frontend","html","javascript","list","pwa","security","tech"],"created_at":"2024-08-02T20:01:14.594Z","updated_at":"2025-04-14T08:55:33.837Z","avatar_url":"https://github.com/alienzhou.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"# 前端技术清单\n\n\u003e 最后更新：2019/10/09 [新增内容 (diff) \u003e\u003e](https://github.com/alienzhou/frontend-tech-list/commit/9e73eb648cb1b7413ecca0c5fe3ebb81f4dea0fe?short_path=04c6e90#diff-04c6e90faac2675aa89e2176d2eec7d8)\n\n学习文章的知识往往是碎片化的。而前端涉及到的面很广，这些知识如果不进行有效梳理，则无法相互串联、形成体系。因此，我结合工作体会将抽象出了一些前端基础能力，并将看过、写过的一些不错的文章进行整理，形成了一份（纯）前端技术清单。\n\n不论你是正在自学前端，还是对前端某些技术熟练掌握但某些还未涉足，我都希望这份清单能帮助你 review 一些前端的基础能力。\n\n- [0. 年度报告](#0-年度报告)\n- [1. 基础拾遗](#1-基础拾遗)\n  - [1.1. JavaScript](#11-javascript)\n  - [1.2. CSS](#12-css)\n  - [1.3. 浏览器](#13-浏览器)\n- [2. 工程化与工具](#2-工程化与工具)\n  - [2.1. webpack](#21-webpack)\n  - [2.2. Gulp](#22-gulp)\n  - [2.3. Linter](#23-linter)\n  - [2.4. 静态类型（Typescript/Flow）](#24-静态类型typescriptflow)\n  - [2.5. Babel](#25-babel)\n  - [2.6. CSS预处理与模块化](#26-css预处理与模块化)\n- [3. 性能优化](#3-性能优化)\n  - [3.1. 加载性能](#31-加载性能)\n  - [3.2. 运行时性能](#32-运行时性能)\n  - [3.3. 前端缓存](#33-前端缓存)\n  - [3.4. 性能调试与实践](#34-性能调试与实践)\n  - [3.5. 性能指标](#35-性能指标)\n- [4. 安全](#4-安全)\n  - [4.1. XSS](#41-xss)\n  - [4.2. CSRF](#42-csrf)\n  - [4.3. CSP](#43-csp)\n  - [4.4. HTTPS](#44-https)\n  - [4.5. 安全实录](#45-安全实录)\n  - [4.6. 代码保护](#46-代码保护)\n  - [4.7. JS沙盒](#47-js沙盒)\n  - [4.8. 其他](#48-其他)\n- [5. 自动化测试](#5-自动化测试)\n  - [5.1. 单元测试](#51-单元测试)\n  - [5.2. 端到端测试 (E2E)](#52-端到端测试-e2e)\n  - [5.3. 其他](#53-其他)\n- [6. 框架与类库](#6-框架与类库)\n  - [6.1. React](#61-react)\n  - [6.2. Vue](#62-vue)\n  - [6.3. Redux](#63-redux)\n  - [6.4. RxJS](#64-rxjs)\n- [7. 新技术/方向](#7-新技术方向)\n  - [7.1. PWA](#71-pwa)\n  - [7.2. CSS Houdini](#72-css-houdini)\n  - [7.3. Web Components](#73-web-components)\n  - [7.4. 微前端（Micro Frontends）](#74-微前端micro-frontends)\n  - [7.5. HTTP/2](#75-http2)\n  - [7.6. WebAssembly](#76-webassembly)\n  - [7.7. 小程序](#77-小程序)\n  - [7.8. Serverless](#78-serverless)\n- [8. 业务相关](#8-业务相关)\n  - [8.1. 数据打点上报](#81-数据打点上报)\n  - [8.2. 前端监控](#82-前端监控)\n  - [8.3. A/B测试](#83-ab测试)\n  - [8.4. “服务端推”](#84-服务端推)\n  - [8.5. 动效](#85-动效)\n- [9. 其他](#9-其他)\n\n## 0. 年度报告\n\n- [2018 前端工具调查报告](https://ashleynolan.co.uk/blog/frontend-tooling-survey-2018-results)\n- [2018 JavaScript 调查报告](https://2018.stateofjs.com/)\n\n## 1. 基础拾遗\n\n\u003e 温故而知新，不知则习之，是以牢固根基。\n\n### 1.1. JavaScript\n\n- [You-Dont-Know-JS \\[英\\]](https://github.com/getify/You-Dont-Know-JS)\n- JavaScript 基础运行机制：\n  - [JS 引擎、运行时与调用栈概述 \\[英\\]](https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf)\n  - [V8 引擎简介 \\[英\\]](https://blog.sessionstack.com/how-javascript-works-inside-the-v8-engine-5-tips-on-how-to-write-optimized-code-ac089e62b12e)\n  - [内存管理与4中常见的泄漏 \\[英\\]](https://blog.sessionstack.com/how-javascript-works-memory-management-how-to-handle-4-common-memory-leaks-3f28b94cfbec)\n- Event Loop（面试里总会有一题 Event Loop…）：\n  - [从 Event Loop 规范探究 JavaScript 异步及浏览器更新渲染时机](https://github.com/aooy/blog/issues/5)\n  - [异步之 Event Loop \\[英\\]](https://blog.sessionstack.com/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with-2f077c4438b5)\n  - [NodeJS 中的 Event Loop、Timers 与 `process.nextTick()` \\[英\\]](https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/)\n  - [Tasks、Microtasks、Queues 与Schedules \\[英\\]](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/)\n- [Web Workers 及其5个常见使用场景 \\[英\\]](https://blog.sessionstack.com/how-javascript-works-the-building-blocks-of-web-workers-5-cases-when-you-should-use-them-a547c0757f6a)\n- [如何避免 async/await 地狱 \\[英\\]](https://medium.freecodecamp.org/avoiding-the-async-await-hell-c77a0fb71c4c)\n- [“回调地狱”的解决思路汇总](https://www.jianshu.com/p/bc7b8d542dcd)\n\n### 1.2. CSS\n\n- [You-Need-to-Know-CSS](https://lhammer.cn/You-need-to-know-css/#/)\n- [CSSOM 及其相关浏览器 API 使用指南 \\[英\\]](https://css-tricks.com/an-introduction-and-guide-to-the-css-object-model-cssom/)\n- [CSS布局指南](https://juejin.im/post/5b3b56a1e51d4519646204bb)\n- [CSS 中的各类换行处理方式 \\[英\\]](https://css-tricks.com/where-lines-break-is-complicated-heres-all-the-related-css-and-html/)：处理经典的换行问题\n- [浏览器将rem转成px时有精度误差怎么办？](https://www.zhihu.com/question/264372456)\n- [精准操控的滚动体验，浅谈新标准 Scroll Snap](https://juejin.im/post/5ba079e86fb9a05d1227fddb)\n- [如何完美实现一个非`button`元素的按钮 \\[英\\]](https://www.scottohara.me/blog/2018/10/03/unbutton-buttons.html)\n- [巧用 CSS Grid 来创建横向滚动容器 \\[英\\]](https://uxdesign.cc/creating-horizontal-scrolling-containers-the-right-way-css-grid-c256f64fc585)\n- [如何处理内联元素中的空隙 \\[英\\]](https://css-tricks.com/fighting-the-space-between-inline-block-elements/)\n- [CSS Stacking Context 里那些鲜为人知的坑](https://segmentfault.com/a/1190000002783265)\n- [在 (S)CSS 中实现主题功能的 4½ 种方法](https://juejin.im/post/5c0feb3bf265da616d5409a5)\n\n### 1.3. 浏览器\n\n- [浏览器的工作原理](https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/)\n- 现代浏览器内部是如何运行的：\n  - [Chrome浏览器概览](https://developers.google.com/web/updates/2018/09/inside-browser-part1)\n  - [浏览时发生了什么？](https://developers.google.com/web/updates/2018/09/inside-browser-part2)\n  - [渲染进程的内部工作原理](https://developers.google.com/web/updates/2018/09/inside-browser-part3)\n  - [compositor是如何来提高交互性能的？](https://developers.google.com/web/updates/2018/09/inside-browser-part4)\n- [完整的页面生命周期 API 介绍 \\[英\\]](https://developers.google.com/web/updates/2018/07/page-lifecycle-api)\n- [四个新的观察者：Intersection / Mutation / Resize / Performance (Observer)](https://www.zeolearn.com/magazine/different-types-of-observers-supported-by-modern-browsers)\n- [渲染引擎工作方式及优化建议 \\[英\\]](https://blog.sessionstack.com/how-javascript-works-the-rendering-engine-and-tips-to-optimize-its-performance-7b95553baeda)\n- [浏览器内核渲染：重建引擎](https://juejin.im/post/5bbaa7da6fb9a05d3761aafe)\n- [跨域解决方案汇总](https://www.jianshu.com/p/438183ddcea8)\n\n## 2. 工程化与工具\n\n\u003e 软件规模的扩大带来了工程化的需求，前端也不例外。随着 NodeJS 的出现，前端工程师可以使用熟悉的 JS 快速开发所需的工具。工具链生态的繁荣也是前端圈繁荣的一个写照。\n\n### 2.1. webpack\n\n- [webpack 中的 Chunk 关系图算法 \\[英\\]](https://medium.com/webpack/the-chunk-graph-algorithm-week-26-29-7c88aa5e4b4e)\n- [webpack 进阶系列文章](https://juejin.im/post/5bc1a73df265da0a8d36b74f#heading-13)\n- 编译优化：\n  - [如何提升大型项目中 webpack 的性能 🎥 \\[英\\]](https://www.youtube.com/watch?v=AifDI71uqF0)\n  - [运行时优化：Separating a Manifest \\[英\\]](https://survivejs.com/webpack/optimizing/separating-manifest)\n  - [在 webpack 中使用 \\\u003clink rel=”prefetch/preload”\u003e \\[英\\]](https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c)\n  - [如何更好使用 webpack tree-shaking](https://juejin.im/post/5b8ce49df265da438151b468)\n- 关于 webpack 编译缓存的讨论：\n  - [mzgoddard's comment](https://github.com/webpack/webpack/issues/250#issuecomment-240643985)\n  - [\\[spec: webpack 5\\] - A module disk cache between build processes](https://github.com/webpack/webpack/issues/6527)\n\n### 2.2. Gulp\n\n- [Gulp 4 简介 \\[英\\]](https://fettblog.eu/gulp-4-parallel-and-series/)\n- [基于Gulp的多页面应用实践指南](https://www.jianshu.com/p/35571124770f)\n\n### 2.3. Linter\n\n- [JS Linter 进化史](https://zhuanlan.zhihu.com/p/34656263)\n- [为何要在项目汇总使用 ESLint \\[英\\]](https://medium.com/the-node-js-collection/why-and-how-to-use-eslint-in-your-project-742d0bc61ed7)\n\n### 2.4. 静态类型（Typescript/Flow）\n\n- [Typescript 总体架构 \\[英\\]](https://github.com/Microsoft/TypeScript/wiki/Architectural-Overview)\n- 为什么要在 JavaScript 中进行静态类型检查：\n  - [第一部分](https://www.jianshu.com/p/bda750e2d15e)\n  - [第二、三部分](https://www.jianshu.com/p/289b3c734a9f)\n  - [第四部分](https://www.jianshu.com/p/d23f93be8821)\n\n### 2.5. Babel\n\n- [Babel 用户手册](https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/user-handbook.md)\n- [Babel 插件手册](https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/plugin-handbook.md)\n- [如何通过 Babel 实现你的自定义 JS 语法](https://lihautan.com/creating-custom-javascript-syntax-with-babel/)\n\n### 2.6. CSS预处理与模块化\n\n- [CSS 进化史 \\[英\\]](https://medium.com/@perezpriego7/css-evolution-from-css-sass-bem-css-modules-to-styled-components-d4c1da3a659b)\n- [CSS 模块化方案系列](https://juejin.im/post/5b20e8e0e51d4506c60e47f5)\n\n## 3. 性能优化\n\n\u003e 性能优化其实就是在理解浏览器的基础上“因地制宜”，因此可以配合1.3节“浏览器”部分进行理解。\n\n强烈推荐把 [Google Web 上性能优化](https://developers.google.com/web/fundamentals/performance/why-performance-matters/) Tab 中的文章都通读一遍，其基本涵盖了现代浏览器中性能优化的所有点。笔者也梳理了一份[「前端性能优化指南 🚀」](https://alienzhou.github.io/fe-performance-journey/)，可以帮助大家系统地了解和学习前端性能优化。\n\n下面也摘录了其中一些个人认为非常不错的文章。\n\n### 3.1. 加载性能\n\n- [PRPL 模式 \\[英\\]](https://developers.google.com/web/fundamentals/performance/prpl-pattern/)\n- [图片懒加载完全指南 \\[英\\]](https://css-tricks.com/the-complete-guide-to-lazy-loading-images)\n- [使用 Intersection Observer 来懒加载图片 \\[英\\]](http://deanhume.com/lazy-loading-images-using-intersection-observer/)\n- [图片与视频懒加载的详细指南 \\[英\\]](https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/)\n- [使用 Application Shell 架构来实现秒开应用 \\[英\\]](https://developers.google.com/web/updates/2015/11/app-shell)\n\n### 3.2. 运行时性能\n\n- [避免大型、复杂的布局和布局抖动 \\[英\\]](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing?hl=zh-cn#avoid-forced-synchronous-layouts)\n- [什么导致强制同步布局（reflow）？ \\[英\\]](https://gist.github.com/paulirish/5d52fb081b3570c81e3a)\n- [如何诊断强制同步布局 \\[英\\]](https://developers.google.com/web/tools/chrome-devtools/rendering-tools/forced-synchronous-layouts?hl=zh-cn)\n- [无线性能优化：Composite](http://taobaofed.org/blog/2016/04/25/performance-composite/)\n- [如何不择手段提升scroll事件的性能](https://zhuanlan.zhihu.com/p/30078937)\n- [使用 passive event listener 来提高滚动流畅性 \\[英\\]](https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md)\n- 节流和去抖（throttle \u0026 debounce）\n  - [JavaScript 函数节流和函数去抖应用场景辨析](https://github.com/hanzichi/underscore-analysis/issues/20)\n  - [underscore 函数去抖的实现](https://github.com/hanzichi/underscore-analysis/issues/21)\n- requestIdleCallback\n  - [requestIdleCallback使用入门 \\[英\\]](https://developers.google.com/web/updates/2015/08/using-requestidlecallback)\n  - [Idle Until Urgent \\[英\\]](https://philipwalton.com/articles/idle-until-urgent)：requestIdleCallback的妙用\n\n### 3.3. 前端缓存\n\n- [Web 缓存简介：以购买牛奶的为例 \\[英\\]](https://dev.to/kbk0125/web-caching-explained-by-buying-milk-at-the-supermarket-9k4)\n- [大话前端缓存 \\[英\\]](https://calendar.perfplanet.com/2016/a-tale-of-four-caches/)\n- [缓存（一）—— 缓存总览：从性能优化的角度看缓存](https://github.com/amandakelake/blog/issues/43)\n- [缓存（二）—— 浏览器缓存机制：强缓存、协商缓存](https://github.com/amandakelake/blog/issues/41)\n- [缓存（三）—— 数据存储：cookie、Storage、indexedDB](https://github.com/amandakelake/blog/issues/13)\n\n### 3.4. 性能调试与实践\n\n- [使用 Chrome DevTools 提升页面速度 \\[英\\]](https://developers.google.com/web/tools/chrome-devtools/speed/get-started)：Chrome DevTools实操讲解\n- [了解 DevTools 中的 Resource Timing](https://developers.google.com/web/tools/chrome-devtools/network-performance/understanding-resource-timing)\n- [淘宝新势力周H5性能优化实战](https://segmentfault.com/a/1190000014359615)\n- [优化打包策略来提升页面加载速度](https://juejin.im/post/5aed037b6fb9a07aa047e1e1)\n- [Chrome DevTools 中你可能不知道的调试技巧](https://zhuanlan.zhihu.com/p/42059158)\n- [前端性能测量 \\[英\\]](https://speedcurve.com/blog/user-timing-and-custom-metrics/)\n\n### 3.5. 性能指标\n\n- [以用户为中心的前端性能指标 \\[英\\]](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics)：前端性能指标的来龙去脉\n- DOMContentLoaded:\n  - [你不知道的 DOMContentLoaded](https://zhuanlan.zhihu.com/p/25876048)\n  - [Deciphering the Critical Rendering Path \\[英\\]](https://calendar.perfplanet.com/2012/deciphering-the-critical-rendering-path/)\n- FP (First Paint)：\n  - [Chrome的First Paint](http://eux.baidu.com/blog/fe/Chrome%E7%9A%84First%20Paint)\n- FCP (First Contentful Paint)：\n  - [First Contentful Paint Explained \\[英\\]](https://gtmetrix.com/blog/first-contentful-paint-explained/)\n  - [First Contentful Paint \\[英\\]](https://developers.google.com/web/tools/lighthouse/audits/first-contentful-paint)\n- FMP (First Meaningful Paint)：\n  - [Chrome 中的 First Meaningful Paint](https://juejin.im/entry/598080226fb9a03c5d535cd5)\n  - [Time to First Meaningful Paint](https://docs.google.com/document/d/1BR94tJdZLsin5poeet0XoTW60M0SjvOJQttKT-JK8HI/view?hl=zh-cn#heading=h.k50nnyhtptq0)\n- TTI (Time to interactive)：\n  - [Time to Interactive Explainer](https://github.com/WICG/time-to-interactive)\n  - [衡量用户体验的新标准](https://calendar.perfplanet.com/2017/time-to-interactive-measuring-more-of-the-user-experience/)\n- TTFB (Time To First Byte)：\n  - [TTFB，以及页面加载的时间节点](https://zhuanlan.zhihu.com/p/23588780)\n- FID (First Input Delay)：\n  - [First Input Delay](https://developers.google.com/web/updates/2018/05/first-input-delay)\n- Speed Index：\n  - [WebPagetest: Speed Index](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index)\n\n## 4. 安全\n\n\u003e 很多安全风险老生常谈，但是往往到出现问题时，才会被重视或者意识到。\n\n- [8大前端安全问题上篇](https://insights.thoughtworks.cn/eight-security-problems-in-front-end/)\n- [8大前端安全问题下篇](http://insights.thoughtworks.cn/eight-security-problems-in-front-end-2/)\n- [概念讲解：编码、加密、哈希与混淆 \\[英\\]](https://danielmiessler.com/study/encoding-encryption-hashing-obfuscation)\n- [常见 Web 安全攻防总结](https://zoumiaojiang.com/article/common-web-security/)\n\n### 4.1. XSS\n\n- [如何防止XSS攻击？](https://tech.meituan.com/fe_security.html)\n\n### 4.2. CSRF\n\n- [如何防止CSRF攻击？](https://juejin.im/post/5bc009996fb9a05d0a055192)\n- [Site Isolation \\[英\\]](https://developers.google.com/web/updates/2018/07/site-isolation)：Chrome的新特性\n\n### 4.3. CSP\n\n- [Content Security Policy 入门教程](http://www.ruanyifeng.com/blog/2016/09/csp.html)\n- [Content Security Policy (CSP) \\[英\\]](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)\n\n### 4.4. HTTPS\n\n- [图文还原 HTTPS 原理](https://mp.weixin.qq.com/s/3NKOCOeIUF2SGJnY7II9hA)\n- [浅谈有赞全站 HTTPS 推进](https://segmentfault.com/a/1190000013635363)\n\n### 4.5. 安全实录\n\n- [About `rel=noopener` \\[英\\]](https://mathiasbynens.github.io/rel-noopener/)：打开一个新页面是如何带来安全隐患的\n- [一种新型的“钓鱼”方式 \\[英\\]](http://www.azarask.in/blog/post/a-new-type-of-phishing-attack/)\n- [一个媒体文件请求引发的跨站风险 \\[英\\]](https://jakearchibald.com/2018/i-discovered-a-browser-bug)\n- [Mitigating Spectre \\[英\\]](https://security.googleblog.com/2018/07/mitigating-spectre-with-site-isolation.html)： Chrome 中的跨站安全问题\n\n### 4.6. 代码保护\n\n- [JavaScript 混淆安全加固](https://segmentfault.com/a/1190000019423501)\n- [前端核心代码保护技术面面观](https://zhuanlan.zhihu.com/p/61651310)\n\n### 4.7. JS沙盒\n\n- [如何在 Web 上实现一个插件系统 \\[英\\]](https://www.figma.com/blog/how-we-built-the-figma-plugin-system/)\n- [如何安全地运行用户的 JavaScript 脚本](https://zhuanlan.zhihu.com/p/46571509)\n\n### 4.8. 其他\n\n- [一些安全相关的HTTP响应头](https://imququ.com/post/web-security-and-response-header.html)\n\n## 5. 自动化测试\n\n\u003e 自动化测试是软件工程的重要部分之一，但却极容易被忽视。\n\n- [2018 前端自动化测试综述 \\[英\\]](https://medium.com/welldone-software/an-overview-of-javascript-testing-in-2018-f68950900bc3)\n- [测试你的前端代码（介绍篇）\\[英\\]](https://hackernoon.com/testing-your-frontend-code-part-i-introduction-7e307eac4446)\n\n### 5.1. 单元测试\n\n- [测试你的前端代码（单元测试篇）\\[英\\]](https://hackernoon.com/testing-your-frontend-code-part-ii-unit-testing-1d05f8d50859)\n- [Fakes、Mocks 以及 Stubs 概念明晰](https://zhuanlan.zhihu.com/p/26942686)\n- [测试覆盖（率）到底有什么用？](http://www.infoq.com/cn/articles/test-coverage-rate-role)\n\n### 5.2. 端到端测试 (E2E)\n\n- [测试你的前端代码（E2E 测试篇）\\[英\\]](https://hackernoon.com/testing-your-frontend-code-part-iii-e2e-testing-e9261b56475)\n- [什么是一个好的 E2E 测试？\\[英\\]](https://testing.googleblog.com/2016/09/testing-on-toilet-what-makes-good-end.html)\n- [平衡单元测试和端到端测试](http://www.infoq.com/cn/articles/balancing-unit-and-end-to-end-tests)\n- [对过多的 E2E 测试说“不” \\[英\\]](https://testing.googleblog.com/2015/04/just-say-no-to-more-end-to-end-tests.html)\n\n### 5.3. 其他\n\n- [测试你的前端代码（集成测试篇）\\[英\\]](https://hackernoon.com/testing-your-frontend-code-part-iv-integration-testing-f1f4609dc4d9)\n- [测试你的前端代码（可视化测试篇）\\[英\\]](https://medium.com/@giltayar/testing-your-frontend-code-part-v-visual-testing-935864cfb5c7)\n- [关于 Property Based Testing 的介绍 \\[英\\]](https://medium.com/criteo-labs/introduction-to-property-based-testing-f5236229d237)\n\n## 6. 框架与类库\n\n\u003e 如果说基础知识是道，那框架与工具可能就是术；学习与理解它们，但千万不要成为它们的奴隶。\n\n### 6.1. React\n\n- [手把手教你如何实现一个简易的 React \\[英\\]](https://engineering.hexacta.com/didact-learning-how-react-works-by-building-it-from-scratch-51007984e5c5)\n- [React 底层揭秘 \\[英\\]](https://bogdan-lyashenko.github.io/Under-the-hood-ReactJS/)\n- [你所需要知道的 React 细节](https://github.com/hateonion/react-bits-CN)\n- [React Fiber 架构](https://zhuanlan.zhihu.com/p/37095662)\n- [React 16 Fiber 源码速览](http://zxc0328.github.io/2017/09/28/react-16-source/)\n- [React 是怎样炼成的](https://segmentfault.com/a/1190000013365426)：React早期的进化之路\n- 从零开始实现一个React：\n  - [1. JSX和虚拟DOM](https://github.com/hujiulong/blog/issues/4)\n  - [2. 组件和生命周期](https://github.com/hujiulong/blog/issues/5)\n  - [3. diff算法](https://github.com/hujiulong/blog/issues/6)\n  - [4. 异步的setState](https://github.com/hujiulong/blog/issues/7)\n- [「react技术栈」单页应用实践快速入门](https://www.jianshu.com/p/0b2acb50f321)\n- [React 生命周期图示](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/)\n\n### 6.2. Vue\n\n- [深入浅出 - vue变化侦测原理](https://github.com/berwin/Blog/issues/17)\n- [Vue 模板编译原理](https://github.com/berwin/Blog/issues/18)\n\n### 6.3. Redux\n\n- [重新设计 Redux \\[英\\]](https://hackernoon.com/redesigning-redux-b2baee8b8a38)：Rematch\n- [如何用 GraphQL 来替代 Redux \\[英\\]](https://hackernoon.com/how-graphql-replaces-redux-3fff8289221d)\n- [解读 Redux 的设计思路与用法](https://div.io/topic/1309)\n- [(Redux)应用构建的三个原则 \\[英\\]](https://jaysoo.ca/2016/02/28/organizing-redux-application/#rule-1-organize-by-feature)\n- [React-Redux 的发展历史与实现 \\[英\\]](https://blog.isquaredsoftware.com/2018/11/react-redux-history-implementation/)\n\n### 6.4. RxJS\n\n- [ReactiveX 官网](http://reactivex.io/)：宝石图真的非常形象易读\n- [响应式编程，是明智的选择](https://www.cnblogs.com/android-blogs/p/5586395.html)\n- [图解RxJS \\[英\\]](https://blog.angularindepth.com/learn-to-combine-rxjs-sequences-with-super-intuitive-interactive-diagrams-20fce8e6511)\n- [调试RxJS：Tooling \\[英\\]](https://blog.angularindepth.com/debugging-rxjs-4f0340286dd3)\n- [调试RxJS：Logging \\[英\\]](https://blog.angularindepth.com/debugging-rxjs-part-2-logging-56904459f144)\n\n## 7. 新技术/方向\n\n\u003e 前端领域新技术、新方向层出不穷，这里汇总一些新技术方向；作为开发者需要多了解但是不要盲从\n\n### 7.1. PWA\n\n- [PWA 学习与实践系列](https://juejin.im/post/5ac8a67c5188255c5668b0b8#heading-3)\n- [Service Worker 入门简介 \\[英\\]](https://medium.freecodecamp.org/service-workers-the-little-heroes-behind-progressive-web-apps-431cc22d0f16)\n- [PWA 在 iOS 平台上的特殊问题 \\[英\\]](https://medium.com/@firt/pwas-are-coming-to-ios-11-3-cupertino-we-have-a-problem-2ff49fd7d6ea)\n- [在你的 PWA 中小心使用 iOS 的 meta 标签 \\[英\\]](https://medium.com/@firt/dont-use-ios-web-app-meta-tag-irresponsibly-in-your-progressive-web-apps-85d70f4438cb)\n- [饿了么的 PWA 升级实践](https://medium.com/elemefe/upgrading-ele-me-to-progressive-web-app-2a446832e509)\n- [离线指南](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/)\n- [Android 中的 WebAPKs \\[英\\]](https://developers.google.cn/web/fundamentals/integration/webapks?hl=zh-cn)\n- [Pinterest 的 PWA 实践 \\[英\\]](https://medium.com/@Pinterest_Engineering/a-one-year-pwa-retrospective-f4a2f4129e05)\n- [异步 HTTP Cookies API \\[英\\]](https://developers.google.com/web/updates/2018/09/asynchronous-access-to-http-cookies)：赋能Service Worker\n\n### 7.2. CSS Houdini\n\n- [认识 Houdini 与 CSS Paint API \\[英\\]](https://codersblock.com/blog/say-hello-to-houdini-and-the-css-paint-api/)\n- [用 Houdini 来拯救 CSS Polyfill \\[英\\]](https://philipwalton.com/articles/the-dark-side-of-polyfilling-css/)\n\n### 7.3. Web Components\n\n- [Web Components 基本概念和用法](https://developer.mozilla.org/zh-CN/docs/Web/Web_Components)\n- [Web Components 指南 \\[英\\]](https://css-tricks.com/modular-future-web-components/)\n- [Shadow DOM 使用简介](http://web.jobbole.com/87088/)\n- [HTMLUnknownElement 与 HTML5 自定义元素的故事](http://www.zhangxinxu.com/wordpress/2018/03/htmlunknownelement-html5-custom-elements/)\n\n### 7.4. 微前端（Micro Frontends）\n\n- [微前端主页 \\[英\\]](https://micro-frontends.org/)\n- [微前端的那些事儿](https://microfrontend.cn/)\n- [技术雷达之「微前端」- 将微服务理念扩展到前端开发](https://zhuanlan.zhihu.com/p/32378432)\n\n### 7.5. HTTP/2\n\n- [HTTP/2 幕后原理](https://www.ibm.com/developerworks/cn/web/wa-http2-under-the-hood/index.html)\n- [全面介绍的 HTTP/2 \\[英\\]](https://hpbn.co/http2/)\n- [HTTP/2 主页](https://http2.github.io/):\n  - [HTTP/2 协议 \\[英\\]](https://httpwg.org/specs/rfc7540.html)\n  - [HPACK: HTTP/2 Header压缩 \\[英\\]](https://httpwg.org/specs/rfc7541.html)\n\n### 7.6. WebAssembly\n\n- [WebAssembly 官网](https://webassembly.org/)\n- [WebAssembly 现状与实战](https://www.ibm.com/developerworks/cn/web/wa-lo-webassembly-status-and-reality/index.html)\n- WebAssembly 系列：\n  - [一、生动形象地介绍 WebAssembly](https://segmentfault.com/a/1190000008714589)\n  - [二、JavaScript Just-in-time (JIT) 工作原理](https://segmentfault.com/a/1190000008632441)\n  - [三、编译器如何生成汇编](https://segmentfault.com/a/1190000008664761)\n  - [四、WebAssembly 工作原理](https://segmentfault.com/a/1190000008686643)\n  - [五、为什么 WebAssembly 更快？](https://segmentfault.com/a/1190000008699213)\n  - [六、WebAssembly 的现在与未来](https://segmentfault.com/a/1190000008714515)\n\n### 7.7. 小程序\n\n- [微信，支付宝小程序实现原理概述](https://segmentfault.com/a/1190000018631528)\n- [小程序底层实现原理及一些思考](https://github.com/berwin/Blog/issues/43)\n\n### 7.8. Serverless\n\n- [Serverless 给前端带来了什么](https://zhuanlan.zhihu.com/p/58877583)\n- [基于 Serverless 的淘宝前端研发模式升级](https://www.infoq.cn/article/KFNcm7Pbq*eIV2dQIpRX)\n- [Serverless，将给前端发展带来大变革的技术？](https://mp.weixin.qq.com/s/ooX7uMFjxFfSai9URo6kYw)\n- [Why Netflix Rolled Its Own Node.js Functions-as-a-Service for its API Platform](https://thenewstack.io/why-netflix-rolled-its-own-node-js-functions-as-a-service-runtime?utm_source=mybridge\u0026utm_medium=blog\u0026utm_campaign=read_more)\n\n## 8. 业务相关\n\n\u003e 在业务中往往还有一些与“业务无关”的场景需求 —— 不论是什么业务几乎都会遇到；因此，在变与不变中，我们更需要去抽象出这些问题。\n\n### 8.1. 数据打点上报\n\n- [如何精确统计页面停留时长](https://techblog.toutiao.com/2018/06/05/ru-he-jing-que-tong-ji-ye-mian-ting-liu-shi-chang/)\n- [揭开JS无埋点技术的神秘面纱](http://unclechen.github.io/2018/06/24/%E6%8F%AD%E5%BC%80JS%E6%97%A0%E5%9F%8B%E7%82%B9%E6%8A%80%E6%9C%AF%E7%9A%84%E7%A5%9E%E7%A7%98%E9%9D%A2%E7%BA%B1/)\n\n### 8.2. 前端监控\n\n- [前端异常监控解决方案研究](https://cdc.tencent.com/2018/09/13/frontend-exception-monitor-research/)\n- [监控平台前端SDK开发实践](https://tech.meituan.com/hunt_sdk_practice.html)\n- [把前端监控做到极致](https://zhuanlan.zhihu.com/p/32262716)\n- [前端监控系统探索总结](https://juejin.im/post/5a3e121451882533f01ec66d)\n- [60 天急速自研-搭建前端埋点监控系统](https://juejin.im/post/5d8d9eeaf265da5b783ef45c)\n\n### 8.3. A/B测试\n\n- Twitter的A/B测试实践：\n  - [一、为什么要测试以及测试的意义](http://www.infoq.com/cn/articles/twitter-ab-test-practise-part01)\n  - [二、技术概述](http://www.infoq.com/cn/articles/twitter-ab-test-practise-part02)\n  - [三、检测和避免 A/B Test中 bucket不平衡问题](http://www.infoq.com/cn/articles/twitter-ab-test-practise-part03)\n  - [四、A/B Test中使用多个控制的启示](http://www.infoq.com/cn/articles/twitter-ab-test-practise-part04)\n- [Netflix A/B Test 实验平台实践 \\[英\\]](https://medium.com/netflix-techblog/its-all-a-bout-testing-the-netflix-experimentation-platform-4e1ca458c15)\n- 指导方法\n  - [实验中容易遇到的七种问题 \\[英\\]](https://www.exp-platform.com/Documents/2009-ExPpitfalls.pdf)\n  - [实验的七个准则 \\[英\\]](https://www.exp-platform.com/Documents/2014%20experimentersRulesOfThumb.pdf)\n  - [小流量如何进行AB测试](https://www.jianshu.com/p/3ab537f16b81)\n- 案例分享\n  - [大众点评AB测试框架Gemini](https://www.csdn.net/article/2015-03-24/2824303)\n  - [新浪新闻客户端AB测试与灰度发布](https://segmentfault.com/a/1190000012377139)\n  - [天猫App A/B测试实践](http://www.infoq.com/cn/articles/tmall-app-ab-test)\n- 工具\n  - [AB测试样本数量计算器](https://www.eyeofcloud.com/124.html)\n  - [AB测试结果有效性分析工具](https://www.eyeofcloud.com/126.html)\n\n### 8.4. “服务端推”\n\n- [各类“服务器推”技术原理与实例](https://juejin.im/post/5b135b78f265da6e420eab7d)\n- [长连接/websocket/SSE等主流服务器推送技术比较](https://zhuanlan.zhihu.com/p/31297574)\n- [Comet：基于 HTTP 长连接的“服务器推”技术](https://www.ibm.com/developerworks/cn/web/wa-lo-comet/)\n- [深入 WebSockets、HTTP/2 SSE \\[英\\]](https://blog.sessionstack.com/how-javascript-works-deep-dive-into-websockets-and-http-2-with-sse-how-to-pick-the-right-path-584e6b8e3bf7)\n- [WebSocket 应用安全问题分析](https://security.tencent.com/index.php/blog/msg/119)\n\n### 8.5. 动效\n\n- [动画设计的12个原则🎥 \\[英\\]](https://www.youtube.com/watch?v=uDqjIdI4bF4)\n- [贝塞尔曲线扫盲](http://www.html-js.com/article/1628)\n- [动画：从 AE 到 Web](https://aotu.io/notes/2018/03/06/ae2web/)\n- 最全最好用的动效落地方法：\n  - [基础知识](https://zhuanlan.zhihu.com/p/34501702)\n  - [落地方式](https://zhuanlan.zhihu.com/p/34815524)\n\n## 9. 其他\n\n\u003e 开卷有益。\n\n- [Recursion? We don't need no stinking recursion!](http://raganwald.com/2018/05/20/we-dont-need-no-stinking-recursion.html)：如何将一些递归改为循环\n- [Turning your web traffic into a Super Computer](https://ben.akrin.com/?p=5997)：通过 Web Worker 和 WebSocket 来将全世界的电脑连接成超级计算机\n- [Designing very large (JavaScript) applications](https://medium.com/@cramforce/designing-very-large-javascript-applications-6e013a3291a3)：高屋建瓴\n- [Building a professional design tool on the web](https://www.figma.com/blog/building-a-professional-design-tool-on-the-web/)：如何使用 Web 技术来创建一个设计/渲染系统\n- [Crafting Interpreters](https://craftinginterpreters.com/)：详细介绍了如何实现一个解释器\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falienzhou%2Ffrontend-tech-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falienzhou%2Ffrontend-tech-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falienzhou%2Ffrontend-tech-list/lists"}