প্রচলিত জাভাস্ক্রিপ্ট ভুলগুলি যে কার্য সম্পাদনকে মারাত্মকভাবে প্রভাবিত করে? [বন্ধ]

Question

আমি যে সাম্প্রতিক ইউআই / ইউএক্স মিটআপে অংশ নিয়েছি, আমি একটি ওয়েবসাইটে কিছু প্রতিক্রিয়া জানিয়েছিলাম যা জাভা স্ক্রিপ্ট (jQuery) এর ইন্টারঅ্যাকশন এবং ইউআইয়ের জন্য ব্যবহার করেছে - এটি মোটামুটি সহজ অ্যানিমেশন এবং হেরফের ছিল, তবে একটি শালীন কম্পিউটারে পারফরম্যান্স ছিল ভয়াবহ।

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

আমি জেএস বিকাশকালে বিবেচনা করা হয় না এমন কিছু সাধারণ সমস্যা সম্পর্কে জানতে আগ্রহী যা সাইটের কার্য সম্পাদনকে মেরে ফেলবে।

Comments

প্রতিটি অন্যান্য প্রোগ্রামের মতোই সম্ভবত: প্রয়োজনের চেয়ে বেশি কাজ করা এবং একই কাজ বারবার করা প্রায়শই কয়েকবার।

@ ডেলান এটি খুব সত্য, তবে মনে হচ্ছে এটি জেএসে অনেক বেশি প্রচলিত। উপলব্ধি হতে পারে?

— নিক

জাভাস্ক্রিপ্ট সম্পর্কে কথা বলার সময় এটি 'সাইটের' কথা বলতে কিছুটা উত্তীর্ণ হতে চলেছে। এটি সর্বত্র সর্বত্র এবং আজকাল সমস্ত কিছুর জন্য ব্যবহৃত হচ্ছে।

— অ্যাডাম ক্রসল্যান্ড

@ অ্যাডাম ক্রসল্যান্ড আপনি একদম ঠিক বলেছেন - একই উদাহরণে আমি মনে করি যে আমি এমন একটি বিকাশকারীকে একটি দেশীয় অ্যাপ্লিকেশন দিয়ে সাহায্য করেছি যা জিকুয়েরিতেও খুব বেশি নির্ভর করে।

— নিক

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

— ব্যবহারকারী 281377

Answer 1

একটি সাধারণ পারফরম্যান্স কিলার .lengthএকটি forলুপের মধ্যে একটি এইচটিএমএল সংকলনে কল করছে :

function foo(collection) {
    for (var index = 0; index < collection.length; index++) {
        // do something awesome here
    }
}

সেই অ্যান্টি-প্যাটার্নের ফলে লুপের মধ্য দিয়ে প্রতিটি পাসে সংগ্রহের আকার গণনা করা যায়। লুপের বাইরে দৈর্ঘ্য গণনা করা আরও ভাল পন্থা:

function foo(collection) {
    var collectionLen = collection.length;
    for (var index = 0; index < collectionLen; index++) {
        // do something awesome here
    }
}

Comments

ব্রাউজারে নির্ভর করে। এই মানদণ্ডটিকে উদাহরণ হিসাবে ধরুন : এফএফ 5 এ, "স্বাভাবিক" এক "অপটিমাইজড" সংস্করণ হিসাবে প্রায় একই সময়ে সঞ্চালিত হয়। এমনকি সত্যিকারের পুরানো এবং স্লাগি ব্রাউজারগুলিতেও, জেএস আসলে উপাদানগুলির সাথে আগ্রহের কোনও কিছু করলে এই জাতীয় কিছু সম্ভবত কোনও বাধা হয়ে দাঁড়াবে না।

হুম! সম্ভবত আজকের উচ্চ-অপটিমাইজিং জেআইটি সংকলকগণ এই বিটটিকে অচল করে দিচ্ছেন।

— অ্যাডাম ক্রসল্যান্ড 14

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

— জ্যাসেক প্রুশিয়া

@ জেসেকপ্রুসিয়া তিনি বলেছেন সংগ্রহ সংগ্রহ , অ্যারে নয় - সাধারণত, বাস্তব কোডে, এর অর্থ এটি ডিওএম উপাদানগুলির একটি তালিকা যেমন ফাংশন দ্বারা ফিরে আসে document.getElementsByTagName। ফাংশনটি একটি লাইভ দেয় nodeListযা প্রতিবার .lengthসম্পত্তি অ্যাক্সেস করার পরে তার দৈর্ঘ্যের পুনরায় গণনা করে ।

— ইয়া জিয়াং

@JacekPrucia বেঞ্চমার্ক এটি একটি কর্মক্ষমতা বৃদ্ধি করে। সম্পত্তি অনুসন্ধান সস্তা নয়।

— রায়নস

Answer 2

না, ফ্ল্যাশ প্রতিস্থাপন হিসাবে ব্যবহৃত জেএস থেকে সমস্যাটি আসে না। আপনি যদি এটির সাথে সন্তুষ্ট না হন তবে অ্যাকশন স্ক্রিপ্ট সম্পর্কে দস্তাবেজটি: এটি জেএসের খুব কাছে।

পারফরম্যান্স কিলার হিসাবে, আপনি বেশ কয়েকটি খারাপ অভ্যাস খুঁজে পেতে পারেন:

