dom刷新问题再探讨

最新推荐文章于 2023-06-24 23:51:13 发布

RickzdWen

最新推荐文章于 2023-06-24 23:51:13 发布

阅读量3.6k

点赞数 1

分类专栏： js 文章标签： javascript引擎 js引擎多线程 setTimeout

本文链接：https://blog.csdn.net/wind__snow/article/details/16357981

版权

在JavaScript中更新DOM后，如果接着执行长时间运行的代码，DOM变化不会立即显示，需等待所有JS执行完毕。这是因为浏览器为了优化，会延迟执行DOM更新。为了解决这个问题，可以使用alert阻断JS线程，但这种方法影响用户体验。另一种方法是利用setTimeout(fn, 0)，这能让浏览器在当前任务结束后立即更新DOM。尽管这种方法更可接受，但在实际应用中仍需考虑最佳实践。" 119930103,11363049,Mr.Bullet游戏源代码解析,"['游戏开发', 'Unity3D', 'C#编程', '物理引擎', '游戏设计']

摘要由CSDN通过智能技术生成

之前写过一篇关于dom刷新的东西，感觉写得不太好，重新梳理一下，又写了一篇

用js更新dom是web系统中经常出现的场景，但是有时候可能会遇到这样的情况，在更新dom之后还执行了一段运行时间可能比较长的js代码，这时你会发现，你更新的dom不会立刻在页面显现出来，而要等所有js都执行完之后才能出现。以最近支持的一个项目为例，点击页面一个按钮后执行一段复杂的计算逻辑，虽然现代浏览器执行js的效率比以往大大提升，但你要相信公司的业务总是存在着一些变态的计算（不排除开发人员的js写得不够有效率所致，但此处暂且不考虑这些因素），在以速度见长的chrome浏览器上尚且需要几秒时间，更别说令人头疼的IE。可想而知，点击按钮后让客户无所适从地等待浏览器缓过劲来是多么糟糕的体验，所以，开发人员想到需要在执行计算之前在页面产生一些提示，执行完了之后去掉提示，于是，设计的代码逻辑如下：

function work(){
     showTip(); // 这里对dom进行了更新，show出提示信息或弹出模态窗口之类
	 calculate();  //计算逻辑
	 hideTip();  // 把提示信息隐藏起来，同样有对dom的改动
}

这段逻辑看上去完全没有问题，但是当你点击按钮后你会发现什么提示信息也没有出来，无论你用哪种浏览器，这是为什么?根据stackoverflow上的一段解释，“Mozilla (maybe IE as well) will cache/delay executing changes tothe DOM which affect dis