《百闻技术周刊》063期

【实践经验】
【基础夯实】
【实用工具】
【动态与研究关注】
【程序之外】

【实践经验】

1、小程序用户登录架构设计

https://juejin.cn/post/6945264484491460638

对于复杂的电商跨端应用，比如pc、h5、小程序，不同渠道注册的uid是不同的，用户登录后难以对各个渠道的交易、促销、收藏等数据进行整合。因此，要实现跨端的用户体系数据互通，就需要提供一个唯一的用户标识——手机号。这便是本文重点讲述的「用户登录」，即「游客态」转变成「会员态」的过程。

2、淘宝承接页是如何实现秒开的

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

前端性能优化是一个老生长谈的问题，也是一场持久战。在这个过程中，我们需要深入理解页面架构和业务逻辑，否则很难找出设计不足的地方，与此同时，我们也要遵循以下几个原则。
1、依据数据而不是凭空猜测：页面有性能问题，我们可以通过performance、监控、日志等手段，找出具体导致页面很慢的原因，从而对症下药。
2、忌过度优化，综合考虑：性能优化方案需要综合考虑开发成本、服务器成本，需要做衡量，不要过度优化。
3、性能优化要与业务结合：我们技术优化的目标是为了让业务更好，选择适合业务、提升业务的方案才是一个好方案。

3、实践指南-网页生成PDF

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

本文讲述了实现在 Node 端将网页生成 PDF 文件的完整过程，值得借鉴学习

4、Vue3自定义指令-10个常见的实用指令，带详细讲解，快拿去收藏！！！

https://juejin.cn/post/6968996649515515917

Vue3 中对指令也做了一些改造，主要就是对其中的钩子函数进行了优化升级，还有一些小的注意点，下面我们就一起来看看。

5、使用 CI/CD 优化前端构建的五种策略

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

在这篇文章中，我们将带你了解五种使用 CI/CD 优化前端构建时间的不同策略

使用并行网络包 Parallel-Webpack
将应用程序拆分成微前端
组件驱动型 CI：Ripple CI
优化 Webpack 的性能
NPM 模块安装的管道缓存

6、换一种方式来实现CSS评分组件

https://segmentfault.com/a/1190000038877740

实现巧妙，代码简洁，非常值得学习

【基础夯实】

1、新时代创意布局不完全指南

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

本文介绍了几种在今天实现创意布局的有益属性：

Grid 布局全家桶以及利用 Grid 实现瀑布流布局
多栏布局 multiple-column 及多栏布局嵌套其他布局
shape-outside 的各种应用
在上述布局中穿插使用 clip-path、transform 等属性以增强各种布局

2、为什么 Promise 比 setTimeout() 更快？

https://juejin.cn/post/6923042090397990919#heading-3

为什么立即解决的 promise 比立即计时器处理得更快？

是由于事件循环的“优先级”使任务队列（存储已实现的 promise 的回调）中的任务从任务队列（存储超时的setTimeout() 回调）中的任务中出队。

3、傻傻分不清的JavaScript运行机制

https://juejin.cn/post/6844903745965260807#heading-9

学习到javascript的运行机制时，有几个概念经常出现在各种文章中且容易混淆。Execution Context(执行环境或执行上下文)，Context Stack (执行栈)，Variable Object(VO: 变量对象)，Active Object(AO: 活动对象)，LexicalEnvironment（词法环境），VariableEnvironment（变量环境）等，特别是 VO, AO以及LexicalEnvironment，VariableEnvironment的区别很多文章都没有涉及到。笔者查看了一些国内外的文章，结合自身理解写下了下面的笔记，相信读完下文会对理解javascript的一些概念如变量提升，作用域和闭包有很大的帮助。

4、慎用JSON.stringify

https://mp.weixin.qq.com/s/rhVgHl33LCNtELHKCs-xfQ

JSON.stringify 在实际应用中确实很方便的解决了我们很多问题，比如简单的深拷贝等。但是我们在使用时候，也需要知道它有哪些不足之处，在目标值如果是一些特殊值的情况下，可能序列化后的结果会不符合我们的预期，这个时候就需要慎用。

5、2021年不可错过的34种JS优化技巧

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

这篇文章的目的是介绍 JavaScript 的一些最佳实践，作为前端开发人员，掌握了这些最佳实践会让我们在 2021 年的工作变得更轻松。

6、写 Node.js 代码，从学会调试开始

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

