小编Pra*_*ant的帖子

试图理解RequestAnimationFrame及其内部工作原理.

浏览器有一个主线程,它是一个事件循环.事件循环可以填充各种异步事件,例如用户交互,定时器被触发,网络调用完成以及事件触发布局和绘制,例如输入或JS.

因此,当JS函数使DOM的布局无效或导致重新绘制时,浏览器的主线程重新绘制需要更新的图层,合成器线程将更新的纹理上传到GPU,最终合成发生,并将生成的图像显示在屏幕上.

所以,我的印象是浏览器只在实际需要时执行绘制.如果您在静态页面上的Chrome开发工具时间轴上捕获事件而没有任何事情发生,则绝对不会捕获任何事件(没有布局,没有绘制,也没有触发动画帧).说得通.

但是,然后在控制台上运行以下代码,

function onBeforeNextRepaint() {
    requestAnimationFrame(onBeforeNextRepaint);

    console.log('About to paint ...');
}

onBeforeNextRepaint();

现在,您再次捕获时间轴事件,并注意到"动画帧触发"事件,并且您的控制台将使用"关于绘制..."进行记录.

根据MDN,

Window.requestAnimationFrame()方法告诉浏览器您希望执行动画并请求浏览器调用指定的函数以在下次重绘之前更新动画.

这意味着浏览器不断绘画,因此调用我的函数在每次重绘之前记录消息.我猜测浏览器维护一个调度程序,使绘制调用的速率与屏幕的刷新率相匹配.

现在我的困惑在于以下几点:

1. 浏览器的主线程是否经常重新绘制,生成纹理并将纹理上传到GPU并进行绘制调用(限制以匹配屏幕的刷新率)？(听起来效率低下)
2. 这就是我的'onBeforeNextRepaint'回调被不断调用的原因吗？
3. 如果1和2为真,在我的第一个时间线捕获时,为什么我不捕获"更新图层树"和"复合图层"事件？

我只想对我的工作流程发表意见.我知道Yeoman并且故意决定不使用它.我的工作流程如下:

1. 运行bower install以安装所有项目资产依赖项.
2. 运行grunt将所有js文件从bower组件文件夹复制到新的js文件夹,并将所有css文件复制到新的css文件夹.
3. 进一步使用grunt任务来连接和缩小新文件夹中的所有js和css文件,并将它们放在dist文件夹中.
4. 从HTML中参考dist文件夹中的最终缩小的css和js.

我当然不希望在我的grunt任务中执行的一件事是执行特定于依赖项的任务,例如从bootstrap文件夹中获取所有js文件到新的js文件夹,然后将所有js文件从prettyphoto文件夹中获取到新的js文件夹中.我希望grunt任务尽可能通用,以便我可以在任何项目中使用相同的gruntfile,无论bower依赖项可能是什么样子.原因是如果我应该花费所有时间为每个项目编写我的gruntfile,为什么我不会以传统方式获取所有依赖项的源代码.

所以有一个grunt-contrib-copy插件可以将文件从一个地方复制到另一个地方,我用它从bower的components文件夹中获取所有js文件.问题是大多数凉亭组件都带有常规的js和缩小版本.所以,我正在复制它们并连接和丑化它们.重复代码!

我的工作流程有意义吗？是这样,我怎样才能摆脱上面段落中提到的问题？

好的..所以我有一个 json 字符串 (myJson)，如下所示：

{"id": "1", "file": "test.jpg"} 

在我的 jquery 函数中，我想将 json 字符串的这些 id 和文件值放入数组中的项目中。

所以我有

var myArray = new Array();
var parsedJson = $.parseJSON(myJson);
myArray['item1']['id'] = parsedJson.id;
myArray['item1']['file'] = parsedJson.file;

但即使在执行这些代码之后，数组的长度myArray仍然为零。有人可以解释一下为什么会发生这种情况吗？

我有一个跟随功能,它将相对定位的元素1000px从它现在的位置滑下.

for (var i = 0; i < 1000; i++) {
    $('.my-element').css(
        'left',
        parseInt($('.my-element').css('left'), 10) + 1
    );
}

这不会产生滑动效果.相反,在执行结束时,元素突然向右移动1000px.

现在,如果我在setTimeout中包装UI更新,如下所示:

for (var i = 0; i < 1000; i++) {
    setTimeout(function () {
        $('.my-element').css(
            'left',
            parseInt($('.my-element').css('left'), 10) + 1
        );
    }, 0);
}

这会产生元素向右滑动1000px的视觉效果.

现在,根据我的不足和这个SO线程,为什么setTimeout(fn,0)有时会有用？,UI更新在浏览器事件队列中排队,就像同步回调像setTimeout回调一样排队.

因此,在第一种情况下,基本上,当执行for循环时,会产生1000个UI更新的队列.

在第二种情况下,首先,创建一个1000个setTimeout回调的队列,在执行时创建另一个1000 UI更新的队列.

因此,最终,两种情况都会创建1000个UI更新的相同队列.那为什么视觉效果不同呢？

我必须在这里查看一些重要的JavaScipt和浏览器呈现概念.任何能够启发我的人都会非常感激.

注意:上面的示例纯粹是为了理解目的,而不是尝试创建一个JS函数来滑动DOM元素.

由于这个CSS规则,我有两个DOM元素存在于它们自己的复合层上:

.element-one, 
.element-two {
    will-change: transform;
    transform: translateZ(0); // Fallback
}

现在,我可以使用Chrome开发工具的" 显示图层边框"选项检查这些图层.

太棒了!这就是我所看到的

我熟悉橙色边框颜色,这意味着元素存在于自己的复合图层上.但绿色表示什么？

所有开发工具文档似乎都已过时.

我正在创建一个连接到用户的Dropbox帐户的Web应用程序.当我检索文件和文件夹的元数据时,Dropbox会按以下格式返回相应的修改日期:

"星期六,2010年8月21日22:31:20 +0000"

我怎样才能将其转换为以下格式？

21/08/2010 22:31

任何帮助都感激不尽.