image.png
生活不止眼前的苟且，还有诗和远方。

【实践经验】

1、大型前端项目的断点调试共享化和复用化实践

https://mp.weixin.qq.com/s/XfSfwNTniJLke8c9pQ5R4w

2、干货收藏 | 如何优化前端性能？

https://mp.weixin.qq.com/s/OYw7lDCuxTU1BAjhTTV3vw

随着前端的范畴逐渐扩大，深度逐渐下沉，富前端必然带来的一个问题就是性能。特别是在大型复杂项目中，重前端业务可能因为一个小小的数据依赖，导致整个页面卡顿甚至崩溃。本文基于Quick BI（数据可视化分析平台）历年架构变迁中性能的排查、解决和总结出的“个性”问题，尝试总结整个前端层面相对“共性”的问题，提供一些前端性能解决思路。

3、前端CLI脚手架思路解析-从0到1搭建

https://juejin.im/post/6879265583205089287#heading-0

在实际的开发过程中，我们经常用别人开发的脚手架，以节约搭建项目的时间。但是，当npm没有自己中意的脚手架时，我们不得不自己动手，此时学会开发前端CLI脚手架的技能就显得非常重要，该篇文章手把手从0到1教你写一个前端CLI脚手架～

4、11个JavaScript代码重构最佳实践

https://mp.weixin.qq.com/s/u9oXMgfPVCPkM3CmOgKUpw

【基础夯实】

1、一些不错关于TypeScript的学习资料

https://www.yuque.com/lizhiyao/aa2k94/aiuh1d

还没掌握TypeScript么，这些资料你值得拥有～

2、一个基于 Vue3 + Vite + TS 的完整项目

https://juejin.im/post/688179505492474893

项目基于ant-design-vue、typescript、vue3.0、vite、tailwindcss、tsx实现的 vue3 风格的后台管理系。

3、Vue中Axios的封装和API接口的管理

https://mp.weixin.qq.com/s/7eai9L-4_m1Faajqhn5X4g

一篇比较通用和实用的axios封装和api接口管理的文章，主要目的就是在帮助我们简化代码和利于后期的更新维护～

4、深入浅出主流的几款小程序跨端框架原理

https://juejin.im/post/6881597846307635214

文会尝试梳理一下主流小程序一些共用性的通用实现原理， 尽量会屏蔽忽略掉各家实现一些细枝末节的细节差异，也不会在文章中贴大段的源码分析，而是通过伪代码来代替。

从 Vue 跨端框架和 React 跨端框架两个大方向，进入到小程序跨端原理的世界，讲解这些跨端框架的核心原理，深入到源码底层去分析，揭开他们神秘的面纱。

5、深入理解洋葱模型

https://mp.weixin.qq.com/s/33H5ZV93croSIQfdPwYdfA

洋葱模型，也即是中间件的能力之强大众所周知，现在在 Web 社区发挥极大作用的 Redux、Express、Koa，开发者利用其中的洋葱模型，构建无数强大又有趣的 Web 应用和 Node 应用，更不用提基于这三个衍生出来的 Dva、Egg 等，本文剖析了中间件的组合原理，从而帮助大家更加理解洋葱模型。

6、前端需要掌握的常见设计模式

https://mp.weixin.qq.com/s/Yj2I7YsLsTsRYbujjOp38A

本文介绍了前端领域常见的 9 种设计模式：

  • 工厂模式
  • 单例模式
  • 原型模式
  • 装饰器模式
  • 适配器模式
  • 代理模式
  • 策略模式
  • 观察者模式
  • 迭代器模式


7、flex:0 flex:1 flex:none flex:auto应该在什么场景下使用？

https://www.zhangxinxu.com/wordpress/2020/10/css-flex-0-1-none/

常见的flex缩写有下面这几个，flex:0、flex:1、flex:none、flex:auto，那各个CSS声明应该在什么场景下使用才正确呢？该篇文章进行了一个详细的讲解，总结为以下几点：

  • flex: 0 适用场景较少，适合设置在替换元素的父元素上；
  • flex: none 适用于不换行的内容固定或者较少的小控件元素上，如按钮。
  • flex: 1 适合等分布局；
  • flex: auto 适合基于内容动态适配的布局；


8、浏览器是如何调度进程和线程的？

https://mp.weixin.qq.com/s/bkSmKYGHk0V5eZIfuSTNyQ

image.png
我们来回顾下线程和进程的概念：

  • 进程：CPU 进行资源分配的基本单位
  • 线程：CPU 调度的最小单位

这是进程和线程最官方也是最常见的两个定义，但是这两个概念太抽象了，很难以理解。通俗一点讲：进程可以描述为一个应用程序的执行程序，线程则是进程内部用来执行某个部分的程序。
做个简单的比喻：进程=火车，线程=车厢

  • 线程在进程下行进（单纯的车厢无法运行）
  • 一个进程可以包含多个线程（一辆火车可以有多个车厢）
  • 不同进程间数据很难共享（一辆火车上的乘客很难换到另外一辆火车，比如站点换乘）
  • 同一进程下不同线程间数据很易共享（A车厢换到B车厢很容易）
  • 进程要比线程消耗更多的计算机资源（采用多列火车相比多个车厢更耗资源）
  • 进程间不会相互影响，一个线程挂掉将导致整个进程挂掉（一列火车不会影响到另外一列火车，但是如果一列火车上中间的一节车厢着火了，将影响到所有车厢）
  • 进程可以拓展到多机，进程最多适合多核（不同火车可以开在多个轨道上，同一火车的车厢不能在行进的不同的轨道上）
  • 进程使用的内存地址可以上锁，即一个线程使用某些共享内存时，其他线程必须等它结束，才能使用这一块内存。（比如火车上的洗手间）－”互斥锁”
  • 进程使用的内存地址可以限定使用量（比如火车上的餐厅，最多只允许多少人进入，如果满了需要在门口等，等有人出来了才能进去）－“信号量”

9、CSS 排版与正常流 —— 重学CSS

https://mp.weixin.qq.com/s/1udDj1UanTLs2LfblPs_kw

带你夯实css排版基础

10、聊聊 ESM、Bundle 、Bundleless 、Vite 、Snowpack

https://mp.weixin.qq.com/s/DkOHjCAdTk3uy4lBnrUESQ

文章较长，提供一个传送门：

  • 什么是 ESM

https://segmentfault.com/a/1190000025137845?_ea=67042700#item-2-1

  • ESM 是如何工作的

https://segmentfault.com/a/1190000025137845?_ea=67042700#item-2-2

  • Bundle & Bundleless

https://segmentfault.com/a/1190000025137845?_ea=67042700#item-2-3

  • 实现一个乞丐版 Vite

https://segmentfault.com/a/1190000025137845?_ea=67042700#item-2-4

  • Snowpack & 实践

https://segmentfault.com/a/1190000025137845?_ea=67042700#item-2-5

  • bundleless 模式在实际开发中存在的一些问题

https://segmentfault.com/a/1190000025137845?_ea=67042700#item-2-6

  • 结论

https://segmentfault.com/a/1190000025137845?_ea=67042700#item-2-7

【动态与研究关注】

1、阔别两年，webpack 5 正式发布了！

https://mp.weixin.qq.com/s/bstdTn-KDxA4YrQky_cRJQ

本次重大发布的整体发展方向如下：

  • 尝试用持久性缓存来提高构建性能
  • 尝试用更好的算法和默认值来改进长期缓存
  • 尝试用更好的 Tree Shaking 和代码生成来改善包大小
  • 尝试改善与网络平台的兼容性
  • 尝试在不引入任何破坏性变化的情况下
    • 清理那些在实现 v4 功能时处于奇怪状态的内部结构
  • 试图通过现在引入突破性的变化来为未来的功能做准备
    • 尽可能长时间地保持在 v5 版本上

**

2、Chrome浏览器Referrer-Policy默认值变更

https://www.yuque.com/alibabaf2e/gt3np7/nbcb65

在Chrome 85中，有个很重要的变化：将Referrer-Policy默认值从no-referrer-when-downgrade改为strict-origin-when-cross-origin，它会对埋点、网站分析等功能造成影响。本文会详细介绍这个变化，文章分为以下几个部分：前置知识、变化原因、影响范围、处理方案。

3、Chrome 85 稳定版发布，页面加载速度提升 10%

https://www.oschina.net/news/118175/chrome-85-released

