发表新帖
发表新帖

Simple html vs Javascript generated html?

前端 未结
关注
12 1528
故里飘歌
故里飘歌 2020-12-30 13:09

In my web application I would like to complately avoid html and use only javascript to create web-page\'s dom tree.

What is faster writing web content in the traditi

相关标签:
12条回答
  • 猫巷女王i
    2020-12-30 13:29

    IMHO I think compile javascript is a good solution to create fast applications to web.

    0 讨论(0)
  • 面向向阳花
    2020-12-30 13:32

    I already tried in the past doing a 100% javascript built component for an ajax chat. It turned out, it was less maintainable, took more time to code and the advantage where very slim even tough it was probably a project that could benefit a lot from that javascript DOM approach.

    Even if you think there could be advantage, there isn't. Stick to pure HTML.

    0 讨论(0)
  • 小蘑菇
    2020-12-30 13:33

    I find it interesting that you would consider creating a document purely through Javascript. It's actually faster to create elements using the DOM and document.createElement than .innerHTML property. This method creates the document objects directly, whereas using innerHTML requires the parser to iterate over the HTML and create the elements.

    On the other hand, using Javascript instead of writing the HTML directly would require the Javascript to be parsed and executed, creating additional overhead over the HTML parser.

    0 讨论(0)
  • 面向向阳花
    2020-12-30 13:37

    HTML (templating) is generally considered to be a more intuitive, modular and maintainable approach for DOM manipulation.

    A couple of places to get you started:

    jQuery Templating Engines: jQuery templating engines

    Google Closure Templates http://code.google.com/closure/templates/

    0 讨论(0)
  • 独厮守ぢ
    2020-12-30 13:38

    2019

    (Probably the correct answer is correct for 2010). Here's an answer for 2019 with benchmark.

    Generating table with nested div, total of 500 rows, 250k table cells, 10 nested divs per table cell.

    <!-- Pure HTML by server -->
<html>
    <head></head>
    <body>
        <table>
        <?php 
        for($i = 0; $i < 500; ++$i) {
            echo '<tr>';
            for($j = 0; $j < 500; ++$j) {
                echo '<td><div><div><div><div><div><div><div><div><div><div>' . $i . '/' . $j . '</div></div></div></div></div></div></div></div></div></div></td>';
            }
            echo '</tr>';
        }
        ?>
        </table>
        <script>
            alert('finish');
        </script>
    </body>
</html>

    And the below HTML generated by JS:

    <html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
        <script>
            $(document).ready(function() {
                var html = '<table>';
                for(var i = 0; i < 500; ++i) {
                    html += '<tr>';
                    for(var j = 0; j < 500; ++j) {
                        html += '<td><div><div><div><div><div><div><div><div><div><div>' + i + '/' + j + '</div></div></div></div></div></div></div></div></div></div></td>';
                    }
                    html += '</tr>';
                }
                html += '</table>';

                $('body').html(html);

                alert('finish');
            });
        </script>
    </body>
</html>

    Approx. Result:

                          | Download Size  | Time 'til browser stops loading
--------------------------------------------------------------------------
Pure HTML by server   | 680,000 bytes  | 00:01:48 
HTML generated by JS  |     570 bytes  | 00:00:28

    Tested it on Chrome v70 on Ubuntu 18.

    Conclusion

    Always stick to normal HTML for many reasons (usually for readable/maintainable code), except if you're dealing with huge HTML then you may consider generating it by JS.

    0 讨论(0)
  • 眼角桃花
    2020-12-30 13:39

    Speed is a secondary concern to correctness - that is, serve the functional requirements first, then make it fast where necessary (some places, it might already be fast enough).

    In this case, the decision to use static markup versus JavaScript is a question of who is consuming your document - is it only users with JavaScript enabled? If so, it doesn't matter too much. Do you need to take search engines into consideration? Disabled users? Thin clients that don't have full JS support, or paranoid users with JS disabled? In all of these latter cases, having semantic markup, not cluttered with superfluous elements, enhanced with JavaScript, is the only correct way to go.

    0 讨论(0)
 看不清?
提交回复
热议问题