《百闻技术周刊》048期

">
【实践经验】
【基础夯实】
【实用工具】
- 1、10个CSS3动画工具，值得你收藏！
- 2、QRCanvas-动态生成二维码的开源优秀js库
【动态与研究关注】
【程序之外】
- 1、全球最大消费电子展，我们找到了 17 个「非主流」产品
- 2、马斯克：我的房子卖给了中国人未来想葬在火星

【实践经验】

1、深入扩展文本溢出解决方案

https://mp.weixin.qq.com/s/wpUfcDBqaTyXHo5p3y-ong

在实际的开发中不管是移动端还是 PC 端都会遇到文本太长，因为宽度不够导致我们需要设置成省略号。文本就文本溢出做一个总结，希望对你们开发过程中有帮助。

阅读本文你将看到如下几部分内容:

单行文本溢出
多行文本溢出
拓展的多行文本溢出
自定义多行文本溢出
高亮多行文本溢出

2、重构几次代码后，我总结了一些JavaScript代码整洁清晰的注意点

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

得益于React的帮助，在近半年也是恶补了一些原生JavaScript的一些知识点，学习的同时也慢慢的思考当前项目中的一些合理性，复盘后总结了一些项目上必须优化的一个点，希望和大家进行共勉。

3、Vue3 Compiler 优化细节，如何手写高性能渲染函数

https://juejin.cn/post/6913855965792043021

Vue3 的 Compiler 与 runtime 紧密合作，充分利用编译时信息，使得性能得到了极大的提升。本文的目的告诉你 Vue3 的 Compiler 到底做了哪些优化，以及一些你可能希望知道的优化细节，在这个基础上我们试着总结出一套手写优化模式的高性能渲染函数的方法，这些知识也可以用于实现一个 Vue3 的 jsx babel 插件中，让 jsx 也能享受优化模式的运行时收益，这里需要澄清的是，即使在非优化模式下，理论上 Vue3 的 Diff 性能也是要优于 Vue2 的。另外本文不包括 SSR 相关优化，希望在下篇文章总结。
篇幅较大，花费了很大的精力整理，对于对 Vue3 还没有太多了解的同学阅读起来也许会吃力，不妨先收藏，以后也许会用得到。

4、egg+vue+mongodb实践开发在线文档管理平台——水墨文档

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

团队中会遇到在线文档管理的需求，包括技术文档，接口文档， excel 文档，和产品原型的托管等需求，一直没有找到合适的开源项目来满足需求，所以动手实现了个文档管理系统（实现起来并不复杂，该教程只是提供思路，并非最佳实践）

Github: https://github.com/huangwei9527/Ink-wash-docs 演示地址：http://www.inkwash.online/

