অভ্যন্তরীণ এইচটিএমএল কি অ্যাসিনক্রোনাস?

Question

আমি আশা করি আমি নিজেকে বোকা বানাব না তবে কোডের এই দুটি লাইনে কী ঘটছে তা বোঝার চেষ্টা করছি:

document.body.innerHTML = 'something';
alert('something else');

আমি যা পর্যবেক্ষণ করছি তা হ'ল এইচটিএমএল আপডেট হওয়ার আগে সতর্কতা প্রদর্শন করে (অথবা এটিতে রয়েছে তবে পৃষ্ঠাটি রিফ্রেশ / পুনরায় রঙ করা হয়নি / যাই হোক না কেন)

আমি কী বলতে চাইছি তা দেখতে এই কোডেপেনটি চেকআউট করুন ।

দয়া করে মনে রাখবেন যে এমনকি প্রবেশ করাও কোনও alertলাভ setTimeout(..., 0)করে না। দেখে মনে হচ্ছে innerHTMLপ্রকৃতপক্ষে পৃষ্ঠাটি আপডেট করতে আরও ইভেন্ট লুপগুলি লাগে takes

সম্পাদনা করুন:

আমি উল্লেখ করতে ভুলে গেছি যে আমি ক্রোম ব্যবহার করছি এবং অন্যান্য ব্রাউজারগুলি চেক করিনি। দেখে মনে হচ্ছে এটি কেবল ক্রোমে দৃশ্যমান। তবুও আমি এখনও আগ্রহী যে কেন এটি হচ্ছে।

Comments

এটি ক্রোমের পক্ষে সাধারণ।

— ট্রিনকোট

@ থ্রিঙ্কোট ধন্যবাদ! আমি উল্লেখ করতে ভুলে গেছি যে আমি ক্রোম ব্যবহার করছি এবং জিজ্ঞাসার আগে অন্য ব্রাউজারটি চেষ্টা করে নি। আপনার কোন রেফারেন্স আছে?

— apieceofbart

DOM পরিবর্তন করা সমকালীন। জাভাস্ক্রিপ্ট স্ট্যাক সাফ হওয়ার পরে ডম রেন্ডারিং আসলে ঘটে happens বিকাশকারীদের মধ্যে ডাব্লু। (। Chrome এর জন্য অন্তত অন্য ব্রাউজার একই রকম।)

— jered

কেবলমাত্র একটি অনুমান: সতর্কতা অবরুদ্ধ হওয়া ব্রাউজারটিকে পুনরায় রঙে পৌঁছাতে বাধা দেয়, সুতরাং DOM পরিবর্তিত হওয়ার পরে, এটি এখনও পুনরায় রঙ করার অনুমতি দেওয়া হয়নি; আবার, একটি অনুমান।

— zzzzBov

@ কিবোলেক এই ভিডিওটি দেখুন: youtu.be/r8caVE_a5KQ

— apieceofbart

Answer 1

অভ্যন্তরীণ এইচটিএমএল সেট করা সিঙ্ক্রোনাস, আপনি ডিওএম এ করতে পারেন এমন বেশিরভাগ পরিবর্তন। তবে ওয়েবপৃষ্ঠাটি উপস্থাপন করা আলাদা গল্প is

