一流的镇江网站建设,南宁seo优化公司,阿坝住房和城乡建设厅网站,wordpress虚拟商城主题0作为一个特殊的符号#xff0c;经常会跟浏览器打交道#xff0c;在不同的场景下#xff0c;0代表的意思不尽相同#xff0c;因此浏览器眼中的0不一定就是符合人们感官上的认识#xff0c;那究竟浏览器会怎么对待它呢#xff0c;今天我们就来探究一下各种场景中0的含义及… 0作为一个特殊的符号经常会跟浏览器打交道在不同的场景下0代表的意思不尽相同因此浏览器眼中的0不一定就是符合人们感官上的认识那究竟浏览器会怎么对待它呢今天我们就来探究一下各种场景中0的含义及浏览器的处理方式。1.setTimeoutsetTimeout在js中常用来推迟任务的执行可以通过第二个参数设置延迟的毫秒数(如果不设置默认为0)在一些代码中可以看到delay0的情况如下window.setTimeout(() { ...... }, 0);了解js的同学应该知道setTimeout的回调函数不会在定时器超时后立即执行如果delay大于0比较好理解但delay是0的时候呢浏览器会怎么对待呢这里要分两种情况1.timer嵌套Timers can be nested; after five such nested timers, however, the interval is forced to be at least four milliseconds.也就是setTimeout嵌套超过5层的并且延迟不到4ms才会变成4ms同样适用于setInterval因此在这种情况下delay0其实会被设置成42.timer没有嵌套在没有嵌套情况下对于chrome来说delay0也会设置成1说完浏览器的处理方式之后我们来看看网上搬过来的一个例子吧setTimeout((){console.log(5)},5)setTimeout((){console.log(4)},4)setTimeout((){console.log(3)},3)setTimeout((){console.log(2)},2)setTimeout((){console.log(1)},1)setTimeout((){console.log(0)},0)chrome打印结果1 0 2 3 4 5firefox打印结果0 1 2 3 4 5edge打印结果1 2 0 3 4 5qq浏览器打印结果1 0 2 3 4 5360浏览器打印结果1 0 2 3 4 5从上面的打印结果来看firefox是符合代码预期的edge打印与chrome稍有不同应该是edge处理delay0情况稍有不同(设置成了2),qq和360浏览器跟chrome保持一致。0ms定时器在MDN文档上还说到一种实现0ms延时的定时器的实现方案大体思路是自定义一个setZeroTimeout 方法通过 postMessage 来触发定时回调的执行具体可看 https://dbaron.org/log/20100309-faster-timeouts node的setTimeout说完浏览器中的setTimeout我们再来看看nodejs中的是否一样呢可以通过nodejs的源代码窥探一二// https://github.com/nodejs/node/blob/master/lib/internal/timers.jsfunction Timeout(callback, after, args, isRepeat, isRefed) {after * 1; // Coalesce to number or NaNif (!(after 1 after TIMEOUT_MAX)) { // const TIMEOUT_MAX 2 ** 31 - 1;if (after TIMEOUT_MAX) {process.emitWarning(${after} does not fit into a 32-bit signed integer. \nTimeout duration was set t 1., TimeoutOverflowWarning);}after 1; // Schedule on next tick, follows browser behavior}看过源代码后就知道node的处理策略了如果delay0会设置为1注释也说得很清楚了是为了遵循浏览器的行为。2.0-0虽然很少用到但是js中确是存在0和-0的那么有什么区别呢0 -0; // true0 0; // true-0 0; // true可以看到通过全等比较0-0和0都是相等的那是否就可以认为这三者就是一样的呢还不能这么轻易下结论有时候很有必要区分三者那么如何判断呢es6新增了一个方法Object.is(value1, value2)可以用来判断具体效果如下Object.is(0, -0); // falseObject.is(0, -0); // falseObject.is(0, 0); // true这里还需要说明的一点就是0和0其实就是一样的因为0等效Number(0),因此Object.is(0, 0)是符合预期的这里顺带说一下Object.is的比较逻辑根据MDN文档描述Object.is() 方法判断两个值是否为同一个值。如果满足以下条件则两个值相等:都是 undefined都是 null都是 true 或 false都是相同长度的字符串且相同字符按相同顺序排列都是相同对象意味着每个对象有同一个引用都是数字且都是 0都是 -0都是 NaN或都是非零而且非 NaN 且为同一个值与 运算不同。 运算符在判断相等前对两边的变量(如果它们不是同一类型) 进行强制转换 (这种行为的结果会将 false 判断为 true ), 而 Object.is 不会强制转换两边的值。与 运算也不相同。 运算符 (也包括 运算符) 将数字 -0 和 0 视为相等 而将Number.NaN 与NaN视为不相等.最后来看下如何生成-0和0吧1/-Infinity; // -00*-1// -01/Infinity// 00*1// 03. []由于存在类型转换因此在判断相等时会有这样的情况 0; // true[] 0; // true[] 0; // true这里我们说一下[]的情况很容易理解相当于Number([])最终会转换成0这没什么大不了如果是下面这段代码呢(![][])[![]](![][])[![]![]](!![][])[![]![]![]](!![][])[![]](!![][])[[]]([][(![][])[[]](![][])[![]![]](![][])[![]](!![][])[[]]][])[![][![]![]![]]][![]]([[]]![][][(![][])[[]](![][])[![]![]](![][])[![]](!![][])[[]]])[![]![][[]]]其实代表的就是alert(1) http://www.jsfuck.com/ 这个奇葩网站专门干这事的原理就是使用的类型转换把我们熟悉的代码变成了这样真是骚操作。4.font-sizefont-size在css中使用频繁浏览器通常会默认设置成14px或者16px。如果设置成0呢.foo {font-size: 0;}span classfoofoo/span文字真的就没有了这符合预期但如果设置的值小于12(非负)各浏览器处理稍有不同chrome/edge浏览器会设置最小字体为12pxfirefox严格按照给定的值来显示。font-size:0的用处在布局过程中经常会生成空白字符例如div classbox1spana/spanspanb/span/divdiv classbox2img srcxxx.jpg/divbox1和box2高度其实是略高于实际的内容的而且box1的两个span中间有间隙没有紧挨着因为空白字符的原因引用css规范说明On a block container element whose content is composed of inline-level elements, ‘line-height’ specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element’s font and line height properties. We call that imaginary box a “strut.”大意就是一个块级容器元素内容区域由inline-level元素组成的而这些linline-level元素被放在每一行的line-box里面line-box高度是由它所有子元素的高度计算得出的。浏览器会计算这一行里每个子元素的高度再得出 line-box 的高度具体来说就是从子元素的最高点到最低点的高度。默认情况下一个 line-box 总是有足够的高度来容纳它的子元素而每一个行框可以想象为默认会有一个宽度为0的空白节点字体大小和行高会影响该节点具体规范可查看 https://www.w3.org/TR/CSS2/visudet.html#line-height。说完规范后再来分析一下box1和box2的效果为了便于理解下面的代码手动加入了一个[x]符号代表strutdiv classbox1spana/span spanb/span[x]/divdiv classbox2img srcxxx.jpg[x]/divbox1的两个span发生了换行相当于中间有个空格因此会有间隙如果span不换行那么中间的空隙也就没有了。由于存在[x]而且vertical-align:baseline的缘故span/img和[x]的baseline对齐之后[x]处于baseline以下的部分会撑开整个line-box的高度因此会外部块级容器的高度会略高一些说得不清楚我们还是上一张图来说明吧粉色的线是图片的baseline红色的线是strut的baseline对齐之后strut的baseline下面还有一部分高度box的最终高度就是img的顶部到strut底部之间的距离。分析完成因后终于可以使用font-size:0来解决问题了在box上设置font-size:0后strut就相当于没有了因此就不存在高度撑开的问题了当然这里还可以改变img的vertical-align属性来修复这个问题比如img{ vertical-align:bottom; }那么img的粉色线就跟strut的底部对齐了也就不会撑开容器高度了这里说了box2box1原理差不多这里涉及到vertical-align的知识了可查阅https://www.w3.org/TR/CSS2/visudet.html#vertical-align 进行了解。5.widthheightwidth和height也是可以设置成0的效果也是符合我们预期的但如果我们的意图是想通过设置0把元素隐藏的话一般情况下会采用如下方案.visually-hidden {clip: rect(0 0 0 0);clip-path: inset(50%);height: 1px;width: 1px;overflow: hidden;position: absolute;white-space: nowrap;}有些屏幕阅读器会忽略width和height等于0的元素因此这里特意设置成1px当然关于元素的隐藏还有很多实现方案有兴趣可参考【1】6.line-heightline-height及行高原意是baseline之间的高度在css中就是一行的高度。默认情况下line-height是跟具体字体定义相关联的一般都是font-size的1.x倍如果设置成0在不同类型元素上的情况是不一样的可分为如下三种情况1.非置换行类元素line-height定义的是最终参与计算line-box(行盒)的高度的值而不会影响non-replaced inline element(非置换行类元素)的实际高度style.foo {line-height:0;}/styledivspan classfooa/span // class为foo的span高度不会受样式影响/div2.行类块级元素会影响元素高度如果line-height设置为0那么该元素高度就变成了0如果设置了height那么height将会起作用3.块级元素当块级元素包含inline-level(display:inline|inline-block)元素时 行高定义的每一个line-box(行盒)的最小高度此外height也能影响块级元素的最终高度height比line-height有更高优先级当没有height情况下line-height起作用上面提到了line-box如果有不了解的同学可以看一下文末的链接【2】7.transformtransform常用来做样式变化和动画在有时候会设置成如下形式transform: translateZ(0);这其实是为了启用GPU加速渲染元素会单独在一个绘制层(Layer)里进行绘制而不会对其他层产生影响因此也就少了很多计算和合成的功能而且不会阻塞主线程动画会更加流畅当然元素设置太多会导致性能降低因为需要内存的维护。参考资料【1】https://css-tricks.com/comparing-various-ways-to-hide-things-in-css/【2】https://www.w3.org/TR/CSS2/visuren.html#line-box
