জাভাস্ক্রিপ্টে অবজেক্টস / অ্যারেগুলির কার্য সম্পাদন কী? (বিশেষত গুগল ভি 8 এর জন্য)


105

জাভাস্ক্রিপ্টে অ্যারে এবং অবজেক্টগুলির সাথে সম্পর্কিত পারফরম্যান্স (বিশেষত গুগল ভি 8) নথিভুক্ত করা খুব আকর্ষণীয় হবে। আমি ইন্টারনেটে কোথাও এই বিষয়ে কোনও বিস্তৃত নিবন্ধ পাই না।

আমি বুঝতে পারি যে কিছু অবজেক্টগুলি তাদের অন্তর্নিহিত ডেটা কাঠামো হিসাবে ক্লাস ব্যবহার করে। যদি প্রচুর সম্পত্তি থাকে তবে এটি কখনও কখনও হ্যাশ টেবিল হিসাবে বিবেচিত হয়?

আমি আরও বুঝতে পারি যে অ্যারেগুলিকে মাঝে মাঝে সি ++ অ্যারের মতো আচরণ করা হয় (যেমন দ্রুত র্যান্ডম ইনডেক্সিং, ধীর মোছা এবং পুনরায় আকার দেওয়া)। এবং, অন্যান্য সময়ে, তাদেরকে আরও অবজেক্টের (চিকিত্সা, দ্রুত সারণী, দ্রুত সন্নিবেশ / অপসারণ, আরও মেমরি) এর মতো আচরণ করা হয়। এবং, কখনও কখনও এগুলি লিঙ্কযুক্ত তালিকাগুলি (যেমন ধীর র্যান্ডম ইনডেক্সিং, দ্রুত অপসারণ / শুরুতে / শেষে সন্নিবেশ) হিসাবে সংরক্ষণ করা হয়

জাভাস্ক্রিপ্টে অ্যারে / অবজেক্ট পুনরুদ্ধার এবং ম্যানিপুলেশনের সঠিক পারফরম্যান্সটি কী? (বিশেষত গুগল ভি 8 এর জন্য)

আরও সুনির্দিষ্টভাবে বলা যায়, এটির কার্য সম্পাদন প্রভাব কী:

  • একটি অবজেক্টে একটি সম্পত্তি যুক্ত করা
  • একটি অবজেক্ট থেকে একটি সম্পত্তি সরানো
  • কোনও অবজেক্টে একটি সম্পত্তি ইনডেক্স করা
  • একটি অ্যারেতে একটি আইটেম যুক্ত করা হচ্ছে
  • একটি অ্যারে থেকে একটি আইটেম সরানো হচ্ছে
  • একটি অ্যারেতে একটি আইটেম সূচীকরণ
  • অ্যারে.পপ () কল করা হচ্ছে
  • অ্যারে.পুষকে কল করা হচ্ছে ()
  • কলিং অ্যারে.শিফ্ট ()
  • অ্যারে.আনশীফ্ট () কল করা হচ্ছে
  • কল করা অ্যারে.স্লাইস ()

আরও বিশদের জন্য যে কোনও নিবন্ধ বা লিঙ্কগুলি প্রশংসা করা হবে। :)

সম্পাদনা: আমি সত্যিই ভাবছি কীভাবে জাভাস্ক্রিপ্ট অ্যারে এবং অবজেক্টগুলি হুডের নীচে কাজ করে। এছাড়াও, ভি 8 ইঞ্জিন কোন প্রসঙ্গে অন্য ডেটা স্ট্রাকচারটিতে "স্যুইচ-ওভার" করতে "জানে"?

উদাহরণস্বরূপ, ধরুন আমি এর সাথে একটি অ্যারে তৈরি করেছি ...

var arr = [];
arr[10000000] = 20;
arr.push(21);

আসলে এখানে কি চলছে?

বা ... এই কি ... ???

var arr = [];
//Add lots of items
for(var i = 0; i < 1000000; i++)
    arr[i] = Math.random();
//Now I use it like a queue...
for(var i = 0; i < arr.length; i++)
{
    var item = arr[i].shift();
    //Do something with item...
}

