使用存储服务的Firefox扩展中的JavaScript代码太慢 [英] Javascript code too slow in Firefox extension using Storage service

问题描述

  highlightLinks：function（e）{
 
 var anchors = e.target.getElementsByTagName（a）; 
让file = Components.classes [@ mozilla.org/file/directory_service;1] 
 .getService（Components.interfaces.nsIProperties）
 .get（ProfD，Components。 interfaces.nsIFile）; 
 file.append（test.sqlite）; 
 
 var storageService = Components.classes [@ mozilla.org/storage/service;1] 
 .getService（Components.interfaces.mozIStorageService）; 
 var conn = storageService.openDatabase（file）; 
 
（var i = 0; i< anchors.length; i ++）{
 var statement = conn.createStatement（select * from links where url =？1）; 
 statement.bindStringParameter（0，anchors [i] .href）; 
 var visited = false; 
尝试{
 while（statement.executeStep（））{
 visited = true; 
 break; 
 
} catch（e）{
} finally {
 statement.reset（）; 
} 
 statement.finalize（）; 
 if（visited）{
 anchors [i] .innerHTML + =+; 
} 
} 
 conn.close（）; 
}，
  

这个函数在DOMContentLoaded事件上运行。它检查页面上的每一个链接，如果它存在于 test.sqlite 数据库中并标记出现的链接。

问题是，加载页面现在慢得多（尤其是当我降低CPU频率）。你可以帮助我使这个代码更有效率和节省资源吗？
$ b $编辑：显着的加速是通过删除事件监听器和函数来实现的。

谢谢

解决方案 c> createStatement 循环，并重新使用它，每次重新绑定参数。 存储文档说：注意：如果您需要多次执行一个语句，缓存createStatement的结果会给你一个明显的性能提升，因为SQL查询不需要每次都被解析。

所以不是：

  for（var i = 0; i< anchors.length; i ++）{
 var statement = conn.createStatement（select * from links url =？1）; 
 statement.bindStringParameter（0，anchors [i] .href）; 
 // ...做结果
  

写：

  var statement = conn.createStatement（select * from links where url =？1）; 
 for（var i = 0; i< anchors.length; i ++）{
 statement.bindStringParameter（0，anchors [i] .href）; 
 // ...做结果
  

编辑：另外，如果您使用最近的Firefox，你可以使用他们的异步API来避免延迟UI。而不是调用 executeStep ，请使用 （b）

$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ b // ...做结果
}，

handleError：function（aError）{
print（Error：+ aError.message）;
），

handleCompletion：function（aReason）{
if（aReason！= Components.interfaces.mozIStorageStatementCallback.REASON_FINISHED）
print（Query cancelled or aborted！
}
}）;

I'm running the following javascript code in firefox extension

highlightLinks: function(e) {

  var anchors = e.target.getElementsByTagName("a");
  let file = Components.classes["@mozilla.org/file/directory_service;1"]
                  .getService(Components.interfaces.nsIProperties)
                  .get("ProfD", Components.interfaces.nsIFile);
  file.append("test.sqlite");

  var storageService = Components.classes["@mozilla.org/storage/service;1"]
          .getService(Components.interfaces.mozIStorageService);
  var conn = storageService.openDatabase(file);

  for (var i = 0; i < anchors.length; i++) {
    var statement = conn.createStatement("select * from links where url=?1");
    statement.bindStringParameter(0, anchors[i].href);
    var visited = false;
    try {
      while (statement.executeStep()) {
        visited = true;
        break;
      }
    } catch (e) {
    } finally {
      statement.reset();
    }
    statement.finalize();
    if (visited) {
      anchors[i].innerHTML += "+";
    }
  }
  conn.close();
},

This function runs on DOMContentLoaded event. It checks for every link on the page if it's present in the test.sqlite database and markes the links that are present.

The problem is that the loading of pages is much slower now (especially when I lower CPU frequency). Could you help me make this code more efficient and resource saving?

Edit : Significant speedup was achieved by removing event listener at the and of the function.

thank you

解决方案

It'll be faster if you pull the createStatement out of the loop, and reuse it, rebinding the parameters each time. The docs for storage say: "Note: If you need to execute a statement multiple times, caching the result of createStatement will give you a noticeable performance improvement because the SQL query does not need to be parsed each time."

So instead of:

for (var i = 0; i < anchors.length; i++) {
  var statement = conn.createStatement("select * from links where url=?1");
  statement.bindStringParameter(0, anchors[i].href);
  // ... do stuff with results

write:

var statement = conn.createStatement("select * from links where url=?1");
for (var i = 0; i < anchors.length; i++) {
  statement.bindStringParameter(0, anchors[i].href);
  // ... do stuff with results

Edit: Also, if you're using a recent Firefox, you can use their asynchronous API to avoid delaying the UI. Instead of calling executeStep, use executeAsync instead.

statement.executeAsync({
  handleResult: function(aResultSet) {
    // ... do stuff with results
  },

  handleError: function(aError) {
    print("Error: " + aError.message);
  },

  handleCompletion: function(aReason) {
    if (aReason != Components.interfaces.mozIStorageStatementCallback.REASON_FINISHED)
      print("Query canceled or aborted!");
  }
});

这篇关于使用存储服务的Firefox扩展中的JavaScript代码太慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！