前端面试-性能优化

vue性能优化、首屏加载慢？

路由、组件通过import方法按需引入

按需引入外部ui组件

CDN引入外部资源（cdn是从最近的缓存服务器获取资源，相比与从源站获取资源，在相同的网速下，cdn以空间换取时间，变相提升类性能）

压缩css\html\图片等资源、去掉生产上的.sourceMap文件(productionSourceMap: false)、去掉生产上的log日志(terser-webpack-plugin)、减少文件体积

开启gzip压缩服务器资源、CompressionWbpackPlugin插件

使用骨架屏（一般ui组件也都有提供skeleton组件）、loading提示提升用户体验（可以将骨架屏结构写在index.html里面，嵌入<div id="app"></div> 元素中）vue实例化完成后会将#app中的骨架屏替换成正真的页面元素

 

前端性能优化、前端性能优化提升用户体验？

页面加载渲染方面

慎用递归、注意递归的条件、避免页面死循环

数据量比较大或者耗时的操作可以放在worker线程中操作，或者前端对数据进行切片分割，进行类似的分页或者懒加载操作

使用骨架屏（一般ui组件也都有提供skeleton组件）、loading提示提升用户体验

 

代码逻辑方面

按需引入外部ui组件

CDN引入外部资源（cdn是从最近的缓存服务器获取资源，相比与从源站获取资源，在相同的网速下，cdn以空间换取时间，变相提升类性能）

压缩css\html\图片等资源、去掉生产上的.sourceMap文件(productionSourceMap: false)、去掉生产上的log日志(terser-webpack-plugin)、减少文件体积

开启gzip压缩服务器资源、CompressionWbpackPlugin插件

v-for循环的时候使用:key、v-for循环的时候如果需要绑定点击事件、可以利用事件冒泡尽量将事件绑定到父元素身上、减少dom操作

路由、组件通过import方法按需引入、使用keep-alive缓存组件，避免组件重复渲染

合理利用浏览器缓存、文件离线缓存、减少http请求

点击事件请求接口时尽量使用防抖截流、渲染图片时考虑使用精灵图、雪碧图、减少http请求

比较复杂且可复用的逻辑运算将结果利用计算属性缓存、比较耗时的操作利用异步渲染或者放入work线程中操作