作者awpadam (adam!)
看板Web_Design
標題Re: [問題] 請問這個是跟js和css的讀取順序有關嗎
時間Wed Feb 14 10:01:54 2018
各位前輩好，我是原PO
我覺得我的問題可以簡化如下
<body>
<div id="test"
style="height:100;width:100;position:absolute;background-color: red">
<script>
divobj = document.getElementById("test");
divobj.style.left = 500;
for( var i = 0 ; i < 1000000000 ; i++ ){
}
</script>
</body>
會發現圖片並不會先往右邊移動，然後才開始跑迴圈
先是先跑完迴圈 大概等個幾秒，圖片才往右移動
請問是否有什麼方法，可以讓圖片先往右移動，然後才跑迴圈嗎
※ 引述《awpadam (adam!)》之銘言：
: 小弟應徵某公司的C程式設計師
: 然後進了公司，就默默的開始寫js了...
: 完全不熟，現在遇到一個狀況不知道是什麼原因
: 跪求板上高手神人指教
: 我有一個html頁 名叫 background.html
: background.html有一個video tag ，裡面正在播放影片
: background.html還有一個iframe
: iframe裡面可能會讀取a.html 或 b.html
: 這兩頁都需要播放影片
: 於是background.html的那個video tag就擔負起播放影片的責任
: 進入a.html時，裡面的js會把 parent 的video tag設成他要的
: 大小、位置，語法大概是這樣
: parent.videoDOM.style.height = 320 ;
: parent.videoDOM.style.width = 480 ;
: 之類的
: 進入b.html時也會做類似的事情，把video tag 設成他要的大小和位置
: 在a.html及b.html的 unload 事件發生時，會先把video tag 的css設成 隱藏
: parent.videoDOM.style.display = "none"
: 然後在a.html及b.html的 onload 事件發生時，會把隱藏取消
: 現在情況是 b.html裡面含有許多大量耗資源的js計算
: 在a.html 使用者點擊換頁按鈕，要把分頁跳到b.html時
: 那個video tag 會卡在畫面上，似乎在等b.html把js算完
: 卡了一小段時間後，才不見，然後被b.html重設大小和位置
: 我覺得會不會是 在 a.html的unload事件發生，把video設成隱藏之後
: 在進入b.html的時候，會先讀取完所有js的資料，才開始解析css的東西
: 所以才會有這種情形
: 不知道我猜的對不對
: 如果我猜對的話，請問我這種情況，分頁共用母頁的一個video tag
: 且其中有些分頁的js計算很慢的話，我應該怎麼讓這個video tag
: 至少不要卡在畫面上呢?
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 61.216.7.85
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1518573716.A.320.html
→ tino1991: 程式碼可以找網頁來放比較完整 02/14 11:06
→ tino1991: 稍微拼湊一下 程式太短看不出問題 02/14 11:08
hihi，我這個就是完整程式碼囉，你把他用成html 貼上來執行
就會發現 圖片不是先跑到右邊才開始跑迴圈
而是先開始跑迴圈，跑完之後才把圖片放到右邊
※ 編輯: awpadam (61.216.7.85), 02/14/2018 12:07:18
推 Kenqr: setTimeout，在callback裡才執行迴圈 02/14 12:12
這樣就可以了欸，請問為什麼會這樣呢?
※ 編輯: awpadam (61.216.7.85), 02/14/2018 12:17:02
推 dannypsnl: 因為那樣迴圈就到背景去執行了(概念上啦)，詳細的你要 02/14 13:06
→ dannypsnl: 看async相關的文章 02/14 13:06
推 Kenqr: 我的理解是js執行到一半的時候，瀏覽器不會更新畫面。 02/14 16:04
→ Kenqr: 放在setTimeout的部份，算是另一個thread，不會連續執行， 02/14 16:04
→ Kenqr: 所以中間有空檔可以更新畫面。 02/14 16:05
→ Kenqr: 至於執行到一半不更新畫面的理由，應該是效能考量。 02/14 16:06
→ dannypsnl: 對，樓上說的比較清楚 02/14 17:48
謝謝你們的解釋^^
※ 編輯: awpadam (123.193.141.167), 02/14/2018 19:48:02
→ jmlntw: 用 requestAnimationFrame() 02/14 19:54