image.png

【实践经验】

1、CDN工作原理及其在淘宝图片业务中的应用

https://mp.weixin.qq.com/s/5Pyhygt6XhPnAt_j36tQpw

淘宝整个图片的访问链路有三级缓存（客户端本地、CDN L1、CDN L2），所有图片都持久化的存储到OSS中。真正处理图片的是img-picasso系统，它的功能比较复杂，包括从OSS读取文件，对图片尺寸进行缩放、编解码，所以机器成本比较高。
CDN的缓存分成2级，要合理的分配L1和L2的比例，一方面，可以通过一致性hash的手段，在同等资源的情况下，缓存更多内容，提升整体缓存命中率；另一方面，可以平衡计算和IO，充分利用不同配置的机器的能力。
image.png

2、给小程序再减重 30% 的秘密 - 京喜小程序首页瘦身实践

https://juejin.cn/post/6902082321424318471

京喜首页项目是一个优化良好的项目，对于常见的优化措施，已经有过很好的实践，就让我们我们先回顾一下有哪些常见的优化策略吧：

  • 代码分包：将相对独立的页面和组件拆分到分包，可以解决主包体积受限问题；
  • 依赖分析：移除未引用的页面、组件和其他文件；
  • 避免使用本地资源：除了兜底图片，其他都尽可能使用 url 的方式，由于 base64 图本质上是将信息编码成长字符串，也会占用很多空间，不建议使用；
  • 对所有类型的文件都进行压缩并清理注释，包括了：js、wxml、wxss、json；
  • 此外，京喜首页团队还针对 Taro 开发场景进行了如下优化：

分析出编译后每个文件的高频重复代码（如处理兼容性的 pollyfill 代码），拆分生成公共文件，替换原引用以实现共用。

3、腾讯 Code Review 规范出炉！

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

“工程和设计的每个分支都有自己的技术文化。在大多数工程领域中，就一个专业人员的素养组成来说，有些不成文的行业素养具有与标准手册及教科书同等重要的地位（并且随着专业人员经验的日积月累，这些经验常常会比书本更重要）。资深工程师们在工作中会积累大量的隐性知识，他们用类似禅宗’教外别传’的方式，通过言传身教传授给后辈。软件工程算是此规则的一个例外：技术变革如此之快，软件环境日新月异，软件技术文化暂如朝露。然而，例外之中也有例外。确有极少数软件技术被证明经久耐用，足以演进为强势的技术文化、有鲜明特色的艺术和世代相传的设计哲学。”

4、ESR 在首屏性能优化上的尝试与突破

https://mp.weixin.qq.com/s/4NfL2iI0Tz0Dro-9TLRMHA

