dom刷新问题再探讨

之前写过一篇关于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

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值