Mobile Safari trên iOS treo trên các trang lớn

Question

Tôi gặp sự cố khi Safari trên thiết bị di động gặp sự cố khi tải và thao tác DOM bằng jQuery khi các trang quá lớn.

Tôi gặp vấn đề tương tự trên cả iPhone và iPad.

Cách tốt nhất để khắc phục sự cố các trang trên thiết bị di động để tìm lỗi là gì? Có bất kỳ sự cố đã biết nào có thể làm hỏng Mobile Safari không?

Answer 1

Tôi thực sự đã tìm thấy sự cố. Nó không phải với JS như tôi nghĩ, nhưng với CSS. Tôi đã thêm lớp để làm cho quá trình chuyển đổi CSS bị mờ dần trong một số yếu tố. Đối với người dùng nặc danh, các thành phần này có display: none; và có thể không bao giờ chạy chuyển đổi độ mờ đục.

Điều kỳ lạ là quá trình chuyển đổi diễn ra chính xác hai yếu tố. Vì vậy, tại sao điều này chỉ sụp đổ trên các chủ đề dài với hơn 100 ý kiến?

Vì vậy, điểm mấu chốt là: -webkit-transition đã rơi trang trên safari di động.

Answer 2

Vấn đề chính với bất kỳ ứng dụng iOS nào là sử dụng bộ nhớ. Vì vậy, có khả năng là các trang của bạn đang sử dụng quá nhiều bộ nhớ.

Mobile Safari sử dụng một số kỹ thuật thông minh để không phải toàn bộ trang phải nằm trong bộ nhớ tại bất kỳ thời điểm nào, chỉ một phần của nó. Có thể bạn có thể kiểm tra xem có bất kỳ thứ gì trong trang của bạn đánh bại cơ chế này hay không hoặc làm cho nó kém hiệu quả hơn.

Trong mọi trường hợp, để đưa ra nhiều đề xuất điểm hơn, nhiều thông tin hơn về trang của bạn sẽ thực sự tuyệt vời.

Nhân tiện, bạn có thể có một số gợi ý từ nhật ký sự cố mà thiết bị lưu trữ. Hãy kiểm tra để xem nếu bạn có thể tìm thấy nó trong Settings:

1. chung
2. Về
3. Diagnostics & Cách sử dụng
4. Diagnostics & Cách sử dụng dữ liệu

Nếu đó là một vấn đề bộ nhớ, bạn nên tìm một cái gì đó như "tín hiệu (0)"; không chắc chắn nếu điều này chỉ có thể có nghĩa là "bị giết do sử dụng bộ nhớ", nhưng tôi thường lấy điều này cho các cấp khi tôi tìm thấy một tín hiệu (0).

Nếu không, nó có thể cho bạn biết những gì là sai ...

Hy vọng điều này sẽ hữu ích.

Answer 3

Có cả giới hạn bộ nhớ và giới hạn thời gian thực thi Javascript, mặc dù hơi mờ về cách bạn thực sự có thể đạt đến giới hạn đó. Các báo cáo thường gặp có một trang có kích thước lớn hơn 10MB sẽ có vấn đề và việc thực thi Javascript được giới hạn trong 10 giây.

Xem Apple's documentation để biết thêm thông tin.

Answer 4

Đã xảy ra sự cố tương tự, đối với tôi đó là -webkit-transform: translateZ(0); gây ra sự cố Safari.

Answer 5

Tôi biết câu hỏi này đã được trả lời thành công nhưng tôi chỉ muốn đưa lăm cent của tôi trong quá như tôi đã đập đầu tôi vào tường hơn một này khá một vài lần:

Như hầu hết câu trả lời đã chỉ ra nó đã thường đi xuống đến vấn đề bộ nhớ. Hầu như bất cứ điều gì có thể là bit cuối cùng mà cuối cùng lời khuyên trên "đống bộ nhớ" giống như một translateZ hoặc bất cứ điều gì khác.

Tuy nhiên theo kinh nghiệm của tôi, nó không liên quan gì đến lệnh CSS (hoặc JS) thực tế cụ thể. Nó chỉ xảy ra là sự chuyển đổi cuối cùng là quá nhiều.

Điều gì có xu hướng giúp đỡ tôi rất nhiều là giữ bất kỳ nội dung nào không hiển thị tại thời điểm này theo display: none. Điều này nghe có vẻ thô sơ nhưng thực sự là lừa. Đó là một cách đơn giản để báo cho trình kết xuất của trình duyệt rằng bạn không cần phần tử này vào lúc này và do đó giải phóng bộ nhớ. Điều này cho phép bạn tạo các thanh cuộn dọc dài hàng dặm với tất cả các loại hiệu ứng 3D miễn là bạn ẩn các phần tử mà bạn không sử dụng tại thời điểm này.

Answer 6

Tôi gặp sự cố tương tự, trang web hoạt động như một sự quyến rũ trên thiết bị Android và bị lỗi trên iOS (iphone và trình mô phỏng).

Sau nhiều nghiên cứu (sử dụng ios_webkit_debug_proxy), tôi phát hiện ra rằng sự cố đã được kết nối với sự kiện sẵn sàng của jQuery.

Thêm chút thời gian chờ đã giải quyết được sự cố. Ứng dụng của tôi cũng đang sử dụng iframe.

$(document).ready(function() { 
    window.setTimeout(function() { ready(); }, 10); 
}); 

Answer 7

Gần đây, tôi gặp sự cố khi gặp sự cố Safari trên trang web có chứa nhiều hình ảnh (30+ là đủ) và một vài biến đổi cho menu. Sau rất nhiều thử nghiệm và lỗi, tôi đã giải quyết với một giải pháp tương tự như những gì LinkedIn làm, nhưng đối với cuộn vô hạn bằng cách sử dụng angularjs. Tôi đã sử dụng requestAnimFrame và hai div mở rộng/thu nhỏ (với thuộc tính kiểu js) ở đầu và cuối danh sách để xóa tất cả các vùng chứa hình ảnh (với các thứ khác chồng lên trên) ngoại trừ một số khung nhìn. Hiệu suất cuộn (bản địa, không có js) là tốt và tiêu thụ bộ nhớ được kiểm tra.