作者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://webptt.com/cn.aspx?n=bbs/Web_Design/M.1518573716.A.320.html
1F：→ tino1991: 程式码可以找网页来放比较完整 02/14 11:06
3F：→ tino1991: 稍微拼凑一下 程式太短看不出问题 02/14 11:08
hihi，我这个就是完整程式码罗，你把他用成html 贴上来执行
就会发现 图片不是先跑到右边才开始跑回圈
而是先开始跑回圈，跑完之後才把图片放到右边
※ 编辑: awpadam (61.216.7.85), 02/14/2018 12:07:18
4F：推 Kenqr: setTimeout，在callback里才执行回圈 02/14 12:12
这样就可以了欸，请问为什麽会这样呢?
※ 编辑: awpadam (61.216.7.85), 02/14/2018 12:17:02
5F：推 dannypsnl: 因为那样回圈就到背景去执行了(概念上啦)，详细的你要 02/14 13:06
6F：→ dannypsnl: 看async相关的文章 02/14 13:06
7F：推 Kenqr: 我的理解是js执行到一半的时候，浏览器不会更新画面。 02/14 16:04
8F：→ Kenqr: 放在setTimeout的部份，算是另一个thread，不会连续执行， 02/14 16:04
9F：→ Kenqr: 所以中间有空档可以更新画面。 02/14 16:05
10F：→ Kenqr: 至於执行到一半不更新画面的理由，应该是效能考量。 02/14 16:06
11F：→ dannypsnl: 对，楼上说的比较清楚 02/14 17:48
谢谢你们的解释^^
※ 编辑: awpadam (123.193.141.167), 02/14/2018 19:48:02
12F：→ jmlntw: 用 requestAnimationFrame() 02/14 19:54