(মনে রাখবেন, ডিওএম মানে "ডকুমেন্ট অবজেক্ট মডেল" It's এটি কেবলমাত্র একটি "মডেল", যা উপাত্তের উপস্থাপনা। ব্যবহারকারী তাদের পর্দায় যা দেখেন সেই মডেলটি কীভাবে দেখানো উচিত তার চিত্র So সুতরাং, মডেলটি পরিবর্তন করা তাত্ক্ষণিকভাবে ঘটে না ছবিটি পরিবর্তন করুন - এটি আপডেট হতে কিছুটা সময় নেয়))

জাভাস্ক্রিপ্ট চালানো এবং ওয়েবপৃষ্ঠা রেন্ডারিং আসলে আলাদাভাবে ঘটে। - এটা সরলভাবে জাভাস্ক্রিপ্ট প্রথম সব পৃষ্ঠা রানে (খুঁজে বার করো ঘটনা লুপ থেকে করা, এই চমৎকার ভিডিও এবং তারপর আরো বিস্তারিত জন্য) পরে যে ব্রাউজার ব্যবহারকারী দেখার জন্য ওয়েবপেজ কোনো পরিবর্তন রেন্ডার করে। এই কারণেই "ব্লকিং" এত বড় চুক্তি - গণনাগতভাবে নিবিড় কোড চালানো ব্রাউজারটিকে "রান জেএস" ধাপটি পেরিয়ে যাওয়া এবং "পৃষ্ঠাটি রেন্ডার" পদক্ষেপে বাধা দেয়, যার ফলে পৃষ্ঠাটি হিমশীতল বা হৈচৈ হয়ে যায়।

ক্রোমের পাইপলাইনটি দেখতে এমন দেখাচ্ছে:

আপনি দেখতে পাচ্ছেন, জাভাস্ক্রিপ্টের সমস্ত আগে ঘটে। তারপরে পৃষ্ঠাটি শৈলীযুক্ত, ছাঁটাই, আঁকা এবং সংমিশ্রিত হবে - "রেন্ডার"। এই পাইপলাইনগুলির প্রত্যেকটিই প্রতিটি ফ্রেম কার্যকর করবে না। এটি পৃষ্ঠার উপাদানগুলি কী পরিবর্তন হয়েছে, যদি কোনও হয়েছে এবং কীভাবে তাদের পুনরায় রেন্ডার করা দরকার তার উপর নির্ভর করে।

দ্রষ্টব্য: alert()এছাড়াও জাভাস্ক্রিপ্ট পদক্ষেপের সময় সিঙ্ক্রোনাস এবং কার্যকর করা হয়, এজন্য আপনি ওয়েবপৃষ্ঠায় পরিবর্তনগুলি দেখার আগে সতর্কতা ডায়ালগটি উপস্থিত হয়।

আপনি এখন জিজ্ঞাসা করতে পারেন "ধরে থাকুন, পাইপলাইনের সেই 'জাভাস্ক্রিপ্ট' ধাপে ঠিক কী চলে? আমার সমস্ত কোড কি প্রতি সেকেন্ডে 60 বার চলে?" উত্তরটি "না", এবং এটি জেএস ইভেন্টের লুপটি কীভাবে কাজ করে তা ফিরে যায়। ইভেন্ট শ্রোতা, সময়সীমা, যা কিছু হোক না কেন - জেএস কোড কেবল স্ট্যাকের মধ্যে থাকলে চলবে। পূর্ববর্তী ভিডিও দেখুন (সত্যিই)।

https://developers.google.com/web/fundamentals/performance/rendering/

Comments

উত্তরের জন্য ধন্যবাদ. আমি ইভেন্ট লুপ ইত্যাদি সম্পর্কে কিছু বিশদ জানতাম This যদি অন্য ব্রাউজারগুলি সতর্কতা দেখানোর আগে পৃষ্ঠাটি পুনরায় রঙ করার জন্য অপেক্ষা করে তবে তার মানে বোতামটিতে ক্লিক করা এবং সতর্কতা প্রদর্শন করার মধ্যে একটি বিশাল বিলম্ব হতে পারে। আমি পরে এটির সাথে খেলতে চেষ্টা করব।

— apieceofbart

@apieceofbart অন্যান্য ব্রাউজারগুলি জাভাস্ক্রিপ্ট স্টাফটি বন্ধ করার সময় ব্যবহারকারীকে সতর্কতা উইন্ডোটির সাথে ডিল না করা পর্যন্ত কেবল অবিচ্ছিন্নভাবে পৃষ্ঠাটি পুনরায় রঙ করতে পারে। এর অর্থ এই নয় যে তাদের পুনর্নির্মাণের জন্য অপেক্ষা করতে হবে।

— জোনাস শোফার

Answer 2

হ্যাঁ, এটি সিঙ্ক্রোনাস, কারণ এটি কাজ করে (এগিয়ে যান এবং এটি আপনার কনসোলে টাইপ করুন):

document.body.innerHTML = 'text';
alert(document.body.innerHTML);// you will see a 'text' alert

পৃষ্ঠা পরিবর্তন হওয়ার আগে আপনি সতর্কতাটি দেখার কারণটি ব্রাউজারের রেন্ডারিংয়ে আরও বেশি সময় নেয় এবং আপনার জাভাস্ক্রিপ্টটি রেখার দ্বারা চালিত রেখার চেয়ে তত দ্রুত নয়।

Comments

ধন্যবাদ, আমি এটি পরীক্ষা করেছিলাম। তবে এটি ক্রোমের সাথে নির্দিষ্ট কিছু হতে হবে - এটি অন্যান্য ব্রাউজারগুলিতে প্রত্যাশা অনুযায়ী কাজ করে। অথবা এটি তাদের ত্রুটি যে জাভাস্ক্রিপ্টের পরবর্তী লাইনে যেতে পুনরায় রঙ করার জন্য তারা অপেক্ষা করে?

— apieceofbart

সতর্কতাটি কি সঠিক পাঠ্যটি দেখায়? ( textআমার উদাহরণে) এটি আপনার সিঙ্ক্রোনাস কিনা এর প্রশ্নের উত্তর দেবে। ব্রাউজার রেন্ডারিং বনাম জাভাস্ক্রিপ্ট এক্সিকিউশন হ'ল অ্যাপল এবং কমলা :)

— ডি -_- বি

এটির প্রশ্নের সাথে কিছু করার নেই

— এপিআইসোফবার্ট

আপনার প্রশ্নটি আক্ষরিক অর্থে "অভ্যন্তরীণ এইচটিএমএল কি অ্যাসিনক্রোনাস?"। মানটি সিঙ্ক্রোনাস হওয়ার সাথে সাথে ব্যবহার করা যেতে পারে, না? আমি মনে করি আপনি পৃষ্ঠা রেন্ডারিংয়ের আশেপাশে আরও জিজ্ঞাসা করতে চেয়েছেন, অভ্যন্তরীণ এইচটিএমএল এর সিঙ্ক্রোনাস গুণ নয়।

— d -_- বি

হ্যাঁ, প্রশ্নটি পরিষ্কারভাবে ভুল ছিল তবে আমি কী জিজ্ঞাসা করব তা জানতাম না। আমি যদি সঠিকটি জানতাম তবে উত্তরটি সম্ভবত খুঁজে পেতাম। আমি মানে হতে চাইনি, যাইহোক উত্তরের জন্য ধন্যবাদ!

— apieceofbart

Answer 3

innerHTMLসম্পত্তি প্রকৃত সিঙ্ক্রোনাস আপডেট, কিন্তু চাক্ষুষ পুনরায় আঁকুন এই পরিবর্তন ঘটায় অ্যাসিঙ্ক্রোনাস ঘটবে।

ভোমাল রেন্ডারিংটি ডিওএম ক্রোমে অ্যাসিনক্রোনাস এবং বর্তমান জাভাস্ক্রিপ্ট ফাংশন স্ট্যাকটি সাফ হওয়ার পরে এবং ব্রাউজার কোনও নতুন ইভেন্ট স্বীকার করতে মুক্ত না হওয়া পর্যন্ত ঘটবে না। অন্যান্য ব্রাউজারগুলি জাভাস্ক্রিপ্ট কোড এবং ব্রাউজার রেন্ডারিং পরিচালনা করতে পৃথক থ্রেড ব্যবহার করতে পারে বা সতর্কতা অন্য ইভেন্টের সম্পাদন বন্ধ করে দেওয়ার সময় তারা কিছু ইভেন্টকে অগ্রাধিকার পেতে পারে।

আপনি এটি দুটি উপায়ে দেখতে পারেন:

1. আপনি যদি for(var i=0; i<1000000; i++) { }আপনার সতর্কতার আগে যোগ করেন তবে ব্রাউজারকে পুনরায় চিত্র আঁকার জন্য প্রচুর সময় দিয়েছেন, তবে তা হয়নি, কারণ ফাংশন স্ট্যাকটি সাফ হয়নি ( addএখনও চলছে)।

2. আপনি যদি অ্যাসিক্রোনাসের alertমাধ্যমে আপনার বিলম্ব করেন setTimeout(function() { alert('random'); }, 1)তবে পুনরায় আঁকা প্রক্রিয়া সেটটাইমআউট দ্বারা বিলম্বিত ফাংশনের আগেই এগিয়ে যাবে।

   • আপনি যদি সময়সীমা ব্যবহার করে তবে এটি কাজ করে না 0, সম্ভবত কারণ Chrome 0অন্য কোনও ইভেন্টের আগে (বা কমপক্ষে পুনঃনির্মাণ ইভেন্টগুলির আগে) টাইমআউটগুলিকে ইভেন্ট-কাতাকে অগ্রাধিকার দেয় ।

Comments

উত্তরের জন্য ধন্যবাদ! দয়া করে এটি setTimeout(func, 1)প্রতিবার কাজ করে না, এই ভিডিওটি দেখুন: youtu.be/r8caVE_a5KQ

— apieceofbart