• অবিচ্ছিন্ন ইভেন্টে ইভেন্ট হ্যান্ডলার সংযুক্ত করুন, যেমন স্ক্রোলিং, মাউস বা অনুরূপ স্টাফ মোউবিং করা। এটিতে 2 টি অপূর্ণতা রয়েছে: ইভেন্টটি যদি পর্যাপ্ত পরিমাণে ট্রিগার না করা হয় তবে আপনার অ্যাপ্লিকেশনটি প্রতিক্রিয়াশীল হবে না। এটি যদি খুব বেশি ট্রিগার হয় তবে আপনার কাছে কিছুই করার জন্য একটি বিশাল সিপিইউ লোড থাকবে।
• সিঙ্ক্রোনাস এজেএক্স কল করা হচ্ছে। জাভাস্ক্রিপ্টটি মাল্টিথ্রেড নয়, তারপরে, যখন জেএসের কোনও অংশ কোনও কিছুর জন্য অপেক্ষা করছে, আপনার অ্যাপ্লিকেশন হিমশীতল। আপনি অ্যাসিঙ্ক্রোনাস এজেএক্স কলগুলি আরও ভালভাবে ব্যবহার করতে পারেন এবং একইভাবে একটি দীর্ঘ গণনার পর্ব বিভক্ত করতে এবং আপনার অ্যাপ্লিকেশনটি প্রতিক্রিয়াশীল রাখতে সেটটাইমআউট / সেটইন্টারওয়াল ব্যবহার করুন।
• অন্য কোনও ভাষার মতো উচ্চ অ্যালগরিদম জটিলতা।

Comments

আমি কয়েকটি অ্যাপ্লিকেশন দেখেছি যে পুরো ব্রাউজার চিত্রগুলি ঘোরানো, স্বাচ্ছন্দ্য করতে বা অ্যানিমেট করার চেষ্টা করা হয়েছে এবং প্রক্রিয়াটিতে মারাত্মকভাবে ব্যর্থ হয়েছে - এখান থেকে ফ্ল্যাশ প্রতিস্থাপনের মন্তব্যটি এসেছে :)

— নিক

যেহেতু এজেএক্সের প্রথম এটি অ্যাসিঙ্ক্রোনাস হিসাবে দাঁড়িয়েছে, প্রযুক্তিগতভাবে এটি এজেএক্স নয় তবে এটি সমকালীন তবে আপনার বক্তব্যটি এখনও একটি ভাল one

— কার্ল বিলেফেল্ড

হ্যাঁ ঠিক, এটি কঠোরভাবে AJAX নয়। তবে যাইহোক, এড়াতে হবে: ডি

— ডেডালনিক্স

Answer 3

আমি এমন একটি ওয়েবসাইটে কিছু প্রতিক্রিয়া দিয়েছিলাম যা জাভা স্ক্রিপ্ট (jQuery) এর ইন্টারঅ্যাকশন এবং ইউআইয়ের জন্য ব্যবহার করেছিল - এটি মোটামুটি সহজ অ্যানিমেশন এবং হেরফের ছিল, তবে একটি শালীন কম্পিউটারে পারফরম্যান্স ছিল ভয়াবহ।

পারফরম্যান্সের সবচেয়ে বড় সমস্যাটি হ'ল অন্তর্নিহিত ডিওএম মডেল এবং সিএসএস 3 অ্যানিমেশন মডেল (বা ক্যানভাস বা এসভিজি) না বুঝে উচ্চ স্তরের বিমূর্ততা (jQuery এর মতো) ব্যবহার করা।

আপনি যদি বিমূর্ততাগুলি ছাড়া এটি কীভাবে করতে না জানেন তবে কী কৌশলগুলি দ্রুত বা ধীর তা সম্পর্কে আপনার কাছে শূন্য জ্ঞান knowledge

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

Answer 4

জাভাস্ক্রিপ্টের সৌন্দর্য এবং অপূর্ণতা এটি অত্যন্ত নমনীয়। বলা হচ্ছে, এটি আপনাকে এমন কিছু করতে দেয় যা সম্ভবত আপনার অনেক ক্ষেত্রে করা উচিত নয়।

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

এছাড়াও, অনুপযুক্ত বন্ধগুলি প্রায়শই মেমরি ফাঁস হতে পারে। তবে, আপনার কোড ফ্রেমওয়ার্কটি অনুসরণ করার পরে বেশিরভাগ আধুনিক জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলি এই ধরণের সমস্যাগুলি প্রতিরোধ করে।

Answer 5

এখানে একটি লিঙ্ক যে, আমি একজন বছর বা তাই আগে পাওয়া গেছে ভাল jQuery কোড লেখা সম্পর্কে হল: http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance /

একটি সহকর্মী কোডে আমি কেবল একটি জিনিস পেয়েছি যা পারফরম্যান্স হত্যার জন্য ডেটা ক্যাশে করছিল যা ক্যাশে করার দরকার নেই।

উদাহরণ:

var table = $("#data").dataTable(.....);

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

Comments

ডেটা টেবিলের মতো শব্দগুলি সত্যই অক্ষম / দুর্বল প্লাগইন হ'ল ক্যাশে সমস্যা। 5 কে কিছুই নয়।

— রায়নস

@ রায়নোস: তিনি বলেছেন 5 কে সারি , 5 কিলোবাইট ডেটা নয়। একটি "সারি" খুব বড় জিনিস হতে পারে।

— ক্রিস কৃষক

@ ক্রিসফর্মার যদি "সারি" খুব বড় জিনিস হয় তবে আপনার অন্যরকম সমস্যা হয়েছে।

— রায়নোস

Answer 6

forলুপগুলি যা শুনেছি সেগুলি থেকে jQuery এর চেয়ে কমপিউটিভভাবে দ্রুত $.each()।

Comments

এটি কি রসিক উত্তর?

— রায়নস