-
Notifications
You must be signed in to change notification settings - Fork 1
/
example.html
64 lines (59 loc) · 2.72 KB
/
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!doctype HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Analysis Plugin Example: Bad Practices</title>
<script src="js/jquery-1.4.4.js" type="text/javascript"></script>
<!--<script src="http://code.jquery.com/jquery-1.5b1.js" type="text/javascript"></script>-->
<script src="jquery.analyze.js" type="text/javascript"></script>
<link href="report.css" rel="stylesheet" type="text/css">
</head>
<body>
<a href="http://github.com/mennovanslooten/jqanalyze" id="forkme"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://assets1.github.com/img/e6bef7a091f5f3138b8cd40bc3e114258dd68ddf?repo=&url=http%3A%2F%2Fs3.amazonaws.com%2Fgithub%2Fribbons%2Fforkme_right_red_aa0000.png&path=" alt="Fork me on GitHub"></a>
<!--
BAD PRACTICE: Various inefficient selectors
EXPLANATION: Some CSS selectors take more time than you'd expect.
-->
<div id="badselectors">
<div id="nestedid"></div>
<div class="nestedclass"></div>
</div>
<script type="text/javascript">
$('#badselectors #nestedid'); // Use $('#nestedid')
$('div#badselectors'); // Use $('#badselectors')
$('#badselectors .nestedclass'); // Use $('#badselectors').find('.nestedclass')
$('#badselectors > div'); // Use $('#badselectors').child('div')
$('#badselectors div:first');
$('.nestedclass'); // Used again
$('.nestedclass'); // Used again
$('.nestedclass'); // Used again
$('.nestedclass', $('#badselectors'));
</script>
<!--
BAD PRACTICE: Include a form element called "submit".
EXPLANATION: This breaks submit event handlers. See http://api.jquery.com/submit/
-->
<form method="GET" action="http://www.google.com/search">
<input type="hidden" id="submit" value="I am the culprit">
</form>
<!--
BAD PRACTICE: Attach many event handlers to a number of siblings
EXPLANATION: This can be optimized with event delegation
-->
<p>Hover over and click these list items to see the event handler performance in the panel.</p>
<ul id="delegateme">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<script type="text/javascript">
$('#delegateme li:first').bind('mouseenter', function(e) {
var d = new Date().valueOf();
while(new Date().valueOf() - d < 1000) { }
});
$('#delegateme li').bind('click', function(e) {
console.log($(this).text(), 'clicked!');
});
</script>
</body>
</html>