- 盒子水平垂直居中的方法
- 两个盒子左右排列,实现左边盒子固定宽度,右边盒子自适应有几种方法
- 标准盒模型和怪异盒模型
- 从浏览器地址栏输入 url 到请求返回发生了什么
- css命名规范和作用域
- js有哪些数据类型,有什么区别
- 检测数据类型的方法
- 原型和原型链
- 数组常用方法有用过哪些,区别
- 如果找到一个数组中出现次数最多的数字的下标
- cookie、localStorage 和 sessionStorage
- js 事件循环
- 常见状态码
- 跨域怎么解决
- 怎样配置反向代理,还有其他方法吗?
- 请求头和响应头有哪些
- 响应头中 access-control-allow-credentials: true 代表什么
- 如何让token 24小时自动过期
- 防抖和节流的原理及实际应用场景
- Hash 和 History 路由的区别和优缺点?
- SSR 技术和 SPA 技术的各自的优缺点是什么?
- 双向数据绑定原理、v-if/v-show、生命周期、父子通讯、data为什么是函数、插槽、key、watch...
- 最近碰到的难点,如何解决的
- nextTick原理
- this指向
- 怎样做缓存
- 上传图片怎样做压缩处理
- Git代码回滚
- axios怎么做请求拦截
- 闭包及应用场景
- VUE做过哪些优化
编码阶段
尽量减少data中的数据,data中的数据都会增加getter和setter,会收集对应的watcher
v-if和v-for不能连用
如果需要使用v-for给每项元素绑定事件时使用事件代理
SPA 页面采用keep-alive缓存组件
在更多的情况下,使用v-if替代v-show
key保证唯一
使用路由懒加载、异步组件
防抖、节流
第三方模块按需导入
长列表滚动到可视区域动态加载
图片懒加载
SEO优化
预渲染
服务端渲染SSR
打包优化
压缩代码
Tree Shaking/Scope Hoisting
使用cdn加载第三方模块
多线程打包happypack
splitChunks抽离公共文件
sourceMap优化
用户体验
骨架屏
PWA
还可以使用缓存(客户端缓存、服务端缓存)优化、服务端开启gzip压缩等。
- Proxy 与 Object.defineProperty
33.常用请求方式和区别
- 前端性能优化
1. 浏览器缓存
2. 防抖、节流
3. 资源懒加载、预加载
4.开启Nginx gzip压缩
三个方面来说明前端性能优化
一: webapck优化与开启gzip压缩
1.babel-loader用 include 或 exclude 来帮我们避免不必要的转译,不转译node_moudules中的js文件
其次在缓存当前转译的js文件,设置loader: 'babel-loader?cacheDirectory=true'
2.文件采用按需加载等等
3.具体的做法非常简单,只需要你在你的 request headers 中加上这么一句:
accept-encoding:gzip
4.图片优化,采用svg图片或者字体图标
5.浏览器缓存机制,它又分为强缓存和协商缓存
二:本地存储——从 Cookie 到 Web Storage、IndexedDB
说明一下SessionStorage和localStorage还有cookie的区别和优缺点
三:代码优化
1.事件代理
2.事件的节流和防抖
3.页面的回流和重绘
4.EventLoop事件循环机制
5.代码优化等等
- rem与em的区别
- 小程序鉴权
- 职业规划
- 你有什么想问我的
- 平时使用图片的格式以及它们的区别
- Webpack
- 箭头函数
- vue3.0