前端性能优化

页面内容方面

• 通过文件合并、避免css表达式、滤镜，较少DOM操作，优化图片、精灵图，避免图片空链接等；
• 较少传输体积：尽量使用SVG\gradient代替图片。根据机型和网络状况控制图片清晰度。对低清晰度图片使用锐化来提升体验。设计上避免大型背景图。
• 使用 base64 等方式来减少 HTTP 请求数，避免过多的请求造成等待的情况；
• 减少请求数：JS、CSS打包到HTML。JS控制图片异步加载、懒加载。小型图片使用data-uri。
• TCP/TLS连接复用，服务器升级到HTTP2，尽量合并域名。
• 通过 DNS 缓存等机制来减少 DNS 的查询次数；
• 通过设置缓存策略，对常用不变的资源进行缓存，客户端控制的强缓存策略；
• 通过延迟加载的方式，来减少页面首屏加载时需要请求的资源，延迟加载的资源当用户需要访问时，再去请求加载；
• 通过用户行为，对某些资源使用预加载的方式，来提高用户需要访问资源时的响应速度；

服务器方面

• 使用 CDN 服务加速，来提高用户对于资源请求时的响应速度。内容分发网络，是建立再承载网基础上的虚拟分布式网络，能够将源站内容缓存到全国或全球的节点服务器上。用户就近获取内容，提高了资源的访问速度，分担源站压力；
• 服务器端自用 Gzip、Deflate 等方式对于传输的资源进行压缩，减少传输文件的体积；
• 尽可能减小 cookie 的大小，并且通过将静态资源分配到其他域名下，来避免对静态资源请求时携带不必要的 cookie；
• 使用服务端渲染(ssr): 传统VUE工作过程，npm run build 后产生app.js,index.html和css等文件。浏览器请求网站的时候，服务器将这些文件返回给浏览器，html文件里没有实质内容，只是加载了JS，实际浏览器执行返回的JS文件才生成网站。这便是纯浏览器渲染。
  这种渲染有以下问题：
  1.不利于SEO（爬虫只能爬html，不能爬JS）；
  2.首屏过慢；
  3.浏览器负担过重；
  SSR 说白了就是把我们打包的那些JS，html在我们的服务器执行后，把生成的页面返回到浏览器。

其它

• 移除生产环境的控制台打印。
  方案很多，esling+pre-commit、使用插件自动去除，插件包括babel-plugin-transform-remove-console、uglifyjs-webpack-plugin、terser-webpack-plugin。最后选择了terser-webpack-plugin，脚手架vue-cli用这个插件来开启缓存和多线程打包，无需安装额外的插件，仅需在configureWebpack中设置terser插件的drop_console为true即可。最好还是养成良好的代码习惯，在开发基本完成后去掉无用的console，vscode中的turbo console就蛮好的。

• 第三方库的按需加载。echarts，官方文档里是使用配置文件指定使用的模块，另一种使用babel-plugin-equire实现按需加载。element-ui使用babel-plugin-component实现按需引入。

• 前后端数据交换方面，推动项目组使用蓝湖、接口文档，与后端同学协商，规范后台数据返回。

• 性能问题：页面加载性能、动画性能、操作性能。Performance API，记录性能数据。