一、排序算法
1.冒泡排序
性能差，每一次遍历 都从后往前进行比较， 相邻的两两比较大小，小的向前浮动 时间复杂度 O(n2)
function bubbleSort(target) {
let temp = null
for (let i = 0; i < target.length - 1; i++) {
for (let j = target.length - 1; j > i; j--) {
if (target[j] < target[j - 1]) {
temp = target[j]
target[j] = target[j - 1]
target[j - 1] = temp
}
}
console.log(`第 ${i + 1} 次排序`)
}
return target
}
console.log(bubbleSort([23, 32, 5, 72, 12, 1]))
2.插入排序
1.拿第二个数跟前面的数对比，比前面小就交互一下，依次类推
https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/48ae60ce7afa462e84efca1a042a7fc2~tplv-k3u1fbpfcp-watermark.awebp
Array.prototype.insert = function () {
console.log(this.length);
for (let i = 1; i < this.length; i++) {
let j = i
while (j > 0) {
let temp = this[j]
if (temp < this[j - 1]) {
temp = this[j - 1]
this[j - 1] = this[j]
this[j] = temp
}
j = j - 1
}
}
}
let arr = [5, 4, 3, 1, 2]
arr.insert()
3.归并排序
排序一个数组，我们先把数组从中间分成前后两部分，然后对前后两部分分别排序，再将排好序的两部分合并在一起，这样整个数组就都有序了。
归并排序采用的是分治思想。
分治，顾名思义，就是分而治之，将一个大问题分解成小的子问题来解决。小的子问题解决了，大问题也就解决了。
const mergeSort = arr => {
//采用自上而下的递归方法
const len = arr.length;
if (len < 2) {
return arr;
}
// length >> 1 和 Math.floor(len / 2) 等价
let middle = Math.floor(len / 2),
left = arr.slice(0, middle),
right = arr.slice(middle); // 拆分为两个子数组
return merge(mergeSort(left), mergeSort(right));
};
const merge = (left, right) => {
const result = [];
while (left.length && right.length) {
// 注意: 判断的条件是小于或等于，如果只是小于，那么排序将不稳定.
if (left[0] <= right[0]) {
result.push(left.shift());
} else {
result.push(right.shift());
}
}
while (left.length) result.push(left.shift());
while (right.length) result.push(right.shift());
return result;
};
console.log('mergeSort([34,3,123,22])',mergeSort([34,3,123,22]));
4.快速排序
快速排序的特点就是快，而且效率高
let quickSort = (arr) => {
if (arr.length < 2) return arr;
let pointV = arr[arr.length - 1];
let left = arr.filter(
(v, i) => v <= pointV && i !== arr.length - 1
);
let right = arr.filter((v, i) => v > pointV);
return [
...quickSort(left),
pointV,
...quickSort(right)
];
};
二、VUE生命周期详解
初始化过程：设置数据监听、编译模板、将实例挂载到 DOM
beforeCreate：实例刚在内存中创建出来，还没有初始化 data和 methods，只包含一些自带额生命周期函数
created： 实例已经在内存中创建完成，此时data和methods已经创建完成
beforeMount： 此时已经完成了模版的编译，只是还没有渲染到界面中去
mounted： 模版已经渲染到了浏览器，创建阶段结束，即将进入运行阶段
更新数据：
beforeUpdate： 界面中的数据还是旧的，但是data数据已经更新，
updated： 页面重新渲染完毕，页面中的数据和data保持一致
销毁过程：
beforeDestroy： 执行该方法的时候，Vue的生命周期已经进入销毁阶段，但是实例上的各种数据还出于可用状态
destroyed： 组件已经全部销毁，Vue实例已经被销毁，Vue中的任何数据都不可用
三、计算属性 vs 方法 vs 侦听属性
设计它们的初衷是用于简单运算的，在模板中放入太多的逻辑会让模板过重且难以维护，
1.计算属性缓存 vs 方法
计算属性是基于它们的响应式依赖进行缓存的，这就意味着只要 依赖 还没有发生改变，多次访问 计算属性会立即返回之前的计算结果，而不必再次执行函数。
2.计算属性 vs 侦听属性
1.计算属性是用这个属性名并依赖发生改变了才重新计算，侦听属性是侦听的某个依赖，有保留新旧值，当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的；依赖值可以是多个，属性只能是一个；
2.有点很重要的区别是：计算属性不能执行异步任务，计算属性必须同步执行。也就是说计算属性不能向服务器请求或者执行异步任务。如果遇到异步任务，就交给侦听属性。watch也可以检测computed属性；
3.Computed是多对一，或一对一；watch是一对多或一对一。
四、vue-router导航
1.导航被触发。
2.在失活的组件里调用 beforeRouteLeave 守卫。
3.调用全局的 beforeEach 守卫。
4.在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5.在路由配置里调用 beforeEnter。
6.解析异步路由组件。
7.在被激活的组件里调用 beforeRouteEnter。
8.调用全局的 beforeResolve 守卫 (2.5+)。
9.导航被确认。
10.调用全局的 afterEach 钩子。
11.触发 DOM 更新。
12.调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。
五、关于上传
1.断点续传，前端实现
把上传的文件切割，点击上传各个切割的文件流，可以点暂停，可以恢复上传
2.秒传
对于上传过的文件，不上传，通过后台接口查询是否上传。
六、关于css继承
3.css样式哪些是可以继承
· 所有元素默认继承：visibility、cursor
· 文本属性默认继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text-indent、text-align、text-shadow、text-transform、direction
· 列表元素默认继承：list-style、list-style-type、list-style-position、list-style-image
· 表格元素默认继承：border-collapse
七、HTTPS
1.解析速度快：服务器解析 HTTP1.1 的请求时，必须不断地读入字节，直到遇到分隔符 CRLF 为止。而解析 HTTP2 的请求就不用这么麻烦，因为 HTTP2 是基于帧的协议，每个帧都有表示帧长度的字段。
2.多路复用：HTTP1.1 如果要同时发起多个请求，就得建立多个 TCP 连接，因为一个 TCP 连接同时只能处理一个 HTTP1.1 的请求。
在 HTTP2 上，多个请求可以共用一个 TCP 连接，这称为多路复用。同一个请求和响应用一个流来表示，并有唯一的流 ID 来标识。
多个请求和响应在 TCP 连接中可以乱序发送，到达目的地后再通过流 ID 重新组建。
google-devtool看板翻译
· Queueing: 在请求队列中的时间。
· Stalled: 从TCP 连接建立完成，到真正可以传输数据之间的时间差，此时间包括代理协商时间。
· Proxy negotiation: 与代理服务器连接进行协商所花费的时间。
· DNS Lookup: 执行DNS查找所花费的时间，页面上的每个不同的域都需要进行DNS查找。
· Initial Connection / Connecting: 建立连接所花费的时间，包括TCP握手/重试和协商SSL。
· SSL: 完成SSL握手所花费的时间。
· Request sent: 发出网络请求所花费的时间，通常为一毫秒的时间。
· Waiting(TFFB): TFFB 是发出页面请求到接收到应答数据第一个字节的时间。
· Content Download: 接收响应数据所花费的时间。
八、Defer和async的区别
九、图片懒加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片懒加载</title>
<style type="text/css"></style>
<style>
*{
padding: 0;
margin: 0;
}
.box3 {
height: 1000px;
width: 500;
background-color: aqua;
}
.box1 {
height: 1000px;
width: 500;
background-color: royalblue;
}
</style>
<script>
window.myCallback = (res)=>{ //这里为上一步定义的全局函数
console.log(111111111111,res)
}
</script>
<script >
myCallback({
name:'ahreal',
age:18
})
</script>
</head>
<body>
<div style="height:5000px">
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<img
class="box3"
src="https://alifile.hqjy.com/hq/classfile/2021-12-15/1265e235-6c30-4d0e-bde1-c19225356a37ggDe1keqiSADrzO1F-3PTBsAAAAAAAAAAQ.png"
alt='https://alifile.hqjy.com/web/hqjyWeb/default.png'
/>
<div class="box1"></div>
<div class="box1"></div>
</div>
<script type="text/javascript">
function isInViewPortOfOne (el) {
// viewPortHeight 兼容所有浏览器写法
const viewPortHeight = window.innerHeight || document.documentElement.clientHeight
const offsetTop = el.offsetTop
console.log('offsetTop',offsetTop);
const scrollTop = document.documentElement.scrollTop
const top = offsetTop - scrollTop
// 滚动数量加视口高度-元素距离顶部高度
if (scrollTop+viewPortHeight-offsetTop) {
el.src = el.alt
}
}
function debounce(fun,layout) {
let timer
return function(arg) {
clearTimeout(timer)
timer = setTimeout(()=>{
fun(arg)
},layout)
}
}
window.onload = function() {
let el = document.getElementsByClassName('box3')[0]
console.log('el',el);
let handleScroll = debounce(isInViewPortOfOne,100)
document.onscroll = function() {
handleScroll(el)
}
}
</script>
</body>
</html>
十、微信SDK分享给好友、朋友圈不显示卡片、只显示链接了？
https://mp.weixin.qq.com/s/7zxqex8DuuWj8cFfDhz2bw
https://developers.weixin.qq.com/community/develop/doc/0008c8eea54600acfa1d4548e51000
目前分享有卡片的方法：
1.公众号菜单进入
2.气泡链接进入
3.先收藏url到微信，从微信收藏中进入
十二、Boostate
boostrate分css样式、组建、插件
插件需要引入jq，boostrate.js和boostrate.css
文档链接：https://www.bootcss.com/
注意：内容少的可以做响应式；电商类的，东西太多，不行，建议做pc和h5两个端
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
