Long list memory stress test

by tonytlwu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.3.0/animate.min.css">
<pre id="debug"></pre>
<div id="scrollable">
    <ul id="content"></ul>
</div>

<meta name="viewport" content="width=device-width, initial-scale=1">

CSS

body {
    margin: 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

#debug:empty {
    display: none;
}

#scrollable {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: #f1f1f1;
}

#content {
    padding: 0;
    margin: 0;
    list-style: none;
}

#content li {
    margin: 0 15px;
    padding: 8px 0;
    border-bottom: 1px solid #cfcfcf;
    position: relative;
    text-shadow: 0px 1px 2px red;
    -webkit-transition: all 0.3s cubic-bezier(0,0,0.5,1);
}

#content li.clicked {
    background: green;
    color: #fff;
    opacity: 0.75;
}

#content li:after {
    content: '»';
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translate3d(0,-50%,0);
}

/* ---------------------------------------------------------------------------------------------------------- 
01 Overlay --------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
body.overlayIsActive {
    overflow: hidden;
}

body.overlayIsActive > :not(.overlay),
body.overlayIsActive > :not(.overlay) * {
	pointer-events: none;
}

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: none;
	width: 100%;
	height: 100%;
	z-index: 1000;
	-webkit-transform: translate3d(0,0,0);
    pointer-events: none;
}

.overlay.active {
	pointer-events: all;
}

.overlayPanelScreen {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 19999;
	background: rgba(0,0,0,0.7);
	-webkit-transform: translate3d(0,0,0);
	opacity: 0;
	pointer-events: none;
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
}

.overlay.active .overlayPanelScreen {
	opacity: 1;
	pointer-events: all;
}

.overlayPanel {
	position: absolute;
  ...

JavaScript

var data = [
  {
    "_id": "55ba5dea2dc02b52a9df7713",
    "index": 0,
    "guid": "e3fbd569-1452-46b2-9944-898247df8de8",
    "isActive": false,
    "balance": "$3,602.32",
    "picture": "http://placehold.it/32x32",
    "age": 37,
    "eyeColor": "blue",
    "name": "Rowe Owens",
    "gender": "male",
    "company": "BYTREX",
    "email": "[email protected]",
    "phone": "+1 (815) 520-3258",
    "address": "186 Truxton Street, Ladera, Alaska, 9024",
    "about": "Culpa dolor anim labore ex ipsum dolor. Dolor laborum ea mollit adipisicing. Ad do duis ea incididunt exercitation consequat mollit commodo quis ad aliquip.\r\n",
    "registered": "2014-07-21T11:50:56 -01:00",
    "latitude": 35.746317,
    "longitude": -16.039576,
    "tags": [
      "reprehenderit",
      "quis",
      "officia",
      "ipsum",
      "non",
      "elit",
      "non"
    ],
    "friends": [
      {
        "id": 0,
        "name": "Luna Molina"
      },
      {
        "id": 1,
        "name": "Clare Franco"
      },
      {
        "id": 2,
        "name": "Deanne Glenn"
      }
    ],
    "greeting": "Hello, Rowe Owens! You have 6 unread messages.",
    "favoriteFruit": "strawberry"
  },
  {
    "_id": "55ba5dea0d8647e0da3cf9b1",
    "index": 1,
    "guid": "c20f6038-4a54-4618-9d29-e10856c8b12a",
    "isActive": false,
    "balance": "$1,664.76",
    "picture": "http://placehold.it/32x32",
    "age": 20,
    "eyeColor": "green",
    "name": "Oneil Durham",
    "gender": "male",
    "company": "ONTAGENE",
    "email": "[email protected]",
    "phone": "+1 (837) 485-2349",
    "address": "275 Lake Place, Mooresburg, Connecticut, 9518",
    "about": "Est mollit quis proident consectetur velit tempor ad laboris mollit aute mollit. Occaecat consectetur non commodo consectetur nulla sint non mollit eu. Ad reprehenderit pariatur non et qui cillum cupidatat amet sint sit elit. Voluptate ea ad dolore pariatur duis. Ut do labore mollit cillum enim aute sunt sint nulla voluptate...