সিএসএস পারফরম্যান্স অনুবাদ অনুবাদ (0)


96

বেশ কয়েকটি ব্লগ জিপিইউকে 'ট্রিকিং' করে পারফরম্যান্স লাভটি প্রকাশ করেছে বলে মনে করে যে transform: translateZ(0)অ্যানিমেশন এবং ট্রানজিশনগুলির গতি বাড়িয়ে একটি উপাদান 3 ডি হয় is আমি ভাবছিলাম যে নিম্নলিখিত পদ্ধতিতে এই রূপান্তরটি ব্যবহার করতে কোনও প্রভাব রয়েছে:

* {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

6
আপনি কি এই ব্লগ নিবন্ধ লিঙ্ক করতে পারেন?
জর্জেন পল

@ আনারসউন্ডারসিটি এটি: ব্লগ.টেমট্রিহাউস . com/… আমাকে এখানে পাঠিয়েছে।

বিটিডব্লিউ, -o-transform: translateZ(0)কখনও জিনিস ছিল না। caniuse.com/#search=translate3d
ভোলকার ই।

@ আহমেদ নুমানকে হ্যাঁ এটি কেবল একটি কৌশল নয়। তবে এটি আনুষ্ঠানিকভাবে কিছু অ্যাপে ব্যবহৃত হয়। তবে আপনি যদি জিপিইউ ছাড়াই কোনও ডিভাইসে (নিম্ন প্রান্তে) পৌঁছান ... আমি নিশ্চিত না যে এটি কীভাবে সম্পাদন করে। তবে যেহেতু যদি কোনও প্রসেসর কী করতে পারে (2 ডি গ্রাফিক্স) কেবলমাত্র কারণেই জিপিইউ-তে অর্পিত হয় তবে এটির কোনও চূড়ান্ত প্রভাব নেই। এবং 3 ডি এর ভিতরে একাধিক কোর ব্যবহার করে এবং দ্রুত সম্পাদন করে। এখানেই তা বোঝা যায়। আরও কিছু তদন্তের প্রয়োজন ...
টুজিকি

উত্তর:


102

সিএসএস রূপান্তরগুলি নতুন স্ট্যাকিং প্রসঙ্গ তৈরি করে এবং এতে ব্লক রয়েছে, যেমনটি স্পপে বর্ণিত হয়েছে সরল ইংরেজিতে, এর অর্থ এই যে পরিবর্তিত স্থির অবস্থান উপাদানগুলি প্রয়োগ করা হলে তারা একেবারে অবস্থানযুক্ত উপাদানগুলির মতো কাজ করবে এবং z-indexমানগুলি সম্ভবত স্ক্রু হয়ে উঠবে ।

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

সুতরাং মূলত, এটি করবেন না। আপনার অপ্টিমাইজেশনের প্রয়োজন হলেই একটি 3D রূপান্তর প্রয়োগ করুন। -webkit-font-smoothing: antialiased;এই সমস্যাগুলি তৈরি না করে 3D ত্বরণে ট্যাপ করার আরেকটি উপায়, তবে এটি কেবল সাফারিতেই কাজ করে।


29

আপনি যদি বোঝাতে চান তবে কিছু পরিস্থিতিতে হার্ডওয়্যার ত্বরণ সক্ষম করার সাথে গুগল ক্রোমের কার্যকারিতা ভয়াবহ । অদ্ভুতভাবে যথেষ্ট, "কৌশল" পরিবর্তন করে -webkit-transform: rotateZ(360deg);ঠিক কাজ করে।

আমি বিশ্বাস করি না যে আমরা কখনই তা বুঝতে পেরেছি।


4
আমার সাফারি 5 এবং 6-তে সর্বোচ্চ-উচ্চতা ব্যবহার করে চিত্রযুক্ত চিত্র এবং মারাত্মকভাবে ভুল অ্যানিমেশনগুলির মতো সমস্যা ছিল যখন আমি জিপিইউ ত্বরণ (অনুবাদক (0)) অক্ষম করি, তখন সবকিছুই উদ্দেশ্য অনুযায়ী কাজ করে, তবে অ্যানিমেশনটি যথেষ্ট মসৃণ ছিল না। আমি ট্রান্সলেটজেড (0) রোটেটজেড (360deg) এ পরিবর্তন করেছি এবং হঠাৎ অ্যানিমেশনগুলি মসৃণ এবং হার্ডওয়্যারটি ত্বরান্বিত হয়েছে এবং আর কোনও সমস্যা নেই।
জাকুব_জো

14

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

ব্যবহারের -webkit-transform: translate3d(0,0,0);ফলে জিপিইউকে সিএসএস রূপান্তরগুলির জন্য কার্যকর করা হবে, এগুলি মসৃণ করা হবে (উচ্চতর এফপিএস)।

দ্রষ্টব্য: আপনি যা translate3d(0,0,0) দেখেন সে অনুসারে কিছুই করে না। এটি x, y এবং z অক্ষে 0px দ্বারা অবজেক্টটিকে সরিয়ে দেয়। এটি কেবল একটি হার্ডওয়্যার ত্বরণকে বাধ্য করার কৌশল।

এখানে ভাল পড়ুন: http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/


7

আমি এই সত্যের সাথে প্রমাণ করতে পারি যে -webkit-transform: translate3d(0, 0, 0);নতুন position: -webkit-sticky;সম্পত্তি নিয়ে গণ্ডগোল হবে । আমি যে বাম ড্রয়ার নেভিগেশন প্যাটার্নটিতে কাজ করছিলাম তার সাথে, ট্রান্সফর্ম সম্পত্তি সহ আমি যে হার্ডওয়্যার ত্বরণটি চেয়েছিলাম তা আমার শীর্ষ ন্যাভ বারের স্থির অবস্থানের সাথে গোলমাল করছে। আমি রূপান্তরটি বন্ধ করে দিয়েছি এবং অবস্থান ঠিকঠাক কাজ করেছে।

ভাগ্যক্রমে, আমার মনে হচ্ছে ইতিমধ্যে হার্ডওয়্যার ত্বরণ ছিল, কারণ আমার -webkit-font-smoothing: antialiasedএইচটিএমএল উপাদান ছিল। আমি iOS7 এবং অ্যান্ড্রয়েডে এই আচরণটি পরীক্ষা করছিলাম।


5

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

আরও ভাল, 3 ডি স্থানান্তর রূপান্তরগুলি বামের বিপরীতে ট্রান্সলেটএক্স (50px) এর মতো অ্যানিমেশনগুলি করতে ব্যবহার করুন : 50px;


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