2018年即将过去，今年相比去年你有哪些技术收获？记得年初的时候，我给自己制定了一个学习计划，现在回过头来看，完成度还不错。但还是有些遗憾，有些技术点没有时间好好研究。在学习的过程中，我发现像文章这样的知识往往是碎片化的，前端涉及到的方面很多。这些知识如果不进行有效的梳理，就无法形成体系，无法相互联系。到头来，有一种东方知一，西方略知一二的感觉。因此，我结合自己的工作经验抽象出一些前端基础技术能力，并根据这些能力整理了这段时间学习或制作的一些不错的内容，形成了一个前端技术列表（github地址）。无论你是自学前端遇到瓶颈，还是精通某些技术但还未涉足其他技术，希望这份清单能对你有所帮助。由于个人精力有限，一些技术点的总结目前可能有偏差或者没有收录，所以github上的列表内容也会持续更新。目前只包含纯前端基础内容。NodeJS、客户端泛前端、小程序、可视化等内容留坑吧。目录内容↓↓↓0.AnnualReport2018前端工具调查报告2018JavaScript调查报告1.基础知识温故而知新，不知而知之。1.1.JavaScriptYou-Dont-Know-JS[英文]JavaScript基本运行机制：JS引擎、运行时和调用栈概述[英文]V8引擎介绍[英文]4中的内存管理和常见泄漏[英文]EventLoop（访谈总会有beaquestioninEventLoop...):从EventLoop规范，探索JavaScript异步和浏览器更新渲染时序异步EventLoop[英文]EventLoop,Timersandprocess.nextTick()inNodeJS[英文]Tasks,Microtasks,QueuesandSchedules[英文]WebWorker及其5种常见使用场景[英文]如何避免async/await地狱[英文]“回调地狱”解决方案总结1.2．CSSYou-Need-to-Know-CSSSSSLayoutGuidelinesCSSMedium各种换行处理方法【英文】：如何处理浏览器将rem转px精度错误时的经典换行问题？精准控制滚动体验，说说新标准ScrollSnap如何完美实现非按钮元素的按钮[英文]熟练使用CSSGrid打造横向滚动容器[英文]如何处理内联元素的空隙[英文]]CSSStackingContext浏览器1.3那些鲜为人知的坑。浏览器的工作原理现代浏览器的内部工作原理：Chrome浏览器概述当您浏览时会发生什么？渲染过程的内部工作原理合成器如何提高交互性能？完整页面生命周期API介绍[英文]四大新观察者：Intersection/Mutation/Resize/Performance(Observer)渲染引擎工作方式及优化建议[英文]浏览器内核渲染：重构引擎跨域解决方案总结2．工程化和工具软件的扩展带来了对工程化的需求，前端也不例外。随着NodeJS的出现，前端工程师可以使用熟悉的JS快速开发出自己需要的工具。工具链生态的繁荣，也是前端圈子繁荣的体现。2.1.webpack中的Chunk关系图算法【英文】webpack进阶系列文章编译优化：如何在大型项目中提升webpack的性能？[English]Runtimeoptimization:SeparatingaManifest[English]Using[English]如何更好地使用webpacktree-shaking讨论webpack编译缓存：mzgoddard'scomment[spec:webpack5]-构建进程2.2之间的模块磁盘缓存。Gulp简介Gulp4[英文]基于Gulp的多页面应用实践指南2.3。LinterJSLinter进化史项目总结中为什么使用ESLint[英文]2.4.静态类型(Typescript/Flow)Typescript整体架构[英文]WhystatictypecheckinginJavaScript:Part1PartTwo,PartThreePartFour2.5.BabelBabel用户手册Babel插件手册2.6。CSS预处理与模块化CSS演进史[英文]CSS模块化解决方案系列3.性能优化性能优化实际上是基于对浏览器“因地制宜”的理解，所以可以结合1.3节“浏览器”来理解。强烈推荐阅读GoogleWebPerformanceOptimizationTab中的所有文章，基本涵盖了现代浏览器性能优化的所有要点，非常系统。下面也摘录了其中一些我个人认为非常好的。3.1.加载性能PRPL模式【英文】图片延迟加载完全指南【英文】使用IntersectionObserver实现图片延迟加载【英文】图片视频延迟加载详解【英文】使用ApplicationShell架构实现即时打开应用【英文】]3.2。避免大型、复杂布局和布局抖动的运行时性能[英文]什么原因导致强制同步布局（回流）？[英文]Howtodiagnoseforcedsynchronouslayout[英文]Wirelessperformanceoptimization:HowCompositeimprovesscrolleventperformancebyanymeansUsepassiveeventlistenertoimprovescrollingfluency[英文]Throttle&debounce:JavaScriptfunctionthrottling下划线函数debounce的判别分析应用场景requestIdleCallback-一个强大而神奇的API：requestIdleCallback入门[英文]IdleUntilUrgent[英文]：requestIdleCallback3.3的神奇之处。前端缓存Web缓存介绍：以买牛奶为例【英文】大谈前端缓存【英文】缓存（一）——缓存概述：从性能优化的角度缓存缓存（二）——浏览器缓存机制：强缓存、协商缓存（三）——数据存储：cookie、Storage、indexedDB3.4。性能调试与实践使用ChromeDevTools提高页面加载速度【英文】：ChromeDevTools实战讲解UnderstandingResourceTiminginDevTools淘宝新动力周H5性能优化实战优化打包策略提升页面加载速度ChromeDevTools调试技巧你可能不会知道前端性能测量[英文]3.5。PerformanceindicatorsUser-centricfront-endperformanceindicators[英文]:前端性能指标的来龙去脉DOMContentLoaded:DOMContentLoadedDecipheringtheCriticalRenderingPathyoudon'tknow[英文]FP(FirstPaint):Chrome'sFirstPaintFCP(FirstContentfulPaint):FirstContentfulPaintExplained[英文]FirstContentfulPaint[English]FMP(FirstMeaningfulPaint):FirstMeaningfulPaintinChromeTimetoFirstMeaningfulPaintTTI(Timetointeractive):TimetoInteractiveExplainer衡量用户体验的新标准TTFB(TimeToFirstByte):TTFB,和页面加载时间节点FID（FirstInputDelay）：FirstInputDelaySpeedIndex：WebPagetest：SpeedIndex4.安全性很多安全隐患都是老生常谈，但往往在出现问题时被重视或意识到。SecurityIssuesPartTwo概念讲解：编码、加密、散列和混淆[英文]Web安全常见攻防总结4.1．XSS如何防止XSS攻击？4.2.CSRF如何防止CSRF攻击？站点隔离[英文]：Chrome4.3的新特性。CSPContentSecurityPolicy入门教程内容安全策略(CSP)[英文]4.4．HTTPS图文还原HTTPS原理说说有赞HTTPS推广4.5.安全记录关于rel=noopener[Eng]:打开新页面是如何带来安全风险的新型“钓鱼”方式[Eng]媒体文件请求引起的跨站风险[Eng]缓解Spectre[Eng]:Chrome中的跨站安全问题5.自动化测试自动化测试是软件工程的重要组成部分之一，但却很容易被忽视。2018前端自动化测试概览【英文】测试你的前端代码（介绍）【英文】5.1。单元测试测试你的前端代码（unittest）[英文]Fakes,MocksandStubs概念清晰测试覆盖率（rate）到底有什么用？5.2.端到端测试（E2E）测试你的前端代码（E2E测试篇）【英文】什么是好的E2E测试？[英文]平衡单元测试和端到端测试对过多的端到端测试说“不”[英文]5.3。其他测试你的前端代码（集成测试）[英文]测试你的前端代码（可视化测试）[英文]6.框架和类库如果说基础知识是途径，那么框架和工具可能是技术；学习和理解他们，但不要成为他们的奴隶。6.1.ReactReact的底层秘密[英文]你需要知道的React详解ReactFiber架构React16Fiber源码概览React是怎么做成的：React的早期演进从零开始实现一个React：1.JSX和虚拟DOM2。组件与生命周期3.diff算法4.异步setState《React技术栈》单页应用实践快速入门6.2.Vue深入浅出-vue变化检测原理Vue模板编译原理6.3。如何用GraphQL替代Redux【英文】Redux的设计思想和用法解读（Redux）应用构建三原则【英文】6.4.RxJSReactiveX官网：宝图真的非常直观易读响应式编程是明智的选择DiagramRxJS[英文]DebuggingRxJS:Tooling[英文]DebuggingRxJS:Logging[英文]七、新技术/新方向新技术新方向在前端领域层出不穷。这里有一些新技术方向；作为开发人员，你需要了解更多，但不要盲目跟随7.1。PWAPWA学习与实践系列ServiceWorker简介【英文】iOS平台PWA专刊【英文】小心在你的PWA中使用iOSMetaTags【英文】饿了么的AndroidWebAPKs中的PWA升级实践离线指南【英文】Pinterest的PWA实践【英文】异步HTTPCookiesAPI【英文】：EmpoweringServiceWorker7.2。CSSHoudini理解Houdini和CSSPaintAPI[英文]使用Houdini拯救CSSPolyfill[英文]7.3.WebComponentsWebComponents基本概念和使用WebComponentsGuide[英文]ShadowDOM介绍HTMLUnknownElement和HTML5自定义元素故事7.4.微前端-将微服务的概念扩展到前端开发7.5。HTTP/2HTTP/2HTTP/2的幕后[英文]HTTP/2主页：HTTP/2协议[英文]HPACK：HTTP/2标头压缩[英文]7.6。WebAssemblyWebAssembly官网WebAssembly现状与实战、WebAssembly的工作原理5、为什么WebAssembly速度更快？6.WebAssembly的现在与未来8.业务相关业务中经常会出现一些“业务无关”的场景需求，无论什么样的业务几乎都会遇到；因此，在变化和变化的过程中，我们需要抽象8.1。数据管理与报表如何准确统计页面停留时长揭开JS无埋技术的神秘面纱8.2．前端监控前端异常监控方案研究监控平台前端SDK开发实践把前端监控做到极致前端监控系统探索总结8.3．A/BTestTwitter的A/B测试实践：1.为什么要测试以及测试的意义2.技术概述3.检测和避免A/BTest中的bucketimbalance4.在A/BTest中使用MultipleControls的启示NetflixA/B测试实验平台实践【英文】指导方法实验中容易遇到的七大问题【英文】实验七大原则【英文】小流量如何进行AB测试案例分享大众点评AB测试框架Gemini新浪新闻客户端AB测试与灰度发布天猫APPA/B测试实践工具AB测试样本数量计算器AB测试结果效果分析工具8.4.《服务器推送》各种“服务器推送”技术原理及长连接/websocket/SSEComet等主流服务器推送技术实例对比：基于HTTP长连接的“服务器推送”技术深入WebSockets、HTTP/2SSE【英文]WebSocket应用安全问题分析8.5．动态动画设计的12条原则?【英文】贝塞尔曲线识字动画：从AE到Web，最全最有用的动画效果实现方法：基础知识实现方法9.打开一篇不归类的好文章是有好处的。递归？Wedon'tneednostinkingrecursion!:Howtochangesomerecursionintoloops(tailrecursionoptimization)TurningyourwebtrafficintoaSuperComputer:ConnectcomputersallovertheworldintosupercomputersthroughWebWorkerandWebSocket设计非常大（JavaScript）应用：高层，适合阅读和思考
