页面内容方面
- 通过文件合并、避免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,记录性能数据。