资讯专栏INFORMATION COLUMN

零碎的知识(二)

wqj97 / 2650人阅读

摘要:目录零碎的知识一新的媒体查询属性这个媒体查询属性的作用是,当用户在操作系统中设置了的选项时,能够根据其值声明不同的样式,因为有的人可能喜欢炫酷的特效,有的人可能更倾向于内容比如我,而有的人甚至因为生理问题无法接受这些特效。

目录

零碎的知识(一)

新的媒体查询属性 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 是什么?

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

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

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

关于 macrotask 和 microtask

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

它们的执行时机的是:

宏任务每次在单次事件循环之内,尝试将宏任务队列顶部的任务进行执行

宏任务执行完毕后,尝试将微任务队列的全部任务进行执行,直到队列为空

之后执行后续操作,然后进入下一个事件循环

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

.gitignoretracked 的文件不生效怎么办?

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

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

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

git rm -r --cached 

这里的 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 规则,如 opacitytransform 会创建隐式的层叠上下文,等价于 z-index: 0

层叠上下文的高低判定依赖于父级元素的层叠上下文,比如一个 z-index: 0 的元素中的 z-index: 999 的元素,永远不会覆盖 z-index: 1 的元素

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

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

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

但我们可以通过 transformscale 属性曲线救国,如下:

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

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

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

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

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/104601.html

相关文章

  • 零碎知识(一)

    摘要:同时,由于本身的实现大部分是纯函数,因此在版本中,一些不含副作用的均在中暴露了以为前缀的函数方法,也可以直接导入使用。在浏览器中神秘丢失尝试检查被请求的是否存在尾部斜线,具体原因暂时没有找到相关资料。 写在前面 最近没怎么写新的东西,一是因为一直在准备换新的工作,所以一直在准备面试,二是因为过年,心静不下来,所以也无法输出或者翻译一些文章,三是由于手头还有一些遗留工作需要完成和交接,比...

    ernest.wang 评论0 收藏0
  • js 零碎知识整理

    摘要:,看了这样的解释,或许让你更摸不着头脑了。弹出弹出在这个例子中,只要会使用浏览器的朋友,都能看得出来完全继承了的属性和方法,否则是无法解释的,因为在中并没有定义属性和,那么按常理推断在的实例对象中,并不会出现这两个属性。 快速删除尾部数组 var arr=[1,2,3,4,5]; arr.length=3; console.log(arr)//[1,2,3] 直接改变数组的length...

    liaorio 评论0 收藏0
  • 用了这么长时间python开发,你还记得多少零碎基础知识

    摘要:输出下标和对应的元素集合集合是无序的,集合中的元素是唯一的,集合一般用于元组或者列表中的元素去重。 python内置的数据类型 showImg(https://segmentfault.com/img/bVbrz1j); Python3.7内置的关键字 [False, None, True, and, as, assert, async, await, break, class, co...

    zollero 评论0 收藏0
  • PHP socket初探 --- 一些零碎细节拾漏补缺

    摘要:原文前面可以说是弄了一系列的和多进程的一大坨内容,知识浅显代码粗暴风格简陋,总的说来,还是差了一些细节。今天,就一些漏掉的细节补充一下。最后,我补充一句是同步的,而不是异步。 原文:https://t.ti-node.com/thread/... 前面可以说是弄了一系列的php socket和多进程的一大坨内容,知识浅显、代码粗暴、风格简陋,总的说来,还是差了一些细节。今天,就一些漏...

    chengjianhua 评论0 收藏0
  • Javascript零碎之各种宽高属性及应用

    摘要:一挂在上的上最常用的只有其中,永远都是窗口的大小,跟随窗口变化而变化。这个是距该元素最近的不为的祖先元素,如果没有则指向元素。 在Javascript的开发过程中,我们总会看到类似如下的边界条件判断(懒加载): const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.b...

    DevYK 评论0 收藏0

发表评论

0条评论

wqj97

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<