帮助我了解脚本性能缓慢的原因

Question

我为占位符重复常用脚本 (jPlaceholder.js)。

原因是读取速度慢（~150 000\1000ms）和大文件（5.8kb）； 下面的脚本具有更快的读取速度（~1 950 000\1000ms）并且更轻量级（1.8kb）。

问题是第一个运行 ~32 000\1000ms，但我的（下面的脚本）只运行 525\1000ms。

请帮助我了解原因，以及如何使其更快。

 $.fn.placehold = function (option) {
        var opt = {
          wrapperClass: 'jvPlacehold',
          wrapperPadding: 0,
          wrapperMargin: 0,
          wrapperTop: 0,
          wrapperLeft: 0,
          counterClass: 'jvPhCounter',
          labelClass: 'jvPhLabel',
          labelPadding: '0 5px',
          labelColor: '#a9a9a9',
          labelOpacitySpeed: 300,
          holderDataName: 'placeholder',
          focusSpeed: 300,
          blurSpeed: 300
        };
        opt = $.extend({}, opt, option);
        var $el = $(this),
          $wrapper = $('<div>', {
            class: opt.wrapperClass,
            group: 'search',
            css: {
              overflow: 'hidden',
              background: $el.css('background'),
              width: $el.outerWidth(),
              height: $el.outerHeight(),
              padding: opt.wrapperPadding,
              margin: opt.wrapperMargin,
              top: opt.wrapperTop,
              left: opt.wrapperLeft,
              float: opt.wrapperFloat
            }
          }),
          $counter = $('<span>', {
            class: opt.counterClass,
            css: {
              display: 'none'
            }
          }),
          $label = $('<span>', {
            class: opt.labelClass,
            text: $el.data(opt.holderDataName),
            css: {
              padding: opt.labelPadding,
              color: opt.labelColor
            }
          });
        $el.css({
          position: 'absolute',
          background: 'none',
          left: 0
        });
        $el.after($wrapper.append($counter, $label)).appendTo($wrapper);
        $label.css('top', Math.abs($el.innerHeight() - $label.height()) / 2);
        $el.keyup(function () {
          if ($counter.text($el.val().replace(/\s/gi, '❙')).outerWidth() >= parseInt($label.css('left'))) $label.stop().animate({
            opacity: 0
          }, opt.labelOpacitySpeeed);
          else $label.stop().animate({
            opacity: 1
          }, opt.labelOpacitySpeeed);
        }).focus(function () {
          $label.stop().animate({
            left: ($el.innerWidth() - $label.outerWidth())
          }, opt.focusSpeed);
        }).blur(function () {
          if (!$el.val().length) $label.stop().animate({
            left: 0
          }, opt.blurSpeed);
        });
      };
      $('#search').placehold();

div, span {
        position:relative;
      }
      input {
        padding:2px 5px;
        border:1px solid #a9a9a9;
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="text" id="search" data-placeholder="Search">

Answer 1

var tmp = new Date().getTime();

写在上面，然后使用：

console.log(new Date().getTime() - tmp);

在代码之间查看每个代码部分需要多少时间。