减小HTML文件大小



我有一些生成HTML文件的代码,但是,如果有很多文本,文件将远远超过50mb,有时达到70-80mb。

老实说,我不想让一个HTML文件达到这个大小。这是定义HTML模板的源代码。

namespace Structure
{
    const std::string strHTMLTemplate = "<doctype html>"
                                        "<html lang="en">"
                                        "<head>"
                                        "<meta charset="utf-8"/>"
                                        "<title>Data Verifier Test Results - {@testdesc}</title>"
                                        "<style>"
                                        "body {"
                                        "tbackground: none repeat scroll 0 0 #F3F3F4;"
                                        "tcolor: #1E1E1F;"
                                        "tfont-family: "Segoe UI",Tahoma,Geneva,Verdana,sans-serif;"
                                        "tmargin: 0;"
                                        "tpadding: 0;"
                                        "}"
                                        "h1 {"
                                        "tbackground-color: #E2E2E2;"
                                        "tborder-bottom: 1px solid #C1C1C2;"
                                        "tcolor: #201F20;"
                                        "tfont-size: 24pt;"
                                        "tfont-weight: normal;"
                                        "tmargin: 0;"
                                        "tpadding: 10px 0 10px 10px;"
                                        "}"
                                        "h2 {"
                                        "tfont-size: 21pt;"
                                        "tfont-weight: normal;"
                                        "tmargin: 0;"
                                        "tpadding: 15px 0 5px;"
                                        "}"
                                        "h3 {"
                                        "tbackground-color: rgba(0, 0, 0, 0);"
                                        "tfont-size: 18pt;"
                                        "tfont-weight: normal;"
                                        "tmargin: 0;"
                                        "tpadding: 15px 0 5px;"
                                        "}"
                                        "h4 {"
                                        "tbackground-color: rgba(0, 0, 0, 0);"
                                        "tfont-size: 15pt;"
                                        "tfont-weight: normal;"
                                        "tmargin: 0;"
                                        "tpadding: 15px 0 5px;"
                                        "}"
                                        "h5 {"
                                        "tbackground-color: rgba(0, 0, 0, 0);"
                                        "tfont-size: 12pt;"
                                        "tfont-weight: normal;"
                                        "tmargin: 0;"
                                        "tpadding: 15px 0 5px;"
                                        "}"
                                        "a {"
                                        "tcolor: #1382CE;"
                                        "}"
                                        "table {"
                                        "tborder-collapse: collapse;"
                                        "tborder-spacing: 0;"
                                        "tfont-size: 8pt;"
                                        "}"
                                        "table th {"
                                        "tbackground: none repeat scroll 0 0 #E7E7E8;"
                                        "tfont-weight: normal;"
                                        "tpadding: 1px 2px;"
                                        "ttext-align: left;"
                                        "ttext-decoration: none;"
                                        "}"
                                        "table td {"
                                        "tbackground: none repeat scroll 0 0 #F7F7F8;"
                                        "tborder: 1px solid #E7E7E8;"
                                        "tmargin: 0;"
                                        "tpadding: 1px 2px 1px 1px;"
                                        "tvertical-align: top;"
                                        "}"
                                        ""
                                        ".textCentered {"
                                        "ttext-align: center;"
                                        "}"
                                        ".messageCell {"
                                        "twidth: 100;"
                                        "}"
                                        "#content {"
                                        "tpadding: 0 12px 12px;"
                                        "}"
                                        "#overview table {"
                                        "tmax-width: 75;"
                                        "twidth: auto;"
                                        "}"
                                        "#messages table {"
                                        "twidth: 97;"
                                        "}"
                                        "</style>"
                                        "</head>"
                                        "<body>"
                                        "<div id="big_wrapper">"
                                        "t<h1>Test Results - {@testdesc}</h1>"
                                        "t"
                                        "{@eeddata}"
                                        "t"
                                        "</body>"
                                        "</html>";
   const std::string strHTMLEEDDataEntireMsgTemplate = "t"
                                        "tt<h2 _locID="EEDInfo">{@indveeddata}</h2>"
                                        "{@clientdata}"
                                        "t";
   const std::string strHTMLEEDDataTemplate = "t"
                                        "{@clientdata}"
                                        "t";
   const std::string strHTMLRequestTemplate = "tt<h2 _locID="ReqInfo">Request Information</h2>"
                                        "tt<div id="ReqInfoResults">"
                                        "tt</div>"
                                        "tt<div id="ReqValueResults">"
                                        "tt<h3 _locID="RequestDataTitle">Request Data</h3>"
                                        "ttt<table>"
                                        "{@requestbody}"
                                        "ttt</table>"
                                        "tt</div>";
   const std::string strHTMLResponseTemplate = "tt<h2 _locID="ResponseTitle">Response Results</h2>"
                                        "tt<div id="RespInfoResults">"
                                        "tt</div>"
                                        "tt<div id="RespValueResults">"
                                        "tt<h3 _locID="ResponseDataTitle">Response Data</h3>"
                                        "ttt<table>"
                                        "{@responsebody}"
                                        "ttt</table>"
                                        "tt</div>";
   const std::string strHTMLSingleMessageTemplate = "tt<h4 _locID="MessageTitle">RWF Message</h4>"
                                        "tt<div id="MessageResults">"
                                        "tt<h5 _locID="ActualMessageResults">Source: {@source} Destination: {@destination} Timestamp: {@timestamp}</h5>"
                                        "{@messagebody}"
                                        "tt</div>";
   const std::string strHTMLClientDataTemplate = "tt<h3 _locID="Client ID: ">{@clientid} {@subclientid}</h3>" 
                                                "{@requestmsg}"
                                                "{@responsemsg}";
   const std::string strHTMLResponseHdrTemplate =   "<tr>"
                                                    "<th></th>"
                                                    "<th _locID="TypeHeader">Type</th>"
                                                    "<th _locID="ValueHeader">Value</th>"
                                                    "</tr>"       
                                                    "<tr>"
                                                    "<td style="background: blue"></td>"
                                                    "<td><strong>Path</strong></td>"
                                                    "<td>{@url}</td>"
                                                    "</tr>"
                                                    "<tr>"
                                                    "<td style="background: blue"></td>"
                                                    "<td><strong>IP Address</strong></td>"
                                                    "<td>{@iptosendto}</td>"
                                                    "</tr>";
   const std::string strHTMLReqHdrRowTemplate =  "<tr>"
                                                "<th></th>"
                                                "{@reqhdrrowvalue}"
                                                "</tr>";
   const std::string strHTMLRespHdrRowTemplate =  "<tr>"
                                                "<th></th>"
                                                "{@resphdrrowvalue}"
                                                "</tr>";
   const std::string strHTMLReqHdrRowValueTemplate = "<th _locID="{@requestvaluehdr}Header"><strong>{@requestvaluehdr}<strong></th>";
   const std::string strHTMLRespHdrRowValueTemplate = "<th _locID="{@responsevaluehdr}Header"><strong>{@responsevaluehdr}<strong></th>";
   const std::string strHTMLReqDataRowTemplate = "<tr>"
                                                "<td style="background: blue"></td>"
                                                "{@reqdatarowvalue}"
                                                "</tr>";
   const std::string strHTMLRespDataRowTemplate = "<tr>"
                                                "<td style="background: blue"></td>"
                                                "{@respdatarowvalue}"
                                                "</tr>";
   const std::string strHTMLRespDataRowValueTemplate = "<td>{@responsevalue}</td>";
   const std::string strHTMLReqDataRowValueTemplate = "<td>{@requestvalue}</td>";
   const std::string strHTMLCLIENTDATA = "{@clientdata}";
   const std::string strHTMLEEDSDATA = "{@eeddata}";
   const std::string strHTMLINDVEEDDATA = "{@indveeddata}";
   const std::string strHTMLCLIENTID = "{@clientid}";
   const std::string strHTMLSUBCLIENTID = "{@subclientid}";
   const std::string strHTMLSOURCEIP = "{@source}";
   const std::string strHTMLDESTINATIONIP = "{@destination}";
   const std::string strHTMLTIMESTAMP = "{@timestamp}";
   const std::string strHTMLREQUESTMSG = "{@requestmsg}";
   const std::string strHTMLRESPONSEMSG = "{@responsemsg}";
   const std::string strHTMLREQUESTBODY = "{@requestbody}";
   const std::string strHTMLRESPONSEBODY = "{@responsebody}";
   const std::string strHTMLMESSAGEBODY = "{@messagebody}";
   const std::string strHTMLREQHDRROWVALUE = "{@reqhdrrowvalue}";
   const std::string strHTMLRESPHDRROWVALUE = "{@resphdrrowvalue}";
   const std::string strHTMLREQUESTHDR = "{@requesthdr}";
   const std::string strHTMLRESPONSEHDR = "{@responsehdr}";
   const std::string strHTMLREQUESTVALUEHDR = "{@requestvaluehdr}";
   const std::string strHTMLRESPONSEVALUEHDR = "{@responsevaluehdr}";
   const std::string strHTMLREQDATAROWVALUE = "{@reqdatarowvalue}";
   const std::string strHTMLRESPDATAROWVALUE = "{@respdatarowvalue}";
   const std::string strHTMLREQUESTVALUE = "{@requestvalue}";
   const std::string strHTMLRESPONSEVALUE = "{@responsevalue}";
   const std::string strHTMLTESTDESCRIPTION = "{@testdesc}";
}

