IE9拉斐尔动画问题答案

【问题标题】：IE9 raphael animation issueIE9拉斐尔动画问题
【发布时间】：2012-07-12 11:37:33
【问题描述】：

我在 IE9 中显示正确的 javascript 时遇到问题。其他浏览器（Firefox、Opera、Chrome、Safari）运行良好，但 IE 中的动画不流畅。例如看到这条线可以从左到右拖动（链接在帖子末尾）。

javascript代码：

var w = 1250;
var h = 650;

var drawing = Raphael("obrazek",w,h);                                                 

var Ax = 50
var Ay = 50
var Ey = 500

var w = 1250;
var h = 650;

var drawing = Raphael("obrazek",w,h);                                                 

var Ax = 50
var     function onDragMove(dx,dz) {
    this.onDragUpdate(dx - (this.deltax || 0), dz - (this.deltaz || 0));
    this.deltax = dx;
    this.deltaz = dz;
}
function onDragStart() { this.deltax = this.deltaz = 0; }

function onDragStop() { this.onDragStop(); }


// line 1                 
var Ax
var line = drawing.path([["M",Ax,Ay],["L",Ax,Ey]]).attr({"stroke-width":3})
line.drag(onDragMove,onDragStart)
line.attr({"cursor":"move"})
line.onDragUpdate = function(dx,dz) {

Ax += dx
line.attr({"path":[["M",Ax,Ay],["L",Ax,Ey]]})

}

及对应的HTML：

<html>
    <head>
         <script src="raphael.js"></script>
    </head>
    <body>
        <div id="obrazek">
            <script src="ietest.js"></script>
        </div>
    </body>                
</html>

或在此处查看 IE9 中的问题并与 Chrome 进行比较：

http://mech.fsv.cvut.cz/~stransky/ietest/ietest.html

提前感谢您的帮助。

【问题讨论】：

标签： javascript animation internet-explorer-9 raphael doctype

【解决方案1】：

您的页面缺少 doctype，因此以 quirks 模式呈现。 IE9 在 quirks 模式下使用 VML 而不是 SVG，这可能会导致渲染速度变慢。只需将其添加到您的 html 的第一行：

<!DOCTYPE html>

但是，您的代码还有其他一些问题：

缺少分号。有一个good explanation 说明它可能有多危险。
变量重新声明和重新定义。
在处理鼠标移动或滚动等快速重复事件时，使用限制来避免重绘/重绘故障和性能问题是合理的。你可以阅读更多关于它的信息here。包含来自该站点的插件，并将您的 drag 绑定替换为以下内容：

line.drag($.throttle(30, onDragMove), onDragStart);

事实上，即使不指定 doctype 也可以大大提高渲染性能，但没有理由不完全指定。

【讨论】：

非常感谢！添加 DOCTYPE 完成了这项工作。