প্রচলিত অ্যারেগুলির জন্য, কর্মক্ষমতাটি ভয়ানক হবে; যদিও, যদি কোনও লিঙ্কলিস্ট ব্যবহার করা হত ... তবে খুব খারাপ নয়।


2
পরিদর্শন jsperf.com , এবং পরীক্ষার বিষয় তৈরি করুন।
রব ডব্লু

2
@ রবডব্লিউ এখানে সাধারণ খেলাগুলির চেয়ে আরও বেশি খেলতে পারে যার জন্য জেআইটি সংকলকরা কীভাবে কাজ করেন এবং ডেটা দিয়ে কী করা হচ্ছে তার জ্ঞান প্রয়োজন account আমি যদি কিছুটা সময় খুঁজে পাই তবে আমি একটি উত্তর যুক্ত করব, তবে আশা করি অন্য কারও কাছে নিতম্বের কৌতূহলে toোকার সময় আসবে। এছাড়াও আমি এই লিঙ্কটি এখানেই রেখে দিতে চাই
ছদ্মবেশী

আমি যে জেআইটি জিনিসগুলির সাথে কথা বলছি তা হ'ল কোনও বস্তুর "আকৃতি", বা সংজ্ঞায়িত উপাদানগুলির মধ্যে অপরিবর্তিত মান সহ অ্যারে, পাশাপাশি টাইপ-বিশেষজ্ঞীকরণ বৈশিষ্ট্যগুলির সাথে আরও সম্প্রতি পরীক্ষিত ... অ্যারে-নির্দিষ্ট পদ্ধতিগুলি ব্যবহারের উপর নির্ভর করতে পারে পাশাপাশি যদি প্রোটোটাইপটি চালিত হয় বা না হয়। অন্য তথ্য টাইপ এএফআইকে স্যুইচ করতে "জানার" মতো জিনিস নেই।
ছদ্মবেশে

1
গুগল প্রতিনিধিরা আলোচনা করছেন, কীভাবে বিভিন্ন অপ্টিমাইজার এবং অভ্যন্তরীণ সিস্টেম কাজ করে। এবং তাদের জন্য কীভাবে অপ্টিমাইজ করা যায়। (গেমসের জন্য!) youtube.com/watch?v=XAqIpGU8ZZk
পিকোক্রিটর

উত্তর:


279

এই সমস্যাগুলি (এবং আরও বেশি) ( সংরক্ষণাগারযুক্ত অনুলিপি ) অন্বেষণ করার জন্য আমি একটি পরীক্ষার স্যুট তৈরি করেছি ।

এবং সেই অর্থে, আপনি এই 50+ পরীক্ষার কেস পরীক্ষকটিতে পারফরম্যান্সের সমস্যাগুলি দেখতে পাবেন (এটি দীর্ঘ সময় নিবে)।

এর নাম অনুসারে, এটি ডোম কাঠামোর স্থানীয় লিঙ্কযুক্ত তালিকা প্রকৃতির ব্যবহারের অন্বেষণ করে।

(বর্তমানে নিচে, পুনর্নির্মাণের কাজ চলছে) এ সম্পর্কে আমার ব্লগে আরও বিশদ