有超过1000个调用使用strHTMLReqDataRowTemplate和strHTMLRespDataRowTemplate,并用必要的数据替换{@}标签。这些都是递归完成的。

看着HTML和CSS,你们能看到我可以改善输出的任何方法吗?

HTML页面应该有列和行数据,我经常创建一个表的行和列。

我在看:

style="background: blue">

内联这样的样式会占用大量的空间。如果可能的话,完全删除它并使用CSS,例如:

td:nth-child(2) { ... }

如果这是不可能的,您可以添加一个类而不是内联样式,以节省至少几个字节:

<td class="data"

你甚至可以通过添加自定义属性来作弊:

 <td x>Hello</td>

样式化的小例子:

div[x] {color: blue;}
div[y] {color: red;}
<div x>Hello</div>
<div y>world</div>

然而,最终它仍然是大量的数据,所以最好的主意可能是选择一种不同的格式或压缩HTML文件分发时。即使您从web服务器提供它,您也可以使用gz压缩响应,这将大大减少大小,比上面的微优化所做的要多。

注意,对于浏览器来说,元素是否包含我的小属性hack的完整类名并不重要。最后,需要将整个文档加载到内存中,并且无论在磁盘上存储多么紧凑,具有样式的实际单元格都会消耗大量内存。可能会有一些差异,但不会像你想象的那么大。

c++并不是做这类事情的最佳语言,但我不禁想到这样一个庞大的函数场:

std::string strHTMLReqDataRowTemplate (const std::string & reqdatarowvalue)
{ 
    return "<tr>"
           "<td style="background: blue"></td>"+
           reqdatarowvalue +
           "</tr>";
}

std::ostream & strHTMLReqDataRowTemplate (std::ostream & out,
                                          const std::string & reqdatarowvalue)
{
    out << "<tr>"
           "<td style="background: blue"></td>";
    out << reqdatarowvalue;
    out << "</tr>";
}

代替字符串场比搜索和替换标签要快。在一个或多个cpp文件中定义函数,这取决于库的大小以及您希望如何组织它,然后您所要公开的是一个充满函数定义的头文件。

最新更新