The performances are really bad when I display 2 inline SVG. The CPU reaches the maximum temperature and QWebEngine crashes randomly. The CPU usage displayed with top is over 60%.
<!DOCTYPE html>
<html>
<head>
<title>Machines</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<style>
svg.machine {
height: 300px;
max-width: 100%;
shape-rendering: geometricPrecision;
text-rendering: geometricPrecision;
image-rendering: optimizeQuality;
fill-rule: evenodd;
clip-rule: evenodd; }
svg.machine .machine {
display: block; }
svg.machine .machine .label {
fill: #727272;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 300;
font-size: 75000px;
text-align: center;
text-anchor: middle;
letter-spacing: -1px; }
svg.machine .machine .mask {
fill: white; }
svg.machine .machine .draw {
fill: #727272; }
svg.machine .number polygon {
fill: #00a627;
stroke: #fff;
stroke-width: 4000;
stroke-linejoin: round; }
svg.machine .number text {
fill: white;
font-weight: bold;
font-weight: 700;
font-size: 110000px;
font-family: 'Open Sans', sans-serif;
text-align: center;
text-anchor: start; }
svg.machine.taken > .machine > .draw, svg.machine.taken > .machine > .label, svg.machine.taken > .number polygon {
fill: #CD2628; }
svg.machine.taken > .machine > .mask {
fill: #FAE9E9; }
</style>
</head>
<body>
<div class="row">
<div class="col-sm-6 text-center">
<svg class="machine" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500000 800000">
<defs><linearGradient id="shadowgrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0" style="stop-opacity:0; stop-color:black"/><stop offset="1" style="stop-opacity:0.35; stop-color:black"/></linearGradient></defs>
<g class="machine">
<text class="label" x="250000" y="780000">Washing machine</text>
<polygon class="shadow" fill="url(#shadowgrad)" points="381195,596338 500001,596338 447930,686527 381095,686794"/>
<polygon class="mask" points="444699,190671 444699,679480 435706,688473 65209,688473 55713,678978 55713,190671 106773,157128 393640,157128"/>
<polygon class="mask" points="444699,190671 444699,679480 435706,688473 65209,688473 55713,678978 55713,190671 106773,157128 393640,157128"/>
<path class="draw" d="M396677 397755c7052,1566 12381,7889 12381,15409l0 92369c0,7511 -5325,13845 -12381,15412 -24072,57251 -80678,97460 -146676,97460 -87839,0 -159055,-71216 -159055,-159055 0,-87839 71216,-159055 159055,-159055 65998,0 122603,40208 146676,97460zm-146676 -59167c44008,0 82515,23546 103622,58723l33090 0c-7247,-15981 -17433,-30956 -30575,-44098 -58617,-58617 -153657,-58617 -212273,0 -58617,58617 -58617,153656 0,212273 58616,58618 153656,58618 212273,0 13142,-13142 23331,-28116 30577,-44099l-33091 0c-21107,35177 -59614,58725 -103623,58725 -66693,0 -120762,-54069 -120762,-120762 0,-66694 54069,-120762 120762,-120762zm90193 178578c-3278,-3008 -5132,-7123 -5132,-11633l0 -29264c-9208,-6274 -15254,-16842 -15254,-28823 0,19249 -15605,34854 -34856,34854 -19253,0 -34858,-15605 -34858,-34854 0,19249 -15603,34854 -34856,34854 -19251,0 -34856,-15605 -34856,-34854 0,19802 -16430,35561 -36197,34826 11988,47327 54860,82346 105911,82346 37398,0 70404,-18795 90098,-47452zm53082 -110823l-42361 0c-3756,0 -6821,3065 -6821,6821l0 92369c0,3753 3066,6823 6821,6823l42361 0c3755,0 6821,-3070 6821,-6823l0 -92369c0,-3756 -3063,-6821 -6821,-6821zm-323031 -219067l359560 0 -37918 -22749 -283725 0 -37917 22749zm228015 28999l79315 0c2935,0 5336,2401 5336,5337l0 15254c0,2936 -2401,5339 -5336,5339l-79315 0 0 -25930zm-88591 0l80713 0 0 25930 -80713 0 0 -25930zm-87191 0l79313 0 0 25930 -79313 0c-2937,0 -5338,-2403 -5338,-5339l0 -15254c0,-2936 2401,-5337 5338,-5337zm313869 50997l-372644 0 0 412986 372644 0 0 -412986zm-372644 -3942l372644 0 0 -68204 -372644 0 0 68204zm388346 416928c2,8666 -7034,15703 -15702,15703l-372644 0c-8669,0 -15703,-7031 -15703,-15703l0 -489057c0,-6175 3565,-11516 8749,-14081l43378 -26026c2522,-1508 5296,-2225 8035,-2221l283725 -49c3407,0 6561,1086 9134,2929l43361 26015c4897,2929 7614,8113 7619,13433l48 489057z"/>
</g><!--/.machine -->
<g class="number">
<polygon points="105670,539360 146770,563080 187850,586810 187850,634250 187850,681700 146770,705420 105670,729140 64590,705420 23500,681700 23500,634250 23500,586810 64590,563080"/>
<g transform="matrix(1.01342,0,0,1,-94145.3,258734)">
<text x="164000" y="415990">1</text>
</g>
</g><!--/.number -->
</svg>
</div>
<div class="col-sm-6 text-center">
<svg class="machine" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500000 800000">
<defs><linearGradient id="shadowgrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0" style="stop-opacity:0; stop-color:black"/><stop offset="1" style="stop-opacity:0.35; stop-color:black"/></linearGradient></defs>
<g class="machine">
<text class="label" x="250000" y="780000">Dryer</text>
<polygon class="shadow" fill="url(#shadowgrad)" points="381195,596338 500001,596338 447930,686527 381095,686794"/>
<polygon class="mask" points="444699,190671 444699,679480 435706,688473 65209,688473 55713,678978 55713,190671 106773,157128 393640,157128"/>
<polygon class="mask" points="444699,190671 444699,679480 435706,688473 65209,688473 55713,678978 55713,190671 106773,157128 393640,157128"/>
<path class="draw" d="M452049 680258c2,8666 -7034,15703 -15702,15703l-372644 0c-8669,0 -15703,-7031 -15703,-15703l0 -489057c0,-6175 3565,-11516 8749,-14081l43378 -26026c2522,-1508 5296,-2225 8035,-2221l283725 -49c3407,0 6561,1086 9134,2929l43361 26015c4897,2929 7614,8113 7619,13433l48 489057zm-356623 -418726l307356 0c5022,0 9183,4054 9183,9035l0 115489 2261 0c5038,0 9182,4126 9182,9143l0 90262c0,5012 -4143,9143 -9182,9143l-2261 0 0 115490c0,4981 -4162,9035 -9183,9035l-307356 0c-5018,0 -9182,-4051 -9182,-9035l0 -339527c0,-4983 4163,-9035 9182,-9035zm308687 124524l0 -116986 -310017 0 0 342521 310017 0 0 -116987 -18676 0c-5031,0 -9181,-4100 -9181,-9143l0 -90262c0,-5018 4143,-9143 9181,-9143l18676 0zm11263 8079l-31075 0 0 92309 31075 0 0 -92309zm-292898 -177860l79313 0 0 25930 -79313 0c-2937,0 -5338,-2403 -5338,-5339l0 -15254c0,-2936 2401,-5337 5338,-5337zm87191 0l80713 0 0 25930 -80713 0 0 -25930zm88591 0l79315 0c2935,0 5336,2401 5336,5337l0 15254c0,2936 -2401,5339 -5336,5339l-79315 0 0 -25930zm-228015 -28999l359560 0 -37918 -22749 -283725 0 -37917 22749zm366102 7850l-372644 0 0 485132 372644 0 0 -485132z"/>
</g><!--/.machine -->
<g class="number">
<polygon points="105670,539360 146770,563080 187850,586810 187850,634250 187850,681700 146770,705420 105670,729140 64590,705420 23500,681700 23500,634250 23500,586810 64590,563080"/>
<g transform="matrix(1.01342,0,0,1,-94145.3,258734)">
<text x="164000" y="415990">2</text>
</g>
</g><!--/.number -->
</svg>
</div>
</div>
</body>
</html>
I've compared the performances with Chromium Browser on the official UDOObuntu distro. They're OK on it so this is not related to the hardware.
I've noticed that the galcore module (Vivante driver) uses 4% of the CPU when running the test apps (it's displayed in bold) but uses 0% with QWebEngine. On UDOObuntu, the Vivante driver (CONFIG_MXC_GPU) is built in the kernel (v3.14).
I'm not able to compile Qt5 for UDOObuntu so far.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent