一个比较复杂的有关问题，关于JS修改样式在Chrome下的性能优化-JavaSript-爱易网页

一个比较复杂的有关问题，关于JS修改样式在Chrome下的性能优化

日期：2014-05-16　浏览次数：20449 次

求助一个比较复杂的问题，关于JS修改样式在Chrome下的性能优化

本帖最后由 MapleRecall 于 2014-01-09 07:22:50 编辑

这两天无聊稍稍自学实验了一下用JS根据鼠标位置修改元素样式，出来的东西在IE11和Firefox中很流畅，但是在Chrome下十分卡顿，不清楚是哪个环节降低了性能，以下是网页代码，由于上传不了附件，图片在下面直接附出
图片和网页路径相同，图片名称自上而下为0.jpg、1.png、2.png、3.png



<html>

<head>

<style>

*{

margin:0;

}

img{

position:fixed;

}

</style>

</head>

<body onmousemove="set_event(event)">

<img id="p0" src="0.jpg" width=120% />

<img id="p1" src="1.png" width=120%/>

<img id="p2" src="2.png" width=120%/>

<img id="p3" src="3.png" width=30% style="right:32px; bottom:32px;"/>

<div id="pp" style="text-shadow:0 0 20px #000;top:44%;color:#fff;position:fixed; width:100%;text-align: center;font-family:微软雅黑;"><p>MAPLE<b>RECALL</b></p></div>

</body>



<script type="text/javascript">



 var vP0 = 0.1

 var vP1 = 0.05

 var vP2 = 0.1

 var vP3 = 0.2

 var iP0 = document.getElementById("p0");

 var iP1 = document.getElementById("p1");

 var iP2 = document.getElementById("p2");

 var iP3 = document.getElementById("p3");

 var iPP = document.getElementById("pp");

 var i=window.pageYOffset?window.pageYOffset:window.document.documentElement.scrollTop;

 var j=window.pageYOffset?window.pageYOffset:window.document.documentElement.scrollTop;

 var w=window.innerWidth?window.innerWidth:window.document.documentElement.clientWidth;

 var h=window.innerHeight?window.innerHeight:window.document.documentElement.clientHeight;

 var x = 0;

 var y = 0;

function set_event(event){

 i=window.pageYOffset?window.pageYOffset:window.document.documentElement.scrollTop;

 j=window.pageYOffset?window.pageYOffset:window.document.documentElement.scrollTop;

 w=window.innerWidth?window.innerWidth:window.document.documentElement.clientWidth;

 h=window.innerHeight?window.innerHeight:window.document.documentElement.clientHeight;

 x = event.clientX;

 y = event.clientY;

}

function show_coords(){



iP0.style.left = (x*vP0-w*0.2-parseFloat(iP0.style.left))*0.1+parseFloat(iP0.style.left)||0;

iP0.style.top =(y*vP0-h*0.2-parseFloat(iP0.style.top))*0.1+parseFloat(iP0.style.top)||0;



iP1.style.left = (x*vP1-w*0.1-parseFloat(iP1.style.left))*0.1+parseFloat(iP1.style.left)||0;

iP1.style.top =(y*vP1-h*0.1-parseFloat(iP1.style.top))*0.1+parseFloat(iP1.style.top)||0;



iP2.style.right =(x*vP2-w*0.2)*0.1+parseFloat(iP2.style.right)*0.9||0;

iP2.style.bottom =(y*vP2-h*0.35)*0.1+parseFloat(iP2.style.bottom)*0.9||0;



iP3.style.right =(x*vP3+y*vP3*1.1)*0.1+parseFloat(iP3.style.right)*0.9||0;

iP3.style.bottom =(y*vP3*0.6+x*vP3*0.5)*0.1+parseFloat(iP3.style.bottom)*0.9||0;





iP3.style.webkitTransform = "rotate("+y/h+"rad) scale("+(1-y/h*0.8)+","+(1-y/h*0.8)+")";

iP3.style.transform = "rotate("+y/h+"rad) scale("+(1-y/h*0.8)+","+(1-y/h*0.8)+")";



iPP.style.fontSize = h*0.06;

iPP.style.opacity = x/w*1.5+0.1;

iPP.style.left =(x*vP3*0.25)*0.1+parseFloat(iPP.style.left)*0.9||0;;

iPP.style.color="rgb("+parseFloat(x*x*x/w/w/w*255)+","

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

一个比较复杂的有关问题，关于JS修改样式在Chrome下的性能优化

相关资料更多>

推荐阅读更多>