目录
外观
组件库（无法满足->接口？->自定义/封装）
兼容
判断浏览器环境
不同尺寸（包裹，height:100%）
不同 浏览器 隐藏滚动条 的 不同属性名
重排->重绘
不显示 display:none->禁用disable
性能
导航重复（修改原型push、replace方法）
scss、js元素选择器尽可能精准：全局/局部
远程搜索条数较多时，防抖 import { debounce } from 'lodash'
代码
root&&stack.push(root)
安全
url.replace('http://', 'https://')
严谨性
少用any类型
路由参数query和params
判断后端数据时才用===
（因为leader不在编码一线，所以优化的点 leader可能安排不了）
试用期/裁员期/上升期：按时完成安排的任务是底线要求，优化是额外关卡：
从积累技术文档，优化性能，发现潜在的问题，warning，思考合理性，到封装项目通用组件。
（汇报也不要只说流水账，先展示流程，然后再讲优化/解决的问题，重点应该在上面的额外关卡，哪怕只是思考也行）
外观
组件库（无法满足->接口？->自定义/封装）
无论是ele/martix的tabs，display:none都无效，但组件库很少有问题
默认样式不行的时候，先看文档有没有提供接口，如果没有提供接口，并且需要手动修改的地方较多，就自定义/封装（如果需要重复使用）
兼容
判断浏览器环境
export default function browserInfo() {
// 定义变量sBrowser用于存储浏览器名称
// 定义变量sUsrAg用于存储用户代理字符串
var sBrowser,
sUsrAg = navigator.userAgent
// 以下按顺序检查用户代理字符串中是否包含特定浏览器的标识，以判断用户使用的是哪种浏览器。
// 如果用户代理字符串中包含"Firefox"，则判断为Mozilla Firefox浏览器
if (sUsrAg.indexOf('Firefox') > -1) {
sBrowser = 'Mozilla Firefox'
// 用户代理字符串示例："Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"
}
// 如果用户代理字符串中包含"Opera"或者"OPR"，则判断为Opera浏览器
else if (sUsrAg.indexOf('Opera') > -1 || sUsrAg.indexOf('OPR') > -1) {
sBrowser = 'Opera'
// 用户代理字符串示例："Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 OPR/57.0.3098.106"
}
// 如果用户代理字符串中包含"Trident"，则判断为Microsoft Internet Explorer浏览器
else if (sUsrAg.indexOf('Trident') > -1) {
sBrowser = 'Microsoft Internet Explorer'
// 用户代理字符串示例："Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Zoom 3.6.0; wbx 1.0.0; rv:11.0) like Gecko"
}
// 如果用户代理字符串中包含"Edge"，则判断为Microsoft Edge浏览器
else if (sUsrAg.indexOf('Edge') > -1) {
sBrowser = 'Microsoft Edge'
// 用户代理字符串示例："Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
}
// 如果用户代理字符串中包含"Chrome"，则判断为Google Chrome或者Chromium浏览器
else if (sUsrAg.indexOf('Chrome') > -1) {
sBrowser = 'Google Chrome or Chromium'
// 用户代理字符串示例："Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/66.0.3359.181 Chrome/66.0.3359.181 Safari/537.36"
}
// 如果用户代理字符串中包含"Safari"，则判断为Apple Safari浏览器
else if (sUsrAg.indexOf('Safari') > -1) {
sBrowser = 'Apple Safari'
// 用户代理字符串示例："Mozilla/5.0 (iPhone; CPU iPhone OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1 980x1306"
}
// 如果以上条件都不满足，则浏览器名称为"unknown"，表示未知浏览器
else {
sBrowser = 'unknown'
}
// 最后，返回一个布尔值，指示用户是否使用Chrome浏览器（如果是Chrome浏览器，返回true；否则返回false）
return sUsrAg.indexOf('Chrome') > -1
}
不同尺寸（包裹，height:100%）
.workbench-create {
height: 100%;
display: flex;
}不同 浏览器 隐藏滚动条 的 不同属性名
.left-wrap {
height: 100%;
overflow: auto;
flex: 1;
padding-left: 40px;
//隐藏元素的滚动条。这通常用于自定义滚动条样式。
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
/* IE 10+ */
&::-webkit-scrollbar {
//伪元素选择器，用于选择Webkit浏览器（如Chrome、Safari等）中的滚动条。
display: none;
/* Chrome Safari */
}重排->重绘
不显示 display:none->禁用disable
性能
导航重复（修改原型push、replace方法）
push：将新的路由添加到浏览器的历史记录中，这样用户就可以通过浏览器的后退按钮回到之前的路由。
this.$router.push('/about')
replace：不会在浏览器的历史记录中留下新的条目，而是直接替换当前的历史记录条目。
this.$router.replace('/contact')
比如在处理登录页面时，登录成功后可能会用
replace方法替换当前路由，以防止用户通过后退按钮回到登录页面。
修改 VueRouter 的原型方法 push 和 replace，用来捕获导航重复错误并进行处理，文章来源：https://www.toymoban.com/news/detail-605297.html
而不会在控制台中抛出错误，从而避免了不必要的错误提示和潜在的问题。文章来源地址https://www.toymoban.com/news/detail-605297.html
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => {
if (err.name !== 'NavigationDuplicated') {
throw err;
}
});
};
const originalReplace = VueRouter.prototype.replace;
VueRouter.prototype.replace = function replace(location) {
return originalReplace.call(this, location).catch(err => {
if (err.name !== 'NavigationDuplicated') {
throw err;
}
});
};
const router = new VueRouter({
// 路由配置...
});
export default router;
scss、js元素选择器尽可能精准：全局/局部
远程搜索条数较多时，防抖 import { debounce } from 'lodash'
<mds-select
style="width: 480px"
v-model="formData.applyOa"
:multiple="true"
placeholder="选择或搜索OA"
filterable
:remote="true"
:remote-method="searchOA"
:disabled="showDetail"
clearable
@change="changeOA"
>
<mds-option
class="select-oaAndDept"
v-for="item in OAoptions"
:key="item.oa"
:value="item.empOa"
:label="item.empNmAndOa"
>
<div class="select-name">
{{ item.empNmAndOa }}
<div class="select-dept">{{ item.deptNm }}</div>
</div>
</mds-option>
</mds-select>import { debounce } from 'lodash'
//防抖
// OA list
OAoptions: any = []
searchOA = debounce(this.searchOaAPi, 500)
searchOaAPI(val: any) {
bspUserInfoFuzzyQueryOaList({
empOaOrNm: val,
partitionDt: ''
}).then((res: any) => {
if (res && res.code == 200) {
this.OAoptions = res.data
} else {
this.$message.error(res.msg || '系统错误')
}
}).catch((e: any) => {
this.$message.error(e.msg)
})
}代码
root&&stack.push(root)
安全
url.replace('http://', 'https://')
严谨性
少用any类型
路由参数query和params
判断后端数据时才用===
到了这里，关于前端开发中的常见优化的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![java八股文面试[数据库]——慢查询优化](https://imgs.yssmx.com/Uploads/2024/02/684602-1.png)
