提到前段性能优化，不可避免的都会想到如下的解决方案：
（1）减少HTTP请求（合并css、js，雪碧图/base64图片、CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。）
（2）压缩（css、js、图片等前端资源皆可压缩，通常是由服务器来解决）
（3）图片预加载，将样式表放头部，脚本放底部加上时间戳
（4）使用CDN，采用CDN来加速资源加载（这部分，不少前端都不用考虑，负责发布的兄弟可能会负责搞好）
（5）缓存……
（6）程序的性能优化（如：数据读写）
（7）对于JS DOM的优化（用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。）
（8）少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（9）HTTP的服务器的文件优化
（10）当需要设置的样式很多时设置className而不是直接操作style。
（11）避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（12）避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢
来源：https://www.cnblogs.com/syw20170419/p/11937713.html