相关疑难解决方法(0)
有没有办法在Web Worker中创建DOM元素？
上下文: 我有一个处理和显示大量日志文件的Web应用程序.它们通常只有大约10万行,但它可以达到400万行或更多.为了能够滚动浏览该日志文件(用户启动和通过JavaScript)并过滤具有良好性能的行,我会在数据到达时为每一行创建一个DOM元素(通过ajax以JSON形式).我发现这对性能更好,然后在后端构建HTML.然后我将元素保存在一个数组中,我只显示可见的行.
对于最大100k行,这只需要几秒钟,但对于500k行(不包括下载),任何更多需要花费一分钟.我想进一步提高性能,所以我尝试使用HTML5 Web Workers.现在的问题是我无法在Web Worker中创建元素,甚至不能在DOM之外创建元素.所以我最终只在Web Workers中进行了json到HTML的转换,并将结果发送到主线程.它在那里创建并存储在一个数组中.不幸的是,这使性能恶化,现在需要至少30秒.
问题:在Web工作者中,在DOM树之外创建DOM元素是否有任何我不知道的方法？如果没有,为什么不呢？在我看来,这不会产生并发问题,因为创建元素可以并行发生而没有问题.
推荐指数
解决办法
查看次数
ng-repeat内的angularjs ng-model表现不佳
在以下场景中我有角度的性能问题:
<div ng-repeat="a in array">
<input ng-model="something">
</div>
我在我的控制器中编写了代码,用于ng-click更改数组以拥有不同的对象集.问题是,如果数组具有相当数量的对象,则点击不像我希望的那样响应(短暂延迟).
经过一番调查后,我发现$digest在我改变阵列后需要很长时间ng-click.所以我创建了这个简短的测试代码来重现它.
真正的应用场景是这样的:我有一个表,其中每一行代表一个可编辑的对象,每个对象有许多我想要编辑的不同字段.这样,每当我点击表格中的一行时,就会有另一个html,其中包含我对象属性上ng-repeat不同inputs的所有s .
有没有人知道如何提高效率？
谢谢
推荐指数
解决办法
查看次数
Javascript中重度计算的最佳实践？
我正在研究客户端脚本,并且需要进行繁重的计算,例如在数组中推送大量对象,它会导致JavaScript停止响应并且浏览器挂起并发出警报:
是否有任何最佳实践或设计模式来处理这些计算,我搜索并找到许多不同的方法来处理这些情况,但解决方案很难实现,所以我需要最佳实践并且易于理解？
(我只是编写代码但是我需要一个跨浏览器的通用解决方案,即多线程等)
示例代码(系列包含数千个对象):
for (var series = 0; series < chartObj.masterChart.series.length; series++) {
var detailData = [];
jQuery.each(chartObj.masterChart.series[series].data, function (i, point) {
if (point.x >= chartObj.RangeSelectedMinValue && point.x <= chartObj.RangeSelectedMaxValue) {
detailData.push({
x: point.x,
y: point.y
});
}
});
chartObj.detailChart.series[series].setData(detailData);
}
推荐指数
解决办法
查看次数
防止JavaScript在大循环上锁定浏览器
我有一个循环,需要在浏览器中运行2亿次.这是一个模拟器,几个人需要定期使用.运行大约需要15分钟,但在此期间,浏览器会经常弹出"此脚本耗时太长"等警告,并在功能期间完全挂起Firefox.这也意味着页面不会更新我的状态指示器(这只是一个数字).
我用google搜索"javascript yield"并阅读前4页的点击量.有些人讨论了一个新的"yield"关键字,但是只有一个描述和示例,我觉得这是不可理解的,例如"包含yield关键字的函数是一个生成器.当你调用它时,它的形式参数绑定到实际的参数,但是它的身体实际上没有被评估".是否yield屈服于UI？
我找到的为数不多的解决方案之一就是这个旧帖子,它使用不赞成的被调用者参数和一个计时器来调用自己:http: //www.julienlecomte.net/blog/2007/10/28/
但是,上面的例子不包含任何循环变量或状态,当我添加它们时它会分崩离析,我的净结果总是为零.
它也没有进行分块,但是我发现了一些其他的例子,它们在每次迭代时使用"index%100 == 0".然而,这似乎是一种缓慢的做法.例如:
但它没有任何方式来更新进度,也没有屈服于UI(因此仍然挂起浏览器).这是一个在执行期间挂起浏览器的测试版本:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
var spins = 1000000
var chunkSize = 1000;
var chunk;
function Stats() {this.a=0};
var stats = new Stats();
var big;
var index = 0;
var process = function() {
for (; index < spins; index++) {
stats.a++;
big = (big/3.6)+ big * 1.3 * big / 2.1;
console.write(big);
// Perform xml processing
if …推荐指数
解决办法
查看次数
JavaScript:将同步代码调整为异步,以支持IE8？
我正在使用数据量很大的网站,我需要支持IE8.我在IE8中遇到了一些"慢速运行的脚本"错误,因此我正在调整我的代码,以便在旧浏览器的循环期间定期暂停.
这是我目前的代码:
combineData: function(xData, yData, values) {
var combinedData = this.combineDatasets(xData, yData, values.x, values.x_val);
combinedData = this.calculateRatiosForData(combinedData);
// various other data operations, then continue to set up chart...
},
calculateRatiosForData: function(data, isSpecialDenominator, x_val_key) {
_.each(data, function(d, i) {
// do some calculations...
});
return data;
},
如何适应一次calculateRatiosForData处理N行,然后暂停？
这将使它异步,我正在努力调整我的代码来处理这个问题.
当然,无论我做什么都需要在IE8中得到支持!
推荐指数
解决办法
查看次数
如何重写forEach使用Promises来阻止"冻结"浏览器？
我有一个功能,看起来像这样.
function () {
longArray.forEach( element => doSomethingResourceIntensive(element))
}
因为数组很长并且函数占用的资源很少,所以它会冻结浏览器.
现在我想用Promises重写它,所以它做同样的事情,只是不冻结浏览器,我希望解决方案优雅和"ES6-y"; 理想情况下,当所有迭代完成时,函数将返回Promise.
我发现了这个问题,使用setTimeout处理它,但它似乎有点"un-ES6-y",并且它不会返回Promise.
我不能做
function () {
return Promise.all(longArray.map( element =>
Promise.resolve().then(() => doSomethingResourceIntensive(element))
)
}
因为我需要连续执行承诺,我不确定它是否会在那里发生.
推荐指数
解决办法
查看次数
Javascript,如何编写一个Array.sort方法,以便通过超时策略调用它？
我的sort()函数存在瓶颈,例如:
list.sort(function (a,b) {return (a.value - b.value);});
冻结浏览器几秒钟.
对于循环的相同情况,建议使用"超时"策略,例如此处描述的策略:
那么,问题是,这可以用排序方法实现吗？
*在评论讨论后编辑
// main_div is a div defined before
for (let i=0; i<list.length; i++) {
main_div.appendChild(document.getElementById(list[i].id));
}
推荐指数
解决办法
查看次数
标签 统计
javascript ×7
angularjs ×1
ecmascript-6 ×1
es6-promise ×1
freeze ×1
html5 ×1
jquery ×1
performance ×1
sorting ×1
web-worker ×1