请简述浏览器渲染页面的过程,并给出下方script代码中对哪些CSS属性的"修改"会触发重绘(repaint)和重排(reflow)?
<style>.sg-container {padding: 10px;margin-bottom: 10px;width: 100px; height: 100px;}</style>
<div class="sg-container">
<p style="line-height:20px">2019搜狗校园招聘</p>
<script>
document.querySelector('p').style.cssText +='height:10px; line-height:24px;font-size:20px;visibility:hidden;background-color:#00f;border:1px solid #f00';
</script>
</div>