Question

我在Javascript和HTML中制作语法高亮显示。它目前工作正常，但我认为这是非常低效的，因为我有一个时间为0的间隔，它运行一个函数循环文本区域中的所有字符，然后将它们插入文本区域后面的div中以提供语法高亮。

我认为我的词法分析员也非常糟糕，但此刻我更关注每秒运行一百万次的函数，每次都会循环遍历文本区域中的每个字符。

有人可以考虑一种更有效的方法吗？

似乎没有任何性能问题，但我不确定它是否适用于低功耗的机器，因为我不希望它崩溃浏览器选项卡，因为我想在页面上有几个所以我需要它尽可能高效。

我理解为它提供大量代码并要求帮助很烦人，但我认为最容易调试的问题是你需要整个代码。

在这里你编码：

<html>
<head>
    <title>My Syntax Highlighter</title>
    <style type="text/css">
    #container {
        width: 100%;
        height: 100%;
        position: relative;
        padding: 0px;
    }

    #code {
        width: 100%; 
        height: 100%; 
        outline:none;
        position: absolute;
        background-color: transparent;
        border: none;
        font-family: Courier;
        font-size: 22px;
        color:  rgba(0,0,0,.2) !important;
     }

     #codeb {
        width: 100%;
        height: 100%;
        position: absolute;
        font-family: Courier;
        font-size: 22px;
        padding: 2px 2px;
        color: #000;
     }

     .keyword {
        /*font-weight: bold;*/
        color: #E42D82;
     }

     .string {
        /*font-weight: bold;*/
        color: #0086b3;
     }

    </style>
    <script type="text/javascript">


    function u() {
        var code = document.getElementById("code");
        var codeb = document.getElementById("codeb");
        var c = "";
        var tok = "";
        var cc = 0;
        var t = "";
        var takeaway = 0;

        var stringStarted = false;
        var string = "";

        for (var i = 0; i < code.value.length; i++) {

            tok += code.value[i];
            c += code.value[i];

            cc++;

            if (tok == "print") {
                t = "<span class=\"keyword\">print</span>";
                takeaway += 5;
                c = c.substring(0, cc - takeaway) + t + c.substring(cc + t.length);
                cc += t.length;
                tok = "";
            } else if (tok == "var") {
                t = "<span class=\"keyword\">var</span>";
                takeaway += 3;
                c = c.substring(0, cc-takeaway) + t + c.substring(cc + t.length);
                cc += t.length;
                tok = "";
            } else if (tok == "\"") {
                tok = "";
                if (stringStarted == false) {
                    stringStarted = true;
                    string += "\"";
                } else {
                    stringStarted = false;
                    string += "\"";
                    t = "<span class=\"string\">" + string + "</span>";

                    takeaway += string.length;
                    c = c.substring(0, cc-takeaway) + t + c.substring(cc + t.length);
                    cc += t.length;
                    tok = "";
                    string = "";

                }
                tok = "";
            } else if (tok == " ") {
                if (stringStarted == true) {
                    string += " ";
                }
                c+= "";
                tok = "";
            } else {
                if (stringStarted == true) {
                    string += code.value[i];
                    tok = "";
                }
            }


            codeb.innerHTML = c;
            //console.log("test");

        };

        //alert(string);

        if (code.value == "") {
            codeb.innerHTML = "";
        }

        clearI(setInterval(function(){ u(); }, 0));


    }

    function clearI(interval) {
        clearInterval(interval);
    }

    var interval = setInterval(function(){ u(); }, 0);  

    </script>
</head>
<body>
<div id="container">
    <div id="codeb"></div>
    <textarea id="code" autofocus></textarea>
</div>
</body>
</html>

Javascript语法高亮无限循环

0 个答案: