zoukankan      html  css  js  c++  java
  • IE8的 JS 引擎如此不堪?

    之前给客户做了个网站,其中有这么一个功能:

    文章内容中,有指向某个图片的链接,链接内容为图片名称(文字),点击之后在页面上弹出该图片显示,图片可以为png,jpg,gif等。

    于是,祭出了JQuery与JQuery的插件们。弹出图片,用了blockUI,简单易用。

    为了获取到图片的大小,借用了 http://www.planeart.cn/?p=1121  再谈javascript图片预加载技术 文中的代码

    HTML中,做了最基础的链接,加上一个名为“image” 的css,用来做JQuery的选择器

    <a href="image/pic01.jpg" class="image">图片1</a>
    

    Js中如下写:

    $(document).ready(function(){
    
         $('a.image').click(function(){
                var src = $(this).attr('src');
                // 之前在HTML定义了一个 #imgBox 的div作为容器
           //
      

    imgReady(src,function(){
          var w = this.width ;
          var h = this.height ;
      $('#imgBox').html('').append($(this));
      $.blockUI({
        message: $('#imgBox'),
        css: {
          top: '50%',
          left: '50%',
          textAlign: 'center',
          marginLeft: '-' + (w / 2) + 'px',
          marginTop: '-' + (h / 2) + 'px',
           (parseInt(w) + 30) + 'px',
          height: (parseInt(h) + 30) + 'px',
          background: 'none'
        }
    });

    $('.blockOverlay').attr('title', '单击关闭').click($.unblockUI);

    });

    看起来就这么简单,用chrom和ie9测试过后,没有问题就交给了客户。可没过几天,客户反应,这些链接在IE8中点一个1,2次再点就没反应了。仔细检查代码,没发现不妥,遂找来虚拟机开始测试。

    1、IE8,第一次点链接,图片很快显示,但点到几次之后,明显越来越慢,打开任务管理器,发现内存飙升很快,不会明显减少;

    一个采样数据:启动:4.5MB左右,打开网页:98MB左右

    点击链接弹出图片

    1次:160MB,关闭后减小到128MB

    2次:190MB,关闭后:159MB

    3次:220MB,关闭后:189MB

    后面就会一直这么上升,响应速度越来越慢..

    2、Chrome,点击图片n次,都是OK的,跟了下Chrome的内存占用情况,内存也会小幅增长,但是也会恢复到之前的水平;

    [我常用的是Chrome,为了测试,先用IE来编辑博客,要能够CHrome来测试。。]

    打开Chrome:居然开了4个进程(xxxx),没搞懂怎么回事,打开同一个网页,然后从 任务管理器中“转到进程”,占用123MB

    点击图片

    #1  显示图片:转到的进程没什么变化,另外一个进程从 24MB增加到了30MB,关闭图片:30MB的进程减小都25MB

    #2 显示图片:跟第一次一样,另外一个进程从24-》30MB,关闭图片,这次30MB的进程没变化

    后面经过N次点击,发生变化的进程内存从30-45MB之间波动,弹出图片也很流畅

    疑问:难道Chrome的JS引擎是单独一个进程?

    3、IE10,使用按键精灵点击若干遍之后,内存依然平稳

    IE10,打开之后,2个进程:一个13MB,一个6MB

    载入网页:启动了第三个进程?(不是很明白IE10的工作模式),内存108MB

    点击弹出图片

    #1 内存基本没变,增加了1MB,变成了109MB,其他两个基本没变化,关闭图片:基本没变化

    #2 变化依然不大

    点击了几十次之后,110MB左右,几乎无波动。

     ------------------------------------------------------------------------------

    注:测试所用的图片很小,分辨率为640*800,JPG

    -----------------------------------------------------------------------------

    难道IE8的JS引擎就是如此不堪?还是blockUI吃资源太严重?还是我用到的JS代码存在不合理? 还请园子里的朋友帮忙解答..

    (未完待续)

  • 相关阅读:
    UVa 1451 Average (斜率优化)
    POJ 1160 Post Office (四边形不等式优化DP)
    HDU 3507 Print Article (斜率DP)
    LightOJ 1427 Substring Frequency (II) (AC自动机)
    UVa 10245 The Closest Pair Problem (分治)
    POJ 1741 Tree (树分治)
    HDU 3487 Play with Chain (Splay)
    POJ 2828 Buy Tickets (线段树)
    HDU 3723 Delta Wave (高精度+calelan数)
    UVa 1625 Color Length (DP)
  • 原文地址:https://www.cnblogs.com/mobwiz/p/3174050.html
Copyright © 2011-2022 走看看