首屏优化
- 图片懒加载，精灵图，雪碧图，iconfont；小图标iconfont是矢量，不会失真，标量就会失真 通过浏览器更多工具covarage可以那些没有使用的js和css
- 减少网络请求
nginx服务器 可以将多个js文件请求合并成一个 webpack可以把多个js合并打包成一个
- 按需加载
- 组件懒加载
- 路由懒加载（只限于spa应用）
- （React.lazy 16.6版本以上 配合suspense标签使用） 动态路由
React lazy使用了dynamic import 的标准，webapck只要遇到了dynamic Import,
就会把里面引入的内容单独打一个包 由于dynamic import返回时一个promise
所以可以使用promise的状态做渲染的流程控制 如果是pengding状态，
则渲染loading组件，否则resolve状态就渲染导入的组件
4.图片过大或者js过大处理
webpack混淆和压缩（去除多余打印和无用代码，）
压缩图片（gzip，图片base64,webP格式，使用熊猫站工具（减少不必要的元素和提取共同的元素）压缩）
小图转base64,大图没必要转，因为base64会增大图片提及，
再使用url-loader进行加载 webp比同条件png降低26%体积
- webpack打包优化
optimazation-splitChunks 网络缓存进行小改动的进行缓存
webpack-bundle-analyzer插件可以分析打包bundle依赖图
- CDN加速（处理静态资源）
优选选择最近的服务器加载资源
http2.0可以破除并发请求的限制，http1.1请求最多可以同时发送6个
- 减少dom操作
- 使用document.createDocumentFragment创造虚拟节点
- 采用分段渲染的形式
- 最后使用windows。requestAnimationFrame来进行逐帧渲染
- 劲量一次添加，不要边循环边操作dom