谷歌发布了最新稳定版 Chrome 85，此版本将页面加载速度提高了 10%，并带来了许多标签页方面的改进，以及提供了一系列开发者功能。

4、Facebook 新一代 React 状态管理库 Recoil

https://juejin.im/post/6881493149261250568

React爱好者可以了解关注一下～

5、注意！下个月开始 GitHub 新建存储库的默认分支就不叫“master”了！

https://mp.weixin.qq.com/s/6CJYFUgF4hB_3CYupmOcow

近日，GitHub宣布，自2020年10月1日起，在GitHub平台上创建的所有源代码存储库都将默认命名为 main ，而非原本的 master 。
这一变化是什么原因？具体又是怎样的变化呢？这篇文章将为你一一解答。

6、东半球最酷的学习项目

https://github.com/geekxh/hello-algorithm?utm_source=gold_browser_extension

  • 三十万字算法图解
  • 千本开源电子书
  • 100 张思维导图
  • 100 篇大厂面经
  • 30 个学习专题


7、28 个激发灵感的 404 页面

https://dev.to/madza/28-creative-404-pages-for-your-inspiration-35dc

你还为404页面的设计发愁找不到灵感么，这篇文章可能对你有所启发～

【实用工具】

1、50个能帮你节省时间的开发工具

https://mp.weixin.qq.com/s/s8eJh1JdZuZ4iKL5X22tsQ

本文列举出50个能够帮你提高开发效率，节省开发时间的Chrome扩展和Web应用，它们
很有可能会在工作开发中派上用场。

2、一款无需写任何代码，即可一键生成前后端代码的开源工具

http://www.jeecg.com/

一款基于BPM的低代码平台，零代码开发！采用前后端分离架构，支持微服务： SpringBoot 2.x，Ant Design&Vue，Mybatis-plus，Shiro，JWT，SpringCloud Alibaba。强大的代码生成器让前后端代码一键生成，无需写任何代码！！

3、一款出色的DIFF工具：Partial Diff

https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff

4、12种Flutter开发工具推荐

https://mp.weixin.qq.com/s/FuBw8GUPpIGrGIVATOb2lw

谷歌的 Flutter 跨平台应用开发框架正迅速成为移动跨平台开发人员的最爱。尽管 Flutter 由于谷歌的大力支持正在迅速成熟，但社区仍然没有太多第三方开发工具可用。不过仔细挑选的话，好用的 Flutter 开发工具还是能找到一些的。在本文中，我们将介绍一些目前可用的顶级工具。

【程序之外】

1、一位架构师的感悟：过度忙碌使你落后

https://mp.weixin.qq.com/s/uwA5JryExOpUtQ_5AF7bBQ

对于 IT 人而言忙碌已成为了习惯，加班常挂在嘴边。“996”工作制似乎也变成了公司高效的标志。而事实上过度的忙碌使你落后。过度忙碌会导致没有时间学习和更新自己的知识，尤其在这个高速发展的时代。在工作经历中发现过度繁忙通常会带来以下问题：

  • 缺乏学习导致工作能力没有提升，而面对的问题却变得日益复杂。
  • 技术和业务上没有更大的领先优势，只能被动紧紧追赶。试想一下，要是你都领先同行业五年了，还会在乎通过加班来早一个月发布吗？

反过来上面这些问题会导致你更加繁忙，进而更没有时间提高自己的技术技能，很快就形成了一个恶性循环。所以每个技术人员都要保证充足的学习时间，否则很容易成为井底之蛙，从而陷入前面提到的恶性循环。

2、与用户研究有关的一些基础问题

https://mp.weixin.qq.com/s/8HLFSMBwq_yqEVOJ2CQg3Q

我们的用户研究工作，在很多时候是通过研究获得对用户的理解，然后将理解传递出来，以“解释”和“预测”的方式来发挥作用。比如，研究问题某产品的用户流失比例为什么高，我们的研究是在给出解释。这种解释帮助业务的同学形成了理解，并基于理解去优化产品或调整策略。再比如，我们去了解用户对产品的满意度或推荐意愿、用户使用/不使用的原因等，基于这些研究结论一定程度上可以预测产品将来的表现。

更多精彩资讯，欢迎扫码入群交流~🚀**🚀🚀**
扫码入群.png

注：所有资讯均来自网络，不代表编者观点。