Raphael.js menyebabkan kemacetan tata letak sinkron paksa

Saya memantau waktu buka halaman untuk situs saya di chrome (menggunakan Timeline), dan mendapat ratusan peringatan yang mengatakan "Tata letak sinkron yang dipaksakan adalah kemungkinan hambatan kinerja" untuk semua panggilan Raphael.js:

masukkan deskripsi gambar di sini

Saya tidak tahu cara memperbaikinya :/

Ada ide di mana mencarinya?

Inilah cara saya biasanya membuat teks pada halaman:

currentPaper.text(width,height,"text")
            .attr({opacity:.8, fill: "#333", 'font-size':10})
            .id = "someId";

//Or, to be exact:

currentPaper.text(x_pos+(width/2), 
                  y_pos-height/8, 
                  lopaLayoutArray.x[s].y1[r].y2[x])
            .attr({opacity:.8, fill: "#333", 'font-size':(10*size)})
            .id = seatName+"-textLabel";

Terima kasih!


javascript jquery raphael
person Katie    schedule 19.02.2015    source sumber
comment
Apakah mungkin untuk memasukkan lebih banyak kode Anda? sulit untuk mendapatkan gambaran tentang apa yang mungkin salah hanya dari satu pernyataan   -  person konkked    schedule 19.02.2015
comment
@konkked Mungkin! Saya tidak yakin di mana mencarinya :( Saya berharap akan ada semacam nomor baris di Timeline, tetapi itu hanya menunjuk ke perpustakaan Raphael :/ Nomor baris LopaView adalah baris yang saya sertakan dalam pertanyaan. Lakukan Anda tahu apa yang harus saya cari? Apakah ada fungsi Raphael.js yang harus saya hindari?   -  person Katie    schedule 19.02.2015
comment
Satu-satunya hal yang dapat saya pikirkan adalah Anda mengikat logika Anda untuk manipulasi di masa depan dengan hasil tata letak dom sebelumnya, secara efektif membuat operasi sinkron, mungkin jika Anda memberikan dari mana Anda mendapatkan variabel lopaLayoutArray dapat membantu mencari tahu dengan tepat di mana ini sedang terjadi   -  person konkked    schedule 20.02.2015
comment
@konkked Hmm.. ya saya rasa saya harus mengubah kode saya sedikit. Saya melakukan riset dan ini disebut Layout Thrashing dan itulah yang terjadi: blog.idrsolutions.com/2014/08/   -  person Katie    schedule 20.02.2015
comment
Ya, itulah yang saya katakan kecuali mereka benar-benar tahu apa yang mereka bicarakan, bisakah saya mengubah komentar saya menjadi jawaban, meskipun itu tidak 100% benar memiliki ide dasar dan tidak ada orang lain yang memposting jawaban   -  person konkked    schedule 21.02.2015
comment
@konkked tentu, jika Anda mau! :)   -  person Katie    schedule 21.02.2015

Jawaban (1)


arrow_upward
6
arrow_downward

Masalah:

Masalahnya disebut "Layout Thrashing" dan terjadi karena browser mencoba untuk segera menyegarkan/menggambar ulang setiap kali Raphael menggambar.

Misalnya, hal ini akan menyebabkan kerusakan tata letak:

var a = document.getElementById('element-a');
var b = document.getElementById('element-b');

a.clientWidth = 100;
var aWidth = a.clientWidth;

b.clientWidth = 200;
var bWidth = b.clientWidth;

"Dalam contoh sederhana ini, browser akan memperbarui seluruh tata letak dua kali. Hal ini karena setelah menyetel lebar elemen pertama, Anda meminta untuk mengambil lebar elemen. Saat mengambil properti css, browser mengetahui bahwa ia memerlukan data yang diperbarui, sehingga lalu pergi dan memperbarui seluruh pohon DOM di memori. Hanya kemudian, ia akan melanjutkan ke baris berikutnya, yang akan segera menyebabkan pembaruan lain karena alasan yang sama."

Hal ini dapat dengan mudah diperbaiki dengan mengubah urutan kode, sebagai berikut:

var a = document.getElementById('element-a');
var b = document.getElementById('element-b');

a.clientWidth = 100;
b.clientWidth = 200;

var aWidth = a.clientWidth;
var bWidth = b.clientWidth;

"Sekarang, browser akan memperbarui kedua properti satu demi satu tanpa memperbarui pohonnya."

Sumber:

https://blog.idrsolutions.com/2014/08/beware-javascript-layout-thrashing/

http://www.codeproject.com/Articles/758790/Debugging-and-solving-the-Forced-Synchronous-Layou

http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-Performance-making-your-javascript-slow/

https://dev.opera.com/articles/efisien-javascript/?page=3#reflow

Solusi:

Salah satu cara untuk memperbaikinya (cara yang sangat cepat dan kotor) adalah dengan menyembunyikan() div yang Anda gambar, lalu, setelah selesai, menampilkan() div tersebut . Saya telah mendapat untung-untungan dalam hal ini dengan Raphael, dan ini menjadi aneh. Namun lebih cepat...

"Ketika suatu elemen memiliki gaya tampilan yang tidak disetel, elemen tersebut tidak perlu dicat ulang, meskipun isinya diubah, karena elemen tersebut tidak ditampilkan. Ini dapat digunakan sebagai keuntungan. Jika beberapa perubahan perlu dilakukan pada sebuah elemen elemen atau isinya, dan tidak mungkin untuk menggabungkan perubahan ini menjadi satu pengecatan ulang, elemen dapat diatur ke display:none, perubahan dapat dilakukan, kemudian elemen dapat diatur kembali ke tampilan normalnya."

Inilah hasilnya:

masukkan deskripsi gambar di sini

Cara ini berhasil untuk saya!

person Katie    schedule 20.02.2015
comment
Tidak apa-apa, ini adalah jawaban yang jauh lebih baik daripada yang bisa saya berikan - person konkked; 23.02.2015