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

Question

I repeat usual script for placeholder (jPlaceholder.js).

The reason is slow reading speed(~150 000\\1000ms) and big file size (5.8kb); The script below has a much faster reading speed (~1 950 000\\1000ms) and is more lightweight(1.8kb).

The problem is that the first one runs ~32 000\\1000ms, but my(script below) 525\\1000ms only.

Please help me to understand why, and how to make it faster.

  $.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();

Write above, then use:

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

between codes to see how much time each part of code takes.