高性能WEB开发 页面呈现、重绘、回流。

高性能WEB开发是一个需要深入研究和掌握的领域，其中涉及到的大量知识技能和技术工具要求开发者有扎实的理论基础和丰富的实战经验。在这篇文章中，我们将着重讨论三个重要的主题：页面呈现、重绘和回流。这些主题与前端开发的性能相关，并且会影响用户对网站的使用体验。

一、页面呈现

页面呈现是指在浏览器中加载并显示网页的过程。在页面呈现的过程中，浏览器会将HTML、CSS、JavaScript等文件进行解析并渲染出页面。这个过程的速度和效率会对页面性能产生重大影响。

在提高页面呈现速度方面，有以下几个关键点：

1.减少HTTP请求数量

每一个HTTP请求都会带来网络延时，所以我们应该尽可能地减少HTTP请求数量。合并和压缩CSS和JavaScript文件，使用CSS Sprites等技术来减小图片的大小，可以有效减少HTTP请求数量。

2.使用浏览器缓存

通过使用浏览器缓存，可以减少对服务器的请求，使页面呈现速度更快。可以通过设置Expires、Last-Modified、Etag等响应头信息或使用缓存插件来实现缓存的控制和管理。

二、重绘

重绘指的是当元素的背景色、边框颜色、字体颜色等属性发生变化时，浏览器需要重新渲染元素的过程。在页面中大量重绘会导致页面渲染速度变慢，影响用户的使用体验。

在提高页面重绘速度方面，有以下几个关键点：

1.使用CSS属性尽量不使用JavaScript来操作DOM

直接操作DOM是非常耗费性能的，应该尽可能地减少DOM的操作。使用document.createElement等原生API代替innerHTML等操作。

2.使用CSS优化页面

减少box-shadow、clip-path、transform和opacity等属性的使用，同时，可以使用GPU加速和硬件加速等技术来优化页面重绘速度。

三、回流

回流指的是当元素的位置和尺寸发生变化时，浏览器需要重新布局并计算元素位置和大小，然后再进行渲染。与重绘相比，回流对性能的影响更加严重，因为回流会导致浏览器重新计算元素位置和大小，非常耗费性能。

在提高页面回流速度方面，有以下几个关键点：

1.尽可能使用translate、scale或rotate等CSS3属性进行页面变换

使用CSS3属性可以避免、减轻回流的影响，尽量避免使用width和height两个属性。

2.避免使用table布局

table布局是非常复杂的，当使用table布局时，回流的影响非常大，应该避免使用table布局，尽量使用div等标签模拟表格。

示例一：

在网站中使用大量的图片，并且在加载图片时没有使用懒加载等技术，导致页面呈现速度很慢，并且会增加HTTP请求的次数。应该使用懒加载技术来减少HTTP请求次数，在页面呈现过程中先加载有意义的内容，等页面完全显示后再加载后面的内容。

示例二：

在网站中使用了大量的数组、object等JS对象，每次修改对象都会触发重新计算DOM的过程，导致回流和重绘的次数非常多。应该尽可能地减少DOM的操作，尽可能使用原生API，使用事件委托等技术来优化页面的性能。