You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
2.3 KiB
HTML
87 lines
2.3 KiB
HTML
<div layout="column" class="slide slide-33">
|
|
<!--http://www.slideshare.net/HyungwookLee/android-chromium-rendering-pipeline-->
|
|
|
|
<div flex="10">
|
|
<h3 style="margin-left: 10px; margin-top: 10px">Rendering with WebGL</h3>
|
|
</div>
|
|
|
|
<!--Sections-->
|
|
<div flex="10" layout="row" layout-align="center center">
|
|
|
|
<div style="text-align: center" flex="33">
|
|
</div>
|
|
|
|
|
|
<div class="" style="text-align: center" flex="33">
|
|
<h3>Rendering</h3>
|
|
</div>
|
|
|
|
|
|
|
|
<div style="text-align: center" flex="33">
|
|
<!--<img src="/assets/images/react.png" style="max-height: 100px"/>-->
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div flex="5">
|
|
</div>
|
|
|
|
<!--Rendering-->
|
|
<div class="rendering-container" flex="35" layout="row" >
|
|
|
|
<div flex="33" layout="column" layout-align="end center">
|
|
<h3>We lose DOM API</h3>
|
|
<h3>Heavy on memory</h3>
|
|
<h3>Hard rendering debugging</h3>
|
|
</div>
|
|
|
|
|
|
<!--Rendering process-->
|
|
<div flex="33" layout="column" layout-fill layout-align="center center">
|
|
<img src="/assets/images/famous.jpg" style="max-height: 200px">
|
|
<!--<div flex layout="row" layout-margin layout-fill layout-align="center center">-->
|
|
<!--<p>dom update</p>-->
|
|
<!--</div>-->
|
|
|
|
<!--<div flex layout="row" layout-margin layout-fill layout-align="center center">-->
|
|
<!--<p>layout</p>-->
|
|
<!--</div>-->
|
|
|
|
<!--<div flex layout="row" layout-margin layout-fill layout-align="center center">-->
|
|
<!--<p>paint</p>-->
|
|
<!--</div>-->
|
|
</div>
|
|
|
|
|
|
|
|
<!--React-->
|
|
<div flex="33" layout="column" layout-fill layout-align="start center">
|
|
<!--<p>React</p>-->
|
|
<!--<p>Less DOM updates</p>-->
|
|
<!--<p>Less paintings</p>-->
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div flex="10">
|
|
</div>
|
|
|
|
<!--CPU-->
|
|
<div flex="15" layout="row" layout-align="center center">
|
|
<img style="width: auto; height: 100px" src="/assets/images/gpu-chip.jpg">
|
|
|
|
</div>
|
|
|
|
<!--Screen-->
|
|
|
|
<div flex layout="row" layout-align="center center">
|
|
<div flex="33" layout="row" layout-align="center center">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|