小编Chr*_*i.s的帖子

CSS转换过渡 - 使用'px'比'百分比'更平滑/更高效

我最近一直在研究改进我网站上的动画 - 更具体地说是移动设备上的导航下拉菜单.

在这方面,我偶然发现了以下案例,我希望能够获得更深入的知识.

情况是,在转换/动画时transform: translate3d(),似乎浏览器在使用%而不是使用时需要更多计算px.例如,在我的测试中,似乎从转换transform: translate3d(0, 500px, 0)transform: translate3d(0,0,0)需要更少的计算并且运行比转换更平滑transform: translate3d(0, 100%, 0).

更新:经过进一步测试,我发现使用100vh/ 100vw绕过/减轻了使用百分比的问题.在元素具有窗口的已知百分比宽度或全宽的情况下,这可以是usefyk,从而改善性能.实际上,似乎使用此值的行为就像px在Chrome中分配了值一样.

这是每个动画的时间轴的几张图片.时间线是使用"性能"下的Google Dev工具获得的.为了更好地显示差异,Chrome开发工具的性能受限于"低端移动"(6倍CPU减速).

使用百分比变换:

使用百分比(%)转换效果

使用像素(px)进行变换:

使用像素(px)转换性能

从图像中可以看出,在使用%而不是px确定转换时,似乎有更多的渲染和绘画正在进行.很有意义的是,浏览器必须计算每个帧的百分比值(我猜?),但与使用像素值相比,我感到惊讶的是它需要更多.

请注意,图片中显示百分比时间轴的帧速率从未达到约60 fps,而是平均约为40 fps.

以下是复制案例的片段.有一个使用百分比,一个使用px.