在纷繁复杂的代码世界中，出错是难免的，也许在传统的前端代码中，你习惯于 console 来排查问题，这是不合理的，在现代的社会下，调试代码是你最快找到问题的方法。

这篇文章就是教你如何快速的使用调试找到问题。查找和识别错误的速度越快，你下班的时间就越早：）。

在当前 Node.js v15 版本下，以前非常多的调试方式已经失效了，Node.js 传统的调试协议也进行了许多升级，本文按照最新的方式，来告诉你如何调试。

7、从实际项目出发，告诉你vue3到底香不香

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

【实用工具】

1、iconfont 支持全新的彩色字体图标

https://zhuanlan.zhihu.com/p/377136770

彩色字体（colors fonts 或 chromatic fonts）是一种字体技术，它允许在每个字形中使用多种颜色。它不仅可以用在图标和表情符号（emoji）的设计中，也可以用在普通的文本字体中。
http://iconfont.cn 成为全球第一个支持彩色字体图标的生产管理平台

2、Video Puppet

https://www.videopuppet.com/docs/script/

这个工具可以将一篇 Markdown 文档转成视频，支持插入图片和音频，还可以使用自动合成的语音解说。

3、一个让 git clone 提速几十倍的小技巧

https://mp.weixin.qq.com/s/2Eyg9ExBWicBwuQq5VoGug

git clone https://github.com/microsoft/TypeScript --depth=1 ts
遇到大的 git 项目的时候，可以通过添加 —depth 参数使得速度极大提升，历史 commit 越多，下载速度提升越大。
我们下载了一个 commit，就是下载了他关联的所有 tree、blob，还有一些 refs （包括tag、branch 等），这就是 —depth 的原理。
希望大家在不需要切换到历史 commit 和分支的场景下可以用这个技巧来提升大项目的 git clone 速度。

4、推荐一个神器！可以在浏览器运行 Node.js

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

在最新的 Google I/O 主题演讲中 stackblitz 向大家介绍了他们与 Next.js 和 Google 团队合作开发的在线 IDE WebContainers ，真的是非常惊艳。

WebContainers 允许你创建一个完整的 Node.js环境，它可以在毫秒内启动，并且可以实现一键联机和链接共享。这个环境具有 VS Code 强大的编辑功能，完整的终端，还有 npm等功能。它也完全在你的浏览器中运行，这带来了一些关键的好处：

比本地环境快。构建速度比 yarn/npm 快 20％，包安装速度可以快 5倍。
支持在浏览器中调试 Node.js 。与 Chrome DevTools 的无缝集成可实现本机后端调试，无需安装扩展。
默认安全。所有代码执行都发生在浏览器的安全沙箱中，而不是在远程 VM 或本地二进制文件上。
【动态与研究关注】
1、Ant Design 设计工程化
https://mp.weixin.qq.com/s/GBzKehGvohobFjdUS8WzBw

本文的主题叫做 Invisible Design System，隐形的设计体系，主要是想和大家分享，我们对可见的设计体系背后隐形的设计规则的思考，以及如何通过设计工程化的方式，让这些复杂的规则可用而不可见。

2、Vue3 在编译优化方面做的努力 | HcySunYang

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

2021年5月22日来自全球各地的Vue.js开发者齐聚线上，来自 Vue.js 核心团队成员霍春阳（HcySunYang）分享了《Vue3 在编译优化方面做的努力》，相信很多同学或多或少的都了解过 vue3 在编译方面配合运行时做了很多性能优化方面的努力，本次分享的主题将会详细探讨实现优化的思路、问题以及应对方法，和对模板能力的探索。
本文是他在VueConf 2021分享的视频和PPT，欢迎大家观看。

3、ESBuild 为什么这么快?

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

esbuild 是新一代的 JavaScript 打包工具。本文我们就来探索一下: 为什么 esbuild 这么快?
本文主要内容：

几组性能数据对比
为什么 esbuild 这么快
esbuild upcoming roadmap
esbuild 在 vite 中的运用
为什么生产环境仍需打包?
为何vite不用 esbuild 打包？
总结

4、2021 年你可能不知道的 CSS 特性 (上)

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

5、V8 9.1 正式支持顶层 await !

https://mp.weixin.qq.com/s/-YKvb4bjZaZ91Hh2UAplWg

从 v9.1 开始，在 V8 中默认启用顶级 await，并且在没有 —harmony-top-level-await 配置的情况下也是可以用的。

6、微软在低代码领域憋大招，跟RPA厂商抢生意？

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

【程序之外】