乐趣区

零碎的知识二

jiezi

目录

  • 零碎的知识（一）

新的媒体查询属性 prefers-reduced-motion

https://developers.google.com…
https://developer.mozilla.org…

这个媒体查询属性的作用是，当用户在操作系统中设置了 reduced-motion 的选项时，能够根据其值声明不同的 css 样式，因为有的人可能喜欢炫酷的特效，有的人可能更倾向于内容（比如我），而有的人甚至因为生理问题无法接受这些特效。

浏览器首个内置 module KV Storage

https://developers.google.com…
https://wicg.github.io/kv-sto…

localStorage 当前的问题：

  • 性能比较慢，而且会阻塞主线程
  • api 设计的太简单了，同时它们是同步的
  • 很容易发生命名空间冲突，这意味着开发者必须做出一些额外的工作，比如增加自定义前缀
  • 虽然可以使用 IndexedDB 来作为后补方案，但是它不不是那么好用

KV Storage 的特点：

  • 浏览器内置 module，意味着它无需被下载解析后才能使用
  • api 与 js 中的 Map 更接近，更友好，同时它们是异步的
  • 性能更好
  • 自带命名空间，有效防止冲突

值得注意的时，使用它是需要做一些降级的工作，以应对各种不支持该 module 的情况（有好几种，并不是两种），详情可以参考 google-developers 上的文章。

week-year 是什么？

如果是做后端同学应该会比较了解，比如 Java，YYYY 和 yyyy 对于年来说讲是两种不同的意义，而 YYYY 则代表按 week-year 来解析。

其定义是这样的，以星期一为周始，以星期日为周末，第一个包含该年度四天以上的周，算作该年度的第一周，因此，2014-12-31 按 YYYY 解析出来的年是 2015，我截了一张万年历的图，如下：

​

可以发现，最后一周，只有 3 天属于 2014 年，剩下的 4 天属于 2015 年，所以这周应该算 2015 年的第一周。因此，如果做后端（比如 Java）的话，不是刻意为之，最后使用 yyyy 而不是 YYYY。

关于 macrotask 和 microtask

javascript 是单线程的，这个大家都应该比较熟，对于异步编程的支持，当前有两个队列用来支持该功能，分别是 macrotask 和 microtask。

它们的执行时机的是：

  • 宏任务每次在单次事件循环之内，尝试将宏任务队列顶部的任务进行执行
  • 宏任务执行完毕后，尝试将微任务队列的全部任务进行执行，直到队列为空
  • 之后执行后续操作，然后进入下一个事件循环

值得注意的是，虽然 microtask 任务会在一个事件循环内全部执行，但任务间的执行优先级是有区别的，比如 process.nextTick 和 Promise 会存在优先级差别，前者比后者高（暂时没有标准）

.gitignore 对 tracked 的文件不生效怎么办？

通常情况下，.gitignore 文件所声明的规则均对 untracked 的文件有效，如果是 tracked 的文件，则不会生效。但是问题来了，我们明知要忽略一个文件，为什么还要将它变为 tracked 并提交到 git 提交历史中呢？

一般这样做的原因主要是想要强迫某个文件创建于其他开发者的代码仓库中，比如说，一般我们在使用环境变量的配置的工具库时，比如 nodejs 中常见的 dotenv，这个库使用 .env 声明环境变量，同时我们一般会将这个文件声明在 .gitignore 中，但是在集成这个库之前，其他的开发者是无法预先创建 .env 这个文件的（当然你可以直接通过别的方式告诉他们），这种情况下，我们可以先将 .env 提交到 git 中，之后再在后续的提交或者 PR 中将它移除提交历史。

将一个文件移除提交历史，并变为 untracked 很简单，只需要执行以下命令：

git rm -r --cached <target-file-path>
​

这里的 target-file-path 代表要变为 untracked 的文件路径，之后再进行一次正常的提交即可，比如：

git commit -m "clean up ignored files"

如何判定一个函数为 async 函数？

var a = async function(){}
a.constructor.name
// "AsyncFunction"
​

简述 css 的层叠上下文？

https://medium.freecodecamp.o…

  • 普通元素按照文档流中的顺序，之后的元素会叠加在之前的元素之上
  • 拥有非默认值属性的 position 的元素的层叠上下文，比有默认值属性的元素要高
  • 一些 css 规则，如 opacity、transform 会创建隐式的层叠上下文，等价于 z-index: 0
  • 层叠上下文的高低判定依赖于父级元素的层叠上下文，比如一个 z-index: 0 的元素中的 z-index: 999 的元素，永远不会覆盖 z-index: 1 的元素

除此之外，还存在一些别的特征，但这里是简述，这 4 点应该够了。

如果设定小于 12px 的字体？

一般情况下，有的设计师会将 12px 作为设计稿的默认最小字体，但如果我们想要将一个元素的字体设置为 9px 时，怎么办呢，可能你会直接说直接设置就好了，但是你会发现，一些浏览器提供了默认最小字体的设置，因此类似 font-size: 9px 并不会生效。

但我们可以通过 transform 的 scale 属性曲线救国，如下：

​

font-size: 12px;
transform: scale(0.75);

但这样做也会有一个问题，就是如果有特别多的元素使用这个样式，会使浏览器创造特别多的层叠上下文，在一些情况下，渲染性能会大打折扣，这时只要将缩放效果提示至父元素就好了，但要主要父元素和尺寸有关的属性也需要做相同比例的变更。

同时，一些情况下，还需要通过 transform-origin 来指定变形的原点，通常情况下，transform-origin: left 足够满足 90% 的情况。

最后，换行符的计算是在缩放之前，这意味着如果是多行文本，会出现无法填满单行的情况。

其实有些时候，这种字体缩放问题往往不是字体大小的锅，而是需要根据不同文字的使用场景，使用不同的字体，在不同字体中，数字和字母的默认大小是不一致的，因此也可以尝试通过组合使用多种字体来解决这个问题，比如 Roboto 字体中的数字默认大小为 10px。

关注公众号 全栈 101，只谈技术，不谈人生

退出移动版