如何优化大型HTML文件

时间:2016-12-12 17:59:43

标签: javascript html css

我们最近不得不从基于.txt的日志文件切换到.html。 原因是我们可以轻松过滤类别,将颜色应用于文本等...

我们的日志文件是一个普通的旧HTML文件,包含所有资源(内联css,内联js,...)。每条消息都是<div>,其中应用了一些类(例如timestampcategory_foo

这适用于小型日志文件。不幸的是,对于较大的日志文件(从3MB开始),存在各种问题。我们的日志文件很容易超过100MB。

我们还有一个过滤系统,它使用javascript来隐藏包含特定类的所有消息(按类别过滤)。

我们已经做过的一个优化是不直接修改DOM元素,而是在html的头部添加一个新的<style>标记。这样我们就可以轻松地将display:none;添加到所有邮件中。这已经有很多帮助,但还不够。

我们可以通过哪些方式优化此项?在chrome中,即使是30mb文件的加载也需要很长时间。有什么方法我们可以以某种方式优化文件,使浏览器更容易加载? 我们可能会以某种方式对日志进行分页,即使所有内容都在html文件中吗?

为了在运行时尽可能快地进行日志记录,我们的应用程序首先编写一个“模板”html。然后它只是继续附加这样的行

<div class='categoryInfo'>Some Info Text</div>

2 个答案:

答案 0 :(得分:1)

正如您的问题评论中所提到的,逻辑解决方案是将它们放在数据库中。当然,如果你想要最大的可访问性,你可以用文本格式存储它们。

您可以创建一个查询此数据库并输出网页的简单脚本。 (例如在Apache 2上使用PHP)这使得使用&#39; log&#39;文件方式更容易。这些简单的PHP脚本与您现有的JS相结合,可以更强大/更高效。这样,您就可以保持信息存储,处理和标记彼此远离。

答案 1 :(得分:0)

你可能已经在那里画了一个角落:通过切换到html作为日志文件格式,你使用现有的处理日志文件的工具变得更加困难。

我认为您的初衷是让查看和过滤日志文件更容易。我担心你让它变得更难。

另一种方法是让您的日志文件更具机器可读性,并查看可帮助您阅读,过滤和搜索日志文件的工具。例如:

相关问题