关于javascript脚本修改html页面，未加载完成前出现信息延迟问题

问题：最近维护一个产品官网，需要将所有产品降价200元，使用javascript函数修改后，会出现信息延迟问题，即在页面加载过程中出现旧的价格，页面加载完成后才会运行js脚本，修改为新的价格。

目标：我想在页面加载的时候不再出现旧的价格。

解决方法：
1.在css中给包裹价格的标签，这里是<strong>标签，添加 visibility: hidden；（不选择display: none;的原因是，这样在页面加载的时候，旧的价格会暂时隐藏，但所占空间仍在，后面修改的时候不会引起reflow和repaint，影响页面加载速度。）
2.在修改价格的函数下面增加一条，element.style.visibility = “visible”;，这样在价格修改完成之后就会直接显示新的价格。

解决过程中遇到的问题：
1.之前看到一个方法，即给body添加display:none;，在所有js脚本执行完之后执行修改body样式为display: block;的函数，这样所有的修改在页面显示之前进行完毕，避免多次回流和重绘，提升页面响应速度。但是一是我要修改的页面有很多图片，二是公司网速也慢，这样在加载过程中会长时间持续空白页面。
2.我试图给包含产品列表的div添加visibility: hidden;，但在页面加载时并没有起到隐藏效果，我在网上搜了下，原因是如果父元素设置了visibility: hidden;，子元素设置了visibility: visible;，那么子元素会正常显示。由于产品列表嵌套了多层盒子，为防止以后的修改影响到这次修改，所以最终我选择了直接给包含价格的strong标签添加visibility: hidden;。

参考文章：
https://coolshell.cn/articles/9666.html
http://www.zhangxinxu.com/wordpress/2012/02/css-overflow-hidden-visibility-hidden-disabled-use/