সংক্ষিপ্তসার অনুসরণ করা হয়

  • ভি 8 অ্যারে দ্রুত, খুব দ্রুত
  • অ্যারে পুশ / পপ / শিফট যেকোন বস্তুর সমতুল্য থেকে প্রায় 20x + দ্রুত।
  • আশ্চর্যজনকভাবে Array.shift()অ্যারে পপের চেয়ে দ্রুত ~ প্রায় 6x ধীর, তবে কোনও অবজেক্ট অ্যাট্রিবিউট মুছার চেয়ে প্রায় 100x দ্রুত।
  • Amusingly, Array.push( data );দ্রুত চেয়ে Array[nextIndex] = data10 (সংশোধন অ্যারে) উপর বার প্রায় 20 (গতিশীল অ্যারে) দ্বারা।
  • Array.unshift(data) প্রত্যাশার মতো ধীর এবং ধীরে ধীরে একটি নতুন সম্পত্তি যুক্ত হওয়ার চেয়ে কম 5x কম।
  • মানটিকে নলিং করা প্রায়শই 4x ++ আরও দ্রুত অ্যারেতে array[index] = nullএটি delete array[index]( অপরিজ্ঞাত ) মুছে ফেলার চেয়ে দ্রুত।
  • আশ্চর্যজনকভাবে কোনও অবজেক্টের মান হ্রাস করা কেবল গুণটি মুছার obj[attr] = nullচেয়ে প্রায় 2x ধীরdelete obj[attr]
  • আশ্চর্যজনকভাবে, মিড অ্যারে Array.splice(index,0,data)ধীর, খুব ধীর।
  • আশ্চর্যজনকভাবে, Array.splice(index,1,data)অপ্টিমাইজ করা হয়েছে (দৈর্ঘ্যের কোনও পরিবর্তন নেই) এবং কেবল বিচ্ছিন্নতার চেয়ে 100x দ্রুতArray.splice(index,0,data)
  • আশ্চর্যজনকভাবে, ডিভলিংকডলিস্ট dll.splice(index,1)অপসারণ ব্যতীত (যেখানে এটি পরীক্ষার ব্যবস্থাটি ভেঙেছে) বাদে সমস্ত সেক্টরে একটি অ্যারের থেকে নিকৃষ্ট ।
  • সবচেয়ে বড় চমক এটা সব [যেমন jjrv নির্দিষ্ট], V8 অ্যারের লিখেছেন সামান্য যতো তাড়াতাড়ি V8 সার্চ হয় = হে

দ্রষ্টব্য: এই মেট্রিকগুলি কেবলমাত্র বড় অ্যারে / অবজেক্টগুলিতে প্রযোজ্য যা ভি 8 "সম্পূর্ণরূপে অপ্টিমাইজ করে না"। অ্যারে / অবজেক্ট সাইজের জন্য স্বতন্ত্র আকারের (24?) কমের জন্য খুব বিচ্ছিন্ন অপ্টিমাইজড পারফরম্যান্সের কেস থাকতে পারে। বেশ কয়েকটি গুগল আইও ভিডিও জুড়ে আরও বিশদ দেখা যাবে।

দ্রষ্টব্য 2: এই দুর্দান্ত পারফরম্যান্স ফলাফলগুলি ব্রাউজারগুলিতে ভাগ করা হয় না, বিশেষত *cough*আইই। এছাড়াও পরীক্ষাটি বিশাল, সুতরাং আমি এখনও ফলাফলগুলি পুরোপুরি বিশ্লেষণ ও মূল্যায়ন করতে পারি না: দয়া করে এটিকে সম্পাদনা করুন =)

আপডেট নোট (ডিসেম্বর ২০১২): গুগলের প্রতিনিধিদের ক্রোমের অভ্যন্তরীণ কার্যকারিতা বর্ণনা করে ইউটিউবে ভিডিও রয়েছে (যেমন এটি যখন কোনও লিঙ্কলিস্ট অ্যারে থেকে স্থির অ্যারেতে স্যুইচ করা হয় ইত্যাদি), এবং কীভাবে সেগুলি অনুকূল করা যায়। জিডিসি 2012 দেখুন : আরও জন্য কনসোল থেকে ক্রোমে


2
এর মধ্যে কয়েকটি ফলাফল খুব অদ্ভুত দেখাচ্ছে। উদাহরণস্বরূপ, ক্রোম অ্যারে লেখাগুলি পড়ার চেয়ে প্রায় 10x দ্রুত, ফায়ারফক্সে এটি বিপরীত। আপনি কি নিশ্চিত যে ব্রাউজারটি জেআইটি কিছু ক্ষেত্রে আপনার পুরো পরীক্ষাটি অপ্টিমাইজ করছে না?
jjrv

1
@jjrv ভাল গোশ = হে আপনি ঠিকই বলেছেন ... আমি প্রতিটি লেখার ক্ষেত্রে জেআইটি প্রতিরোধের জন্য ক্রমবর্ধমান অনন্য হতে আপডেট করেছি ... এবং সত্যই, যদি না জেআইটি অপটিমাইজেশনটি ভাল না হয় (যা আমার বিশ্বাস করা শক্ত হয় না), এটি কেবলমাত্র দুর্বলতর অনুকূলিত পাঠের ক্ষেত্রে হতে পারে, বা প্রচুরভাবে অপ্টিমাইজড
লেখাগুলি

