面试之性能优化
css性能优化方面
首屏内联样式
因为内联样式的时候，浏览器再加载html的时候，也一并加载了内联样式，这样就会减少首页白屏的效果。
减少使用@import引入css
- 尽量减少使用@import引入css
- 因为浏览器再引入这个 css的 时候，会阻塞进程，先加载 @import引入的css，加载完毕后，再继续后续的进程
优化重排和重绘
- 减少重排
- 减少通过dom节点去操作 css样式等
- 内外边距
- JS获取DOM元素的位置相关属性（如width/height/left等）
- 使用Flex时，比使用inline-block和float时重排更快，
所以在布局时可以优先考虑Flex
- 减少通过dom节点去操作 css样式等
- 减少重绘
- 元素的外观（如color，background，visibility等属性）发生改变时，会触发重绘，尽量减少这类操作
减少使用高性属性：浮动、定位，推荐使用flex布局
动画方面
- 尽量使用 transform 转化属性去实现相关动画，而不是使用定位 left right等形式
js性能优化方面
使用cdn的方式引入 console.log （h5方面）
对数据进行缓存
- http相关请求的缓存，同一个接口查询的数据一致时，使用缓存的数据（后端处理）
- 使用浏览器缓存，使用localStorage sessionStorage cookie相关存储，去缓存数据，避免再一次加载页面时候，重新请求数据
防抖
节流
路由的懒加载
component: () => import("../views/profile/Profile.vue")
首屏加载显示白屏优化
- 可假如屏保，就是在一开始加载整个程序的时候，添加一个屏保，模拟出正在加载过程
- 可假如骨架屏
- 首页的直接引入，其他路由进行路由懒加载形式导入
webpack相关配置
图片转化为base64 （url-loader）
图片的压缩 （image-webpack-loader）
把es6语法转化为es5语法等（babel-loader）
gzip压缩 打包的文件大小 - compression-webpack-plugin
js代码的压缩 （uglifyjs-webpack-plugin）
- 设置清除log，去掉注释，去掉debugger