একটু আগে, উইলসন পেজ স্ম্যাশিং ম্যাগাজিনের জন্য একটি দুর্দান্ত নিবন্ধ লিখেছিলেন যে তারা কীভাবে ফিনান্সিয়াল টাইমস ওয়েব অ্যাপকে জীবন্ত করে তুলেছে। নিবন্ধে, উইলসন নোট করেছেন:
অ্যাপ বাড়তে শুরু করলে, আমরা দেখতে পেলাম কর্মক্ষমতা আরও খারাপ থেকে খারাপ হচ্ছে।
আমরা ক্রোম ডেভেলপারস টুলের টাইমলাইনে বেশ কয়েক ঘণ্টা কাটিয়েছি এবং অপরাধীকে খুঁজে পেয়েছি: শক, ভয়াবহ! — এটা ছিল আমাদের নতুন সেরা বন্ধু, ফ্লেক্সবক্স। টাইমলাইন দেখায় যে কিছু লেআউট 100 মিলিসেকেন্ডের কাছাকাছি সময় নিচ্ছে; ফ্লেক্সবক্স ছাড়া আমাদের লেআউটগুলি পুনরায় কাজ করার ফলে এটি 10 মিলিসেকেন্ডে কমে গেছে!
উইলসনের মন্তব্যগুলি আসল (উত্তরাধিকার) ফ্লেক্সবক্স সম্পর্কে যা display: box; . দুর্ভাগ্যবশত নতুন ফ্লেক্সবক্স ( display: flex; ) দ্রুততর হলে তারা কখনই উত্তর দেওয়ার সুযোগ পায়নি, কিন্তু CSS ট্রিক্সের উপরে, Chris Coyier সেই প্রশ্নটি খোলেন ।
আমরা Ojan Vafai কে জিজ্ঞাসা করেছি, যিনি WebKit & Blink-এ বাস্তবায়নের অনেকটাই লিখেছেন, নতুন ফ্লেক্সবক্স মডেল এবং বাস্তবায়ন সম্পর্কে।
নতুন ফ্লেক্সবক্স কোডে অনেক কম মাল্টি-পাস লেআউট কোডপ্যাথ রয়েছে। আপনি এখনও মাল্টি-পাস কোডপ্যাথগুলিকে খুব সহজেই আঘাত করতে পারেন (যেমন
flex-align: stretchপ্রায়শই 2-পাস হয়)। সাধারণভাবে, সাধারণ ক্ষেত্রে এটি অনেক দ্রুত হওয়া উচিত, তবে আপনি এমন একটি কেস তৈরি করতে পারেন যেখানে এটি সমানভাবে ধীর।
এটি বলেছিল, যদি আপনি এটি থেকে দূরে যেতে পারেন তবে নিয়মিত ব্লক লেআউট (নন-ফ্লোট), সাধারণত নতুন ফ্লেক্সবক্সের চেয়ে দ্রুত বা দ্রুত হবে কারণ এটি সর্বদা একক-পাস। কিন্তু নতুন ফ্লেক্সবক্স টেবিল ব্যবহার বা কাস্টম JS-বেস লেআউট কোড লেখার চেয়ে দ্রুত হওয়া উচিত।
সংখ্যার পার্থক্য দেখতে, আমি পুরানো বনাম নতুন সিনট্যাক্সের মাথার সাথে তুলনা করেছি।
পুরাতন বনাম নতুন ফ্লেক্সবক্স বেঞ্চমার্ক
- পুরানো ফ্লেক্সবক্স বনাম নতুন ফ্লেক্সবক্স (ফলব্যাক সহ)
- প্রতি পৃষ্ঠায় 500টি উপাদান
- উপাদানগুলি সাজানোর জন্য পৃষ্ঠা লোড খরচ মূল্যায়ন করা
- গড়ে ৩ রান জুড়ে
- ডেস্কটপে পরিমাপ করা হয়। (মোবাইল ~10x ধীর হবে)
পুরানো ফ্লেক্সবক্স: লেআউট খরচ ~43.5ms
নতুন ফ্লেক্সবক্স: লেআউট খরচ ~18.2ms
সারাংশ: পুরানো নতুনের চেয়ে 2.3x ধীর।
তোমার কি করা উচিত?
ফ্লেক্সবক্স ব্যবহার করার সময়, সর্বদা নতুন জিনিসের জন্য লেখক : IE10 টুইনার সিনট্যাক্স এবং নতুন আপডেট হওয়া ফ্লেক্সবক্স যা Chrome 21+, Safari 7+, Firefox 22+, Opera (& Opera Mobile) 12.1+, IE 11+ এবং Blackberry 10-এ রয়েছে + অনেক ক্ষেত্রে আপনি কিছু পুরানো মোবাইল ব্রাউজার নিতে লিগ্যাসি ফ্লেক্সবক্সে একটি ফলব্যাক করতে পারেন।
মনে রাখবেন: সরঞ্জাম, নিয়ম নয়
আরো গুরুত্বপূর্ণ কি বিষয় অপ্টিমাইজ করা হয়. এক ধরণের অপারেশন অপ্টিমাইজ করার সময় ব্যয় করার আগে আপনার বাধাগুলি সনাক্ত করতে সর্বদা টাইমলাইন ব্যবহার করুন।
আসলে, আমরা উইলসন এবং ফাইন্যান্সিয়াল টাইমস ল্যাবস টিমের সাথে সংযুক্ত হয়েছি এবং ফলস্বরূপ, লেআউট পারফরম্যান্স টুলিংয়ের Chrome DevTools কভারেজ উন্নত করেছি। আমরা শীঘ্রই একটি উপাদানের রিলেআউট সীমানা দেখার ক্ষমতা যুক্ত করব, এবং টাইমলাইনে লেআউট ইভেন্টগুলি প্রতিটি লেআউটের সুযোগ, রুট এবং খরচের বিবরণ সহ লোড করা হয়:
