Tôi đang cố gắng viết một ứng dụng vẽ đơn giản dựa trên html (mã đơn giản được đính kèm dưới đây). Tôi đã thử nghiệm điều này trên các thiết bị sau:Sự kiện chạm Javascript chậm trên Android
- iPad 1 và 2: Các công trình lớn
- ASUS T101 chạy Windows: Các công trình lớn
- Samsung Galaxy Tab: Vô cùng chậm và chắp vá - không sử dụng được.
- Lenovo IdeaPad K1: Cực kỳ chậm và chắp vá - không sử dụng được.
- Asus Transformer Prime: Độ trễ đáng chú ý so với iPad - gần với khả năng sử dụng.
Máy tính bảng Asus đang chạy ICS, các máy tính bảng Android khác đang chạy phiên bản 3.1 và 3.2. Tôi đã thử nghiệm bằng trình duyệt Android chứng khoán. Tôi cũng đã thử Android Chrome Beta, nhưng điều đó thậm chí còn tồi tệ hơn.
Dưới đây là một đoạn video trong đó chứng tỏ vấn đề: http://www.youtube.com/watch?v=Wlh94FBNVEQ
Câu hỏi của tôi là tại sao các máy tính bảng Android để làm chậm? Tôi đang làm điều gì đó sai hoặc là một vấn đề kế thừa với hệ điều hành Android hoặc trình duyệt, hoặc có bất cứ điều gì tôi có thể làm về nó trong mã của tôi?
multi.html:
<html>
<body>
<style media="screen">
canvas { border: 1px solid #CCC; }
</style>
<canvas style="" id="draw" height="450" width="922"></canvas>
<script class="jsbin" src="jquery.js"></script>
<script src="multi.js"></script>
</body>
</html>
multi.js:
var CanvasDrawr = function(options) {
// grab canvas element
var canvas = document.getElementById(options.id),
ctxt = canvas.getContext("2d");
canvas.style.width = '100%'
canvas.width = canvas.offsetWidth;
canvas.style.width = '';
// set props from options, but the defaults are for the cool kids
ctxt.lineWidth = options.size || Math.ceil(Math.random() * 35);
ctxt.lineCap = options.lineCap || "round";
ctxt.pX = undefined;
ctxt.pY = undefined;
var lines = [,,];
var offset = $(canvas).offset();
var eventCount = 0;
var self = {
// Bind click events
init: function() {
// Set pX and pY from first click
canvas.addEventListener('touchstart', self.preDraw, false);
canvas.addEventListener('touchmove', self.draw, false);
},
preDraw: function(event) {
$.each(event.touches, function(i, touch) {
var id = touch.identifier;
lines[id] = { x : this.pageX - offset.left,
y : this.pageY - offset.top,
color : 'black'
};
});
event.preventDefault();
},
draw: function(event) {
var e = event, hmm = {};
eventCount += 1;
$.each(event.touches, function(i, touch) {
var id = touch.identifier,
moveX = this.pageX - offset.left - lines[id].x,
moveY = this.pageY - offset.top - lines[id].y;
var ret = self.move(id, moveX, moveY);
lines[id].x = ret.x;
lines[id].y = ret.y;
});
event.preventDefault();
},
move: function(i, changeX, changeY) {
ctxt.strokeStyle = lines[i].color;
ctxt.beginPath();
ctxt.moveTo(lines[i].x, lines[i].y);
ctxt.lineTo(lines[i].x + changeX, lines[i].y + changeY);
ctxt.stroke();
ctxt.closePath();
return { x: lines[i].x + changeX, y: lines[i].y + changeY };
},
};
return self.init();
};
$(function(){
var drawr = new CanvasDrawr({ id: "draw", size: 5 });
});
Có gì sai với $ .each() của jQuery để liệt kê một bộ sưu tập? – simbolo
Nếu bạn đang làm điều gì đó hiếm khi xảy ra, như sau một domReady hoặc pageResize, thì không có gì sai với $ .each(). Tuy nhiên, nếu bạn đang thực hiện một hoạt ảnh, $ .each() quá chậm. Nó là một bao vây, do đó, nó đã thiết lập một đối tượng, làm một số crud, sau đó loại bỏ các đối tượng. Zakas đưa ra một lời giải thích tốt trong bài thuyết trình của mình cho các lập trình viên của Google (xem ở trên). – mrbinky3000
Cảm ơn, tôi đã xem xét một số kết quả jsPerf (http://jsperf.com/jquery-each-vs-regular-for-vs-optimized-for-vs-foreach/3) ví dụ: $ .each có vẻ như chậm hơn nhiều so với sử dụng các phương thức JavaScript gốc. – simbolo