web前端年刊-2019年(90篇精选文章)
2019年web前端年刊，收录了包括JavaScript、框架和小程序、Node.js、浏览器和网络及性能优化、微前端和Serverless、实践经验和开发思想、前端工程、数据结构与算法等方面的好文。
JavaScript：
JavaScript 代码简洁之道
来自Github项目clean-code-javascript的翻译文章，文章作者根据自己的理解对原文进行了一些修改。
JavaScript 的数据类型及其检测
比较全的一篇数据类型基础知识介绍。
前端进击的巨人（一）：执行上下文与执行栈，变量对象
文章有助于理解什么是执行上下文，详解了执行栈的规则和执行上下文的生命周期过程。
如何编写高质量的函数 -- 函数底层篇
文章分析了函数执行的机制，JS引擎是如何执行函数的，并对闭包、作用域、作用域链有深入理解。
彻底终结 Javascript 背后的隐式类型转换
从JS设计者的角度来聊聊隐式类型转换, 这样不需要背诵复杂冗长的ECMA规范了。
ES6、ES7、ES8、ES9、ES10新特性一览
各版本特性一览，方便查阅和使用。
JavaScript 究竟是如何工作的？（第一部分）
本文可以帮助你理解 JavaScript 的工作原理，还能从大体上了解一门编程语言的工作原理。
JavaScript 究竟是如何工作的？（第二部分）
第二部分着重介绍了内存管理方面的知识。
拆解 JavaScript 中的异步模式
本文通过各种异步模式之间的联系，梳理了各种异步模式的优缺点，相信你读完后对JS中的异步会有全新的认识。
深入理解 JavaScript 原型
硬核文章，深入是真深入，信息量和知识点都很大。
彻底吃透 JavaScript 执行机制
浏览器和node环境下的事件循环介绍。
现代浏览器观察者 Observer API 指南
交叉观察者、变动观察者、视图观察者、性能观察者的相关介绍。
框架和小程序，及其原理：
Vue性能优化：如何实现延迟加载和代码拆分？
以开源项目Storefront为例，讲述了Webpack捆绑的工作原理，Vue的延迟加载、动态导入，以及vue-router、vuex的代码拆分。
大前端时代，如何做好C 端业务下的React SSR？
在需要满足SEO并保证首屏渲染效率的情况下，Next.js同构开发是一个比较好实践。
让虚拟DOM和DOM-diff不再成为你的绊脚石
关于虚拟DOM和DOM-diff的过程。
深入剖析 React Concurrent
从浏览器原理、Fiber基本概念及整体流程说起，通过Concurrent模式下任务的时间片拆分、中断、恢复和划分优先级，详细地剖析了Concurrent运行机制。
Vue Function-based API RFC
Vue 3.0重要的RFC，解释了设计动机和设计细节，对缺点或潜在问题进行了说明。
揭秘 Vue 中的 Virtual Dom
本文探讨了什么是Virtual DOM、作用是什么、为什么需要等问题。
精读《Vue3.0 Function API》
再谈Vue3.0 Function API，并解读了Function API + Hooks和React Function Component + Hooks的对比。
深入浅出 Vue 响应式原理
通俗易懂的Vue响应式原理，带你实现一个基础版的响应式系统。
Vue、React、Angular与应用绑定就是一场隐形灾害！
框架绑定应用的问题，我还能做哪些事情？
Deep In React 系列之详解 React 16 的 Diff 策略
这是Deep In React 系列的第二篇文章，如果还没有读过的强烈建议你先读第一篇：详谈 React Fiber 架构(1)。
在框架设计中寻求平衡
有关框架设计中的的权衡，以及 Vue 是如何进行取舍的。
浅谈小程序运行机制
从小程序的由来，到双线程的出现、设计、通信、到基础库、Exparser 框架、再到运行机制、性能优化等等方面，来看小程序的运行机制和它的整体技术架构。
小程序底层实现原理及一些思考
作者实现小程序的底层时，在架构与技术方向层面的思考和决策。
从 React 历史的长河里聊虚拟DOM及其价值
通过从React历史来看它的价值，从而更好地理解虚拟DOM的价值所在。
浏览器、网络、性能优化：
2019 前端性能优化年度总结
非常全面的前端性能优化指南，一共包括6个部分，这是第一部分。
深入理解浏览器的缓存机制
详细的浏览器缓存说明书，从缓存位置、缓存过程、强缓存、协商缓存等方面详细地介绍了浏览器缓存机制。
浏览器帧原理剖析
有关于将浏览器帧像素显示在屏幕上的过程里发生了什么
让你的网页更丝滑（全）
作者分享了什么样的网页是用户觉得比较流畅的、什么叫像素管道，然后介绍了主动交互、被动交互的性能优化方案。
一文读懂HTTP/2 及 HTTP/3特性
文章介绍了http协议、HTTP/1.x协议的缺陷、HTTP/2的新特性及未来HTTP/3的新特性。
Web 应用安全性: 使用这些 HTTP 头保护 Web 应用
这是关于web安全性系列文章的第三篇，主要介绍与安全相关的HTTP头。
进阶必备的网络基础
如果你对网络基础还不太了解，文章的内容可以给你提供一个思路。
时间切片（Time Slicing）
为了避免长任务，一种方案是使用Web Worker，将长任务放在Worker线程中执行，缺点是无法访问DOM，而另一种方案是使用基于Generator的时间切片。
浏览器渲染基本原理解析
主要讲解了浏览器主要组成与浏览器线程、渲染过程、关键渲染路径与阻塞渲染，最后结合渲染流程，提出了可优化渲染性能的点。
你必须懂的前端性能优化
前端性能优化，从网络下的http优化、资源优化、渲染优化。
Chrome架构：仅仅打开了1个页面，为什么有4个进程?
本文从Chrome进程架构的视角，分析了浏览器的进化史，随着Chrome创造性地引入了多进程架构，解释了标题提到的问题。
HTTP协议理解及服务端与客户端的设计实现
本文主要帮助读者理解 HTTP 的协作原理、HTTP 相关的各层协议，非常详细的讲解，值得一读。
浏览器垃圾回收机制与 Vue 项目内存泄漏场景分析
浏览器垃圾回收机制的常规介绍以及Vue项目内存泄漏常见的场景总结。
从传纸条轻松学习到基本网络概念
透过传纸条的小故事，来描述网络概念，让大家理解什么是TCP/IP、HTTP及跟网络有关的东西，阅读起来非常轻松易懂。
解读HTTP/2与HTTP/3 的新特性
文章介绍了HTTP/1.1存在的主要缺点，HTTP/2解决了HTTP/1的哪些问题和存在的缺点，并介绍了HTTP/3的新特性。
前端中的二进制以及相关操作与转换
本文总结了浏览器端的二进制以及有关数据之间的转化，如 ArrayBuffer，TypedArray，Blob，DataURL，ObjectURL，Text 之间的互相转换。
万字详文：深入理解浏览器原理
本文从市面主流的浏览器及相应的内核引擎开始，介绍了Chromium为代表的浏览器架构及Blink内核的功能架构。
Web性能领域常见的专业术语
本章我们介绍了Web性能领域常见的专业术语，包括：FP、FCP、FMP、TTI、LCP、TTFB、FCI、FID、DCL、L、Speed Index。这些术语可以帮助我们理解性能报告给出的各种数据。
微前端、Serverless：
Medium 架构实践：避免微服务综合症
主要介绍单体Node.js应用程序如何有效实现微服务架构并避免微服务综合症的经验。
中台微服务了，那前端呢？
再谈微前端设计，本文通过保险订单销售模式设计案例来说明如何进行微前端设计，并最后总结了实施微前端的主要价值和意义。
大前端时代下的微前端架构：实现增量升级、代码解耦、独立部署
文章首先解释了微前端架构的定义，然后讨论集成微前端的各种方法，最后分享了要考虑的一些问题及应对对策。
精读《Serverless 给前端带来了什么》
文章对Serverless进行了简单的概述，然后从前后端的视角讨论了Serverless给我们带来了些什么收益与挑战。
探索 Serverless 中的前端开发模式
本文主要从前端开发模式的演进、基于 Serverless 的前端开发案例以及 Serverless 开发最佳实践等方面，探讨 Serverless 中的前端开发模式。
微前端如何落地？
关于设计微前端架构模式的讨论。
Serverless，将给前端发展带来大变革的技术？
本文将从前端的角度来看Serverless究竟是什么，Serverless的出现会给前端带来什么样的机遇和挑战，并以一个具体的项目为例说明如何基于Serverless实现项目功能。
Serverless For Frontend 前世今生
web开发的演进史。
2019 JSConf China 《面向传统，Serverless 进化之路》分享文字版
阿里集团内部逐步迁移到 Serverless 体系的过程以及思考。
NGW，前端新技术赛场：Serverless SSR技术内幕
腾讯NOW直播IVWEB团队Serverless同构直出渲染方案实践。
浅析基于Serverless的前后端一体化框架
业务的开发模式发展是从一体到分裂为前后端，再到前后端融合为一体的过程，未来或涌现出基于Serverless的前后端一体化框架。
使用 Angular 打造微前端架构的 ToB 企业级应用
本文主要介绍Angular打造微前端应用遇到的一些技术难点和相应的解决方案。
深入浅出Serverless：优势、意义与应用
本文主要介绍了Serverless的优势、适用场景、对前端开发者的意义、未来演化等。Serverless的出现，让前端转变为全栈工程师更为加容易。
实践经验、开发思想：
如何设计高扩展的在线网页制作平台
本文主要介绍如何设计一个高扩展的在线网页制作平台，会交代一些背景和最终的效果以及核心设计方案。
前端中的 IoC 理念
控制反转（Inversion of Control）是一种「思想」，作者通过一个例子来解释IoC概念，让它变得容易理解。
世界是平的吗？——从不同角度看前端
在前后端分离下，前后端的唯一桥梁是接口，当一端变更后，变更同步到另一端就成了问题。
从架构治理角度，文章介绍了业界探索的三种流程方案，另外介绍了研发流程下组件化实施的三种模式。
从前端角度看企业软件的研发过程
本文尝试从一些角度去给出自己的见解，为了说明构建这个领域前端技术体系的种种考虑，同时也会述及对应的业务特性。
流水不腐，户枢不蠹 — 设计可维护可扩展的系统（上）
本文重点介绍部分软件开发思想，讲解如何利用设计模式、设计原则和编程范式，设计易懂、可扩展的和高内聚低耦合的系统。
GraphQL和Thrift在Airbnb架构中的配合使用
本文介绍了Airbnb在Thrift和展现服务层框架的现有架构上，前后端如何进行合作，利用GraphQL和Thrift两者的优点，构建出更好的交互体验。
用 JS 开发跨平台桌面应用，从原理到实践
作者对Electron的一次系统性的总结，文章对了解和入门Electron很有帮助。
大规模应用TypeScript「2019 JSConf -Brie Bunge」
关于TypeScript在Airbnb大规模应用的分享。
浅析Typescript设计模式
常规设计模式介绍。
降低软件复杂性的一般原则和方法
解决软件复杂性的一些方法论。
面向对象之 7 大基本原则（JS版）
单一职责、开闭原则、里氏替换、依赖倒置、接口隔离、迪米特法则等基本原则介绍。
腾讯CDC团队：前端异常监控解决方案
本文主要是对前端异常监控的整体框架进行了研究，没有涉及到具体的技术实现。
JavaScript中的位运算和权限设计
以Linux文件系统权限为例，介绍位运算在权限系统中的使用。
Node.js：
干货 | 携程机票Node.js开发实践
一篇携程机票技术栈变迁，在技术应用过程中遇到的问题，以及Node.js从早期的前后端分离到GraphQL的实践。
Node.js 中的依赖管理
npm依赖管理的dependencies、devDependencies、peerDependencies、bundledDependencies、optionalDependencies使用场景介绍，以及版本号的写法和依赖管理的其它内容。
NodeJS express框架核心原理全揭秘
express框架源码分析及其中间件流程控制的实现。
蚂蚁金服Node.js基础服务 - 摸爬滚打才不负功名尘土
介绍了蚂蚁金服的Node基础服务历史，前端职责从前端组件框架到服务端，是不断前端提效、扩大前端能力的过程。
前端工程：
AST与前端工程化实战
对AST的介绍，对recast库常见的一些API介绍，然后通过改造一个webpack loader来说明AST对前端工程化的一方面应用。
前端领域的 Docker 与 Kubernetes
本文介绍了Docker和Kubernetes的一些相关内容，然后介绍了Kubernetes在前端领域有哪些优势和新玩法。
前端部署发展史
从刀耕火种到docker系列部署，再到集成docker的自动化部署。
数据结构与算法：
『多图警告』手撕排序算法 - 前端进阶必备
常见的排序算法介绍。
前端应该如何准备数据结构和算法？
本文并没有对每个点进行深入的分析，而是对数据结构和算法建立一个较全面的认知体系，帮助读者掌握快速学习数据结构和算法的方法。
JavaScript 中的数据结构：写给前端软件工程师
以前端场景为示例，浅析数据结构。
其它：
必看！互联网开发模式的经验之谈
虽然不是前端相关文章，但这篇互联网开发模式的经验之谈写得很好，值得推荐。
Web Component可以取代你的前端框架吗？
对Web Component的介绍和使用，最后总结了使用原生web components的好处。
关于移动端适配，你必须要知道的
本文从移动端适配的基础概念出发，探究移动端适配各种问题的解决方案和实现原理。
玉伯：从前端到体验，如何把格局做大
轻松一下，值得阅读。
你未必知道的49个CSS知识点
如题，难得一篇css文章。
WebAssembly到底处于编译阶段的哪个环节？
本文首先介绍了编译步骤，然后回答了所提的问题。
Google 官方-如何去做code review
来自Google的code review实践。
「Shape Up」 适合中小团队的一种工作方式
VS Code团队类似的一种工作方法。
我的前端成长之路
来自于玉伯的分享：全情投入、守正出奇、愿等花开。
Design Token 是啥？
一篇关于Design Token的介绍，它可以让产品设计团队更好地协作，同时保持产品跨平台的一致性。
期刊来自：github|web-monthly