├── .gitignore ├── README.md ├── package.json └── script ├── md2html.js └── tpl.html /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | package-lock.json 3 | build -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 前端技术清单 2 | 3 | > 最后更新：2019/10/09 [新增内容 (diff) >>](https://github.com/alienzhou/frontend-tech-list/commit/9e73eb648cb1b7413ecca0c5fe3ebb81f4dea0fe?short_path=04c6e90#diff-04c6e90faac2675aa89e2176d2eec7d8) 4 | 5 | 学习文章的知识往往是碎片化的。而前端涉及到的面很广，这些知识如果不进行有效梳理，则无法相互串联、形成体系。因此，我结合工作体会将抽象出了一些前端基础能力，并将看过、写过的一些不错的文章进行整理，形成了一份（纯）前端技术清单。 6 | 7 | 不论你是正在自学前端，还是对前端某些技术熟练掌握但某些还未涉足，我都希望这份清单能帮助你 review 一些前端的基础能力。 8 | 9 | - [0. 年度报告](#0-年度报告) 10 | - [1. 基础拾遗](#1-基础拾遗) 11 | - [1.1. JavaScript](#11-javascript) 12 | - [1.2. CSS](#12-css) 13 | - [1.3. 浏览器](#13-浏览器) 14 | - [2. 工程化与工具](#2-工程化与工具) 15 | - [2.1. webpack](#21-webpack) 16 | - [2.2. Gulp](#22-gulp) 17 | - [2.3. Linter](#23-linter) 18 | - [2.4. 静态类型（Typescript/Flow）](#24-静态类型typescriptflow) 19 | - [2.5. Babel](#25-babel) 20 | - [2.6. CSS预处理与模块化](#26-css预处理与模块化) 21 | - [3. 性能优化](#3-性能优化) 22 | - [3.1. 加载性能](#31-加载性能) 23 | - [3.2. 运行时性能](#32-运行时性能) 24 | - [3.3. 前端缓存](#33-前端缓存) 25 | - [3.4. 性能调试与实践](#34-性能调试与实践) 26 | - [3.5. 性能指标](#35-性能指标) 27 | - [4. 安全](#4-安全) 28 | - [4.1. XSS](#41-xss) 29 | - [4.2. CSRF](#42-csrf) 30 | - [4.3. CSP](#43-csp) 31 | - [4.4. HTTPS](#44-https) 32 | - [4.5. 安全实录](#45-安全实录) 33 | - [4.6. 代码保护](#46-代码保护) 34 | - [4.7. JS沙盒](#47-js沙盒) 35 | - [4.8. 其他](#48-其他) 36 | - [5. 自动化测试](#5-自动化测试) 37 | - [5.1. 单元测试](#51-单元测试) 38 | - [5.2. 端到端测试 (E2E)](#52-端到端测试-e2e) 39 | - [5.3. 其他](#53-其他) 40 | - [6. 框架与类库](#6-框架与类库) 41 | - [6.1. React](#61-react) 42 | - [6.2. Vue](#62-vue) 43 | - [6.3. Redux](#63-redux) 44 | - [6.4. RxJS](#64-rxjs) 45 | - [7. 新技术/方向](#7-新技术方向) 46 | - [7.1. PWA](#71-pwa) 47 | - [7.2. CSS Houdini](#72-css-houdini) 48 | - [7.3. Web Components](#73-web-components) 49 | - [7.4. 微前端（Micro Frontends）](#74-微前端micro-frontends) 50 | - [7.5. HTTP/2](#75-http2) 51 | - [7.6. WebAssembly](#76-webassembly) 52 | - [7.7. 小程序](#77-小程序) 53 | - [7.8. Serverless](#78-serverless) 54 | - [8. 业务相关](#8-业务相关) 55 | - [8.1. 数据打点上报](#81-数据打点上报) 56 | - [8.2. 前端监控](#82-前端监控) 57 | - [8.3. A/B测试](#83-ab测试) 58 | - [8.4. “服务端推”](#84-服务端推) 59 | - [8.5. 动效](#85-动效) 60 | - [9. 其他](#9-其他) 61 | 62 | ## 0. 年度报告 63 | 64 | - [2018 前端工具调查报告](https://ashleynolan.co.uk/blog/frontend-tooling-survey-2018-results) 65 | - [2018 JavaScript 调查报告](https://2018.stateofjs.com/) 66 | 67 | ## 1. 基础拾遗 68 | 69 | > 温故而知新，不知则习之，是以牢固根基。 70 | 71 | ### 1.1. JavaScript 72 | 73 | - [You-Dont-Know-JS \[英\]](https://github.com/getify/You-Dont-Know-JS) 74 | - JavaScript 基础运行机制： 75 | - [JS 引擎、运行时与调用栈概述 \[英\]](https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf) 76 | - [V8 引擎简介 \[英\]](https://blog.sessionstack.com/how-javascript-works-inside-the-v8-engine-5-tips-on-how-to-write-optimized-code-ac089e62b12e) 77 | - [内存管理与4中常见的泄漏 \[英\]](https://blog.sessionstack.com/how-javascript-works-memory-management-how-to-handle-4-common-memory-leaks-3f28b94cfbec) 78 | - Event Loop（面试里总会有一题 Event Loop…）： 79 | - [从 Event Loop 规范探究 JavaScript 异步及浏览器更新渲染时机](https://github.com/aooy/blog/issues/5) 80 | - [异步之 Event Loop \[英\]](https://blog.sessionstack.com/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with-2f077c4438b5) 81 | - [NodeJS 中的 Event Loop、Timers 与 `process.nextTick()` \[英\]](https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/) 82 | - [Tasks、Microtasks、Queues 与Schedules \[英\]](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/) 83 | - [Web Workers 及其5个常见使用场景 \[英\]](https://blog.sessionstack.com/how-javascript-works-the-building-blocks-of-web-workers-5-cases-when-you-should-use-them-a547c0757f6a) 84 | - [如何避免 async/await 地狱 \[英\]](https://medium.freecodecamp.org/avoiding-the-async-await-hell-c77a0fb71c4c) 85 | - [“回调地狱”的解决思路汇总](https://www.jianshu.com/p/bc7b8d542dcd) 86 | 87 | ### 1.2. CSS 88 | 89 | - [You-Need-to-Know-CSS](https://lhammer.cn/You-need-to-know-css/#/) 90 | - [CSSOM 及其相关浏览器 API 使用指南 \[英\]](https://css-tricks.com/an-introduction-and-guide-to-the-css-object-model-cssom/) 91 | - [CSS布局指南](https://juejin.im/post/5b3b56a1e51d4519646204bb) 92 | - [CSS 中的各类换行处理方式 \[英\]](https://css-tricks.com/where-lines-break-is-complicated-heres-all-the-related-css-and-html/)：处理经典的换行问题 93 | - [浏览器将rem转成px时有精度误差怎么办？](https://www.zhihu.com/question/264372456) 94 | - [精准操控的滚动体验，浅谈新标准 Scroll Snap](https://juejin.im/post/5ba079e86fb9a05d1227fddb) 95 | - [如何完美实现一个非`button`元素的按钮 \[英\]](https://www.scottohara.me/blog/2018/10/03/unbutton-buttons.html) 96 | - [巧用 CSS Grid 来创建横向滚动容器 \[英\]](https://uxdesign.cc/creating-horizontal-scrolling-containers-the-right-way-css-grid-c256f64fc585) 97 | - [如何处理内联元素中的空隙 \[英\]](https://css-tricks.com/fighting-the-space-between-inline-block-elements/) 98 | - [CSS Stacking Context 里那些鲜为人知的坑](https://segmentfault.com/a/1190000002783265) 99 | - [在 (S)CSS 中实现主题功能的 4½ 种方法](https://juejin.im/post/5c0feb3bf265da616d5409a5) 100 | 101 | ### 1.3. 浏览器 102 | 103 | - [浏览器的工作原理](https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/) 104 | - 现代浏览器内部是如何运行的： 105 | - [Chrome浏览器概览](https://developers.google.com/web/updates/2018/09/inside-browser-part1) 106 | - [浏览时发生了什么？](https://developers.google.com/web/updates/2018/09/inside-browser-part2) 107 | - [渲染进程的内部工作原理](https://developers.google.com/web/updates/2018/09/inside-browser-part3) 108 | - [compositor是如何来提高交互性能的？](https://developers.google.com/web/updates/2018/09/inside-browser-part4) 109 | - [完整的页面生命周期 API 介绍 \[英\]](https://developers.google.com/web/updates/2018/07/page-lifecycle-api) 110 | - [四个新的观察者：Intersection / Mutation / Resize / Performance (Observer)](https://www.zeolearn.com/magazine/different-types-of-observers-supported-by-modern-browsers) 111 | - [渲染引擎工作方式及优化建议 \[英\]](https://blog.sessionstack.com/how-javascript-works-the-rendering-engine-and-tips-to-optimize-its-performance-7b95553baeda) 112 | - [浏览器内核渲染：重建引擎](https://juejin.im/post/5bbaa7da6fb9a05d3761aafe) 113 | - [跨域解决方案汇总](https://www.jianshu.com/p/438183ddcea8) 114 | 115 | ## 2. 工程化与工具 116 | 117 | > 软件规模的扩大带来了工程化的需求，前端也不例外。随着 NodeJS 的出现，前端工程师可以使用熟悉的 JS 快速开发所需的工具。工具链生态的繁荣也是前端圈繁荣的一个写照。 118 | 119 | ### 2.1. webpack 120 | 121 | - [webpack 中的 Chunk 关系图算法 \[英\]](https://medium.com/webpack/the-chunk-graph-algorithm-week-26-29-7c88aa5e4b4e) 122 | - [webpack 进阶系列文章](https://juejin.im/post/5bc1a73df265da0a8d36b74f#heading-13) 123 | - 编译优化： 124 | - [如何提升大型项目中 webpack 的性能 🎥 \[英\]](https://www.youtube.com/watch?v=AifDI71uqF0) 125 | - [运行时优化：Separating a Manifest \[英\]](https://survivejs.com/webpack/optimizing/separating-manifest) 126 | - [在 webpack 中使用 \ \[英\]](https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c) 127 | - [如何更好使用 webpack tree-shaking](https://juejin.im/post/5b8ce49df265da438151b468) 128 | - 关于 webpack 编译缓存的讨论： 129 | - [mzgoddard's comment](https://github.com/webpack/webpack/issues/250#issuecomment-240643985) 130 | - [\[spec: webpack 5\] - A module disk cache between build processes](https://github.com/webpack/webpack/issues/6527) 131 | 132 | ### 2.2. Gulp 133 | 134 | - [Gulp 4 简介 \[英\]](https://fettblog.eu/gulp-4-parallel-and-series/) 135 | - [基于Gulp的多页面应用实践指南](https://www.jianshu.com/p/35571124770f) 136 | 137 | ### 2.3. Linter 138 | 139 | - [JS Linter 进化史](https://zhuanlan.zhihu.com/p/34656263) 140 | - [为何要在项目汇总使用 ESLint \[英\]](https://medium.com/the-node-js-collection/why-and-how-to-use-eslint-in-your-project-742d0bc61ed7) 141 | 142 | ### 2.4. 静态类型（Typescript/Flow） 143 | 144 | - [Typescript 总体架构 \[英\]](https://github.com/Microsoft/TypeScript/wiki/Architectural-Overview) 145 | - 为什么要在 JavaScript 中进行静态类型检查： 146 | - [第一部分](https://www.jianshu.com/p/bda750e2d15e) 147 | - [第二、三部分](https://www.jianshu.com/p/289b3c734a9f) 148 | - [第四部分](https://www.jianshu.com/p/d23f93be8821) 149 | 150 | ### 2.5. Babel 151 | 152 | - [Babel 用户手册](https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/user-handbook.md) 153 | - [Babel 插件手册](https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/plugin-handbook.md) 154 | - [如何通过 Babel 实现你的自定义 JS 语法](https://lihautan.com/creating-custom-javascript-syntax-with-babel/) 155 | 156 | ### 2.6. CSS预处理与模块化 157 | 158 | - [CSS 进化史 \[英\]](https://medium.com/@perezpriego7/css-evolution-from-css-sass-bem-css-modules-to-styled-components-d4c1da3a659b) 159 | - [CSS 模块化方案系列](https://juejin.im/post/5b20e8e0e51d4506c60e47f5) 160 | 161 | ## 3. 性能优化 162 | 163 | > 性能优化其实就是在理解浏览器的基础上“因地制宜”，因此可以配合1.3节“浏览器”部分进行理解。 164 | 165 | 强烈推荐把 [Google Web 上性能优化](https://developers.google.com/web/fundamentals/performance/why-performance-matters/) Tab 中的文章都通读一遍，其基本涵盖了现代浏览器中性能优化的所有点。笔者也梳理了一份[「前端性能优化指南 🚀」](https://alienzhou.github.io/fe-performance-journey/)，可以帮助大家系统地了解和学习前端性能优化。 166 | 167 | 下面也摘录了其中一些个人认为非常不错的文章。 168 | 169 | ### 3.1. 加载性能 170 | 171 | - [PRPL 模式 \[英\]](https://developers.google.com/web/fundamentals/performance/prpl-pattern/) 172 | - [图片懒加载完全指南 \[英\]](https://css-tricks.com/the-complete-guide-to-lazy-loading-images) 173 | - [使用 Intersection Observer 来懒加载图片 \[英\]](http://deanhume.com/lazy-loading-images-using-intersection-observer/) 174 | - [图片与视频懒加载的详细指南 \[英\]](https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/) 175 | - [使用 Application Shell 架构来实现秒开应用 \[英\]](https://developers.google.com/web/updates/2015/11/app-shell) 176 | 177 | ### 3.2. 运行时性能 178 | 179 | - [避免大型、复杂的布局和布局抖动 \[英\]](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing?hl=zh-cn#avoid-forced-synchronous-layouts) 180 | - [什么导致强制同步布局（reflow）？ \[英\]](https://gist.github.com/paulirish/5d52fb081b3570c81e3a) 181 | - [如何诊断强制同步布局 \[英\]](https://developers.google.com/web/tools/chrome-devtools/rendering-tools/forced-synchronous-layouts?hl=zh-cn) 182 | - [无线性能优化：Composite](http://taobaofed.org/blog/2016/04/25/performance-composite/) 183 | - [如何不择手段提升scroll事件的性能](https://zhuanlan.zhihu.com/p/30078937) 184 | - [使用 passive event listener 来提高滚动流畅性 \[英\]](https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md) 185 | - 节流和去抖（throttle & debounce） 186 | - [JavaScript 函数节流和函数去抖应用场景辨析](https://github.com/hanzichi/underscore-analysis/issues/20) 187 | - [underscore 函数去抖的实现](https://github.com/hanzichi/underscore-analysis/issues/21) 188 | - requestIdleCallback 189 | - [requestIdleCallback使用入门 \[英\]](https://developers.google.com/web/updates/2015/08/using-requestidlecallback) 190 | - [Idle Until Urgent \[英\]](https://philipwalton.com/articles/idle-until-urgent)：requestIdleCallback的妙用 191 | 192 | ### 3.3. 前端缓存 193 | 194 | - [Web 缓存简介：以购买牛奶的为例 \[英\]](https://dev.to/kbk0125/web-caching-explained-by-buying-milk-at-the-supermarket-9k4) 195 | - [大话前端缓存 \[英\]](https://calendar.perfplanet.com/2016/a-tale-of-four-caches/) 196 | - [缓存（一）—— 缓存总览：从性能优化的角度看缓存](https://github.com/amandakelake/blog/issues/43) 197 | - [缓存（二）—— 浏览器缓存机制：强缓存、协商缓存](https://github.com/amandakelake/blog/issues/41) 198 | - [缓存（三）—— 数据存储：cookie、Storage、indexedDB](https://github.com/amandakelake/blog/issues/13) 199 | 200 | ### 3.4. 性能调试与实践 201 | 202 | - [使用 Chrome DevTools 提升页面速度 \[英\]](https://developers.google.com/web/tools/chrome-devtools/speed/get-started)：Chrome DevTools实操讲解 203 | - [了解 DevTools 中的 Resource Timing](https://developers.google.com/web/tools/chrome-devtools/network-performance/understanding-resource-timing) 204 | - [淘宝新势力周H5性能优化实战](https://segmentfault.com/a/1190000014359615) 205 | - [优化打包策略来提升页面加载速度](https://juejin.im/post/5aed037b6fb9a07aa047e1e1) 206 | - [Chrome DevTools 中你可能不知道的调试技巧](https://zhuanlan.zhihu.com/p/42059158) 207 | - [前端性能测量 \[英\]](https://speedcurve.com/blog/user-timing-and-custom-metrics/) 208 | 209 | ### 3.5. 性能指标 210 | 211 | - [以用户为中心的前端性能指标 \[英\]](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics)：前端性能指标的来龙去脉 212 | - DOMContentLoaded: 213 | - [你不知道的 DOMContentLoaded](https://zhuanlan.zhihu.com/p/25876048) 214 | - [Deciphering the Critical Rendering Path \[英\]](https://calendar.perfplanet.com/2012/deciphering-the-critical-rendering-path/) 215 | - FP (First Paint)： 216 | - [Chrome的First Paint](http://eux.baidu.com/blog/fe/Chrome%E7%9A%84First%20Paint) 217 | - FCP (First Contentful Paint)： 218 | - [First Contentful Paint Explained \[英\]](https://gtmetrix.com/blog/first-contentful-paint-explained/) 219 | - [First Contentful Paint \[英\]](https://developers.google.com/web/tools/lighthouse/audits/first-contentful-paint) 220 | - FMP (First Meaningful Paint)： 221 | - [Chrome 中的 First Meaningful Paint](https://juejin.im/entry/598080226fb9a03c5d535cd5) 222 | - [Time to First Meaningful Paint](https://docs.google.com/document/d/1BR94tJdZLsin5poeet0XoTW60M0SjvOJQttKT-JK8HI/view?hl=zh-cn#heading=h.k50nnyhtptq0) 223 | - TTI (Time to interactive)： 224 | - [Time to Interactive Explainer](https://github.com/WICG/time-to-interactive) 225 | - [衡量用户体验的新标准](https://calendar.perfplanet.com/2017/time-to-interactive-measuring-more-of-the-user-experience/) 226 | - TTFB (Time To First Byte)： 227 | - [TTFB，以及页面加载的时间节点](https://zhuanlan.zhihu.com/p/23588780) 228 | - FID (First Input Delay)： 229 | - [First Input Delay](https://developers.google.com/web/updates/2018/05/first-input-delay) 230 | - Speed Index： 231 | - [WebPagetest: Speed Index](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index) 232 | 233 | ## 4. 安全 234 | 235 | > 很多安全风险老生常谈，但是往往到出现问题时，才会被重视或者意识到。 236 | 237 | - [8大前端安全问题上篇](https://insights.thoughtworks.cn/eight-security-problems-in-front-end/) 238 | - [8大前端安全问题下篇](http://insights.thoughtworks.cn/eight-security-problems-in-front-end-2/) 239 | - [概念讲解：编码、加密、哈希与混淆 \[英\]](https://danielmiessler.com/study/encoding-encryption-hashing-obfuscation) 240 | - [常见 Web 安全攻防总结](https://zoumiaojiang.com/article/common-web-security/) 241 | 242 | ### 4.1. XSS 243 | 244 | - [如何防止XSS攻击？](https://tech.meituan.com/fe_security.html) 245 | 246 | ### 4.2. CSRF 247 | 248 | - [如何防止CSRF攻击？](https://juejin.im/post/5bc009996fb9a05d0a055192) 249 | - [Site Isolation \[英\]](https://developers.google.com/web/updates/2018/07/site-isolation)：Chrome的新特性 250 | 251 | ### 4.3. CSP 252 | 253 | - [Content Security Policy 入门教程](http://www.ruanyifeng.com/blog/2016/09/csp.html) 254 | - [Content Security Policy (CSP) \[英\]](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) 255 | 256 | ### 4.4. HTTPS 257 | 258 | - [图文还原 HTTPS 原理](https://mp.weixin.qq.com/s/3NKOCOeIUF2SGJnY7II9hA) 259 | - [浅谈有赞全站 HTTPS 推进](https://segmentfault.com/a/1190000013635363) 260 | 261 | ### 4.5. 安全实录 262 | 263 | - [About `rel=noopener` \[英\]](https://mathiasbynens.github.io/rel-noopener/)：打开一个新页面是如何带来安全隐患的 264 | - [一种新型的“钓鱼”方式 \[英\]](http://www.azarask.in/blog/post/a-new-type-of-phishing-attack/) 265 | - [一个媒体文件请求引发的跨站风险 \[英\]](https://jakearchibald.com/2018/i-discovered-a-browser-bug) 266 | - [Mitigating Spectre \[英\]](https://security.googleblog.com/2018/07/mitigating-spectre-with-site-isolation.html)： Chrome 中的跨站安全问题 267 | 268 | ### 4.6. 代码保护 269 | 270 | - [JavaScript 混淆安全加固](https://segmentfault.com/a/1190000019423501) 271 | - [前端核心代码保护技术面面观](https://zhuanlan.zhihu.com/p/61651310) 272 | 273 | ### 4.7. JS沙盒 274 | 275 | - [如何在 Web 上实现一个插件系统 \[英\]](https://www.figma.com/blog/how-we-built-the-figma-plugin-system/) 276 | - [如何安全地运行用户的 JavaScript 脚本](https://zhuanlan.zhihu.com/p/46571509) 277 | 278 | ### 4.8. 其他 279 | 280 | - [一些安全相关的HTTP响应头](https://imququ.com/post/web-security-and-response-header.html) 281 | 282 | ## 5. 自动化测试 283 | 284 | > 自动化测试是软件工程的重要部分之一，但却极容易被忽视。 285 | 286 | - [2018 前端自动化测试综述 \[英\]](https://medium.com/welldone-software/an-overview-of-javascript-testing-in-2018-f68950900bc3) 287 | - [测试你的前端代码（介绍篇）\[英\]](https://hackernoon.com/testing-your-frontend-code-part-i-introduction-7e307eac4446) 288 | 289 | ### 5.1. 单元测试 290 | 291 | - [测试你的前端代码（单元测试篇）\[英\]](https://hackernoon.com/testing-your-frontend-code-part-ii-unit-testing-1d05f8d50859) 292 | - [Fakes、Mocks 以及 Stubs 概念明晰](https://zhuanlan.zhihu.com/p/26942686) 293 | - [测试覆盖（率）到底有什么用？](http://www.infoq.com/cn/articles/test-coverage-rate-role) 294 | 295 | ### 5.2. 端到端测试 (E2E) 296 | 297 | - [测试你的前端代码（E2E 测试篇）\[英\]](https://hackernoon.com/testing-your-frontend-code-part-iii-e2e-testing-e9261b56475) 298 | - [什么是一个好的 E2E 测试？\[英\]](https://testing.googleblog.com/2016/09/testing-on-toilet-what-makes-good-end.html) 299 | - [平衡单元测试和端到端测试](http://www.infoq.com/cn/articles/balancing-unit-and-end-to-end-tests) 300 | - [对过多的 E2E 测试说“不” \[英\]](https://testing.googleblog.com/2015/04/just-say-no-to-more-end-to-end-tests.html) 301 | 302 | ### 5.3. 其他 303 | 304 | - [测试你的前端代码（集成测试篇）\[英\]](https://hackernoon.com/testing-your-frontend-code-part-iv-integration-testing-f1f4609dc4d9) 305 | - [测试你的前端代码（可视化测试篇）\[英\]](https://medium.com/@giltayar/testing-your-frontend-code-part-v-visual-testing-935864cfb5c7) 306 | - [关于 Property Based Testing 的介绍 \[英\]](https://medium.com/criteo-labs/introduction-to-property-based-testing-f5236229d237) 307 | 308 | ## 6. 框架与类库 309 | 310 | > 如果说基础知识是道，那框架与工具可能就是术；学习与理解它们，但千万不要成为它们的奴隶。 311 | 312 | ### 6.1. React 313 | 314 | - [手把手教你如何实现一个简易的 React \[英\]](https://engineering.hexacta.com/didact-learning-how-react-works-by-building-it-from-scratch-51007984e5c5) 315 | - [React 底层揭秘 \[英\]](https://bogdan-lyashenko.github.io/Under-the-hood-ReactJS/) 316 | - [你所需要知道的 React 细节](https://github.com/hateonion/react-bits-CN) 317 | - [React Fiber 架构](https://zhuanlan.zhihu.com/p/37095662) 318 | - [React 16 Fiber 源码速览](http://zxc0328.github.io/2017/09/28/react-16-source/) 319 | - [React 是怎样炼成的](https://segmentfault.com/a/1190000013365426)：React早期的进化之路 320 | - 从零开始实现一个React： 321 | - [1. JSX和虚拟DOM](https://github.com/hujiulong/blog/issues/4) 322 | - [2. 组件和生命周期](https://github.com/hujiulong/blog/issues/5) 323 | - [3. diff算法](https://github.com/hujiulong/blog/issues/6) 324 | - [4. 异步的setState](https://github.com/hujiulong/blog/issues/7) 325 | - [「react技术栈」单页应用实践快速入门](https://www.jianshu.com/p/0b2acb50f321) 326 | - [React 生命周期图示](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/) 327 | 328 | ### 6.2. Vue 329 | 330 | - [深入浅出 - vue变化侦测原理](https://github.com/berwin/Blog/issues/17) 331 | - [Vue 模板编译原理](https://github.com/berwin/Blog/issues/18) 332 | 333 | ### 6.3. Redux 334 | 335 | - [重新设计 Redux \[英\]](https://hackernoon.com/redesigning-redux-b2baee8b8a38)：Rematch 336 | - [如何用 GraphQL 来替代 Redux \[英\]](https://hackernoon.com/how-graphql-replaces-redux-3fff8289221d) 337 | - [解读 Redux 的设计思路与用法](https://div.io/topic/1309) 338 | - [(Redux)应用构建的三个原则 \[英\]](https://jaysoo.ca/2016/02/28/organizing-redux-application/#rule-1-organize-by-feature) 339 | - [React-Redux 的发展历史与实现 \[英\]](https://blog.isquaredsoftware.com/2018/11/react-redux-history-implementation/) 340 | 341 | ### 6.4. RxJS 342 | 343 | - [ReactiveX 官网](http://reactivex.io/)：宝石图真的非常形象易读 344 | - [响应式编程，是明智的选择](https://www.cnblogs.com/android-blogs/p/5586395.html) 345 | - [图解RxJS \[英\]](https://blog.angularindepth.com/learn-to-combine-rxjs-sequences-with-super-intuitive-interactive-diagrams-20fce8e6511) 346 | - [调试RxJS：Tooling \[英\]](https://blog.angularindepth.com/debugging-rxjs-4f0340286dd3) 347 | - [调试RxJS：Logging \[英\]](https://blog.angularindepth.com/debugging-rxjs-part-2-logging-56904459f144) 348 | 349 | ## 7. 新技术/方向 350 | 351 | > 前端领域新技术、新方向层出不穷，这里汇总一些新技术方向；作为开发者需要多了解但是不要盲从 352 | 353 | ### 7.1. PWA 354 | 355 | - [PWA 学习与实践系列](https://juejin.im/post/5ac8a67c5188255c5668b0b8#heading-3) 356 | - [Service Worker 入门简介 \[英\]](https://medium.freecodecamp.org/service-workers-the-little-heroes-behind-progressive-web-apps-431cc22d0f16) 357 | - [PWA 在 iOS 平台上的特殊问题 \[英\]](https://medium.com/@firt/pwas-are-coming-to-ios-11-3-cupertino-we-have-a-problem-2ff49fd7d6ea) 358 | - [在你的 PWA 中小心使用 iOS 的 meta 标签 \[英\]](https://medium.com/@firt/dont-use-ios-web-app-meta-tag-irresponsibly-in-your-progressive-web-apps-85d70f4438cb) 359 | - [饿了么的 PWA 升级实践](https://medium.com/elemefe/upgrading-ele-me-to-progressive-web-app-2a446832e509) 360 | - [离线指南](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/) 361 | - [Android 中的 WebAPKs \[英\]](https://developers.google.cn/web/fundamentals/integration/webapks?hl=zh-cn) 362 | - [Pinterest 的 PWA 实践 \[英\]](https://medium.com/@Pinterest_Engineering/a-one-year-pwa-retrospective-f4a2f4129e05) 363 | - [异步 HTTP Cookies API \[英\]](https://developers.google.com/web/updates/2018/09/asynchronous-access-to-http-cookies)：赋能Service Worker 364 | 365 | ### 7.2. CSS Houdini 366 | 367 | - [认识 Houdini 与 CSS Paint API \[英\]](https://codersblock.com/blog/say-hello-to-houdini-and-the-css-paint-api/) 368 | - [用 Houdini 来拯救 CSS Polyfill \[英\]](https://philipwalton.com/articles/the-dark-side-of-polyfilling-css/) 369 | 370 | ### 7.3. Web Components 371 | 372 | - [Web Components 基本概念和用法](https://developer.mozilla.org/zh-CN/docs/Web/Web_Components) 373 | - [Web Components 指南 \[英\]](https://css-tricks.com/modular-future-web-components/) 374 | - [Shadow DOM 使用简介](http://web.jobbole.com/87088/) 375 | - [HTMLUnknownElement 与 HTML5 自定义元素的故事](http://www.zhangxinxu.com/wordpress/2018/03/htmlunknownelement-html5-custom-elements/) 376 | 377 | ### 7.4. 微前端（Micro Frontends） 378 | 379 | - [微前端主页 \[英\]](https://micro-frontends.org/) 380 | - [微前端的那些事儿](https://microfrontend.cn/) 381 | - [技术雷达之「微前端」- 将微服务理念扩展到前端开发](https://zhuanlan.zhihu.com/p/32378432) 382 | 383 | ### 7.5. HTTP/2 384 | 385 | - [HTTP/2 幕后原理](https://www.ibm.com/developerworks/cn/web/wa-http2-under-the-hood/index.html) 386 | - [全面介绍的 HTTP/2 \[英\]](https://hpbn.co/http2/) 387 | - [HTTP/2 主页](https://http2.github.io/): 388 | - [HTTP/2 协议 \[英\]](https://httpwg.org/specs/rfc7540.html) 389 | - [HPACK: HTTP/2 Header压缩 \[英\]](https://httpwg.org/specs/rfc7541.html) 390 | 391 | ### 7.6. WebAssembly 392 | 393 | - [WebAssembly 官网](https://webassembly.org/) 394 | - [WebAssembly 现状与实战](https://www.ibm.com/developerworks/cn/web/wa-lo-webassembly-status-and-reality/index.html) 395 | - WebAssembly 系列： 396 | - [一、生动形象地介绍 WebAssembly](https://segmentfault.com/a/1190000008714589) 397 | - [二、JavaScript Just-in-time (JIT) 工作原理](https://segmentfault.com/a/1190000008632441) 398 | - [三、编译器如何生成汇编](https://segmentfault.com/a/1190000008664761) 399 | - [四、WebAssembly 工作原理](https://segmentfault.com/a/1190000008686643) 400 | - [五、为什么 WebAssembly 更快？](https://segmentfault.com/a/1190000008699213) 401 | - [六、WebAssembly 的现在与未来](https://segmentfault.com/a/1190000008714515) 402 | 403 | ### 7.7. 小程序 404 | 405 | - [微信，支付宝小程序实现原理概述](https://segmentfault.com/a/1190000018631528) 406 | - [小程序底层实现原理及一些思考](https://github.com/berwin/Blog/issues/43) 407 | 408 | ### 7.8. Serverless 409 | 410 | - [Serverless 给前端带来了什么](https://zhuanlan.zhihu.com/p/58877583) 411 | - [基于 Serverless 的淘宝前端研发模式升级](https://www.infoq.cn/article/KFNcm7Pbq*eIV2dQIpRX) 412 | - [Serverless，将给前端发展带来大变革的技术？](https://mp.weixin.qq.com/s/ooX7uMFjxFfSai9URo6kYw) 413 | - [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&utm_medium=blog&utm_campaign=read_more) 414 | 415 | ## 8. 业务相关 416 | 417 | > 在业务中往往还有一些与“业务无关”的场景需求 —— 不论是什么业务几乎都会遇到；因此，在变与不变中，我们更需要去抽象出这些问题。 418 | 419 | ### 8.1. 数据打点上报 420 | 421 | - [如何精确统计页面停留时长](https://techblog.toutiao.com/2018/06/05/ru-he-jing-que-tong-ji-ye-mian-ting-liu-shi-chang/) 422 | - [揭开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/) 423 | 424 | ### 8.2. 前端监控 425 | 426 | - [前端异常监控解决方案研究](https://cdc.tencent.com/2018/09/13/frontend-exception-monitor-research/) 427 | - [监控平台前端SDK开发实践](https://tech.meituan.com/hunt_sdk_practice.html) 428 | - [把前端监控做到极致](https://zhuanlan.zhihu.com/p/32262716) 429 | - [前端监控系统探索总结](https://juejin.im/post/5a3e121451882533f01ec66d) 430 | - [60 天急速自研-搭建前端埋点监控系统](https://juejin.im/post/5d8d9eeaf265da5b783ef45c) 431 | 432 | ### 8.3. A/B测试 433 | 434 | - Twitter的A/B测试实践： 435 | - [一、为什么要测试以及测试的意义](http://www.infoq.com/cn/articles/twitter-ab-test-practise-part01) 436 | - [二、技术概述](http://www.infoq.com/cn/articles/twitter-ab-test-practise-part02) 437 | - [三、检测和避免 A/B Test中 bucket不平衡问题](http://www.infoq.com/cn/articles/twitter-ab-test-practise-part03) 438 | - [四、A/B Test中使用多个控制的启示](http://www.infoq.com/cn/articles/twitter-ab-test-practise-part04) 439 | - [Netflix A/B Test 实验平台实践 \[英\]](https://medium.com/netflix-techblog/its-all-a-bout-testing-the-netflix-experimentation-platform-4e1ca458c15) 440 | - 指导方法 441 | - [实验中容易遇到的七种问题 \[英\]](https://www.exp-platform.com/Documents/2009-ExPpitfalls.pdf) 442 | - [实验的七个准则 \[英\]](https://www.exp-platform.com/Documents/2014%20experimentersRulesOfThumb.pdf) 443 | - [小流量如何进行AB测试](https://www.jianshu.com/p/3ab537f16b81) 444 | - 案例分享 445 | - [大众点评AB测试框架Gemini](https://www.csdn.net/article/2015-03-24/2824303) 446 | - [新浪新闻客户端AB测试与灰度发布](https://segmentfault.com/a/1190000012377139) 447 | - [天猫App A/B测试实践](http://www.infoq.com/cn/articles/tmall-app-ab-test) 448 | - 工具 449 | - [AB测试样本数量计算器](https://www.eyeofcloud.com/124.html) 450 | - [AB测试结果有效性分析工具](https://www.eyeofcloud.com/126.html) 451 | 452 | ### 8.4. “服务端推” 453 | 454 | - [各类“服务器推”技术原理与实例](https://juejin.im/post/5b135b78f265da6e420eab7d) 455 | - [长连接/websocket/SSE等主流服务器推送技术比较](https://zhuanlan.zhihu.com/p/31297574) 456 | - [Comet：基于 HTTP 长连接的“服务器推”技术](https://www.ibm.com/developerworks/cn/web/wa-lo-comet/) 457 | - [深入 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) 458 | - [WebSocket 应用安全问题分析](https://security.tencent.com/index.php/blog/msg/119) 459 | 460 | ### 8.5. 动效 461 | 462 | - [动画设计的12个原则🎥 \[英\]](https://www.youtube.com/watch?v=uDqjIdI4bF4) 463 | - [贝塞尔曲线扫盲](http://www.html-js.com/article/1628) 464 | - [动画：从 AE 到 Web](https://aotu.io/notes/2018/03/06/ae2web/) 465 | - 最全最好用的动效落地方法： 466 | - [基础知识](https://zhuanlan.zhihu.com/p/34501702) 467 | - [落地方式](https://zhuanlan.zhihu.com/p/34815524) 468 | 469 | ## 9. 其他 470 | 471 | > 开卷有益。 472 | 473 | - [Recursion? We don't need no stinking recursion!](http://raganwald.com/2018/05/20/we-dont-need-no-stinking-recursion.html)：如何将一些递归改为循环 474 | - [Turning your web traffic into a Super Computer](https://ben.akrin.com/?p=5997)：通过 Web Worker 和 WebSocket 来将全世界的电脑连接成超级计算机 475 | - [Designing very large (JavaScript) applications](https://medium.com/@cramforce/designing-very-large-javascript-applications-6e013a3291a3)：高屋建瓴 476 | - [Building a professional design tool on the web](https://www.figma.com/blog/building-a-professional-design-tool-on-the-web/)：如何使用 Web 技术来创建一个设计/渲染系统 477 | - [Crafting Interpreters](https://craftinginterpreters.com/)：详细介绍了如何实现一个解释器 478 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "frontend-tech-list", 3 | "version": "1.0.0", 4 | "description": "学习文章的知识往往是碎片化的。而前端涉及到的面很广，这些知识如果不进行有效梳理，则无法相互串联、形成体系。因此，我结合工作体会将抽象出了一些前端基础能力，并将看过、写过的一些不错的文章进行整理，形成了一份（纯）前端技术清单。", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "node script/md2html.js" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/alienzhou/frontend-tech-list.git" 12 | }, 13 | "author": "", 14 | "license": "ISC", 15 | "bugs": { 16 | "url": "https://github.com/alienzhou/frontend-tech-list/issues" 17 | }, 18 | "homepage": "https://github.com/alienzhou/frontend-tech-list#readme", 19 | "devDependencies": { 20 | "picnic": "^6.5.0", 21 | "showdown": "^1.9.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /script/md2html.js: -------------------------------------------------------------------------------- 1 | const showdown = require('showdown'); 2 | const path = require('path'); 3 | const fs = require('fs'); 4 | 5 | function convertMd2Html() { 6 | const tip = '\r\n> 可以勾选读完的文章，记录会存储在localStorage中，便于下次访问时还原之前的阅读进度。'; 7 | const title = '# 前端技术清单'; 8 | let md = fs.readFileSync(path.resolve(__dirname, '../README.md'), 'utf-8'); 9 | const pairs = md.split(title); 10 | md = title + tip + pairs[1]; 11 | 12 | const splitPattern = '## 0. 年度报告'; 13 | const parts = md.split(splitPattern); 14 | parts[1] = parts[1].replace(/- \[/g, '- [ ] ['); 15 | md = parts.join(splitPattern); 16 | 17 | showdown.setFlavor('github'); 18 | const converter = new showdown.Converter(); 19 | const mdHtml = converter.makeHtml(md); 20 | const buildDir = path.resolve(__dirname, '../build'); 21 | if (!fs.existsSync(buildDir)) { 22 | fs.mkdirSync(buildDir) 23 | } 24 | require.resolve('picnic'); 25 | 26 | // const style = fs.readFileSync(path.resolve(__dirname, '../script/style.css'), 'utf-8'); 27 | const style = fs.readFileSync(require.resolve('picnic'), 'utf-8'); 28 | const tpl = fs.readFileSync(path.resolve(__dirname, '../script/tpl.html'), 'utf-8'); 29 | 30 | html = tpl 31 | .replace(/\{\{style\}\}/, ``) 32 | .replace(/\{\{md\}\}/, mdHtml) 33 | .replace(/(]*?>.*?<\/h1>)/, '$1'); 34 | 35 | fs.writeFileSync(path.resolve(buildDir, 'index.html'), html, 'utf-8'); 36 | console.log('convert md to html success!'); 37 | } 38 | 39 | module.exports = convertMd2Html; 40 | process.argv[1] === __filename && convertMd2Html(); -------------------------------------------------------------------------------- /script/tpl.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | {{style}} 8 | 46 | Frontend Tech List: an overall frontend-tech list for developers 47 | 48 | 49 |
当前已完成阅读量：10%
50 |
51 | {{md}} 52 |
53 | 111 | 112 | --------------------------------------------------------------------------------