আমরা দেখে খুব খুশি যে কিছু সাধারণ DOM ক্রিয়াকলাপ সবেমাত্র গতিতে বেড়েছে। পরিবর্তনগুলি ওয়েবকিট স্তরে ছিল, সাফারি (জাভাস্ক্রিপ্টকোর) এবং ক্রোম (ভি 8) উভয়ের কর্মক্ষমতা বৃদ্ধি করে৷
ক্রোম ইঞ্জিনিয়ার কেনতারো হারা ওয়েবকিটের মধ্যে সাতটি কোড অপ্টিমাইজেশন করেছেন; নীচের ফলাফলগুলি রয়েছে, যা দেখায় যে জাভাস্ক্রিপ্ট DOM অ্যাক্সেস কত দ্রুত হয়েছে:
DOM কর্মক্ষমতা সারাংশ বৃদ্ধি করে
-
div.innerHTMLএবংdiv.outerHTMLকর্মক্ষমতা 2.4x দ্বারা উন্নত হয়েছে (V8, JavaScriptCore) - 4x (V8/Mac) দ্বারা Chromium/Mac-এ
div.innerTextএবংdiv.outerTextপারফরম্যান্স - CSS সম্পত্তি অ্যাক্সেস 35% দ্বারা উন্নত হয়েছে (জাভাস্ক্রিপ্টকোর)
-
div.classList,div.datasetএবংdiv.attributesপারফ 10.9x (V8) পর্যন্ত উন্নত হয়েছে -
div.firstElementChild,lastElementChild,previousElementSiblingএবংnextElementSiblingপারফ 7.1x (V8) দ্বারা উন্নত হয়েছে - V8 DOM অ্যাট্রিবিউট অ্যাক্সেস 4 ~ 5% (V8) দ্বারা উন্নত হয়েছে
নীচে, কেনতারো হারা তার তৈরি কিছু প্যাচের বিশদ বিবরণ দেয়। লিঙ্কগুলি টেস্ট কেস সহ WebKit বাগগুলির জন্য, তাই আপনি নিজের জন্য পরীক্ষা করে দেখতে পারেন৷ WebKit r109829 এবং r111133 এর মধ্যে পরিবর্তনগুলি করা হয়েছিল: Chrome 17 এগুলিকে অন্তর্ভুক্ত করে না; Chrome 19 করে।
div.innerHTML এবং div.outerHTML এর কার্যক্ষমতা 2.4x দ্বারা উন্নত করুন (V8, JavaScriptCore)
ওয়েবকিটে পূর্ববর্তী আচরণ:
- প্রতিটি ট্যাগের জন্য একটি স্ট্রিং তৈরি করুন।
- DOM ট্রি পার্স করে
Vector<string>এ একটি তৈরি করা স্ট্রিং যুক্ত করুন। - পার্সিংয়ের পরে, একটি স্ট্রিং বরাদ্দ করুন যার আকার
Vector<string>এর সমস্ত স্ট্রিংয়ের সমষ্টি। -
Vector<string>এ সমস্ত স্ট্রিং সংযুক্ত করুন এবং এটিকেinnerHTMLহিসাবে ফেরত দিন।
ওয়েবকিটে নতুন আচরণ: 1. একটি স্ট্রিং বরাদ্দ করুন, এস বলুন। 1. প্রতিটি ট্যাগের জন্য একটি স্ট্রিংকে S-তে সংযুক্ত করুন, ক্রমবর্ধমানভাবে DOM ট্রি পার্স করুন। 1. innerHTML হিসাবে S ফেরত দিন।
সংক্ষেপে, অনেকগুলি স্ট্রিং তৈরি করার পরিবর্তে এবং তারপরে সেগুলিকে সংযুক্ত করার পরিবর্তে, প্যাচটি একটি স্ট্রিং তৈরি করে এবং তারপরে ক্রমবর্ধমানভাবে স্ট্রিংগুলি যুক্ত করে।
Chromium/Mac-এ div.innerText এবং div.outerText এর কর্মক্ষমতা 4x (V8/Mac) উন্নত করুন
প্যাচটি innerText তৈরির জন্য প্রাথমিক বাফার আকার পরিবর্তন করেছে। প্রাথমিক বাফারের আকার 2^16 থেকে 2^15 এ পরিবর্তন করা 4x দ্বারা Chromium/Mac কর্মক্ষমতা উন্নত করেছে। এই পার্থক্য অন্তর্নিহিত malloc সিস্টেমের উপর নির্ভর করে।
JavaScriptCore-এ CSS সম্পত্তি অ্যাক্সেসের কার্যক্ষমতা 35% উন্নত করুন
একটি CSS প্রপার্টি স্ট্রিং (যেমন .fontWeight , .backgroundColor ) ওয়েবকিটে একটি পূর্ণসংখ্যা আইডিতে রূপান্তরিত হয়। এই রূপান্তর ভারী. প্যাচটি একটি মানচিত্রে রূপান্তরের ফলাফল ক্যাশ করে (যেমন একটি সম্পত্তি স্ট্রিং => একটি পূর্ণসংখ্যা আইডি), যাতে রূপান্তরটি একাধিকবার পরিচালিত হবে না।
কিভাবে পরীক্ষা কাজ করে?
তারা সম্পত্তি অ্যাক্সেসের সময় পরিমাপ. innerHTML এর ক্ষেত্রে ( bugs.webkit.org/show_bug.cgi?id=81214 এ পারফরম্যান্স পরীক্ষা), পরীক্ষাটি শুধুমাত্র নিম্নলিখিত কোড চালানোর সময় পরিমাপ করে:
for (var i = 0; i < 1000000; i++)
document.body.innerHTML;
কর্মক্ষমতা পরীক্ষা HTML স্পেক থেকে কপি করা একটি বড় বডি ব্যবহার করে।
একইভাবে, CSS প্রপার্টি-অ্যাক্সেস পরীক্ষা নিম্নলিখিত কোডের সময় পরিমাপ করে:
var spanStyle = span.style;
for (var i = 0; i < 1000000; i++) {
spanStyle.invalidFontWeight;
spanStyle.invalidColor;
spanStyle.invalidBackgroundColor;
spanStyle.invalidDisplay;
}
ভাল খবর হল যে কেনতারো হারা বিশ্বাস করে যে অন্যান্য গুরুত্বপূর্ণ DOM বৈশিষ্ট্য এবং পদ্ধতিগুলির জন্য আরও কর্মক্ষমতা উন্নতি সম্ভব হবে।
এটা আনুন!
হারাকেন এবং দলের বাকি সদস্যদের ধন্যবাদ।