1

UIに文字カウンターを実装しているので、ユーザーは入力用に残っている文字数を確認できます。

数えるために、私はこの単純な関数を使用します：

function typerCount(source, layerID)
{
    outPanel = GetElementByID(layerID);
    outPanel.innerHTML = source.value.length.toString();
}
  • sourceには、測定する値のフィールドが含まれています
  • layerIDには、結果を入れたいオブジェクトの要素IDが含まれています（スパンまたはdiv）
  • outPanelは一時的な変数です

この機能を有効にすると、入力中にマシンの速度が大幅に低下し、FFが100％で1つのコアを使用していることがわかります。数文字の各ブロックの後にぶら下がっているため、流暢に書くことはできません。

問題は、2行目のvalue.length（）関数呼び出しにあると思われますか？

よろしく

4

4 に答える 4

1

なぜそれが遅いのかはわかりません。あなたの例には、それを判断するのに十分なコードがありません。テキストエリア内の文字数を数え、入力を n 文字に制限したい場合は、この jsfiddleを確認してください。邪魔されずに入力するのに十分な速さです。

于 2011-06-10T16:31:29.530 に答える
0

コメントにある artyom.stv のように、GetElementByID呼び出しの結果をキャッシュします。また、補足として、何をしているのGetElementByIDですか？を呼び出す以外に何かをしていdocument.getElementByIdますか?

あなたが言うこれをどのようにキャッシュしますか？

var outPanelsById = {};

function getOutPanelById(id) {
    var panel = outPanelsById[id];

    if (!panel) {
         panel = document.getElementById(id);
         outPanelsById[id] = panel;
    }

    return panel;
};

function typerCount(source, layerId) {
    var panel = getOutPanelById(layerId);
    panel.innerHTML = source.value.length.toString();
};

FFでは呼び出しでさえgetElementById非常に高速であるため、何か他のことが起こっている必要があると思います。

また、「source」とは何ですか？それはDOMElementですか？それとも別のものですか？

于 2011-06-10T16:25:07.083 に答える
0

問題が innerHTML または getElementById() の使用にあるとは思えません。

関数の一部を削除し、CPU がどのように使用されているかを確認して、問題を切り分けようとします。たとえば、次のすべての方法を試してください。

var len;

function typerCount(source, layerID)
{
    len = source.value.length;
}

function typerCount(source, layerID)
{
    len = source.value.length.toString();
}

function typerCount(source, layerID)
{
    outPanel = GetElementByID(layerID);
    outPanel.innerHTML = "test";
}
于 2011-06-10T16:36:34.597 に答える
0

outPanel に問題がある可能性があります。その関数を呼び出すたびに、その DOM ノードが検索されます。同じDOMノードをターゲットにしている場合、文字を入力するたびにブラウザがそれを行うと、ブラウザにとって非常に高価になります.

また、これは冗長すぎます。

source.value.length.toString();

これで十分です：

source.value.length;

JavaScript は動的です。文字列への変換は必要ありません。

于 2011-06-10T16:33:32.540 に答える