面试之性能优化
css性能优化方面
首屏内联样式
因为内联样式的时候,浏览器再加载html的时候,也一并加载了内联样式,这样就会减少首页白屏的效果。
减少使用@import引入css
- 尽量减少使用@import引入css
- 因为浏览器再引入这个 css的 时候,会阻塞进程,先加载 @import引入的css,加载完毕后,再继续后续的进程
设置内容缓存
- 将HTML内容设置Cache-Control 或Expires可以将HTML内容缓存起来,避免频繁向服务器端发送请求;
< meta http-equiv=“Cache-Control” />
优化重排和重绘
- 减少重排
- 减少通过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相关存储,去缓存数据,避免再一次加载页面时候,重新请求数据
防抖
节流
路由的懒加载
- 就是打包的时候,会打包成一个单独的文件(打包出来的文件被称为chunk )
component: () => import("../views/profile/Profile.vue")
首屏加载显示白屏优化
- 可假如屏保,就是在一开始加载整个程序的时候,添加一个屏保,模拟出正在加载过程
- 可假如骨架屏
- 首页的直接引入,其他路由进行路由懒加载形式导入
vue项目上的优化
- 01:尽量减少data中的数据,data中的数据都会增加getter和setter,会收集对应的watcher
- 02:v-if 和 v-for 不要同时使用
- 03:
webpack相关配置 ( vue-cli )
图片转化为base64 (url-loader)
图片的压缩 (image-webpack-loader)
把es6语法转化为es5语法等(babel-loader)
gzip压缩 打包的文件大小 - compression-webpack-plugin
js代码的压缩 (uglifyjs-webpack-plugin)
- 设置清除log,去掉注释,去掉debugger
配置别名 (chainWebpack里面 config.resolve.alias)代码切片
设置生产环境,不生成map文件追踪错误 ( productionSourceMap: false )
使用CDN加速优化 ( vue路由等)
webpack相关配置
- 五大模块
- enter、output、mode、loader、plugin
webpack01之 base.js
入口:entry => 一般来说 是 src/ main.ts
出口:output
可配置的 path filename 打包的路径
loader相关 module - rules
1:scss、css相关loader
=> vue-style-loader
=> css-loader
=> postcss-loader - 需要 postcss.config.js 配置 自动引入浏览器前缀、还有浏览器版本限制( package.json - browserslist )
=> sass-loader
2:js
=>babel-loader 需要 babel.config.js 里面配置预设等
=>thread-loader多线程
=>exclude: /node_modules/ 排除node的解析
3:ts
=>babel-loader
4:vue
=>vue-loader
resolve相关
1:extensions 配置文件名后缀可省略
2:alias 配置别名
plugins相关
1:html-webpack-plugin 自动引入文件 插件
2:clean-webpack-plugin 清除上次打包缓存
3:webpack 下的 ProgressPlugin 进度条
4:vue-loader 下的 VueLoaderPlugin 插件
5:unplugin-auto-import/webpack、unplugin-vue-components/webpack、unplugin-vue-components/resolvers 自动引入插件
webpack02之 dev.js
1:mode: ‘development’,
2:devtool: ‘eval-cheap-module-source-map’, //开发环境配置 定位错误根源
3:eslint-webpack-plugin
4:cache 缓存 type: ‘memory’
5:devServer 服务器设置 端口、服务器代理等
webpack03之 pro.js
1:cache 缓存 type: ‘filesystem’,
2:optimization
=>minimizer - CssMinimizerPlugin 、TerserPlugin( 去log等 )
css-minimizer-webpack-plugin、terser-webpack-plugin
=>splitChunks 代码切片 ( vue、ele、loadsh单独切片为js )
3:zip-webpack-plugin 打包后 压缩为 zip文件
4:copy-webpack-plugin 负责静态资源等
webpack的打包流程
- webpack的打包流程就是把项目中的各个模块打包成静态资源,以便于在浏览器中加载与运行。
流程:
1:读取配置文件
webpack打包时先读取webpack.config.js文件,解析其中的配置信息,根据不同的环境执行打包。
2:找到入口文件
在解析配置文件后,webpack会寻找到入口文件(main.js或者index.js),根据入口文件开始相关递归地解析所有依赖关系
3:解析依赖模块
从入口文件找到找到依赖关系,执行对于的依赖模块,比如js文件,css文件,图片等资源,根据不同的loading或者plugin加载这些资源
4:编译模块
webpack使用loading来编译依赖模块,执行css效果,js转义,js压缩、提取公共代码等效果
5:合并模块
webpack编译完毕后,会把所有模块合并成一个bundle.js文件
6:输出文件
webpack最后根据output配置输出打包后的文件到指定目录下,用于浏览器加载与运行
loader与plugin的区别
loader: 是用来处理非JavaScript文件,eg:把ts转换为js,jsx转换为js,less转换为css,图标转换为base64等
loader是再模块加载时对其进行转换,因此可以立即为一个转换器。
plugin:是用来处理各种任务的,eg:打包优化,自动创建html与自动导入bundle.js文件、资源管理、变量注入、清理输出目录、压缩js代码等操作。
plugin是通过监听webpack的生命周期事件来执行对应的任务。