参考博客：https://blog.csdn.net/fuzhongmin05/article/details/69397581
Web前端性能优化方法总结
1、减少HTTP请求
减少HTTP的主要手段是合并CSS、合并JavaScript、合并图片。
如： CSS Sprites (参考博客：https://blog.csdn.net/Makenzie/article/details/77881957?locationNum=9&fps=1)
CSS Sprites直译过来就是CSS精灵。CSS Sprites其实就是把网页中一些背景图片整合拼合成一张图片中，再利用DIV CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片在布局盒子对象位置。
2、 使用浏览器缓存
对一个网站而言，CSS、JavaScript、Logo、图标这些静态资源文件更新的频率都比较低，而这些文件又几乎是每次HTTP请求都需要的，如果将这些文件缓存在浏览器中，可以极好地改善性能。通过设置HTTP头中的Cache-Control和Expires属性，可设定浏览器缓存，缓存时间可以是数天，甚至是数月。
3、服务端启用压缩，精简CSS和JS文件
在服务器端对文件进行压缩，在浏览器对文件解压缩，可有效减少通信传输的数据量。文本文件的压缩率可达80%以上，因此HTML、CSS、JavaScript文件启用GZip压缩可达到较好的效果。但是压缩对服务器和浏览器产生一定的压力，在通信带宽良好，而服务器资源不足的情况下要权衡考虑。
4、 CSS放在页面最上面、JavaScript放在页面最下面
浏览器会在下载完全部CSS之后才对整个页面进行渲染，因此最好的做法是将CSS放在页面最上面，让浏览器尽快下载CSS，HTML规范清楚指出CSS要放包含在页面的区域内。JavaScript则相反，浏览器在加载JavaScript后立即执行，有可能会阻塞整个页面，造成页面显示缓慢，因此JavaScript最好放在页面最下面，但如果页面解析时就需要用到JavaScript，这里放在底部就不合适了。
5、减少对DOM的操作
修改和访问DOM元素会造成页面的重绘和重排，循环对DOM操作更是罪恶的行为。 所以请合理的使用JavaScript变量储存内容，考虑大量DOM元素中循环的性能开销，在循环结束时一次性写入。减少对DOM元素的查询和修改，查询时可将其赋值给局部变量。
6、减少Repaint（重绘）和Reflow（重排）
（1） 将多次改变样式属性的操作合并成一次操作。
（2）将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。
（3）在内存中多次操作节点，完成后再添加到文档中去。例如要异步获取表格数据，渲染到页面。可以先取得数据后在内存中构建整个表格的html片段，再一次性添加到文档中去，而不是循环添加每一行。
（4）由于display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发2次重排。
（5） 在需要经常取那些引起浏览器重排的属性值时，要缓存到变量。
（过多触发3d加速，反而会影响性能。）
7、减少Cookie传输
尽量减少Cookie中传输的数据量。因为Cookie是本地的磁盘文件，每次浏览器都会去读取相应的Cookie，所以建议去除不必要的Coockie，使Coockie体积尽量小以减少对用户响应的影响。Cookie是有生命周期的，设置合理的过期时间，合理地Expire时间和不要过早去清除coockie，都会改善用户的响应时间。
8、使用CDN加速等
CDN（Content Delivery Network），即内容分发网络。
CDN本质仍然是一个缓存，而且将数据缓存在离用户最近的地方，使用户以最快的速度获取数据。
CDN能够缓存的一般是静态资源，如图片、文件（例如视频）、CSS、Script脚本、静态网页等，这些文件访问频率很高（例如NBA总决赛这些的热门视频文件），将其缓存在CDN可极大改善网页的打开速度。