আমার একটি প্রকল্পের জন্য ( বিগপিক্টু.রে বা বিগপিকচার.জেস গিটহাব প্রকল্প দেখুন ), আমাকে সম্ভাব্য একটি খুব, খুব বড় ধারকটির সাথে ডিল করতে হবে <div>।
আমি জানতাম যে আমি ব্যবহার করি এমন সহজ পদ্ধতির সাথে দুর্বল পারফরম্যান্সের ঝুঁকি রয়েছে, তবে আমি এটি কেবলমাত্র Chrome ... এর সাথে উপস্থিত থাকার আশা করিনি!
আপনি যদি এই ছোট পৃষ্ঠাটি পরীক্ষা করেন (নীচের কোডটি দেখুন), প্যানিং (ক্লিক + টানুন) হবে:
- ফায়ারফক্সে সাধারণ / মসৃণ
- এমনকি ইন্টারনেট এক্সপ্লোরারে সাধারণ / মসৃণ
- Chrome এ খুব ধীর (প্রায় ক্র্যাশিং)!
অবশ্যই, আমি এটি করতে কিছু কোড যুক্ত করতে পারি (আমার প্রজেক্টে) আপনি যখন অনেকটা জুম করবেন তখন খুব বড় ফন্টের আকারের টেক্সটটি লুকানো থাকবে। তবে তবুও, ফায়ারফক্স এবং ইন্টারনেট এক্সপ্লোরার ক্রম না করে কেন এটি সঠিকভাবে পরিচালনা করে?
জাভাস্ক্রিপ্ট, এইচটিএমএল, বা সিএসএসে কোনও ক্রিয়া রয়েছে যে প্রতিটি ক্রিয়াটির জন্য পুরো পৃষ্ঠাটি (যা এখানে 10000 পিক্সেল প্রশস্ত এখানে) পুরো রেন্ডার করার চেষ্টা করবেন না ? (কেবলমাত্র বর্তমান ভিউপোর্ট রেন্ডার করুন!)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
html, body {
overflow: hidden;
min-height: 100%; }
#container {
position: absolute;
min-height: 100%;
min-width: 100%; }
.text {
font-family: "Arial";
position: absolute;
}
</style>
</head>
<body>
<div id="container">
<div class="text" style="font-size: 600px; left:100px; top:100px">Small text</div>
<div class="text" style="font-size: 600000px; left:10000px; top:10000px">Very big text</div>
</div>
<script>
var container = document.getElementById('container'), dragging = false, previousmouse;
container.x = 0; container.y = 0;
window.onmousedown = function(e) { dragging = true; previousmouse = {x: e.pageX, y: e.pageY}; }
window.onmouseup = function() { dragging = false; }
window.ondragstart = function(e) { e.preventDefault(); }
window.onmousemove = function(e) {
if (dragging) {
container.x += e.pageX - previousmouse.x; container.y += e.pageY - previousmouse.y;
container.style.left = container.x + 'px'; container.style.top = container.y + 'px';
previousmouse = {x: e.pageX, y: e.pageY};
}
}
</script>
</body>
</html>