前端优化的维度其实非常多，使用不同的前端框架（React / Vue），还可以做针对性的优化。实际工作中，应该根据问题的具体表现，分析出性能瓶颈，从业务和技术的角度，找出优化方案，本文主要从一些基础公共的视角去分享一些优化点。
一 减少请求数量
a. 早期使用 gulp 合并 或者内嵌js，css， 现在用webpack打包压缩，treeshaking等。
b. 使用浏览器缓存，http1.0 （expired, last-modified, if-modifed-since）, http1.1（cache-control ETag, if-none-match）
c. code split + 按需加载 或者动态加载， 首页只加载当前需要的，react.lazy(()=>import('./pdfView.js')), import('../a.js'), react-loader 库
d. css中使用雪碧图 （css sprites），background-(posizition repeact)做定位，把多个图片合成在一起，当然对于一些比较小的图片，也可以urlEncode base64编码内嵌进来，它的问题是多个图片资源整合为一个大图片后，其中一个小图元需要更新，就要重新生成大图片，加载一个大的雪碧图，且http2/3 不适合合并多个资源这个优化技巧。
二 减少请求大小
a. 压缩 去掉空格，注释，可能还有些混淆策略，比如把长方法名替换为短方法名。
b. 通过TreeShaking, 过滤掉没用，或者没有使用的代码，这里有CSS和JS的代码，CSS需要单独插件配合。
c. 对图片进行压缩，image-loader
三 减少重排 重绘，因为它会占用渲染进程中主线程的时间，且在整个渲染流水线的前期，渲染路径最长。
a. OffsetWidth/Height ClientWidth/Height ScroolWidth 避免使用，或者缓存到变量中给多次使用。
b. 多个css属性操作，对一个字符串操作后，一次性赋值给class
c. 利用css3中的transform等属性，单独分层，利用GPU和硬件加速手段。
四 其他
a. 使用多个服务器存一些图片等静态资源, CDN做缓存，摆脱浏览器对单个服务器资源请求个数限制，比如chrome是6个，这样也可以减少了Cookie传输。
b. html + css使用上注意，比如少用原生的table布局（层次复杂，容易一个微小的cell变动就导致整个table需要重绘），css选择器上少用层次选择器，查询效率低下
c. 数据结构和算法上去优化，比如用快排加速排序，用hash表空间换时间O（1），减少GC回收频率，比如for循环中大量new小对象，短路语句优先执行
d. 从JS对象层面去优化，复用隐藏类（chrome中是map对象，它主要是存属性内容的偏移量，快速拿出值）等，少动态对一个对象增加和删除属性，这样会导致当前隐藏类失效，需要重新构建。
e. 使用更高版本的http协议，如http2.0解决应用层面的队头阻塞， http3.0使用基于UDP的QUIK协议彻底解决了队头阻塞等问题。
// to do， there may be many items to optimize your front-end code