今日主理人｜下午茶
本期每日掘金由 帅气的法医 负责制作。如有投稿文章，请私信👉 帅气的法医
酱酱们的下午茶全新改版，欢迎大家多提宝贵意见！
本文字数 1800+，阅读时间大约需要 6 分钟。
- 【掘金酱的下午茶】亮点：
- 如何设计 CSS 架构解放前端生产力？
- React Streaming SSR 原理解析
- 假如你有个域名，教你三招全方位提升逼格，拉升简历吸引力
- 固定在 H5 底部的输入框的兼容性问题
- 字节跳动 YARN 云原生化演进实践
- vivo 云原生容器探索和落地实践
- 高可用架构和系统设计经验
- ……
筛选规则：文章发布时间在本期「掘金酱的下午茶」发布时间的 1-3 天内，且符合社区推荐标准，也会同步发布在掘金相关技术社群。
每日干货｜下午茶
主理人们会对近期（1-3 天）社区深度技术好文进行挖掘和筛选，优质的技术文章有机会出现在下方列表，排名不分先后。
『前端』
CSS 是前端开发最熟悉的部分，几乎每一个项目都会大量使用到这些基础的东西，但是越是最基础的往往是大家最忽略。 作为一名前端开发，除了大家追求的性能之外，是否忽略了极致的开发体验呢？我最近审视了下自己过往前端项目，问了自己几个问题。那就是自己日常开发中写 CSS是否足够快？是否规模可控？是否简单明了？是否在验收中频繁改动？
React 18 提供了一种新的 SSR 渲染模式： Streaming SSR。通过 Streaming SSR，我们可以实现以下两个功能：Streaming HTML：服务端可以分段传输 HTML 到浏览器，而不是像 React 18 以前一样，需要等待服务端渲染完成整个页面后才返回给浏览器。这样，浏览器可以更快的启动 HTML 的渲染，提高 FP、FCP 等性能指标。
Selective Hydration：在浏览器端 hydration 阶段，可以只对已经完成渲染的区域做 hydration，而不需要等待整个页面渲染完成、所有组件的 JS bundle 加载完成，才能开始 hydration。这样可以更早的对已经完成渲染的区域做事件绑定，从而让页面获得更好的可交互性。
这篇文章主要讲解对于程序员来说，域名有哪些实际的用处。如果此时你手上没有域名的话，可以花 7-8 块钱去注册一个。腾讯云、西部数码、阿里云都可以
今年三四月的时候，有个系统要重构，看到设计稿上有个固定在底部的输入框，第一直觉就是事情不简单，一定会遇到各种兼容性问题，毕竟之前也看过一些处理类似问题的文章。不过还是想着要不试试看，都 2022 年了，手机页面又不考虑 IE，还能有啥兼容性问题呢？
『后端』
本文整理自字节跳动基础架构工程师邵凯阳、林友权在 2022 Hadoop Meetup 上的演讲，文章主要从演进背景、解决方案、上线收益和未来规划四个方面介绍了字节跳动 YARN 云原生化演进实践。
本文会详细介绍vivo在容器集群高可用建设中的具体实践，包括在容器集群高可用建设、容器集群自动化运维、容器平台架构升级、容器平台能力增强、容器生态打通等层面的打磨和建设。目前，vivo容器产品能力矩阵逐渐趋于完善，并将围绕全面容器化、拥抱云原生和在离线混部三个方向继续发力。
本文从研发规范层面、应用服务层面、存储层面、产品层面、运维部署层面、异常应急层面这六大层面去剖析一个高可用的系统需要有哪些关键的设计和考虑
Presto 是由 Facebook 开源的一个 OLAP (On-Line Analysis Processing) 查询引擎，主要是为了支持当时 Facebook 内部科学家和分析师进行数据分析实验。在使用 Presto 前，Facebook 内部主要依赖 Hive 进行数据分析，而 Hive 是使用 MapReduce 作为底层计算框架，并不能很好地满足交互式查询的需求。基于上述情况以及试用了一些外部项目后，2012 年，Facebook 最终决定自研解决内部的数据分析需求，于是 Presto 应运而生，并在 2013 年正式开源。
etcd是云原生架构中重要的基础组件，由CNCF孵化托管。ETCD是用于共享配置和服务发现的分布式，一致性的KV存储系统，是CoreOS公司发起的一个开源项目，授权协议为Apache。etcd 基于Go语言实现，主要用于共享配置，服务发现，集群监控，leader选举，分布式锁等场景。在微服务和 Kubernates 集群中不仅可以作为服务注册发现，还可以作为 key-value 存储的中间件。
『移动端』
Channel 类似于 Java 的 BlockingQueue 阻塞队列，不同之处在于 Channel 提供了挂起的 send() 和 receive() 方法。另外，通道 Channel 可以被关闭表明不再有数据会进入 Channel, 而接收端可以通过 for 循环取出数据。Channel 也是生产-消费者模式，这个设计模式在协程中很常见。
synchronized是Java实现同步的一种机制，它属于Java中关键字，是一种jvm级别的锁。synchronized锁的创建和释放是此关键字控制的代码的开始和结束位置，锁是有jvm控制的创建和释放的，正是因为这一点，synchronized锁不需要手动释放，哪怕是代码出现异常，jvm也能自动释放锁。同时jvm也记录的使用锁的线程，以及哪些线程出现了死锁这非常有利于我们排查问题。
LeakCanary内部用到了Refercence及ReferenceQueue来实现对对象是否被回收的监听。这是LeakCanary的核心逻辑，因此在讲解LeakCanary之前，我们先来简单了解一下Refercence及ReferenceQueue。
关于怎么做包体优化? 小木箱主要是分两部分内容讲解，第一部分内容是包体优化过程，第二部分内容是包体优化面临的业务痛点。包体优化的过程主要分为七部分，第一部分是优化目标，第二部分是优化排期，第三部分是优化记录，第四部分是阶段成果，第五部分是衡量指标，第六部分是CI/CD监控与预警，第七部分是采坑记录。而业务痛点主要分为五部分。第一部分是CI/CD集成监控包体健康度，第二部分是So库压缩与解压机制，第三部分是动态加载So库与资源，第四部分是本地图片转网图，第五部分是插件化技术预研。
趣味码上掘金分享｜下午茶
- 码上掘金精选，收集优秀的码上掘金项目，供大家一起学习：github.com/akira-cn/jc…
- 码上掘金游戏精选：g.jcode.pub/#/716133153…
| 作者 | 文章 | 简介 |
|---|---|---|
| 陈_杨 | 非物质文化遗产皮影戏-大圣篇 | 太好看了吧 |
📖 投稿专区｜下午茶
大家可以在评论区推荐认为不错的文章，并附上链接和推荐理由，有机会登上下一期。文章创建日期必须在近 1-3 天内；可以推荐自己的文章、也可以推荐他人的文章。
