Re: [问题] 请问这个是跟js和css的读取顺序有关吗

楼主: awpadam (adam!)   2018-02-14 10:01:54
各位前辈好,我是原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
: 至少不要卡在画面上呢?
作者: tino1991 (深白)   2018-02-14 11:06:00
程式码可以找网页来放比较完整像 https://codepen.io/tinolove81/pen/yvoKNb稍微拼凑一下 程式太短看不出问题
作者: Kenqr (function(){})()   2018-02-14 12:12:00
setTimeout,在callback里才执行循环
作者: dannypsnl (秦书)   2018-02-14 13:06:00
因为那样循环就到背景去执行了(概念上啦),详细的你要看async相关的文章
作者: Kenqr (function(){})()   2018-02-14 16:04:00
我的理解是js执行到一半的时候,浏览器不会更新画面。放在setTimeout的部份,算是另一个thread,不会连续执行,所以中间有空档可以更新画面。至于执行到一半不更新画面的理由,应该是效能考量。
作者: dannypsnl (秦书)   2018-02-14 17:48:00
对,楼上说的比较清楚
作者: jmlntw (吉米林)   2018-02-14 19:54:00
用 requestAnimationFrame()
作者: art1 (人,原来不是人)   2018-02-15 08:47:00

Links booklink

Contact Us: admin [ a t ] ucptt.com