【实践经验】
1、Web 现代应用程序架构下的性能优化，渐进式的极致艺术
https://mp.weixin.qq.com/s/uU-hDwe8BogcIp3UKeOHXw
本文是 Rendering on the Web: Performance Implications of Application Architecture (Google I/O ’19) 这篇谷歌工程师带来的现代应用架构体系下的优化相关演讲的总结，演讲介绍了以下优化手段：
- 预渲染
- 同构渲染
- 流式渲染
- 渐进式注水
2、图片上传系统在淘系中的实践
https://mp.weixin.qq.com/s/TgEZ4QctrjCPPf5Ej_-IBA
传统图片信息的上传渠道一般在pc端的后台或者客户端上直接上传，但是如何在移动端的webview上快速上传图片，并保证图片安全下载这一直是一个挑战。
3、中高级前端必须注意的40条移动端H5坑位指南 | 网易三年实践
https://juejin.cn/post/6921886428158754829
三年半沉淀通过本文记录下所遇到的坑位，或许有些坑位还未遇到，但本文记录的40条坑位绝对能让同学们少走很多弯路
4、事件总线的局限性，及组件化开发流程中通信机制的设计与实现
https://mp.weixin.qq.com/s/9Ot1atQ2hRBYQfq-gOM-Xg
本文将对组件化开发流程中 通信组件 的设计理念与实现方式进行完整的叙述。这里的 通信组件 并非特指某个已有的工具库（比如ARouter、WMRouter等），事实上，它们都是组件化开发流程的实践之一。
本文结构如下：
5、飞猪Flutter技术演进及业务改造实践
https://mp.weixin.qq.com/s/EE0BvR_YcS49C3bb2Id3YA
本文整理自飞猪高级无线开发专家旅鹤在 InfoQ 技术公开课直播栏目所做的分享，结合飞猪近半年来在 Flutter 技术实践中的突破和探索，重点介绍跨端标准容器建设、组件库的沉淀、性能优化的经验，以及面对存量业务做 Flutter 改造的新思路。
6、Vue 3 和 Webpack 5 来了，手动搭建的知识该更新了
https://mp.weixin.qq.com/s/l5gkwi6LtAEuDwxhKjBxDA
7、8个硬核技巧带你迅速提升CSS技术
https://mp.weixin.qq.com/s/BUOhGMxQ6SKJ7JFPlVUqKA
相信这些内容能帮助同学们在短期内提升CSS编码素质，实现一些看似只能由JS才能实现的效果。
- 「神器的选择器」
- 「浅谈布局那些事」
- 「绘制三角的原理」
- 「完美极致的变量」
- 「添油加醋的伪元素」
- 「灵活多变的障眼法」
- 「意向不到的内容插入」
- 「无所不能的模拟点击事件」
8、编写高质量可维护的代码：优雅命名
https://juejin.cn/post/6922225108094287880
【基础夯实】
1、SPA 路由三部曲之核心原理
https://mp.weixin.qq.com/s/BDS9ule4OGUHiH2RaWtVVQ
单页应用不仅在页面交互是无刷新的，连页面跳转都是无刷新的，为了配合实现单页面应用跳转，前端路由孕育而生。
前端路由相较于后端路由的一个特点就是页面在不完全刷新的情况下进行视图的切换。页面 URL 变了，但是并没有重新加载，让用户体验更接近原生 app。
2、深度：1.1万字解读Vue3.0源码响应式系统
https://mp.weixin.qq.com/s/Zp-B-K4y6P-5ly1E8eMvlw
3、从观察者模式到响应式的设计原理
https://mp.weixin.qq.com/s/QLGNzK2-HcKWuavg0LQqpg
响应式对使用过 Vue 或 RxJS 的小伙伴来说，应该都不会陌生。响应式也是 Vue 的核心功能特性之一，因此如果要想掌握 Vue，我们就必须深刻理解响应式。接下来阿宝哥将从观察者模式说起，然后结合 observer-util 这个库，带大家一起深入学习响应式的原理。
4、关于 z-index，你可能一直存在误区
https://mp.weixin.qq.com/s/8w1_Ph_KKddaeW9rUUNYMw
z-index 这个属性表面看上去很简单，但如果你想搞清楚其工作原理的话，其实是有不少值得探讨之处的。本文将从层叠上下文（stacking contexts）和一些实际案例出发，谈一谈 z-index 的内部工作原理。
5、如何不使用 overflow: hidden 实现 overflow: hidden？
https://juejin.cn/post/6916326043934851080
本文提供了 3 种可以实现超出容器范围裁剪的方法：
overflow: hiddenclip-path绘制裁切区域contain: paint不绘制元素范围外的内容
6、JavaScript 元编程
https://mp.weixin.qq.com/s/LRgCILkJdQKdCXI1LIANfg
JavaScript 有许多开发者熟知的有用特性，同时也有一些鲜为人知的特性能够帮助我们解决棘手问题。
很多人可能不太了解 JavaScript 元编程的概念，本文会介绍元编程的知识和它的作用。
ES6（ECMAScript 2015）新增了对 Reflect 和 Proxy 对象的支持，使得我们能够便捷地进行元编程。让我们通过示例来学习它们的用法。
7、Web开发应该知道的数据结构
https://mp.weixin.qq.com/s/9tV_8lh2Je-ZDP39UaLcuw
数据结构是指相互之间存在着一种或多种关系的数据元素的集合和该集合中数据元素之间的关系组成 。
常用的数据结构有：数组，栈，链表，队列，树，图，堆，散列表等，如图所示：
每一种数据结构都有着独特的数据存储方式，不同种类的数据结构适合不同种类的应用，部分数据结构甚至是为了解决特定问题而设计出来的。正确的数据结构选择可以提高算法的效率。
8、你会用到的 15个前端小知识
https://mp.weixin.qq.com/s/qjpGEq5X6o3jJXq8W9wfVQ
9、Scoped Style解决方案之deep深入理解
https://mp.weixin.qq.com/s/f-sLKqlY-qzXYdVkJSTswQ
【实用工具】
1、12 个顶级 Bug 跟踪工具
https://mp.weixin.qq.com/s/u6RDmHYOeHshPlfEpmPFJA
在如今的在线世界，几乎所有的公司都面临它们产品中的 bugs，并且考虑如何管理这些 bugs。应该使用哪个工具？如何搭建 bug 跟踪流程？在本文中，我们将详细探讨这些问题。
2、不可错过的实用工具
https://mp.weixin.qq.com/s/sJmF3VKApRikl2fkmpEfDA
整理了 25 个前端相关的学习网站和一些靠谱的小工具，包括一些小游戏、教程、社区网站和博客，以及一些资源网站
- CSS battle : https://cssbattle.dev
- Learn CSS layout：http://learnlayout.com
- Flexbox Froggy：http://flexboxfroggy.com
- EnjoyCSS：https://enjoycss.com
- CSS-Tricks ：https://css-tricks.com
- Neumorphism：https://neumorphism.io
- uiGradients：https://uigradients.com
- JavaScript：https://bonsaiden.github.io/JavaScript-Garden/zh/
- JS Tips：https://www.jstips.co
- JSweekly：https://javascriptweekly.com
- CDNJS：https://cdnjs.com/libraries
- Beautiful Open ：https://beautifulopen.com
- JavaScript Fun：https://www.javascript.fun
- Stack Overflow：https://stackoverflow.com
- 掘金：https://juejin.im
- Codrops：https://tympanus.net
- CodePen：https://codepen.io
- CodeSandBox：https://codesandbox.io
- JS Bin：https://jsbin.com
- ICONSVG：https://iconsvg.xyz
- OpenMoji：https://www.openmoji.org
- Share Icon ：https://www.shareicon.net
- tableconvert ：https://tableconvert.com
- Feathericons：https://feathericons.com
- HTML5UP ：https://html5up.net/
3、3分钟精通Flex布局，内含可视化工具让Flex更易理解
https://mp.weixin.qq.com/s/CUJuLPaVaX2A9kvGm35SvA
现在大前端中被使用最多的布局方式非flex莫属，像h5、pc、小程序、rn、甚至native都在使用flex布局，可见掌握好flex布局是多的重要。
然而在flex布局兴起时，我们学习flex布局的方法大部分就是看一些博客文章的解析，官方文档说明，然后挨个去看各个属性的作用和示例，然后再自己手敲实践几次。这也是我当初学习flex布局的方法，常规手段，也很有效。如果愣是要说一些不足的地方，应该就是不直观，效率不太高。
那有没有一种更直观、更高效的学习方式呢？
为了能解决这个问题，flex布局可视化工具就诞生了。
4、推荐程序员必备的 10 大 GitHub 仓库，前端占了 7 个！
https://juejin.cn/post/6924520063399624712
【动态与研究关注】
1、Facebook 将对 React 的优化实现到了浏览器！
https://mp.weixin.qq.com/s/Lbcu1aa2LQZlddAwIIExqA
想要提高一个网页的加载速度是非常困难的，如果你的网站是在使用 JavaScript 渲染的内容，你必须要在网页的加载速度和网页的输入响应能力之间作出权衡：
- 一次性执行首屏需要执行的逻辑（负载性能好，输入响应能力差）
- 将复杂的逻辑拆分成更小块的任务执行，以保证对外界输入的响应（负载性能差，输入响应能力好）
为了避免这种取舍，Facebook 在 Chromium 中提出并实现了 isInputPending() API，它可以提高网页的响应能力，但是不会对性能造成太大影响。
目前 isInputPending API 仅在 Chromium 的 87 版本开始提供，其他浏览器并未实现。
2、Vuex 4 正式发布：打包现在与 Vue 3 一致
https://mp.weixin.qq.com/s/EvFhNURYiiuW9H3fPvCTYg
Vuex 4 正式版本现已发布。
Vuex 4 的改进重点是兼容性。Vuex 4 支持 Vue 3，并提供了与 Vuex 3 完全相同的 API，因此用户可以在 Vue 3 中重用现有的 Vuex 代码。
这个版本还包含一些重大更改，详情见后文。
3、Chrome 88 重要更新解读
https://mp.weixin.qq.com/s/CFzEJPGv1IwCtx1iRVFXQw
2021年1月19日，时隔两个月后，Chrome 发布 M88。该版本的显著特点是，几个比较大的下线计划终于完成，包括FTP、Flash、WebComponents v0、混合内容下载等。
4、2020年 JavaScript 状态报告解析
https://mp.weixin.qq.com/s/oYISFLESjPsoYw356TzMmQ
一年一度的 Discover the State of JS 2020 results 已出炉，每次阅读这份报告都能帮助我快速地了解到 JavaScript 世界在这一年里都发生了哪些事情，同时也给了我一次查漏补缺的机会，让我十分收益。
今年我打算以文字的方式，和大家快速分享一下这份报告在「语法」和「框架」两个部分所释放出的信息，希望能够对大家有所帮助和启发。
5、前端机器学习简史
文中为大家介绍的算法工程框架 Pipcook，它是一款面向前端开发者的机器学习框架，我们希望它会成为前端开发者学习和实践机器学习的平台，从而推进前端智能化的进程。
6、2021 年前端开发的下一步发展预测
https://mp.weixin.qq.com/s/PMxhn7Z1Cd_qqKjZ6EYQnw
7、STGW 下一代互联网标准传输协议QUIC大规模运营之路
https://mp.weixin.qq.com/s/ciR-1N4z0zvGOJSoyrvMUA
QUIC 作为互联网下一代标准传输协议，能够明显提升业务访问速度，提升弱网请求成功率以及改善网络变化场景下的平滑体验。
本文主要介绍 STGW 大规模运营 QUIC 过程中的一些经验和开发工作。
8、React 与 Vue 框架的设计思路大 PK
https://mp.weixin.qq.com/s/iXJFSpNDe_CO5tTGGgeFXA
【程序之外】
1、关于架构师：角色、能力和挑战
https://mp.weixin.qq.com/s/v_HkBfmGkjHgWKG8oncm6A
成为一名架构师可能是很多开发者的技术追求之一。那么如何理解架构？架构师是一个什么样的角色，需要具备什么样的能力？在架构师的道路上，会面临哪些挑战？本文作者道延分享他对架构以及架构师的思考和相关实践，希望对同学们有所启发。
2、王者荣耀x中华书局 荣耀中国节·节历 项目分享
若有收获，就点个赞吧
0 人点赞