5、我写CSS的常用套路(附demo的效果实现与源码）

https://mp.weixin.qq.com/s/d8Gr_nrHsNa0J2xB-qgidw

本文是笔者写CSS时常用的套路。不论效果再怎么华丽，万变不离其宗。

6、前端设置任何颜色作为主题色(不用预先指定固定几种)，吐血整理

https://mp.weixin.qq.com/s/NR-lbBoQlVHy_JsBetNpfg

项目中，本来要提供2个主题，一个深色，一个浅色，本来想利用scss来实现，但是觉得，如果后期，再有3个、4个呢？感觉这种提供几种固定主题的方案，有些不太灵活，正好看到element-ui中主题，可以随意指定，于是也，准备实现一个随时可以定制的主题功能。

7、优化无止境，爱奇艺中后台 Web 应用性能优化实践

https://mp.weixin.qq.com/s?__biz=MzI0MjczMjM2NA==&mid=2247491315&idx=1&sn=da09e32092244b92d57e9350fe82bd2c&utm_source=tuicool&utm_medium=referral

爱奇艺视频生产智能云平台系统在今年进行了一次重大升级，前端团队也趁此机会将底层技术架构从三年前的 Arm.js（内部MVC框架）+ Java BFF + Velocity 模板完全切换到了 Vue.js + Node.js BFF 的技术栈。

新的前端应是一个拥有超过十个业务模块的单页面应用，每个模块已经通过路由懒加载进行了拆分，同时公共的第三方依赖也拆分到了单独的 Vendor 文件。不过在上线试用初期，用户还是普遍反馈页面打开速度较老版本有比较明显的下降，存在几秒钟不等的白屏等待时间。

为了提升用户体验和使用效率，团队内部对新版前端应用进行了多次优化，最终效果提升非常显著。本文的主要内容就是针对中后台 Web 应用性能的分析思路及解决方案的总结分享。

8、腾讯文档表格：大型前端项目架构优化探索之路

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

【基础夯实】

1、CSS现状和如何学习

https://mp.weixin.qq.com/s/ztU1tESHy-5kF2iFpZbgfw

2、前端也能学算法：由浅入深讲解动态规划

https://mp.weixin.qq.com/s/Dyw-90yUgGiq4a5af1-QXw

动态规划是一种常用的算法思想，很多朋友觉得不好理解，其实不然，如果掌握了他的核心思想，并且多多练习还是可以掌握的。下面我们由浅入深的来讲讲动态规划。

3、前端的Nginx知识梳理

https://juejin.cn/post/6914160814152744973

Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器。
Nginx以事件驱动的方式编写，所以有非常好的性能，同时也是一个非常高效的反向代理、负载平衡服务器。在性能上，Nginx占用很少的系统资源，能支持更多的并发连接，达到更高的访问效率；在功能上，Nginx是优秀的代理服务器和负载均衡服务器；在安装配置上，Nginx安装简单、配置灵活。
Nginx支持热部署，启动速度特别快，还可以在不间断服务的情况下对软件版本或配置进行升级，即使运行数月也无需重新启动。
在微服务的体系之下，Nginx正在被越来越多的项目采用作为网关来使用，配合Lua做限流、熔断等控制。

4、你不知道的 DOM 变动观察器：Mutation observer

https://mp.weixin.qq.com/s/_ovaLe4-THWwfEU3-ZCBfQ

MutationObserver 是一个内建对象，它观察 DOM 元素，并在检测到更改时触发回调。
我们将首先看一下语法，然后探究一个实际的用例，以了解它在什么地方有用。

5、JavaScript代理的惊人力量

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

今天我们要学习的是ECMAScript 6 Proxies。我们将在本文中涉及以下主题。

什么是代理
代理人在行动
谁使用代理
使用案例和实例
资源简介

6、全双工通信的 WebSocket

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

WebSocket 是一种网络通信协议。在 2009 年诞生，于 2011 年被 IETF 定为标准 RFC 6455 通信标准。并由 RFC7936 补充规范。WebSocket API 也被 W3C 定为标准。
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行「全双工(full-duplex)通讯的协议」。没有了 Request 和 Response 的概念，两者地位完全平等，连接一旦建立，就建立了真•持久性连接，双方可以随时向对方发送数据。

7、探秘 flex 上下文中神奇的自动 margin

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

自动 margin 还是很实用的，可以使用的场景也很多，有一些上面提到的点还需要再强调下：

块格式化上下文中margin-top 和 margin-bottom 的值如果是 auto，则他们的值都为 0
flex 格式化上下文中，在通过 justify-content 和 align-self 进行对齐之前，任何正处于空闲的空间都会分配到该方向的自动 margin 中去
单个方向上的自动 margin 也非常有用，它的计算值为该方向上的剩余空间
使用了自动 margin 的 flex 子项目，它们父元素设置的 justify-content 以及它们本身的 align-self将不再生效

8、重磅！超详细的 JS 数组方法整理出来了

https://mp.weixin.qq.com/s/66LpzgXqzNEm7T8Nqta8Qg

数组是 js 中最常用到的数据集合，其内置的方法有很多，熟练掌握这些方法，可以有效的提高我们的工作效率，同时对我们的代码质量也是有很大影响。

9、走近Ts，用了爽，用后一直爽

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

vue3已经发布了，ts的脚步已经阻拦不住了，还只会es6?别想了，人家都已经在行动了，以下是ts的基本系列教程，ts的基本语法，高级语法等，以及在vue项目中如何应用ts，跟着我赶紧撸起来吧。

10、移动端适配vw方案

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

设计师交付给前端开发一张宽度为750px的视觉稿，设计稿上元素的尺寸、颜色、位置等已做过标注，要求工程师工在适配不同屏幕尺寸的设备时采用等比缩放的方案。

前面我们讲过两种等比缩放的方案： viewport缩放 和 动态REM ，现在再讲另外一种不需要JavaScript的适配方案—— vw适配方案 。

【实用工具】

1、10个CSS3动画工具，值得你收藏！

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

人类对于运动的食物往往会投入更多的关注，因此巧妙的使用动画能够极大地提升网站的用户体验，快速唤起用户对重要元素的关注。

在css3中引入了全新的动画语法，它能够帮助你在设计中实现许多有趣的事情。通常构建炫酷的动画是非常复杂和费时的，而使用动画库和生成器则可以帮助你完美处理这一切。

在这篇文章中我们将推荐十款出色的工具，它们可以帮助你更快更轻松地完成自己的动画。

2、QRCanvas-动态生成二维码的开源优秀js库

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

简单调用就能满足网址扫码预览和分享、登录扫码认证等二维码功能。

【动态与研究关注】

随着 Facebook 和 Twitter 最近的产品部署，我认为一个新的趋势正在缓慢增长:Atomic CSS-in-JS。

在这篇文章中，我们将看到什么是Atomic CSS（原子 CSS），它如何与 Tailwind CSS 这种实用工具优先的样式库联系起来，目前很多大公司在 React 代码仓库中使用它们。

由于我不是这方面的专家，所以我不会去深入探讨它的利弊。我只是希望能帮助你了解它的大致内容。
先抛出一个令人开心的结论，新的 CSS 编写和构建方式让 Facebook 的主页减少了 80% 的 CSS 体积。

4、前端智能化实践（附：D2 前端技术论坛 PPT 合集）

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

5、闲庭信步聊前端 - 见微知著微前端

https://juejin.cn/post/6911873800669757447

何为微前端，分而治之然同台而坐也。微者，散也。详细来说，即微前端是一种架构，是将整个巨石应用拆分成多个可独立开发、部署、上线，运行的小型应用（子应用），对外暴露一个控制台应用（父应用）来统一管理各个子应用的运行状态，多个子应用间在用户无感情况下往复切换。

微前端一词第一次出现是在工作思维（ThoughtWorks）2016年的技术雷达（ Technology Radar ）中。但是笔者认为微前端的思想在更早就已经被频繁的应用于巨石应用上了。回望前后端还未分离的时代，还在用jsp混写java和HTML时，当时一个页面就是一个html文档，以index.html文件为入口，通过锚点标签（<a/>）将页面连接起来，页面以功能为指标，分别隶属于不同的项目中，项目间互不影响，可分布独立上线。笔者认为这就是最早期的微前端。随着SPA应用的兴起，这一早期的微前端思想也慢慢的被埋没。

6、HTTP/3 原理实战

https://mp.weixin.qq.com/s?__biz=MjM5ODYwMjI2MA==&mid=2649746858&idx=1&sn=26e90bb6dde7541fb9fe9f121eb11984

2015 年 HTTP/2 标准发表后，大多数主流浏览器也于当年年底支持该标准。此后，凭借着多路复用、头部压缩、服务器推送等优势，HTTP/2 得到了越来越多开发者的青睐。不知不觉的 HTTP 已经发展到了第三代，鹅厂也紧跟技术潮流，很多项目也在逐渐使用 HTTP/3。本文基于兴趣部落接入 HTTP/3 的实践，聊一聊 HTTP/3 的原理以及业务接入的方式。
在介绍 HTTP/3 之前，我们先简单看下 HTTP 的历史，了解下 HTTP/3 出现的背景。
《百闻技术周刊》048期 - 图7

随着网络技术的发展，1999 年设计的 HTTP/1.1 已经不能满足需求，所以 Google 在 2009 年设计了基于 TCP 的 SPDY，后来 SPDY 的开发组推动 SPDY 成为正式标准，不过最终没能通过。不过 SPDY 的开发组全程参与了 HTTP/2 的制定过程，参考了 SPDY 的很多设计，所以我们一般认为 SPDY 就是 HTTP/2 的前身。无论 SPDY 还是 HTTP/2，都是基于 TCP 的，TCP 与 UDP 相比效率上存在天然的劣势，所以 2013 年 Google 开发了基于 UDP 的名为 QUIC 的传输层协议，QUIC 全称 Quick UDP Internet Connections，希望它能替代 TCP，使得网页传输更加高效。后经提议，互联网工程任务组正式将基于 QUIC 协议的 HTTP （HTTP over QUIC）重命名为 HTTP/3。

7、为什么 Vue3 选择了 CSS 变量

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

Vue 3 新增了一条实验性的功能——「单文件组件状态驱动的 CSS 变量」

看到这个，我脑子里有以下的疑问？

CSS 变量是什么？
Sass/Less 中不是有变量的定义么，为什么还需要使用 CSS 变量？
现有的 Vue 不是通过 :style 的方式定义去动态绑定 CSS，那 CSS 变量和这种方式有什么区别？
Vue 3 做了哪些操作，让 SFC (单文件组件)能更好的使用 CSS 变量

本文对这些问题进行探讨。

8、浅谈移动端开发技术

https://mp.weixin.qq.com/s/yegI1oXndv9exhF0Uc-S3g

之前上家公司主要是做移动端 H5 开发的，但相关技术和配套体系已经很成熟了，很难接触到背后的这套体系。
在现在的公司也做了一些零散的 H5 页面，有一些相关实践。反而因为基础设施和体系不完善，接触到了更多东西。
刚好最近团队和客户端一起从零搭建 React Native 的体系，于是恶补了一些相关的知识，顺便把 H5 开发中的一些东西也温习记录了一遍。不算是新技术介绍，只是整理的一些总结。

说起移动端开发，就绕不开 Hybrid 技术。这篇文章主要是引申出一些概念，方便后续介绍 js bridge、deeplink 等知识。

9、Node.js 开发者 2020 年度报告

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

本次调查以 Ecma 成员名义发起，阿里巴巴、腾讯等公司领衔。该调查事件从 2020 年 2 月至 2020 年 4 月，以中文进行。截止 4 月 10 日共有 1,113 名受访者参加。

报告的高清图表以及不同维度筛选交互，请点击阅读原文跳转到 GitHub page 页面查看。

10、避免不完全的云原生（一）：云原生到底意味着什么？

https://mp.weixin.qq.com/s/10LChiKACKk7stc6vYmnrA

很多时候，围绕云原生的讨论会直接进入技术选择，如容器化和微服务。毫无疑问，这些都是云原生项目的潜在组成部分，但肯定不是全部。在本系列文章中，我们将从几个不同的角度探索云原生，包括技术和基础设施，还包括架构、设计，以及可能最容易被忽视的人员和流程。用最简单的术语来说，云原生不只是说要迁移到云，而是要充分利用云基础设施和服务的独特性来快速交付业务价值。
云原生的概念在这个术语投入使用之前就已经存在了。从某种意义上说，云原生是从公有云提供商开始提供简单廉价的弹性计算能力实例开始的。接下来的问题就变成了，你该如何编写应用程序来利用这种新的基础设施的灵活性，以及你可以因此获得什么业务收益？

【程序之外】

1、全球最大消费电子展，我们找到了 17 个「非主流」产品

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

每年的 CES，都是一年里最重要的硬件展会之一，也是消费电子行业的一次「大秀」。然而由于疫情的关系，今年拉斯维加斯会展中心没能迎来游客潮，大部分厂商都是在线上直接发布新品，再放出几张官方渲染图，给大家饱饱眼福。「秀场」的部分没有了，也失去了近距离体验实际产品的机会，的确让 2021 年的 CES 少了点存在感。所幸，那些长相古怪，但具备着新奇酷特征的设备，以及大公司们最前沿的概念产品，仍然在过去几天里频繁露脸。虽然它们大部分还不具备广阔的商业前景，可能还无法走向量产，但胜在有趣，说不定还能为行业提供些有意思的点子。

2、马斯克：我的房子卖给了中国人未来想葬在火星

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

近日，Business Insider杂志母公司Axel Springer的首席执行官Mathias Döpfner与特斯拉CEO埃隆·马斯克(Elon Musk)会面，讨论了为什么马斯克的电动汽车公司会走在无人驾驶汽车革命的最前沿，以及他开启太空探索的雄心壮志。

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

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