什么是ER？即EdgeRoutine，它是阿里云CDN团队开发的边缘Serverless计算环境，支持在CDN边缘执行客户编写/编译的JavaScript或者WebAssembly代码（未来会推出）。关于ER的详细介绍，大家可以去看看阿里云的官方文档(https://developer.aliyun.com/article/757950)。
那什么是ESR呢？我翻译为边缘渲染，Edge Side Render。
得益于阿里云的CDN团队ER的特性：提供了完整JavaScript环境，支持ES6语法；Web标准Service Worker API支持，前端应用无需更改即可适配。前端可以在 CDN 上做类似于SSR的事情，可对请求和响应做灵活的编程。自此我们开始了ESR流式渲染的尝试和改造。

5、在千亿的成交额背后，前端工程师是如何做“资损防控”的？

https://mp.weixin.qq.com/s/ZKtS47uOtjEHdEjKw0Y-uQ

资损 —— 顾名思义就是平台发生了与用户或客户心理预期不符、直接或间接产生经济损失的场景。

一直以来，资损问题就在我们的生产环境中不断发生，而且随着业务的规模和疆土不断扩大，经济损失的规模也在不断扩大，这直接对平台、客户和用户都产生了非常不良的影响。尤其在某一时间段连续发生高资损风险问题，恶劣程度上升到集团，对平台的生产和运营产生很高的负面影响，所以大家高度重视资损风险的防控。

本文结合笔者的思考以及淘系双 11 的实践为大家提供一些资损防控的经验参考。
**

  • 【已产品化】针对可以在代码级别静态扫描分析出来的资损风险问题，做了第一道产品化防控手段——资损/舆情风险代码扫描工具；
  • 【已产品化】针对 UI、多态、复杂交互逻辑等不能从代码级别分析出来的资损风险问题，与测试团队合作做了第二道产品化防控手段——资损/舆情风险 UI 测试扫描，通过 UI 测试用例快照比对预防资损风险；
  • 【兜底方案】针对上述产品化手段不能覆盖的特殊场景，暂时先依赖人工预演作为兜底防护方案。


6、iOS 键盘难题与可见视口（VisualViewport）API

http://www.alloyteam.com/2020/02/14265/

7、web-worker 优化惨案纪实

https://mp.weixin.qq.com/s/Lu4Z4XDx17u8J-STmsGb2g

前端项目为 vue 技术栈， 业务中遇到这样一个情景，有一个输入框，可以键入或者复制粘贴进一大段带有某种格式的文本，根据格式符号对文本进行分割处理（例如根据“；”分割对象，根据“，”分割属性），最终将他们处理成某种格式的对象集合，同时生成预览。效果大概是这个样子：
image.png

但随着输入内容的增多，以及操作的频繁，很快会遇到性能问题，导致页面卡死。下图是一段 2082080 字数键入后执行的情况，这是当输入内容比较多的执行情况，因为再多就卡死了，可以看到整个 input 回调执行相当耗时，造成性能低下，同时频繁触发 vue 更新让原本就已经低效的性能雪上加霜。笔者尝试使用 web-worker进行优化（采用的是simple-web-worker这个NPM包）进行优化，再辅以防抖，优化到了浏览器的textInput都吃不消了，但事件处理也不会造成卡顿的程度。

【基础夯实】

1、深入了解页面生命周期API

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

顾名思义，页面生命周期API将网页生命周期的钩子暴露给JavaScript。然而，这并不是一个全新的概念。页面可见性API存在了有一段时间，向JavaScript揭示了一些页面可见性事件。
然而，如果你碰巧在这两者之间做出选择，值得一提的是Page Visibility API的一些限制。

  • 它只提供网页的可见和隐藏状态。
  • 它不能捕获被操作系统丢弃的页面（Android、IOS和最新的Windows系统可以终止后台进程以保存系统资源）。

我们来看看页面生命周期API所暴露的页面生命周期状态。

2、CSS Pixels

http://www.alloyteam.com/2020/06/css-pixels/

在中文中，我们把 Pixel 翻译为像素。我们常说的一个设备屏幕具有多少像素，其实是在说屏幕上具有多少物理的点。比如 1920x1080（1080p），2560x1440（2k），这些都指的是设备的物理上的点的个数，也就是我们将会在下面提到的 “物理像素”。基于此，很多人潜意识中就会把 px 当作 pixel 的简写，自然也就将 px 等同到设备的物理像素上了（过去我也一直是这么以为的😓）。但是如果这么理解的话，显然比 1px 还要细的线是不可能存在的。在这种情况下，我觉得其实 1px 应该是对应多个像素的，因为只有这样才有可能让 1px 的线更细。那么它到底是如何计算的呢？我查到了下面一张图让我恍然大悟。
https://pic.intellizhi.cn/blogimg/iphone-pic.svg

上图是一张 iPhone 设备的各种不同像素衡量方法之间的关系，应该就很清晰明了了。在这个图中一共介绍了三种像素衡量的方法。

  • 物理像素（Physical Pixel）
    只由设备硬件决定，反映屏幕本身内部的物理像素指标。
  • 渲染像素（Render Pixel）
    是系统层级对物理像素分配的调整，相当于在系统中调节分辨率的大小。
  • 逻辑像素/点（Point）
    是一个抽象概念，引入这个概念是为了调和像素密度（pixel per inch）和观看距离不一样而导致的显示大小差异。


3、如何在JavaScript中获取屏幕，窗口和网页大小

https://juejin.cn/post/6901352015222276104

浏览器的各种尺寸是javaScript中比较容易混淆的概念，下面我会在本文中解释这些概念并且通过具体示例告诉大家如何访问它们。各位客官看好叻🍵

4、尝试使用JS IntersectionObserver让标题和导航联动

https://www.zhangxinxu.com/wordpress/2020/12/js-intersectionobserver-nav/

一般文档页面都比较长，为了方便定位，都会基于标题生成一个导航，如下图所示。笔者利用JS IntersectionObserver提供了一种新的实现思路～
image.png

5、可能是目前最易理解的手写promise

https://mp.weixin.qq.com/s/oURuka-Qgbbj8JKtlYNMaw

本文写给有一定Promise使用经验的人，如果你还没有使用过Promise，这篇文章可能不适合你，建议先了解Promise的使用。

本篇文章整体架构的大图如下，接下来会一步一步去实现一个 Promise。

6、如何真正优雅解决按钮“重复点击”问题？

https://mp.weixin.qq.com/s/ssTL-pHmmbZG_fSdr4JGkw

思否上的许多按钮都没有做重复点击检测的问题，往往导致点击没反应，多次点击后突然发表多条相同内容，比如下图和一位同学的私信，如果你在这篇文章下发表评论，可以不小心多点几下”提交评论”按钮，会发现也存在相同的问题，该篇文章提供了一种优雅的解决方案～

image.png

7、自动增长Textareas的最干净技巧

https://www.tuicool.com/articles/vumYbyu

想法是使 <textarea> 更像 <div> ，因此它的高度可以扩展以包含当前值。这几乎是奇怪的，没有一个简单的原生解决方案，不是吗？笔者得到了一个非常好的原生解决方案。

8、Vue3 Teleport 组件的实践及原理

https://www.tuicool.com/articles/ENZFJzE

Vue3 的组合式 API 以及基于 Proxy 响应式原理已经有很多文章介绍过了，除了这些比较亮眼的更新，Vue3 还新增了一个内置组件： Teleport 。这个组件的作用主要用来将模板内的 DOM 元素移动到其他位置。希望在阅读文章的过程中，大家能够掌握 Teleport 组件的用法，并使用到业务场景中。尽管原理十分简单，但是我们有了 Teleport 组件，就能轻松解决弹窗元素定位不准确的问题。

9、浅谈JS原型

https://www.tuicool.com/articles/YnYfi2I

在日常开发中时常会碰到类似于 Object.prototype.toString.call() 这样的涉及到JS原型的方法，又因自身对原型链没有过系统的整理，有时候会对这些用法产生疑惑，故记录此贴谈谈个人对JS原型链的见解。

10、20个常用的JavaScript简写技巧

https://mp.weixin.qq.com/s?__biz=MzIyMDkwODczNw==&mid=2247492760&idx=1&sn=94bee73ee4d8e8bf724460c4f6a02a23

【实用工具】

1、使用GPU.js改善JavaScript性能

https://www.tuicool.com/articles/3UnEvuI

你是否曾经尝试过运行复杂的计算，却发现它需要花费很长时间，并且拖慢了你的进程？

有很多方法可以解决这个问题，例如使用 web worker 或后台线程。GPU 减轻了 CPU 的处理负荷，给了 CPU 更多的空间来处理其他进程。同时，web worker 仍然运行在 CPU 上，但是运行在不同的线程上。

GPU.js 是一个针对 Web 和 Node.js 构建的 JavaScript 加速库，用于在图形处理单元（GPU）上进行通用编程，它使你可以将复杂且耗时的计算移交给 GPU 而不是 CPU，以实现更快的计算和操作。还有一个备用选项：在系统上没有 GPU 的情况下，这些功能仍将在常规 JavaScript 引擎上运行。

当你要执行复杂的计算时，实质上是将这种负担转移给系统的 GPU 而不是 CPU，从而增加了处理速度和时间。高性能计算是使用 GPU.js 的主要优势之一。如果你想在浏览器中进行并行计算，而不了解 WebGL，那么 GPU.js 是一个适合你的库。

2、极致追求，让小程序代码包立减 10% 的插件

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

weapp-css-modules 是小程序的简化版 css-modules，比标准 css-modules代码量更少的优化方案。

css-modules 是一种 css 模块化方案，它在构建过程中生成一个原类名与新类名的 map，根据 map 引用样式，通过设定 hash 规则，实现了对 CSS 类名作用域的限定，它通常用来解决页面类名冲突的问题。由于微信小程序内组件样式默认隔离，为什么要使用 css-modules 呢？
有以下 2 个原因：

  • hash 化后可以实现更短的命名，减少代码包体积
  • 跨端项目需要兼顾非小程序环境，避免样式冲突

weapp-css-modules 做了哪些事？

  • 新类名单字母编排，减少代码量
  • 移除类名映射 map，替换 js 和 wxml 中变量为编译后类名

请看如下对比：
标准 css-modules 方案：

  1. import style from'./index.wxss'
  2. <view class="{{style.banner}}"></view>
  3. .index_banner_xkpkl { xx }
  4. module.exports ={'banner' : 'index_banner_xkpkl'} // 额外生成的 map 文件

weapp-css-modules 编译后效果：

  1. let style = {}
  2. <view class="a"></view>
  3. .a { xx }


3、我点了页面上的元素，VSCode 乖乖打开了对应的组件？

https://juejin.cn/post/6901466406823575560#comment

在大型项目开发中，经常会遇到这样一个场景，QA 丢给你一个出问题的链接，但是你完全不知道这个页面 & 组件对应的文件位置。这时候如果可以点击页面上的组件，在 VSCode 中自动跳转到对应文件，并定位到对应行号岂不美哉？
react-dev-inspector 就是应此需求而生。
image.png

4、一款帮助开发团队讨论、审查和理解代码的工具 CodeStream

https://github.com/TeamCodeStream/codestream

CodeStream可以帮助开发团队讨论和理解代码，效果如下图所示：
image.png

5、100 个高质量的免费插画

https://2.flexiple.com/scale/all-illustrations

image.png

【动态与研究关注】

1、🎉 Element UI for Vue 3.0 来了！

https://juejin.cn/post/6900733850540834830

Element Plus for Vue 3.0 是一个使用 TypeScript + Composition API 重构的全新项目。 关注Element 对 Vue 3.0 的升级适配的读者不要错过哦~

2、TypeScript超越C++成第四大语言！无惧中国开源托管平台竞争：GitHub发布2020年开发者报告

https://mp.weixin.qq.com/s/uRQuJDt-bRHibnnx076-Kg

自 2008 年推出以来，GitHub 已经成为互联网上最大的项目管理和开源协作平台，到今年为止，社区已经拥有5600万开发者，去年这个数据是4000万。假设保持这样的增长速率，GitHub用户预计将在2025年达到一个亿。
GitHub中排名前10位的语言为：JavaScript，Python，Java，TypeScript，C＃，PHP，C ++，C，Shell和Ruby。GitHub根据标记有该语言的公共和私有存储库的唯一贡献者数量进行排名。
image.png
JavaScript 和 Ruby 正面临最紧迫的开源安全风险。即使是GitHub平台上的开发人员已经超过5600万，但是对于这样一群数量庞大的开发人员而言，发布开源代码却并不意味着他们会自动检查代码是否存在安全问题。JavaScript开源项目中有94％的项目依赖于开源组件。

3、“云原生”趋势下的架构演进，及架构师的关注点分离

https://mp.weixin.qq.com/s/5fZ0m7JdX7wRJ2AvNnZL_g

云原生要解决的核心问题，就是如何能够快速交付 App。云原生其实并不是在云平台上完整的构建应用这么简单，云原生是一种方法论或者理念，帮助开发团队充分利用云计算的基础架构来构建 App，也可以把它认为是一系列工具，但不是云。
2015 年，CNCF 给出了云原生的早期定义，主要强调了应用的容器化，面向微服务。
image.png

4、探索 Serverless 中的前端开发模式(多场景)

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

在 QCon 北京 2019 大会上，蒋航讲师做了《探索 Serverless 中的前端开发模式》主题演讲，本文主要就根据个人理解和总结，从前端开发模式的演进、基于 Serverless 的前端开发案例以及 Serverless 开发最佳实践等方面，与大家探讨 Serverless 中的前端开发模式，具体内容请点开连接查看哦～

image.png

5、了解一下Fossil，一个Git的替代品

https://www.tuicool.com/articles/rYFVBv6

Fossil 是一个集版本控制系统、bug 追踪、维基、论坛以及文档解决方案于一体的系统。

每个开发者都知道，追踪代码的修改是至关重要的。有时候你会处于好奇或者教育的目的需要展示你的项目开始和进化的历史。有时候你想让其他的开发者参与到你的项目中，因此你需要一种值得信赖的能合并不同代码分支的方法。更极端一点，有时候你为了解决一个问题而修改的代码导致已有的功能不能正常使用。

Fossil 源码管理系统是由著名的 SQLite 数据库的作者开发的一个集版本控制系统、bug 追踪、维基、论坛以及文档解决方案于一体的系统。

【程序之外】

1、引导设计中的体验思考

https://mp.weixin.qq.com/s/9XlFwEfPqgaoICLerRlgLw

引导主要包含2个方面的内容，“用户所需的”和“产品希望用户看到的”。具体而言就是以下3个信息维度：
image.png
引导的目的就是通过信息传递，降低用户学习成本，或者激励用户行为，提升用户效率及转化。3种引导形式的特点如下：
image.png

2、程序员如何把控自己的职业

https://coolshell.cn/articles/20977.html

在整个成长过程中，其实有很多东西是相通的，其本上来说，就是下面的三件事——
第一，如果想要把控技术，应对这个世界的一些变化，需要大致知道这个世界的一些规律和发展趋势，另外还得认识自己，自己到底适合做什么？在这个趋势和规律下属于自己的发挥领域到底是什么？这是我们每个人都需要了解的。
第二，打牢基础，以不变应万变，不管世界怎样变化，我都能很快适应它。基础的重要程度对于你能够飞多高是相当有影响的，懂原理的人比不懂原理的人能做出来的事情或是能解决的问题完全是两个层级的。
第三，提升成长的效率，因为现在社会的节奏实在太快了，比二十年前快得太多，技术层出不穷，所以我们的成长也要更有效率。效率并不单指的快，效率是怎么样更有效，是有用功除以总功（参看《加班与效率》），怎么学到更有效的东西，或者怎么更有效学习，是我们需要掌握的另一关

3、“10x 工程师”：如何让身边 10 位同事效率翻倍？

https://www.tuicool.com/articles/RrERjuN

人人都想要战斗力超强的工程师，也就是所谓的10x工程师。但是究竟什么是10x工程师呢？是完成任何任务都比别人快10倍的工程师吗？还是能让10位队友效率提高1倍的工程师？Ofer Karp根据自己管理团队的经验，提出了两种类型的10x工程师。看看这是不是你们所需要的10x工程师。

4、为什么程序员怕改需求？看完这些神解释我笑了

https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651564059&idx=1&sn=ebe0da2eaaceb34a7bdfa827c795e100&chksm=80257fdab752f6cc52c02f039d98868539df11138f8b45ad716993cd0599b73cf19cdd80f25d&scene=27

为什么程序员/设计师怕改需求？网上有类似的段子，比如：「杀一个程序员不需要用枪，改三次需求就可以了。」

有网友在知乎上提问「如何向外行解释产品经理频繁更改需求为什么会令程序员烦恼?」。本文综合了 3 位网友的回复，希望能让你轻松一分钟😄～

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

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