读取和替换HTML中的文本会导致高CPU负载
Read and replace text in HTML causes high CPU load
我在一个网站上有一个高CPU负载的问题,我想用链接代替一些文本。
脚本在正文末尾加载。
当页面上没有视频时,此操作正常工作。但是如果像这样嵌入视频,CPU负载就会超过50%。如果我在多个文件中使用此选项,Firefox会崩溃。
<p><video width="320" height="240" class="mediaelement" autoplay="autoplay" src="video.mp4" controls="controls"><a href="video.mp4">resources/video.mp4</a></video></p>
我发现问题在这里,特别是从csv的读出。如果我只是用固定的数据替换文本,它也可以工作。
var rawFile = new XMLHttpRequest();
rawFile.open("GET", "data.csv", false);
rawFile.overrideMimeType('text/xml; charset=iso-8859-1');
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
allText = allText.split("'n");
var sizedata = Object.size(allText); //Number of entries
var sizedata = sizedata -1; //Excel +1
//alert("Debug: " + sizedata);
var i = 0;
while (i < sizedata)
{
var word = allText[i].split(";");
var wordToDefine = word[0];
var wordDefinition = word[1];
var wordToReplace = wordToDefine
var replaceItem = new RegExp(wordToReplace,"g");
document.body.innerHTML = document.body.innerHTML.replace(replaceItem, " <a href='data.html' target='_self'><span style='color:green' title='WORD'>WORD</span></a>");
i = i+1;
}
}
}
}
rawFile.send(null);
你知道我该怎么做吗?
正如@criz已经提到的,在循环中构建DOM是一种非常糟糕的做法。最好是创建documentFragment并将其附加到DOM。看一下https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment,有一个例子:
相关文章:
- 如何解雇“;铁局部存储负载”;事件
- AngularJs动态负载
- cpu:phantom:page的比例可以大于1:1:1吗
- Architecture for CPU intensive tasks with NodeJS & Socke
- 在筛选网格期间,网格负载掩码不起作用
- 使用PHP来阻止用户下载代码,但代码占用cpu
- 有效负载字节与实际字节不同
- 将负载放入变量中
- <脚本类型=“;模块“>负载性能
- 我如何才能包含一个iframe视频,这样它就不会't负载
- Express.js应用程序最大CPU
- 使用$(el).addClass('example');但是不要't增加负载
- 为什么Hapi.js POST处理程序返回空负载
- PhantomJS与嵌入式web服务器只使用一个CPU
- 动态坐标谷歌地图不会't负载
- slack files.upload-如何从javascript/jQuery将文件作为有效负载发送
- 嵌套iframe获胜't负载
- 如何避免webGL着色器加载给cpu带来太多负载
- 读取和替换HTML中的文本会导致高CPU负载
- Node.js的CPU密集型高负载的脚本转发数据从端口到端口