Mendix HTML DOM reduction - Mendix Forum

Mendix HTML DOM reduction


My idea is to drastically put in effort in reducing the DOM size of Mendix in the future.

This is a single list view, with not even contents in the first list item:

<div class="mx-listview mx-listview-selectable mx-name-listView1" id="mxui_widget_ListView_7" data-mendix-id="35_5" widgetid="mxui_widget_ListView_7" style="">
   <ul class="mx-list mx-list-striped mx-listview-list">
       <li class="mx-listview-item mx-name-index-0" tabindex="-1" id="mxui_widget_ListViewItem_64" widgetid="mxui_widget_ListViewItem_64">
           <div class="mx-dataview" id="mxui_widget_DataView_84" data-mendix-id="35_8" focusindex="0" widgetid="mxui_widget_DataView_84" style="">
               <div class="mx-dataview-content" style="height: auto;">

This small DOM section is a total of 651 bytes

<ul id="listview-1">
 <li id="listview-1-item-1" tabindex="-1"></li>

If you take out all the excess DOM elements with DIV's and the total overkill in classes added the same visual result could be achieved with the 77 byte snippet above.
Where all the data hooks etc can just be based on the "id" of the element. If you keep making those unique with added ##'s if they are named the same.

All list items should be selectable unless specified otherwise, same for mx-list and mx-list-item style definitions can be moved to ul / li and it makes no sense to be adding classes to actually remove styling from a front-end perspective

And I'm fine if you add the classes you currently have in the "style" field of the Mendix modeler if we can remove them by hand.

The DOM would become way more readable and I assume that total page size and page load could be reduced by at least 5-10x the amount of Kb's and MB's going through the server. Which would drastically reduce hosting costs for Mendix or hosting with SAP or IBM.

You don't have to render "style" or "class" if there is non added.


2 answers

Great point.

I've also noticed that more elements in MX seem bloated.
For instance a single scrollcontainer creates 4 lines of code:

<div data-mendix-id="15_0" class="mx-layoutcontainer mx-scrollcontainer mx-layoutcontainer-horizontal mx-scrollcontainer-horizontal mx-layoutcontainer-fixed mx-scrollcontainer-fixed" id="mxui_widget_HorizontalScrollContainer_0" widgetid="mxui_widget_HorizontalScrollContainer_0" style="margin-bottom: 0px; margin-top: 0px;">
  <div class="mx-layoutcontainer-center mx-scrollcontainer-center ">
    <div class="mx-layoutcontainer-wrapper mx-scrollcontainer-wrapper" style="height: 235px;">
      <div data-mx-placeholder="e4324f4b-01e8-4ee8-9ff8-1f2179674979" class="mx-placeholder">