$(document).on("click", function(){
$(".bb").toggleClass("active");
});
Run Code Online (Sandbox Code Playgroud)
.aa{
  height:50px;
  background:blue;
  position:fixed;
  top:0;
  width:100%;

}
.bb{
  position:fixed;
  top:0px;
  background:none;
  height:100%;
  width:100%;
  left:0;
  transform:translateZ(0);
  overflow:hidden;
    pointer-events:none;
}
.cc{
  height:100%;
    transform:translate3d(0,500px,0);
    width:100%;
      transition:transform .5s ease-in;
      background:red;
}
.bb.active .cc{ …
Run Code Online (Sandbox Code Playgroud)

css jquery css-transitions css-transforms css-animations

14
推荐指数
1
解决办法
507
查看次数

WooCommerce csv导入自定义字段 - 调整内置导入器以包含自定义字段?

我在这种情况下,我必须导入超过2000个产品的自定义字段的值,我根本找不到任何免费的插件或内置功能,这使得这个.目前我发现了一系列具有此功能的高级插件,但最便宜的插件价格为50美元,而且目前仅仅超出预算.

因此,我想问一下,在这里是否有人知道如何向内置csv导入器和导出器添加自定义字段,而后者版本的Woocommerce比3.1更高?到目前为止,我已成功为产品数据创建了自己的自定义字段,但它们不会自动显示在内置导入程序中(遗憾的是).

有没有可行的方法来做到这一点,或者就此而言,你知道任何其他方式,如我没有找到的免费插件或其他任何东西吗?

请注意,我已根据这篇文章尝试了"wp ultimate csv importer" ,但不幸的是,自定义字段未显示在此免费插件中.

php csv wordpress import woocommerce

5
推荐指数
1
解决办法
6697
查看次数

Excel VBA - 为什么包含数字的拆分字符串的算术比较有效?

我想知道为什么下面的代码按照我的希望工作,考虑到我将一个字符串拆分成一个数组(也被定义为一个字符串),然后以算术(数字)方式进行比较.

Option Explicit
Sub test()
Dim str As String, arr() As String
Dim num As Integer, i As Integer

str = "12 9 30"
num = 20

arr() = Split(str, " ")

    For i = LBound(arr) To UBound(arr)
        If arr(i) > num Then
            MsgBox (arr(i) & " is larger than " & num)
        End If
    Next i
End Sub
Run Code Online (Sandbox Code Playgroud)

由于预期msgBox中的if statement被激发,显示出:

  • 12不大于20
  • 9不大于20
  • 30 大于20

我不知道/认为这样的比较可以像希望的那样工作,因为我基本上将字符串与整数进行比较.我假设有一些我不知道的东西,但在那种情况下,它是什么?

PS.关于哪个论坛要发帖,我有点怀疑,但我根据这个元问题做出了选择

excel vba excel-vba

4
推荐指数
1
解决办法
200
查看次数

尽管启用了 Keep-Alive 和会话标识符/票证,仍进行多次 SSL/TLS 握手

当网站上的 Keep-Alive 和会话标识符/票证都处于活动状态时,我很难找出为什么在同一页面上经历多次 SSL/TLS 握手(对于同一页面上的多个资源,即多个 HTTP 请求) /服务器。

我最近在我的网站上激活了 TLS (https),​​因此我想检查这对网站的速度/负载性能有何影响。当浏览互联网上的各种速度测试(例如tools.pingdom.com和webpagetest.org)和Chrome开发工具的瀑布图时,我在同一页面上的不同内容上看到多个SSL握手/协商。您可以在此处查看此图像:

在此输入图像描述

可以看出,同一域内的不同 http 请求存在多个 SSL 协商。我想知道这一点,因为 Keep-Alive 和会话标识符和票证都处于活动状态(通过多个测试进行检查,例如来自webpagetest.org 和 ssllabs.com/ssltest/ 的测试)。另请注意,我无法访问服务器(apache)配置,因为我位于共享主机上。

我正在经历的可能是:

  • 由于服务器配置限制了一定数量的连接?
  • 某种配置错误?
  • 完全是别的东西?
  • 我是不是误会了什么?

请注意,我是这个领域的新手,但我试图找到有关该主题的尽可能多的信息,但遗憾的是没有答案。

如果您想亲自测试一些东西,该网站是https://www.aktie-skat.dk

ssl https keep-alive tls1.2

2
推荐指数
1
解决办法
3517
查看次数

当通过带有 target="_blank" 的锚标记打开时, Window.close() 令人惊讶地在许多浏览器中工作 - 但为什么呢?

正如许多资源所述,例如此 SO post:javascript close current window以及Mozilla 自己的文档,应该不可能关闭javascriptwindow.open()打开的窗口/新选项卡。

然而,我刚刚经历过,当通过锚标记打开新选项卡并在底部所有提到的浏览器中使用该属性时,这种方法可以完美地工作- 但是,当包含target="_blank"该属性时,它在 Mozilla Firefox 中不起作用(rel="noopener"没有它确实可以工作,但根据 Mozilla 的文档,出于安全原因不要将其遗漏)。

怎么会出现这样的情况呢?是否target="_blank"简单地认为是一个脚本?

您可以在下面找到 2 个示例代码,您可以将它们复制/粘贴到 HTML 文件中并在您自己的计算机上试用。

第一个文件:打开新选项卡:

<html>
<body>
<a href="C:\Users\..{insert your own file path here to the sample code below}" target="_blank" rel="noopener noreferrer">Open new tab</a>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

第二个文件:使用上面代码片段打开的 HTML - 包含一个用于关闭同一选项卡的按钮:

<html>
<body>
<button onclick="window.close();">Close me!</button>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

这也已经在实时网站上进行了测试,并且已经测试可以在以下浏览器上运行:

  • Internet Explorer,版本 11.1397.17763.0(允许“阻止的脚本/activeX 内容”)
  • Chrome,版本 85.0.4183.83
  • 边缘,版本 85.0.564.44

rel="noopener"如上所述,它在包含时在 Mozilla Firefox 中不起作用。

html javascript

0
推荐指数
1
解决办法
301
查看次数