Fatal编程技术网
  • javascript/
  • Javascript 如何优化字符串到DOM的转换？

Javascript 如何优化字符串到DOM的转换？

javascript dom optimization

Javascript 如何优化字符串到DOM的转换？,javascript,dom,optimization,element,Javascript,Dom,Optimization,Element,当我试图填充用JavaScript创建的div时，我遇到了一个稍微不方便的“滞后”： var el = document.createElement("div"); el.innerHTML = '<insert string-HTML code here>' var el=document.createElement（“div”）； el.innerHTML=“” 然而，由于HTML代码的范围，这是很自然的；有时它的长度超过300000个字符，它是从GM_xmlHttpRequ

当我试图填充用JavaScript创建的
div
时，我遇到了一个稍微不方便的“滞后”：

var el = document.createElement("div");
el.innerHTML = '<insert string-HTML code here>'

var el=document.createElement（“div”）；
el.innerHTML=“”
然而，由于HTML代码的范围，这是很自然的；有时它的长度超过300000个字符，它是从GM_xmlHttpRequest派生出来的，有时需要1000ms（）才能完成，再加上DOM加密造成的额外500ms

我曾尝试使用
substr
删除大量文本（虽然这不是我想到的最好主意），但它在大多数情况下都出人意料地奏效，但在某些时候元素将无法接受HTML代码（可能是不匹配的）

我只需要访问存储在其中的极少量文本；regexp是不可能的，并且认为这是最好的方法

编辑：我倾向于提到我对解析DOM的定义被低估了，我的意思是说这个“文本”是我修改的许多元素的文本内容。因此，regexp不是一个选项

我们需要更多地了解您的应用程序，但是当您处理这么多HTML内容时，您可能只想使用
iframe
。它是异步的，不会暂停JS代码，也不会引入过多的潜在调试问题

使用
xmlhttprequest
中的原始HTML填充元素可能是危险的，这主要是由于潜在的XSS漏洞以及几乎不可能修复HTML故障。如果可能的话，考虑使用模板（我相信jQuery提供某种模板解决方案）和加载少量的XML/JSON/等等。如果使用<代码> iFrAMe<代码>是不可能的。

< P>我们需要知道更多关于您的应用程序，但是当您处理了那么多HTML内容时，您可能只想使用
iframe
。它是异步的，不会暂停JS代码，也不会引入过多的潜在调试问题

使用
xmlhttprequest
中的原始HTML填充元素可能是危险的，这主要是由于潜在的XSS漏洞以及几乎不可能修复HTML故障。如果可能的话，考虑使用模板（我相信jQuery提供某种模板解决方案）和加载少量的XML/JSON/等等。如果使用<代码> iFrAMe<代码>是不可能的。加快速度的方法有：

  • 让您的服务器只提供您实际需要的HTML部分。这将节省网络传输时间和DOM解析时间

  • 如果您不能修改服务器，那么您需要手动解析一些HTML，以消除您不想要的部分，这样就不会在DOM中放入太多内容。正则表达式是搜索巨型字符串的较慢方法之一，因此如果可能，最好使用
    .indexOf（）
    之类的方法来识别目标区域。如果有一个唯一的id或类，并且您知道HTML的一般形式，那么您可以使用这样一种更快的算法来识别目标区域。但是，如果不披露要解析的实际HTML，我们无法提供更多的细节

    • 我知道，你有大量的HTML，需要很长时间才能将其放入DOM，你只需要一小部分，提高速度的方法有：

  • 让您的服务器只提供您实际需要的HTML部分。这将节省网络传输时间和DOM解析时间

  • 如果您不能修改服务器，那么您需要手动解析一些HTML，以消除您不想要的部分，这样就不会在DOM中放入太多内容。正则表达式是搜索巨型字符串的较慢方法之一，因此如果可能，最好使用
    .indexOf（）
    之类的方法来识别目标区域。如果有一个唯一的id或类，并且您知道HTML的一般形式，那么您可以使用这样一种更快的算法来识别目标区域。但是，如果不披露要解析的实际HTML，我们无法提供更多的细节

    • 当其他Anser关注于猜测您的愿望（解析DOM而不进行字符串操作）是否有意义时，我将把这个答案用于比较合理的DOM解析方法

    为了公平比较，我假设我们需要
    元素（作为根容器）来解析DOM。我已经在上创建了一个基准

    如果Greasemonkey脚本在单个页面上长期处于活动状态，您仍然可以将此功能用于不支持CORS的其他域：在域等于其他域的文档中插入iframe（例如
    http://example.com/favicon.ico
    ），并将其用作代理（同时激活此页面的GM脚本）。插入iframe的开销很大，因此此选项对于一次性请求不可行

    对于同源请求，此选项可能是最好的（尽管没有进行基准测试，但可以认为直接返回文档而不是中间字符串操作具有性能优势）。与
    DOMParser
    +text/html方法不同，更多浏览器支持
    responseType=“document”
    ：Chrome 18+、Firefox 11+和IE 10+。

    而其他浏览器则专注于猜测您的愿望（无需字符串操作解析DOM）是否有意义，我将用这个答案来比较合理的DOM解析方法

    为了公平比较，我假设我们需要
    元素（作为根容器）来解析DOM。我已经在上创建了一个基准

    如果Greasemonkey脚本在单个页面上长期处于活动状态，您仍然可以将此功能用于其他do 
    var testString = '<body>' + Array(100001).join('<div>x</div>') + '</body>';

function test_innerHTML() {
    var b = document.createElement('body');
    b.innerHTML = testString;
    return b;
}
function test_createHTMLDocument() {
    var d = document.implementation.createHTMLDocument('');
    d.body.innerHTML = testString;
    return d.body;
}
function test_DOMParser() {
    return (new DOMParser).parseFromString(testString, 'text/html').body;
}

    var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.example.com/');
xhr.responseType = 'document';
xhr.onload = function() {
    var bodyElement = xhr.response.body; // xhr.response is a document object
};
xhr.send();