网页的重绘与重排以及重构

• 重绘

  • 重绘是一个元素外观的改变所触发的浏览器行为，例如改变 visibility、outline、背景色等属性。 浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘不会带来重新布局，并不一定 伴随重排。

• 重排

  • 重排是更明显的一种改变，可以理解为渲染树需要重新计算。下面是常见的触发重排的操作：

  1. DOM 元素的几何属性变化
  2. DOM 树的结构变化
  3. 获取某些属性
  4. 此外，改变元素的一 些样式，调整浏览器窗口大小等等也都将触发重排。 注：重排对性能有很大的影响

• 重构

  • 页面重构：编写 CSS、让页面结构更合理化，提升用户体验，实现良好的页面效果和提升性能。
  • 网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行 为。也就是说是在不改变 UI 的情况下，对网站进行优化，在扩展的同时保持一致的 UI。
    对于传统的网站来说重构通常是：

  • 表格(table)布局改为 DIV+CSS
  • 使网站前端兼容于现代浏览器(针对于不合规范的 CSS、如对 IE6 有效的)
  • 对于移动平台的优化
  • 针对于 SEO 进行优化
  • 深层次的网站重构应该考虑的方面：

  1. 减少代码间的耦合
  2. 让代码保持弹性
  3. 严格按规范编写代码
  4. 设计可扩展的 API
  5. 代替旧有的框架、语言(如 VB)
  6. 增强用户体验
  7. 优化响应速度

  • 速度的优化重构：

  1. 压缩 JS、CSS、image 等前端资源(通常是由服务器来解决)
  2. 程序的性能优化(如数据读写)
  3. 采用 CDN 来加速资源加载
  4. 对于 JS DOM 的优化
  5. HTTP 服务器的文件缓存