目录
4.为HTML指定Cache-Control或Expires.
async/await和promise的区别
async 它就是 Generator 函数的语法糖
参考参考 async函数实现多个请求处理_山海入梦的博客-优快云博客_async 请求
promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。
promise实现多请求并发
promise.all里面最多只能放10个请求
使用promise实现多请求并发_小约翰仓鼠的博客-优快云博客_promise并发请求
computed原理
computed 本质是一个惰性求值的观察者。
computed 内部实现了一个惰性的 watcher,也就是 computed watcher,computed watcher 不会立刻求值,同时持有一个 dep 实例。
其内部通过 this.dirty 属性标记计算属性是否需要重新求值。
当 computed 的依赖状态发生改变时,就会通知这个惰性的 watcher,
computed watcher 通过 this.dep.subs.length 判断有没有订阅者,
有的话,会重新计算,然后对比新旧值,如果变化了,会重新渲染。 (Vue 想确保不仅仅是计算属性依赖的值发生变化，而是当计算属性最终计算的值发生变化时才会触发渲染 watcher 重新渲染，本质上是一种优化。)
没有的话,仅仅把 this.dirty = true。 (当计算属性依赖于其他数据时，属性并不会立即重新计算，只有之后 其他地方需要读取属性 的时候，它才会真正计算，即具备 lazy（懒计算）特性。比如这个属性并没有被其他地方用到，就不会重新去计算它)
computed和watch哪个支持异步
watch
详细请看 watch跟computed的区别_前端开发小司机的博客-优快云博客_watch和computed的区别
前端加密方法
1、明文保存；2、对称加密算法来保存；3、MD5、SHA1等单向HASH算法；4、PBKDF2算法；5、bcrypt、scrypt等算法。
MD5加密
md5 加密:
用户注册时将加密后的密码发送给后端存储
当登陆的时候,再将加密后的密码和数据库中加密的密码相匹配。
此加密无须解密实在需要解密 ，请看专家教你简单又轻松的MD5解密方法，一看就会_哈客部落的博客-优快云博客_md5解密
md5的在vue中的用法:
1.安装。
npm install js-md5 -D2.使用。
（1）项目中引入md5模块。
import md5 from “js-md5”（2）在main.js里面将md5转换为vue原型
import md5 from "js-md5"
Vue.prototype.$md5=md53.示例
<input type="number" v-model="value">
console.log("加密密码："+ this.$md5(this.value))原文链接 vue 前端常用加密处理 md5 加密_船长在船上的博客-优快云博客_前端md5解密
vue-element-admin 导出excel
这个好像vue-element-admin有自带的一个方法
参考 参考 vue-element-admin 导出excel_小坚果_的博客-优快云博客
防抖和节流区别和应用场景
一、防抖 （多次触发 只执行最后一次，重在清零）
防抖策略（debounce）是当事件被触发后，延迟n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。
作用： 高频率触发的事件，在指定的单位时间内，只响应最后一次，如果在指定的时间内再次触发，则重新计算时间。
1. 防抖的应用场景
- 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖
- 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖
- 文本编辑器实时保存，当无任何更改操作一秒后进行保存
2. 防抖的实现思路
实现代码：
// 防抖函数
function debounce(fn, wait) {
let timer;
return function() {
let _this = this;
let args = arguments;
if(timer) { clearTimeout(timer) }
timer = setTimeout(function(){
fn.apply(_this, args)
}, wait);
}
}
// 使用
window.onresize = debounce(function() {console.log('resize')}, 500)
应用示例：
<body>
<input type="text" id="inp">
<script>
// 1.封装防抖函数 **防抖重在清零 clearTimeout(timer)**
function debounce(fn, time) {
// 4.创建一个标记用来存放定时器的返回值
let timeout = null;
return function () {
// 5.每当用户触发input事件 把前一个 setTimeout 清楚掉
clearTimeout(timeout);
// 6.然后又创建一个新的 setTimeout, 这样就能保证输入字符后等待的间隔内 还有字符输入的话，就不会执行 setTimeout里面的内容
timeout = setTimeout(() => {
// 7.这里进行防抖的内容
fn();
}, time);
};
}
// 2.获取inpt元素
var inp = document.getElementById('inp');
// 8. 测试防抖临时使用的函数
function sayHi() {
console.log('防抖成功');
}
// 3.给inp绑定input事件 调用封装的防抖函数 传入要执行的内容与间隔事件
inp.addEventListener('input', debounce(sayHi, 5000));
</script>
</body>
一、节流 （规定时间内 只触发一次，重在加锁）
节流策略（throttle），控制事件发生的频率，如控制为1s发生一次，甚至1分钟发生一次。与服务端(server)及网关(gateway)控制的限流 (Rate Limit) 类似。
作用： 高频率触发的事件,在指定的单位时间内，只响应第一次。
1. 节流的应用场景
- 鼠标连续不断地触发某事件（如点击），单位时间内只触发一次；
- 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断。例如：懒加载；
- 浏览器播放事件，每个一秒计算一次进度信息等
2. 节流的实现思路
实现代码：
// 方式1: 使用时间戳
function throttle1(fn, wait) {
let time = 0;
return function() {
let _this = this;
let args = arguments;
let now = Date.now()
if(now - time > wait) {
fn.apply(_this, args);
time = now;
}
}
}
// 方式2: 使用定时器
function thorttle2(fn, wait) {
let timer;
return function () {
let _this = this;
let args = arguments;
if(!timer) {
timer = setTimeout(function(){
timer = null;
fn.apply(_this, args)
}, wait)
}
}
}
应用示例：
<script>
// 1.封装节流函数（使用定时器） 节流重在加锁 timer=timeout
function throttle(fn, time) {
//3. 通过闭包保存一个 "节流阀" 默认为false
let temp = false;
return function () {
//8.触发事件被调用 判断"节流阀" 是否为true 如果为true就直接trurn出去不做任何操作
if (temp) {
return;
} else {
//4. 如果节流阀为false 立即将节流阀设置为true
temp = true; //节流阀设置为true
//5. 开启定时器
setTimeout(() => {
//6. 将外部传入的函数的执行放在setTimeout中
fn.apply(this, arguments);
//7. 最后在setTimeout执行完毕后再把标记'节流阀'为false(关键) 表示可以执行下一次循环了。当定时器没有执行的时候标记永远是true，在开头被return掉
temp = false;
}, time);
}
};
}
function sayHi(e) {
// 打印当前 document 的宽高
console.log(e.target.innerWidth, e.target.innerHeight);
}
// 2.绑定事件，绑定时就调用节流函数
// 敲黑板！！！ 这里是重点 绑定是就要调用一下封装的节流函数 触发事件是触发封装函数内部的函数
window.addEventListener('resize', throttle(sayHi, 2000));
</script>
总结 (简要答案)
- 防抖：防止抖动，单位时间内事件触发会被重置，避免事件被误伤触发多次。代码实现重在清零 clearTimeout。防抖可以比作等电梯，只要有一个人进来，就需要再等一会儿。业务场景有避免登录按钮多次点击的重复提交。
- 节流：控制流量，单位时间内事件只能触发一次，与服务器端的限流 (Rate Limit) 类似。代码实现重在开锁关锁 timer=timeout; timer=null。节流可以比作过红绿灯，每等一个红灯时间就可以过一批。
页面优化的方法
页面加载渲染：
1.css放在最上面，javascript放在最下面。
2.减少重绘和回流。
重绘
重绘：元素样式的改变（但宽高、大小、位置等不变）
如：outline、visibility、color、background-color等
只改变自身样式，不会影响到其他元素
回流
回流：元素的大小或者位置发生改变（当页面布局和几何信息发生改变的时候），触发了重新布局导致渲染树重新计算布局和渲染
如添加或删除可见的DOM元素；元素的位置发生变化；元素的尺寸发生变化、内容发生变化（如文本变化或图片被另一个不同尺寸的图片所代替）；页面一开始渲染的时候（无法避免）；
因为回流是根据视口大小来计算元素的位置和大小的，所以浏览器窗口尺寸变化也会引起回流
注意：回流一定会触发重绘，而重绘不一定会回流
3.减少DOM元素的数量和深度。
4.图片懒加载
5.预加载
渲染完成后的页面交互优化
防抖和节流
网络加载
1.减少http请求，合理设置http缓存。
2.避免页面中空的href和src
3.使用异步JavaScript资源async和defer
4.为HTML指定Cache-Control或Expires.
ps：小知识
前端模块化：
根据需要和不同规则，代码分别写在不同文件里，这些文件都有自己的作用域。、
css模块化的优点：
方便代码的复用，避免命名冲突，层级结构更加清晰
原文链接 前端页面优化方法_小齐睡不够的博客-优快云博客_前端页面优化
首页加载白屏什么原因 怎么处理：
答案一：
定位问题：
1、先确保网络连接通畅。
2、查看网络url地址是否输入有误。
3、打开控制台查看报错信息。
4、查看接口访问是否有请求。
5、查看路由是否有path或者name的错误，导致加载了不存在的页面。
可能原因：
1）URL网址无效或含有中文字符；
2）JS封装代码有问题；
3）缓存导致白屏；
4）硬件内存不足、进程崩溃；
答案二：
当前很多页面都使用前端模板进行数据渲染，那么在糟糕的网速情况下，一进去页面，看到的不是白屏就是 loading，这称为白屏问题。
此问题发生的原因基本可以归结为网速跟静态资源
1、css文件加载需要一些时间，在加载的过程中页面是空白的。 解决：可以考虑将css代码前置和内联。
2、首屏无实际的数据内容，等待异步加载数据再渲染页面导致白屏。 解决：在首屏直接同步渲染html，后续的滚屏等再采用异步请求数据和渲染html。
3、首屏内联js的执行会阻塞页面的渲染。 解决：尽量不在首屏html代码中放置内联脚本。
解决方案
根本原因是客户端渲染的无力，因此最简单的方法是在服务器端，使用模板引擎渲染所有页面。同时
-
减少文件加载体积，如html压缩，js压缩
-
加快js执行速度 比如常见的无限滚动的页面，可以使用js先渲染一个屏幕范围内的东西
-
提供一些友好的交互，比如提供一些假的滚动条
-
使用本地存储处理静态文件。
原文链接 首页白屏解决与优化方案 - sunidol - 博客园
vue同页面跳转不刷新
方案一：给router-view添加唯一key
增加一个不同:key值，这样vue就会识别这是不同的<router-view>了。
原理：Vue 会复用相同组件, 即 /aaa/1 =>>> /aaa/2 或者 /bbb?id=1 =>>> /bbb?id=2 这类链接跳转时, 将不再执行created, mounted之类的钩子
设置 router-view 的 key 属性值为 $route.fullPath后，就会比较完整路径，path和参数都会进行比较，地址发生改变时（包括参数改变），就会重新渲染页面，组件被强制不复用, 相关钩子加载顺序为:beforeRouteUpdate => created => mounted
// 这种是最简单的方法
<router-view :key="$router.currentRoute.fullPath"/>
<!-- 或者下面这个，$route是当前正在跳转的路由 -->
<router-view :key="$route.path"/>方案二：监控$route中的数据变化
对router进行监控，当router发生变化时，执行初始化界面方法
//监听函数
watch: {
'$route' () {
this.initData();//我的初始化方法
}
},方案三：通过beforeRouteUpdate获取路由变化
beforeRouteUpdate路由更新之前，通过this.$route.query获取的参数存在滞后性，通过to.query拿到的是最新的
beforeRouteUpdate(to, from, next) {
//路由更新前，重新发请求
this.getData(to.query.id)
next()
}小程序数据缓存机制
localStorage
localStorage.setItem("key",JSON.stringify({test:123}))
- 你如何测试localStorage的大小？
https://www.cnblogs.com/djjlovedjj/p/11202195.html
数据大小5M左右
永久存储
sessionStorage
浏览器关闭的时候自动销毁
cookies
1. cookies可以控制失效时间
2. 会随着请求发送到后台
4KB 左右
小程序数据缓存相关知识
数据缓存：缓存数据，从而在小程序退出后再次打开时，可以从缓存中读取上次保存的数据，常用的数据缓存API如下表所示：
- wx.setStorage(Object object) 存储=> 如果存储复杂类型，不需要序列化字符串=》直接存
- wx.getStorage(Object object) 获取
- wx.removeStorage(Object object) 删除
- wx.setStorageSync(Object object) 存储=> wx.setStorage 的同步版本
- wx.getStorageSync(Object object) 获取=> wx.getStorage 的同步版本
- wx.removeStorage(Object object) 删除=> wx.removeStorage 的同步版本
参数
详细参数请见
wx.setStorage(Object object) | 微信开放文档
保存数据缓存
// 保存数据缓存
wx.setStorage({
key: 'key', // 本地缓存中指定的key
data: 'value', // 需要存储的内容（支持对象或字符串）
success: res => {}, // 接口调用成功的回调函数
fail: res => {} // 接口调用失败的回调函数
})
获取数据缓存
// 获取数据缓存
wx.getStorage({
key: 'key', // 本地缓存中指定的 key
success: res => { // 接口调用成功的回调函数
console.log(res.data)
},
fail: res => {} // 接口调用失败的回调函数
})
示例：在onLoad中存入并获取
// pages/test/test.js
Page({
onLoad: function(options) {
// 保存数据缓存
wx.setStorage({
key: 'key', // 本地缓存中指定的key
data: 'value', // 需要存储的内容（支持对象或字符串）
success: res => {
// 获取数据缓存
wx.getStorage({
key: 'key', // 本地缓存中指定的 key
success: res => { // 接口调用成功的回调函数
console.log(res.data)
},
fail: res => { } // 接口调用失败的回调函数
})
}, // 接口调用成功的回调函数
fail: res => {} // 接口调用失败的回调函数
})
}
})
注意⚠️：
- 将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。
- 单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
- 需要存储的内容。只支持原生类型、Date、及能够通过
JSON.stringify序列化的对象。
原文链接 小程序数据缓存机制应用_流楚丶格念的博客-优快云博客_微信小程序缓存机制
链接二 小程序 - 数据缓存_Yolo416的博客-优快云博客
微信小程序如何刷新当前页面或者刷新上一个页面
刷新当前页面
const pages = getCurrentPages()
//声明一个pages使用getCurrentPages方法
const perpage = pages[pages.length - 1]
//声明一个当前页面
perpage.onLoad()
//执行刷新
刷新上一个页面
//获取页码数进行刷新，跟当前页面的刷新的方式是一样的
var pages = getCurrentPages()
pages[pages.length -2 ].onload()
原文链接 微信小程序如何刷新当前页面或者刷新上一个页面_程序员里的战斗机的博客-优快云博客_小程序刷新当前页面
更全面的在这里 微信小程序----返回上一页刷新或当前页刷新_Rattenking的博客-优快云博客_微信小程序 返回上一页并刷新
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
