常见的 Web 性能优化方案

工程方面

1. 请求数量——合并脚本和样式表，CSS Sprites，按需加载
2. 请求带宽——开启Gzip，精简JavaScript，移除重复脚本，图像优化
3. 缓存利用——使用CDN，使用外部JavaScript和CSS，使用浏览器缓存，预解析DNS
4. 页面结构——将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出
5. 减少握手次数——避免重定向，KeepAlive

语言方面（react）

• 函数式组件 React.memo；类组件 React.PureComponent
• useMemo
• useEffect 或 shouldComponentUpdate
• 避免使用内联对象
• 避免使用匿名函数
• 调整CSS而不是强制组件加载和卸载
• 使用React.Fragment避免添加额外的DOM
• props和state的数据尽可能简单明了，扁平化
• map里面添加key，并且key不要使用index（可变的）

首屏优化

1. SSR
2. 骨架屏
3. 加载动画

一种自动化生成骨架屏的方案

渐进增强和优雅降级

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

.transition { /*渐进增强写法*/
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;
}
.transition { /*优雅降级写法*/
          transition: all .5s;
       -o-transition: all .5s;
     -moz-transition: all .5s;
  -webkit-transition: all .5s;
}

如何选择：

• 如果低版本用户居多，当然优先采用渐进增强的开发流程；
• 如果高版本用户居多，为了提高大多数用户的使用体验，那当然优先采用优雅降级的开发流程。
• 差不多就用渐进增强，业务可用性是第一

CSS3 开启 GPU 硬件加速

CSS animations, transforms 以及 transitions 不会自动开启GPU加速，而是由浏览器的缓慢的软件渲染引擎来执行。那我们怎样才可以切换到GPU模式呢，很多浏览器提供了某些触发的CSS规则。现在，像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速，当它们检测到页面中某个DOM元素应用了某些CSS规则时就会开启，最显著的特征的元素的3D变换。例如：

.cube {
   transform: translate3d(250px,250px,250px)
   rotate3d(250px,250px,250px,-120deg)
   scale3d(0.5, 0.5, 0.5);
   transform: translateZ(0);
}

用CSS开启硬件加速来提高网站性能