Wie speichern wir normalerweise etwas in der Datenbank, das dem Benutzer angezeigt werden muss und einige Markup-Eigenschaften aufweist? Wer seinen Blog mindestens einmal, habr oder ähnliches gemacht hat, wird sofort sagen - html. Was wäre, wenn ich dir sagen würde, was du anders machen kannst? JSON.
Ich möchte die Vor- und Nachteile eines solchen Speichers berücksichtigen oder zumindest versuchen.
Was? Json? Warum ist das überhaupt notwendig?
Beschreibung:
Wir haben einen Dienst, in der Datenbank speichern wir HTML für die Anzeige einiger Inhalte.
, ( ) . \
( , )
:
, , css - .
- UI, , html css .
: , , :
css javascript ( ) .
:
html, json, , .
, :
. ( ) json html. json' html, Web View .
, api ( ) \
: , , .
html, json.
: : https://habr.com/ru/company/tuturu/blog/526710/
<img src="https://habrastorage.org/webt/nz/2t/p3/nz2tp3ywl9fdr7quadxm1dzmhdo.jpeg"><br>
<sup> , , . . </sup><br>{
"type": "image",
"src": "https://habrastorage.org/webt/nz/2t/p3/nz2tp3ywl9fdr7quadxm1dzmhdo.jpeg",
"caption": " , , . ."
}: : https://habr.com/ru/post/526676/
<img src="https://habrastorage.org/webt/lr/ql/v9/lrqlv9u6cxmuoyn-0hgrik3z0aw.jpeg"><br>
<i> .</i><br>{
"type": "image",
"src": "https://habrastorage.org/webt/lr/ql/v9/lrqlv9u6cxmuoyn-0hgrik3z0aw.jpeg",
"caption": " ."
}, , figcaption, , , , , .
.
( , html5 details):
<div class="spoiler" role="button" tabindex="0">
<b class="spoiler_title"> . </b>
<div class="spoiler_text">, :<br />
<br />
<ul>
<li> ( ) </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li></li>
</ul><br />
« » «
». - , .<br />
<br />
<a
href="https://anabin.kmk.org/anabin.html" rel="nofollow">Anabin</a>.<br />
<br />
:<br />
<br />
<ul>
<li> </li>
<li> . «»
</li>
<li> </li>
<li> , ,
</li>
<li> <a
href="https://germania.diplo.de/ru-ru/service/05-VisaEinreise/langfristigerAufenthalt/-/1611410?openAccordionId=item-1611410-3-panel"
rel="nofollow"> </a> </li>
<li> </li>
<li> </li>
</ul><br />
, .<br />
<br />
: <a href="https://germania.diplo.de/ru-ru"
rel="nofollow"> </a> . : ,
. ,
, . ,
«blue card», - —
.<br />
<br />
, .<br />
<br />
, - - 3 6-.
, !<br />
<br />
, . <br />
</div>
</div>… json:
{
"type": "details",
"title": " . ",
"child": {
"type": "div",
"children": [
{
"type": "tp",
"text": ", :"
},
{
"type": "unordered_list",
"children": [
{
"type": "tp",
"text": " ( ) "
},
{
"type": "tp",
"text": " "
},
{
"type": "tp",
"text": " "
},
{
"type": "tp",
"text": " "
},
{
"type": "tp",
"text": " "
},
{
"type": "tp",
"text": ""
}
]
},
{
"type": "tp",
"text": " « » « ». - , ."
},
{
"type": "paragraph",
"children": [
{
"type": "span",
"text": " ",
"mode": []
},
{
"type": "link_span",
"text": "Anabin",
"src": "https://anabin.kmk.org/anabin.html"
},
{
"type": "span",
"text": ".",
"mode": []
}
]
},
{
"type": "tp",
"text": " :"
},
{
"type": "unordered_list",
"children": [
{
"type": "tp",
"text": " "
},
{
"type": "tp",
"text": " . «» "
},
{
"type": "tp",
"text": " "
},
{
"type": "tp",
"text": " , , "
},
{
"type": "paragraph",
"children": [
{
"type": "span",
"text": "",
"mode": []
},
{
"type": "link_span",
"text": " ",
"src": "https://germania.diplo.de/ru-ru/service/05-VisaEinreise/langfristigerAufenthalt/-/1611410?openAccordionId=item-1611410-3-panel"
},
{
"type": "span",
"text": " ",
"mode": []
}
]
},
{
"type": "tp",
"text": " "
},
{
"type": "tp",
"text": " "
}
]
},
{
"type": "tp",
"text": ", ."
},
{
"type": "paragraph",
"children": [
{
"type": "span",
"text": " : ",
"mode": []
},
{
"type": "link_span",
"text": " ",
"src": "https://germania.diplo.de/ru-ru"
},
{
"type": "span",
"text": " . : , . , , . , «blue card», - — .",
"mode": []
}
]
},
{
"type": "tp",
"text": " , ."
},
{
"type": "tp",
"text": ", - - 3 6-. , !"
},
{
"type": "tp",
"text": ", ."
}
]
}
}, Html , .
:
{
"type": "paragraph",
"children": [
{
"type": "span",
"text": " ",
"mode": []
},
{
"type": "link_span",
"text": "Anabin",
"src": "https://anabin.kmk.org/anabin.html"
},
{
"type": "span",
"text": ".",
"mode": []
}
]
}: mode , bold, italic, strike , .
, .
? , span , , , TextView, html
, , ( ). html Dart, . , , — .
. , html , , .
? 2 :
- json html json json'.
- .
? React, , "html_to_react" ( "html-dom-parser"), , , .
:
- json.
- , , :
- ( , html)
- html json
- json html .
- dom , "html_to_react"
:
import Benchmark from "benchmark";
import fs from 'fs';
import htmlToDOM from 'html-dom-parser';
function parse(str) {
return JSON.parse(str);
}
function prepareAndParse(str) {
return htmlToDOM(JSON.parse(str)["textHtml"]);
}
const suiteName = '526574'
const defaultHtml = fs.readFileSync(`./test_data/${suiteName}/html.json`);
const jHtml = fs.readFileSync(`./test_data/${suiteName}/jhtml.json`);
const suite = new Benchmark.Suite;
suite.add('Json c html2json', () => parse(jHtml))
suite.add('Html json', () => parse(defaultHtml))
suite.add('Html json html-dom-parser', () => prepareAndParse(defaultHtml))
suite.on('complete', function() {
console.log('Fastest is ' + this.filter('fastest').map('name'));
}).on('cycle', function(event) {
console.log(String(event.target));
})
suite.run()
:
Json c html2json x 1,892 ops/sec ±0.79% (88 runs sampled)
Html json x 1,917 ops/sec ±0.81% (89 runs sampled)
Html json html-dom-parser x 798 ops/sec ±3.04% (86 runs sampled)- json' html json' .
- ( json, html) 2 html.
, ?
:
,
html
, , . css .
, , ios, flutter, web - .
WebView .
:
json , html
, :
- ,
- json ( — bson json), , , .
json html
, -:
- , , .
- , .
html , html, , , ( , )
, ,
, , , ?
:
- - ui
- , html. , , , .. javascript .
- , , , .
Infolgedessen möchte ich sagen, dass ich nicht allen auf einmal vorschlage, zu dem in diesem Artikel beschriebenen Ansatz zu wechseln. Zunächst interessiert mich die Meinung anderer Entwickler, sowohl des Backends als auch des Frontends. Höchstwahrscheinlich habe ich die Nuancen nicht berücksichtigt und bin bereit zuzuhören und Kritik und Kommentare zu diskutieren.