2
অ্যারেগুলিতে ভিডিও আলোচনায় ঠিক পয়েন্টটি যুক্ত করতে চেয়েছিলেন: youtube.com/…
বাদুঙ্ক

1
জেসফিউর সাইটটির আর অস্তিত্ব নেই :(
JustGoscha

1
@ JustGoscha ঠিক আছে, তথ্যের জন্য THX: আমি গুগল ক্যাশে থেকে এটি পুনরায় তৈরি করে এটি ব্যাক আপ ঠিক করেছি।
পিকোক্রিটর

5

একটি প্রাথমিক স্তরে যা জাভাস্ক্রিপ্টের রাজ্যের মধ্যে থাকে, অবজেক্টের বৈশিষ্ট্যগুলি আরও অনেক জটিল সত্তা। আপনি পৃথকীকরণযোগ্য গণ্যতা, লেখার যোগ্যতা এবং কনফিগারেশনের সাথে সেটার / গেটার সহ বৈশিষ্ট্য তৈরি করতে পারেন। অ্যারেতে থাকা কোনও আইটেমটি এভাবে কাস্টমাইজ করা যায় না: এটি হয় হয় বা এটি নেই। অন্তর্নিহিত ইঞ্জিন স্তরে এটি কাঠামোর প্রতিনিধিত্ব করে এমন মেমরির আয়োজনের ক্ষেত্রে আরও অনেক বেশি অনুকূলকরণের অনুমতি দেয়।

কোনও অবজেক্ট (অভিধান) থেকে একটি অ্যারে সনাক্ত করার শর্তে, জেএস ইঞ্জিনগুলি সর্বদা দুজনের মধ্যে স্পষ্ট লাইন তৈরি করে। সে কারণেই একটি অর্ধ-জাল অ্যারে-জাতীয় বস্তু যা একটির মতো আচরণ করে তবে অন্যান্য কার্যকারিতা মঞ্জুরি দেয় এমন পদ্ধতিতে প্রচুর নিবন্ধ রয়েছে। এই বিভাজনটি থাকার পরেও যে কারণে জেএস ইঞ্জিনগুলি সেগুলি দুটি আলাদাভাবে সঞ্চয় করে।

বৈশিষ্ট্যগুলি একটি অ্যারে অবজেক্টে সংরক্ষণ করা যেতে পারে তবে এটি জাভাস্ক্রিপ্ট কীভাবে সবকিছুকে একটি বস্তু তৈরিতে জোর দেয় তা সহজভাবে দেখায়। অ্যারেতে সূচকযুক্ত মানগুলি যে অ্যারে অবজেক্টে অন্তর্নিহিত অ্যারে ডেটা উপস্থাপন করে সেট করার সিদ্ধান্ত নিয়েছে এমন কোনও বৈশিষ্ট্য থেকে আলাদাভাবে সংরক্ষণ করা হয়।

যখনই আপনি কোনও বৈধ অ্যারে অবজেক্ট ব্যবহার করছেন এবং সেই অ্যারে চালিত করার মানক পদ্ধতির একটি ব্যবহার করছেন আপনি অন্তর্নিহিত অ্যারে ডেটা হিট করতে যাচ্ছেন। বিশেষত ভি 8-তে, এগুলি মূলত সি ++ অ্যারে হিসাবে সমান তাই এই বিধিগুলি প্রযোজ্য হবে। যদি কোনও কারণে আপনি এমন একটি অ্যারের সাথে কাজ করছেন যা ইঞ্জিন আত্মবিশ্বাসের সাথে নির্ধারণ করতে সক্ষম হয় না যে একটি অ্যারে হয়, তবে আপনি অনেক শক্তিশালী স্থানে রয়েছেন। ভি 8 এর সাম্প্রতিক সংস্করণগুলির সাথে কাজ করার মতো আরও অনেক জায়গা রয়েছে। উদাহরণস্বরূপ, অ্যারে.প্রোটোটাইপযুক্ত প্রোটোটাইপ হিসাবে এমন একটি শ্রেণী তৈরি করা এবং এখনও বিভিন্ন নেটিভ অ্যারে ম্যানিপুলেশন পদ্ধতিতে দক্ষ অ্যাক্সেস অর্জন সম্ভব। তবে এটি সাম্প্রতিক পরিবর্তন।

অ্যারে ম্যানিপুলেশনের সাম্প্রতিক পরিবর্তনের নির্দিষ্ট লিঙ্কগুলি এখানে কার্যকর হতে পারে:

কিছুটা অতিরিক্ত হিসাবে, এখানে অ্যারে পপ এবং অ্যারে পুশ সরাসরি ভি 8 এর উত্স থেকে, উভয়ই জেএসে প্রয়োগ করা হয়েছে:

function ArrayPop() {
  if (IS_NULL_OR_UNDEFINED(this) && !IS_UNDETECTABLE(this)) {
    throw MakeTypeError("called_on_null_or_undefined",
                        ["Array.prototype.pop"]);
  }

  var n = TO_UINT32(this.length);
  if (n == 0) {
    this.length = n;
    return;
  }
  n--;
  var value = this[n];
  this.length = n;
  delete this[n];
  return value;
}


function ArrayPush() {
  if (IS_NULL_OR_UNDEFINED(this) && !IS_UNDETECTABLE(this)) {
    throw MakeTypeError("called_on_null_or_undefined",
                        ["Array.prototype.push"]);
  }

  var n = TO_UINT32(this.length);
  var m = %_ArgumentsLength();
  for (var i = 0; i < m; i++) {
    this[i+n] = %_Arguments(i);
  }
  this.length = n + m;
  return this.length;
}

1

ক্রমবর্ধমান অ্যারেগুলি সম্পর্কে বাস্তবায়নগুলি কীভাবে আচরণ করে এমন প্রশ্নের তদন্তের সাথে আমি বিদ্যমান জবাবগুলির পরিপূরক চাই: তারা যদি এগুলি "স্বাভাবিক" উপায়টি বাস্তবায়িত করে, তবে বিরল, ছেদযুক্ত ধীর ধাক্কা দিয়ে অনেকে দ্রুত প্যাশ দেখতে পাবে যার বাস্তবায়নের অনুলিপিগুলি এক বাফার থেকে বড়টিতে অ্যারের অভ্যন্তরীণ উপস্থাপনা।

আপনি এই প্রভাবটি খুব সুন্দরভাবে দেখতে পারেন, এটি ক্রোম থেকে:

16: 4ms
40: 8ms 2.5
76: 20ms 1.9
130: 31ms 1.7105263157894737
211: 14ms 1.623076923076923
332: 55ms 1.5734597156398105
514: 44ms 1.5481927710843373
787: 61ms 1.5311284046692606
1196: 138ms 1.5196950444726811
1810: 139ms 1.5133779264214047
2731: 299ms 1.5088397790055248
4112: 341ms 1.5056755767118273
6184: 681ms 1.5038910505836576
9292: 1324ms 1.5025873221216042

যদিও প্রতিটি ধাক্কা প্রোফাইল করা হয় তবে আউটপুটে কেবলমাত্র একটি নির্দিষ্ট প্রান্তিকের উপরে সময় নেয় contains প্রতিটি পরীক্ষার জন্য আমি থ্রেসোল্ডটি কাস্টমাইজ করেছিলাম যাতে সমস্ত ধাক্কা দ্রুত ধাক্কা দিয়ে উপস্থাপন করে exc

সুতরাং প্রথম সংখ্যাটি বোঝায় যে কোন উপাদানটি সন্নিবেশ করা হয়েছে (প্রথম লাইনটি 17 তম উপাদানটির জন্য), দ্বিতীয়টি এটি কতক্ষণ লেগেছিল (অনেক অ্যারেগুলির জন্য মাপদণ্ড সমান্তরালভাবে করা হয়), এবং শেষ মানটি বিভাগের হয় প্রাক্তন লাইনের একটিতে প্রথম সংখ্যা।

2 মিমি কম প্রয়োগের সময় রয়েছে এমন সমস্ত লাইন Chrome এর জন্য বাদ দেওয়া হয়েছে।

আপনি দেখতে পাচ্ছেন যে ক্রোম 1.5 টির মতো অ্যারে আকার বাড়ায়, কিছু ছোট অ্যারে হিসাবে অ্যাকাউন্টে অফসেট দেয়।

ফায়ারফক্সের জন্য এটি দু'জনের শক্তি:

126: 284ms
254: 65ms 2.015873015873016
510: 28ms 2.0078740157480315
1022: 58ms 2.003921568627451
2046: 89ms 2.0019569471624266
4094: 191ms 2.0009775171065494
8190: 364ms 2.0004885197850513

আমাকে ফায়ারফক্সে প্রান্তিকভাবে কিছুটা উপরে রাখতে হয়েছিল, এজন্যই আমরা # 126 এ শুরু করি।

আইই সহ, আমরা একটি মিশ্রণ পাই:

256: 11ms 256
512: 26ms 2
1024: 77ms 2
1708: 113ms 1.66796875
2848: 154ms 1.6674473067915691
4748: 423ms 1.6671348314606742
7916: 944ms 1.6672283066554338

এটি প্রথমে দুটি শক্তি এবং তারপরে এটি পাঁচ তৃতীয়াংশের ক্ষমতায় চলে আসে।

সুতরাং সমস্ত সাধারণ বাস্তবায়ন অ্যারেগুলির জন্য "সাধারণ" উপায় ব্যবহার করে ( উদাহরণস্বরূপ দড়ি দিয়ে পাগল হওয়ার পরিবর্তে )।

এখানে মাপদণ্ডের কোড এবং এটির মধ্যে থাকা মূর্খতা

var arrayCount = 10000;

var dynamicArrays = [];

for(var j=0;j<arrayCount;j++)
    dynamicArrays[j] = [];

var lastLongI = 1;

for(var i=0;i<10000;i++)
{
    var before = Date.now();
    for(var j=0;j<arrayCount;j++)
        dynamicArrays[j][i] = i;
    var span = Date.now() - before;
    if (span > 10)
    {
      console.log(i + ": " + span + "ms" + " " + (i / lastLongI));
      lastLongI = i;
    }
}

0

0.10 নোড.জেএস এর অধীনে চলার সময় (ভি 8 তে নির্মিত) আমি সিপিইউ ব্যবহারটি দেখছিলাম যা কাজের চাপের জন্য অত্যধিক বলে মনে হয়েছিল। আমি একটি ক্রিয়াকলাপের একটি সমস্যা আবিষ্কার করেছি যা একটি অ্যারেতে স্ট্রিংয়ের অস্তিত্বের জন্য যাচাই করছিল। তাই আমি কিছু পরীক্ষা চালিয়েছি।

  • 90,822 হোস্ট লোড করা হয়েছে
  • লোডিং কনফিগারেশনটি 0.087 সেকেন্ড সময় নিয়েছে (অ্যারে)
  • লোডিং কনফিগারেশন 0.152 সেকেন্ড সময় নিয়েছে (অবজেক্ট)

অ্যারেতে 91k এন্ট্রিগুলি লোড করা (বৈধতা ও ধাক্কা সহ) অবজেক্ট [কী] = মান নির্ধারণের চেয়ে দ্রুত।

পরবর্তী পরীক্ষায়, আমি তালিকার প্রতিটি হোস্টনাম এক বার সন্ধান করেছি (91k পুনরাবৃত্তি, দেখার জন্য গড় গড়):

  • অনুসন্ধানের কনফিগারেশনটি ৮.5.৫.5 সেকেন্ড সময় নিয়েছে (অ্যারে)
  • অনুসন্ধানের কনফিগারটি 0.21 সেকেন্ড সময় নিয়েছে (অবজেক্ট)

এখানে অ্যাপ্লিকেশনটি হরাকা (একটি এসএমটিপি সার্ভার) এবং এটি একবার স্টার্টআপে (এবং পরিবর্তনের পরে) হোস্ট_লিস্টটি লোড করে এবং পরবর্তী সময়ে ক্রিয়াকলাপের সময় কয়েক মিলিয়ন বার এই চেহারাটি সম্পাদন করে। একটি অবজেক্টে স্যুইচ করা ছিল বিশাল পারফরম্যান্সের জয়।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.