作者LinLaoDa (LaoDa)
看板Ajax
標題[問題] 瀏覽器畫面render的流程?
時間Tue May 5 18:42:14 2015
最近在想一個有趣的問題,
$(function(){
for(var i=0; i< 10000; i++){
$(".test").append("<div>"+i +"</div>");
console.log($(document).height());
}
})
以上是一段javascript append 10000個 div的程式碼,
在append後馬上印出document的高,
不過在跑迴圈時,
畫面還沒有完成繪製,
可是他的高卻一直有在變化,
想請問這是為什麼呢?
繪製網頁跟執行javascript是同個執行緒嗎?
麻煩各位板大可以告訴我,
謝謝
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 59.115.199.31
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Ajax/M.1430822536.A.1CB.html
1F：→ mmis1000: 重繪不一定要輸出到銀幕上阿，chrome是等js跑完再一並輸 05/05 18:56
2F：→ mmis1000: 出 05/05 18:57
3F：→ mmis1000: firefox看狀況，不過大部分時候是跟fps同步 05/05 18:57
4F：→ mmis1000: spec壓根兒沒規定到這一塊，所以別幹這種傻事 05/05 18:58
5F：→ mmis1000: 不對...firefox會同步也是少數狀況而已 05/05 18:59
6F：→ mmis1000: 如果用sync ajax時同時跑動畫，ff會有，chrome會沒畫面 05/05 19:00
7F：→ mmis1000: 完全是依實作而定 05/05 19:01
8F：→ leicheong: 在.load以recursive function方式跑應該就可以了吧? 05/05 23:21
9F：→ mmis1000: 如果你要他同時輸出到銀幕，請用setTimeout之類跑 05/06 01:08