Javascript：內存高效的方式來做到這一點效果

我用Javascript寫了代碼，但任何好的替代方案都可以。Javascript：內存高效的方式來做到這一點效果

效果：onmousemove隨機顏色的網頁圈應創建鼠標移動的任何位置。並且必須將其添加到蒙板圖像後面（圓圈只在作爲徽標的圖像的透明部分纔可見），因此創建了彩色塗料以在onmousemove上創建徽標

它在jsfidde中不起作用，因爲其內存密集

我粘貼您可以創建下面的代碼一個新的HTML文件確切的代碼，並在Firefox不僅是因爲它的內存密集的IT運行完美（大量的div中添加非常短的時間使得DOM變得非常非常重）

<html> 
<head> 
<style type="text/css"> 
body{ 
padding:0; 
margin:0; 
overflow: hidden; 

} 
#mask{ 
width:100%; 
height:auto; 
position:absolute; 
z-index:10; 
} 
#logo{ 
width:50%; 
height:50%; 
margin:auto; 
} 
.point{ 
width:0px; 
height:0px; 
background-color:#ff0000; 
position:absolute; 
z-index:5; 
left:50px;top:50px; 
border-width:50px; 
border-style: solid; 
border-color:red; 
border-radius:50px; 
opacity:1; 
transition: border-width 3s ease-in-out; 
} 
.no-border{border-width:0px;} 
</style> 
<script type="text/javascript"> 
function getRandomColor() { 
    var letters = 'ABCDEF'.split(''); 
    var color = '#'; 
    for (var i = 0; i < 6; i++) { 
     color += letters[Math.round(Math.random() * 15)]; 
    } 
    return color; 
} 

/* OptionalCode: for removing divs after a lot are created */ 
Element.prototype.remove = function() { 
    this.parentElement.removeChild(this); 
} 
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() { 
    for(var i = 0, len = this.length; i < len; i++) { 
     if(this[i] && this[i].parentElement) { 
      this[i].parentElement.removeChild(this[i]); 
     } 
    } 
} 

i=0; 
function colors(event){ 
    var x=event.clientX; 
    var y=event.clientY; 
    var point = document.getElementsByClassName('point'); 
    document.body.innerHTML += "<div class='point'></div>"; 
    point[i].style.borderColor = getRandomColor(); 
    //point[i].className += ' no-border'; 
    point[i].style.left = x + 'px'; 
    point[i].style.top = y + 'px'; 
    i++; 
} 
function position(){ 
    var ht = window.getComputedStyle(document.getElementById("mask"), null).getPropertyValue("height"); 
    var ht_num = Number(ht.slice(0,ht.length - 2)); 
    margin_top = (Number(document.body.clientHeight) - ht_num)/2; 
    document.getElementById('mask').style.marginTop = margin_top + "px"; 
} 
</script> 
</head> 
<body onload="position();" onmousemove="colors(event)"> 
<img id="mask" src="http://goo.gl/EqfJ0L"> 
</body> 
</html>

來源

2014-03-13 Sagi_Avinash_Varma

。在你的代碼一個巨大的，巨大的，巨大的性能殺手：

document.body.innerHTML += "<div class='point'></div>";

這需要你整個文檔，它扔了出去，只是插入一切回來。這太可怕了！記住這一切，永遠不要這樣做！ ;）

記住基本規則，千萬不要通過.innerHTML添加元素！

正確的路要走如下：

// create your new div element 
var circleElement = document.createElement("div"); 
// add all the stuff needed 
circleElement.classList.add("point"); 
circleElement.style.borderColor = getRandomColor(); 
circleElement.style.left = x + 'px'; 
circleElement.style.top = y + 'px'; 
// now append the element to the body 
document.body.appendChild(circleElement);

這將創建一個單一的股利和很好插入它作爲身體的一個子元素。

此外可以減少通過引入門限得出的div的數目：

var lastX=0,lastY=0; 
function colors(event){ 
    var x=event.clientX; 
    var y=event.clientY; 
    if (Math.abs(lastX - x) + Math.abs(lastY - y) <= 10) return; 
    /* do stuff */ 
    lastX = x;lastY = y; 
}

作爲第三措施可以減小圖像的大小，以只保持掩模元件和僅在觸發鼠標移動圖像（因爲面具外的div無論如何都是隱藏的）。

最終，當達到一定數量時，可以殺死「舊」div元素。

我沒有包括這兩個最後的優化，但看看已經supersmooth example now！

來源

2014-03-13 09:16:12 Christoph

Javascript：內存高效的方式來做到這一點效果

回答

相關問題