项目优化

包括性能优化

性能优化

一些常见的优化方法包括：

• 减少请求数量：通过合并文件、使用雪碧图、使用字体图标等方法来减少HTTP请求数量。使用防抖和节流。
• 减小资源大小：通过压缩代码、tinypng压缩图片、使用Gzip等方法来减小资源大小。
• 优化网络连接：通过使用CDN、DNS预解析、持久连接等方法来优化网络连接。
• 优化资源加载：通过优化资源加载位置、使用异步加载、使用懒加载等方法来优化资源加载。
• 减少重绘回流：通过避免使用CSS表达式、避免使用table布局、避免频繁操作样式等方法来减少重绘回流。不通过style操作来更改样式，而是通过修改class来更改。
• 使用性能更好的API：通过使用requestAnimationFrame、使用Web Workers、使用Service Workers等方法来使用性能更好的API。

重绘回流

回流（reflow）和重绘（repaint）是浏览器渲染过程中的两个步骤。它们都会影响页面的渲染性能，因此应尽量避免。

• 回流：当页面中的元素的 布局 或 几何属性 发生变化时，浏览器需要重新计算元素的 位置 和 大小 ，这个过程称为回流。回流会影响到页面中 所有元素 的位置和大小，因此它是一个非常耗时的过程。

• 重绘：当页面中的元素的 外观（如颜色、背景等）发生变化，但不影响布局时，浏览器会重新绘制这些元素，这个过程称为重绘。重绘不会影响到页面中其他元素的布局，因此它比回流更快。

避免回流和重绘的一些方法包括：

• 避免使用CSS表达式：CSS表达式会在每次页面渲染时重新计算，这会导致大量的回流和重绘。
• 避免使用table布局：table布局会导致大量的回流和重绘，应尽量避免使用。
• 避免频繁操作样式：频繁地修改元素的样式会导致大量的回流和重绘。可以考虑使用类名来修改样式，或者将多次修改样式的操作合并为一次。
• 避免频繁操作DOM：频繁地操作DOM会导致大量的回流和重绘。可以考虑使用文档片段DocumentFragment来减少对DOM的操作。