网页的渲染

网页的渲染

• 浏览器在渲染页面时做了哪些事?
  - 1.加载页面的html和css源码
  - 2.html转换为DOM，css转换为CSSOM
  - 3.将DOM和CSSOM构建成一棵渲染树
  - 4.对渲染树进行reflow(回流、重排)(即计算元素位置)
  - 5.对网页进行绘制repaint(重绘)
• 渲染树(Render Tree)
  - 1.从根元素开始检查可见元素，以及他们的样式
  - 2.忽略不可见元素(display: none) 注意：visibility:hidden的元素会被加入到渲染数，因为它只是隐藏，并非不展示，它在网页中还是要占位的
  - 3.对所有的可见元素进行样式匹配
• 重排、回流(reflow)
  - 1.计算渲染树中元素的大小和位置
  - 2.当页面中的元素大小或位置发生变化时，浏览器就会对页面进行重排(回流）
  - 3.重排一定会引起重绘
  - 4.重排也不可避免，但是重排应尽量减少，重排是对系统资源耗费很大的操作，重排次数过多后会导致网页显示性能下降
  - 如何减少重排？
  - 可以通过修改class来间接修改样式，从而减少重排次数
  - 在现代前端的框架中，这些东西都已经被优化过了(虚拟DOM)! 因此使用Vue、React这些框架进行开发时，几乎不用考虑这些问题，唯独需要注意的是尽量减少在框架中直接操作原生DOM的
• 重绘(repaint)
  - 1.绘制页面
  - 2.当页面发生变化时，浏览器就会对页面进行重绘
  - 3.重绘不可避免