Tuax 技术周刊 2021-08-13期

267 阅读4分钟

1. 让你 vscode 写代码效率更高的技巧

本文展示了许多实用 vscode 实用技巧,有效提高日常开发效率~

  • 一键执行 npm scripts
  • 一键 diff、预览
  • 在新页面搜索
  • git 视图显示目录树
  • 在新编辑器打开文件
  • 编辑时快速删除、复制、移动行
  • 全局搜索文件、跳转到某行
  • 快速切换大小写

2. 「多图预警」那些年,被blob虐过的程序猿觉醒了!

文章很长很干,前半部分讲基本概念和 api,这部分可以快速阅读,之后有问题再回来细读。主要介绍了 Blob、File、Buffer、ArrayBuffer、ArrayBufferView、TypedArrays、DataView、FileReader、BlobURL、dataURL、Canvas 等各种二进制相关对象,最后以图像灰度化、图片压缩、分片上传的三个案例作为实际应用场景。

3. 字节跳动前端团队工作中会使用到的数据结构和算法

这篇文章比较基础,介绍了基本数据结构和算法。

  • 数据结构部分讲了:栈、队列、链表、树。
  • 算法部分讲了:LRU 虽然内容比较基础,但实战例子讲的不错,并给出了源码。

4. 从失学二次元少女到React核心成员

这篇讲了 React 核心成员「Rachel Nabors」的经历,如何一路自学(甚至没上过大学)从二次元少女到设计师,再到 React 核心成员,或许她的经历,能带来一些启发。

5. 你可能并不需要微前端

文章较短,但言简意赅,从「康威定律」(设计系统的架构受制于产生这些设计的组织的沟通结构。 — M.Conway)阐述微前端的指导思想,它指出了组织架构越庞大,其系统间沟通成本越高的问题。而解决这一问题的有效手段就是,将大的系统拆分成一个个微小的,可以独立自治的子系统。但在实践中不要陷入这种「悲观主义工程师」在工程上的妥协,是一种防御性,有时候甚至是「掩耳盗铃」式的架构策略。

最后总结了【不需要】和【需要】使用微前端的具体场景特征。

6. Android / iOS Webview 容器下 JSBridge SDK 原理浅析 —— 前端视角

长文预警⚠️,本文从前端视角切入,讲述 bridge 方法如何和客户端进行交互,以及在此过程中进行的各种中间处理。

从最基础的 js 调用 native 的 3 种方法,与 native 调用 js 的 2 种方法开始,梳理整体流程,结合部分源码详细讲解了双方通信的细节。

7. 精读《默认、命名导出的区别》

这篇文章有点意思,一般认为 import 导入的都是引用而不是值,但其实不然。在导出时,命名导出和默认导出还不一样,并且还有特例。 最后的总结就是写模块时都应该用规范的命名导入导出,少用默认导出。

8. coding-interview-university:成为软件工程师的课程

原先我为了成为一个软件工程师而建立这份简单的学习主题清单, 但这份清单随着时间的推移而膨胀成今天这样。在做完这份清单上的每个目标后,我成为了 Amazon 的软件开发工程师! 你或许不需要像我一样学习这么多。但是,让你成为一位称职工程师所需要的知识都在这里了。 在这份清单内的主题会让你拥有足够的知识去面对几乎每家软件公司的技术面试,包括科技巨头:Amazon、Facebook、Google,以及 Microsoft。

9. 关于 JS 与 CSS 是否阻塞 DOM 的渲染和解析

为了提高页面的性能一般把<script>放在<body>尾部,<link>标签放在<head>内部,而页面通过 CDN 引入第三方框架或库时,基本都是将其<script>标签放在<link>标签前面。

但这样做究竟是为什么?如果让你设计项目来验证一下应该怎么做?

总结一下最后的结论:

  • CSS不会阻塞DOM解析,但是会阻塞DOM渲染,严谨一点则是CSS会阻塞render tree的生成,进而会阻塞DOM的渲染
  • JS会阻塞DOM解析
  • CSS会阻塞JS的执行
  • 浏览器遇到<script>标签且没有defer或async属性时会触发页面渲染
  • Body内部的外链CSS较为特殊,会形成FOUC现象,请慎用

10. 工具、库的推荐