Form missing method attribute; specify method (e.g., POST, GET) for clarity
<form>
1<!DOCTYPE html>2<html lang="en">3 <head>4 <meta charset="utf-8">5 <title></title>6 <script src="../../dist/vue.min.js"></script>7 <link rel="stylesheet" href="style.css">8 <link rel="stylesheet" href="demo.css">9 </head>10 <body>11 <div id="el">12 <h1>Rendering Dynamic Big Table</h1>13 <p>Reference: <a href="http://insin.github.io/ui-lib-samples/large-datasets/index.html">insin/ui-lib-samples/large-datasets</a></p>1415 <p>16 <span>{{ rows }} x {{ cols }}, {{ optimized ? 'with' : 'without' }} optimization. {{ msg }}</span>17 </p>1819 <p>20 <button v-if="optimized" @click="loadBase">Disable optimization</button>21 <button v-else @click="loadOptimized">Enable optimization (Object.freeze)</button>22 <button @click="unmount">Unmount</button>23 <button @click="rerender">Rerender with fresh data</button>24 </p>2526 <form>27 <strong>Filter Data</strong>:28 <input type="text" v-model="filter">2930 <!--31 If the user is filtering the data, we want to offer some insight into32 the breadth of the filtering.33 -->34 <span v-if="filter">35 —36 Filtering <strong>{{ filter }}</strong>37 over {{ dataPoints }} data points,38 {{ visibleCount() }} found.39 </span>4041 </form>4243 <table width="100%" cellspacing="2" :class="{ filtered: filter }">44 <tr v-for="row in grid">45 <th>{{ row.id }}</th>46 <td v-for="item in row.items"47 class="item"48 :class="{ hidden: !matches(item) }">49 {{ item.value }}50 </td>51 </tr>52 </table>53 </div>5455 <script>56 var ROWS = 100057 var COLS = 1058 var OPTIMIZED = window.location.hash === '#optimized'5960 window.onhashchange = function () {61 window.location.reload()62 }6364 function generateGrid( rowCount, columnCount ) {65 var valuePoints = [66 "Daenerys", "Jon", "Sansa", "Arya", "Stannis", "Gregor", "Tyrion",67 "Theon", "Joffrey", "Ramsay", "Cersei", "Bran", "Margaery",68 "Melisandre", "Daario", "Jamie", "Eddard", "Myrcella", "Robb",69 "Jorah", "Petyr", "Tommen", "Sandor", "Oberyn", "Drogo", "Ygritte"70 ]71 var valueIndex = 072 var grid = []7374 for ( var r = 0; r < rowCount; r++ ) {75 var row = {76 id: r,77 items: []78 }79 for ( var c = 0; c < columnCount; c++ ) {80 row.items.push({81 id: ( r + "-" + c ),82 value: valuePoints[ valueIndex ]83 })84 if ( ++valueIndex >= valuePoints.length ) {85 valueIndex = 086 }87 }88 grid.push(row)89 }9091 return OPTIMIZED ? Object.freeze(grid) : grid92 }9394 var grid = generateGrid(ROWS, COLS)95 var s = window.performance.now()96 console.profile('a')97 var vm = new Vue({9899 el: '#el',100101 data: {102 cols: COLS,103 rows: ROWS,104 optimized: OPTIMIZED,105 msg: 'loading...',106 grid: grid,107 dataPoints: grid.length * grid[0].items.length,108 filter: ''109 },110111 methods: {112 matches: function (item) {113 return item.value.toLowerCase().indexOf(this.filter.toLowerCase()) > -1114 },115 visibleCount: function () {116 var count = 0117 var grid = this.grid118 for (var i = 0, l = grid.length; i < l; i++) {119 var row = grid[i].items120 for (var j = 0, k = row.length; j < k; j++) {121 var item = row[j]122 var matched = !this.filter || this.matches(item)123 if (matched) {124 count++125 }126 }127 }128 return count129 },130 loadBase: function () {131 window.location.hash = ''132 },133 loadOptimized: function () {134 window.location.hash = '#optimized'135 },136 unmount: function () {137 console.profile('unmount')138 var s = window.performance.now()139 this.grid = []140 setTimeout(function () {141 vm.msg = 'umount took: ' + (window.performance.now() - s).toFixed(2) + 'ms'142 console.profileEnd('unmount')143 }, 0)144 },145 rerender: function () {146 var grid = generateGrid(1000, 10)147 var s = window.performance.now()148 console.profile('rerender')149 this.grid = grid150 setTimeout(function () {151 vm.msg = 'rerender took: ' + (window.performance.now() - s).toFixed(2) + 'ms'152 console.profileEnd('rerender')153 }, 0)154 }155 }156 })157 console.profileEnd('a')158 setTimeout(function () {159 vm.msg = 'initial render took: ' + (window.performance.now() - s).toFixed(2) + 'ms'160 }, 0)161 </script>162 </body>163</html>
Code quality findings 1
Security findings 2
Insecure HTTP link detected; use HTTPS for encrypted connections
<p>Reference: <a href="http://insin.github.io/ui-lib-samples/large-datasets/index.html">insin/ui-lib-samples/large-datasets</a></p>
Inline JavaScript detected; move to external files with CSP for security and maintainability
<script>