Post Reply 
 
Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
IE 8 = High CPU Utilization
30th June, 02:13 (This post was last modified: 30th June 02:14 by cosmicbdog.)
Post: #1
IE 8 = High CPU Utilization
We are experiencing some very high CPU utilization in the updatePosition function (for IE 8 ONLY). I figured it had to do with the position tag we were utilizing:

1
2
3
adjust: {
    screen: true // Keep the tooltip on-screen at all times
},



However, even when I remove this completely (the position), anytime we have a tooltip that scrolls off of the screen (IE 8 again), our CPU utilization spikes. Running the IE profiler, I see that the offset under updatePosition is taking most of the brunt...spiking the CPU up to 35%, with IEExplorer being the culprit etc. The spike actually happens when we mouse off of the tool tip.

No problems at all in Firefox. We are utilizing the latest trunk.
Find all posts by this user
Quote this message in a reply
30th June, 02:20
Post: #2
IE 8 = High CPU Utilization
acorcoran,

Could you try disabling the fade effect and see if it makes a difference? I have a feeling this is to do with IE's poor filter/VML support.

Craig Thompson
Web Developer / Designer
Craigsworks
http://www.craigsworks.com
Visit this user's website Find all posts by this user
Quote this message in a reply
30th June, 02:46 (This post was last modified: 30th June 02:58 by cosmicbdog.)
Post: #3
IE 8 = High CPU Utilization
I have set to false, however, I can try to remove the delay as well.

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
// tooltip overlay
TNBCardStation.Tooltips = function(){
    return {
        setup : function(){
            $('td[abbr]').each(function() {
                $(this).qtip({
                    content: {
                        text : $(this).attr('abbr'),
                        url : false
                    },
                    position: {
                             
                        corner: {
                            target: 'rightMiddle',
                            tooltip: 'topLeft'
                        }
                    },
                    style: {
                        tip: true,
                        border: { 
                            color: '#A20C1D'   
                        },
                        'background-color' : '#F9F9F9'
                    },
                    show : {
                        delay: '100',
                        effect : false
                    }
                })
            });
        },
 
        destroy : function(){
             $('td[abbr]').qtip("destroy");
        }
    };
}();


I added the following lines, thinking that turning off the hide fade would do it:
1
2
3
4
5
6
7
8
show : {
  delay: '100',
  effect : false
},
hide : {
  delay: '0',
  effect : false
}


But still get the big spikes on mouse out.
Find all posts by this user
Quote this message in a reply
30th June, 03:19
Post: #4
IE 8 = High CPU Utilization
Are you seeing any performance gains with this? Or the same CPU spike?

Craig Thompson
Web Developer / Designer
Craigsworks
http://www.craigsworks.com
Visit this user's website Find all posts by this user
Quote this message in a reply
30th June, 03:33
Post: #5
IE 8 = High CPU Utilization
Same spike.
Find all posts by this user
Quote this message in a reply
30th June, 22:41
Post: #6
IE 8 = High CPU Utilization
acorcoran,

Looking into this now, but not getting anywhere at the moment. is it just happening in IE8 or previous IE versions also?

Craig Thompson
Web Developer / Designer
Craigsworks
http://www.craigsworks.com
Visit this user's website Find all posts by this user
Quote this message in a reply
30th June, 22:44 (This post was last modified: 30th June 22:47 by cosmicbdog.)
Post: #7
IE 8 = High CPU Utilization
I haven't checked previous versions, as right now I only have IE 8 installed. I'll get back to you on this one. Not experiencing this in FF which is a good thing. But it is definitely noticeable spike (not a small 1-2% hop). I'm surprised you aren't able to see this, but again, I've only tested it on 2-3 IE 8 machines so maybe I'm missing something =)

Edit: Tried this in IE 7 this morning, same result...0-1% CPU utilization when i hover over the tooltip, however, once I move the focus from the tooltip and it leaves, jumps to 20-25% and stays there unless you refresh, etc.
Find all posts by this user
Quote this message in a reply
3rd July, 03:29
Post: #8
IE 8 = High CPU Utilization
Has anyone else been able to reproduce this? I'll be more than happy to put up a public page if need be.
Find all posts by this user
Quote this message in a reply
3rd July, 20:28
Post: #9
IE 8 = High CPU Utilization
acorcoran,

I'm looking into it atm but a bit swamped with my work load to test it thoroughly. I'll definitely get onto this as soon as I have time, but for now could you register a bug at the tracker? https://bugs.edge.launchpad.net/qtip

