我試圖實現從google code repository的大規模殺傷性武器編輯器（如計算器上用這裏的一個），我遇到的問題。什麼操作和事件導致瀏覽器重新繪製整個視口？
當你鍵入到textarea的，它在瀏覽器中踢假兩個噴漆操作。一個重繪textarea本身，一個重繪預覽面板。您可以通過打開Chrome檢查器並使用時間軸選項卡在問題字段中鍵入一些文本時觀察此情況。
但我的網頁上，瀏覽器重新繪製時，它必須做這些噴漆操作整個視口。這需要更長的時間......我的頁面上的每個繪畫操作的時間大約爲100ms，而在stackoverflow上的時間大約爲1ms。
在我的測試，這似乎是CSS相關的...我可以通過剝離所有樣式重新在大規模殺傷性武器的新示例頁面此行爲。
我的頁面尚未公開，但希望我可以用通用的方式提問......什麼會導致瀏覽器重新繪製一個dom變化的整個視口，而不是重新繪製那部分dom？
什麼我談論這裏的景色。 
AHA影響其他元素！啊 - effing -ha！ （原諒熱情）
的問題是，我用的箱陰影CSS屬性框架我的網頁。當瀏覽器需要計算每次更改時的陰影（〜100ms vs〜1ms）時，重新刷新/重新繪製內容需要更長的時間。當使用wmd-editor時，你會在每個按鍵上更新dom，這樣差別就會增加。當瀏覽器最大化時，效果最爲誇張，因爲它會重新計算整個視口。
因此，也許這就是計算器不具備任何網頁上的框架或陰影...只是乾淨的邊緣的原因之一。
你可以明白我的意思，在這個example page。在Firefox中打開它，最大化頁面，然後開始輸入。現在使用firebug刪除body元素的box-shadow屬性，關閉firebug備份並重試。巨大差距。
感謝Balpha爲他的評論，這是即期。
更新：再看看我給出的示例鏈接，我不再注意到Chrome或Firefox中的任何延遲。我認爲這是因爲瀏覽器正在變得更好。歡呼瀏覽器大戰推動網絡向前！ – 2012-04-03 14:36:10
檢查此演示文稿，圍繞滑板70和下一人。他們解釋了一些可能導致迴流和重漆的原因。
http://www.slideshare.net/nzakas/high-performance-javascript-webdirections-usa-2010
如果沒有具體的代碼/ CSS這個問題很難回答，但我可以說的東西一般像，如果改變的影響在頁面其他元素的片段DOM :)
還要注意的是，在stackoverflow大規模殺傷性武器，當你輸入一個換行符時，它也會導致整個視口重新繪製。所以也許它與你的所見即所得的區域沒有明確的寬度和高度有關？我猜，如果你給他們的寬度和高度，他們不會在頁面
是的，正在研究一個我可以發佈的簡單示例。我不認爲你發佈的演示文稿能夠解決這個問題，因爲這不是許多dom變化的問題，這些變化消除了許多重新流失。這是一個dom注射需要的時間比其迴流更長的問題。 – 2011-02-24 22:52:21
你看到的在*所有*瀏覽器？另外，編輯器中或附近是否存在透明或陰影？任何不透明度<1的東西總是非常緩慢。 – balpha 2011-02-25 07:12:05
謝謝balpha，您的評論是點亮的。這是身體元素的箱形陰影。令人失望的，因爲它意味着我需要改變我的整個設計只是爲了適應這種功能。但真的很高興找到了問題。我正在努力弄清楚這一點。 – 2011-02-25 16:47:07