Craig Thompson
Web Developer / Designer
Craigsworks
http://www.craigsworks.com
Visit this user's website Find all posts by this user
Quote this message in a reply
3rd July, 21:55
Post: #10
IE 8 = High CPU Utilization
Absolutely.
Find all posts by this user
Quote this message in a reply
12th July, 00:02
Post: #11
IE 8 = High CPU Utilization
acorcoran,

I've just today overhauled the entire corner and positioning management functionality of the library. Could you update to the latest branch revision and see if this is having any effect on the CPU spike?

http://bazaar.launchpad.net/~craig.craig...runk/files

Craig Thompson
Web Developer / Designer
Craigsworks
http://www.craigsworks.com
Visit this user's website Find all posts by this user
Quote this message in a reply
14th July, 00:47
Post: #12
IE 8 = High CPU Utilization
Absolutely. We will run it through our wringer today.
Find all posts by this user
Quote this message in a reply
14th July, 01:37
Post: #13
IE 8 = High CPU Utilization
Right off the bat it destroyed (i.e, hung) FF (when trying multiple tooltips and IE =( I.e, wouldn't show the tooltip and until i force ended the process, it just hung. Noticed that you are renaming this to self, which is the default reference to the window.

Let me make a sample page to take out all of our other app code.

craig Wrote:acorcoran,

I've just today overhauled the entire corner and positioning management functionality of the library. Could you update to the latest branch revision and see if this is having any effect on the CPU spike?

http://bazaar.launchpad.net/~craig.craig...runk/files
Find all posts by this user
Quote this message in a reply
14th July, 02:18
Post: #14
IE 8 = High CPU Utilization
Ok, I made a barebones page from the new trunk and now experiencing issues with FF:

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
   <title>QTip Debugging</title>
   <meta http-equiv="content-type" 
      content="text/html;charset=utf-8" />
   <meta http-equiv="Content-Style-Type" content="text/css" />
      <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
      <script type="text/javascript" src="jquery.qtip.js"></script>
     
     <script type="text/javascript">  
      // tooltip overlay
      $(document).ready( function() {
        $('td').each(function() {
           $(this).qtip({
             content: {
               text : $(this).attr('abbr')
            }
          })
        }); 
      });
      </script>
   
   
</head>
 
<body>
   <table border="1">
      <tr>
          <td abbr="Principal cardholder name.">Primary Name</td>
          </td>
      </tr>
      <tr>
          <td abbr="Address line 1 of cardholder mailing address. If this account will be for business purposes, the company should be entered in this field so that company name will print on all mailed items." >
              Address 1
          </td>
         
      </tr>
      <tr>
          <td abbr="City name if the cardholder has a non-US address. Mailing address if a company name is listed in Line 1.">Address 2</td>
         
      </tr>
      <tr>
          <td abbr="City of cardholder mailing address.<br>Country name if the cardholder has a non-US address.">City</td>
          
      </tr>
      <tr>
          <td abbr="State abbreviation<br>GB for United Kingdom<br>GU for Guam<br>PI for Pacific Island Trust<br>PR for Puerto Rico<br>VI for Virgin Islands<br>FC for non-US addresses'">State</td>
          
      </tr>
      <tr>
          <td abbr="ZIP code of cardholder mailing address.">Zip</td>
         
      </tr>
      <tr>
          <td abbr="Secondary cardholder name.">Secondary Name</td>
          
      </tr>
      <tr>
          <td abbr="Primary cardholder maiden mother name (or other code word known only to the cardholder). Only displays first 8 characters and is the most secure form of identification over the telephone.">
              Maiden Name
          </td>
        
      </tr>
      <tr>
          <td abbr="Demand deposit(checking) account number; cardholder sharedraft account number.<br>This field is required for debit card accounts. The account listed is the destination for all transactions made on the card. This account must be at the credit union for debit cards.">DDA</td>
          
      </tr>
      <tr>
          <td abbr="Savings Account Number/Member Number. Form of identification used by TNB to verify cardholder identity.">Savings No</td>
          
      </tr>
  </table>
 
</body>
</html>


craig Wrote:acorcoran,

I've just today overhauled the entire corner and positioning management functionality of the library. Could you update to the latest branch revision and see if this is having any effect on the CPU spike?

http://bazaar.launchpad.net/~craig.craig...runk/files
Find all posts by this user
Quote this message in a reply
14th July, 04:20
Post: #15
IE 8 = High CPU Utilization
acorcoran,

Sorry about that, a regression was caused by me altering the updateContent method slightly. Upgrade to revision 98 and it should be fixed.

Craig Thompson
Web Developer / Designer
Craigsworks
http://www.craigsworks.com
Visit this user's website Find all posts by this user
Quote this message in a reply
14th July, 05:35
Post: #16
IE 8 = High CPU Utilization
Looks like this might have resolved it. It worked in my sandbox. Will let you know once implement it into our branch.

craig Wrote:acorcoran,

Sorry about that, a regression was caused by me altering the updateContent method slightly. Upgrade to revision 98 and it should be fixed.
Find all posts by this user
Quote this message in a reply
14th July, 06:11
Post: #17
IE 8 = High CPU Utilization
Alright, so far so good, however, I either made a typo somewhere or my position isn't working properly. I believe this used to dynamically position the tooltip if it is rendered off the screen...am I missing something easy? =)

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
   <title>QTip Debugging</title>
   <meta http-equiv="content-type" 
      content="text/html;charset=utf-8" />
   <meta http-equiv="Content-Style-Type" content="text/css" />
      <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
      <script type="text/javascript" src="jquery.qtip.js"></script>
     
         <script type="text/javascript">  
            // tooltip overlay
            $(document).ready( function() {
               $('td').each(function() {
                  $(this).qtip({
                     content: {
                        text : $(this).attr('abbr')
                     },
                show : {
                 delay: '100',
                effect : false
                },
                hide : {
                 delay: '0',
                effect : false
                },
                position: {
                 adjust: {
                     screen: true // Keep the tooltip on-screen at all times
                 },        
                 corner: {
                   target: 'rightMiddle',
                  tooltip: 'topLeft'
                 }
                }
                  })
               }); 
            });
         </script>
   
   
</head>
 
<body>
   <table border="1" width="100%">
      <tr>
          <td abbr="Principal cardholder name.">Primary Name</td>
          </td>
      </tr>
      <tr>
          <td abbr="Address line 1 of cardholder mailing address. If this account will be for business purposes, the company should be entered in this field so that company name will print on all mailed items." >
              Address 1
          </td>
         
      </tr>
      <tr>
          <td abbr="City name if the cardholder has a non-US address. Mailing address if a company name is listed in Line 1.">Address 2</td>
         
      </tr>
      <tr>
          <td abbr="City of cardholder mailing address.<br>Country name if the cardholder has a non-US address.">City</td>
          
      </tr>
      <tr>
          <td abbr="State abbreviation<br>GB for United Kingdom<br>GU for Guam<br>PI for Pacific Island Trust<br>PR for Puerto Rico<br>VI for Virgin Islands<br>FC for non-US addresses'">State</td>
          
      </tr>
      <tr>
          <td abbr="ZIP code of cardholder mailing address.">Zip</td>
         
      </tr>
      <tr>
          <td abbr="Secondary cardholder name.">Secondary Name</td>
          
      </tr>
      <tr>
          <td abbr="Primary cardholder maiden mother name (or other code word known only to the cardholder). Only displays first 8 characters and is the most secure form of identification over the telephone.">
              Maiden Name
          </td>
        
      </tr>
      <tr>
          <td abbr="Demand deposit(checking) account number; cardholder sharedraft account number.<br>This field is required for debit card accounts. The account listed is the destination for all transactions made on the card. This account must be at the credit union for debit cards.">DDA</td>
          
      </tr>
      <tr>
          <td abbr="Savings Account Number/Member Number. Form of identification used by TNB to verify cardholder identity.">Savings No</td>
          
      </tr>
  </table>
 
</body>
</html>




craig Wrote:acorcoran,

Sorry about that, a regression was caused by me altering the updateContent method slightly. Upgrade to revision 98 and it should be fixed.
Find all posts by this user
Quote this message in a reply
14th July, 06:19 (This post was last modified: 14th July 06:21 by cosmicbdog.)
Post: #18
IE 8 = High CPU Utilization
Looks like something else is missing as well now:

1
tip: true,


when combined with the following:

1
2
3
adjust: {
                     screen: true // Keep the tooltip on-screen at all times
                 },


Works in FF (as in not crashing and showing the tip, but not dynamically positioning it as stated in the previous post), but in IE 8 I get the following:

'0' is null or not an object
Line: 1472
Char: 10

Looks like it only barfs when it is in combo with the position adjust =/. I must be your worst tester...sorry.

craig Wrote:acorcoran,

Sorry about that, a regression was caused by me altering the updateContent method slightly. Upgrade to revision 98 and it should be fixed.
Find all posts by this user
Quote this message in a reply
Post Reply