排序

249 阅读5分钟

1.异步同步 EventLoop

异步

2.排序

排序算法详见大佬 Damonare的排序算法

(1)冒泡排序

冒泡排序

// 相邻的两个元素进行比较 [2,3,1,5,4] 第一趟要排4次

function bubbleSort(arr){
  for(var i=0;i<arr.length-1;i++){
    for (var j = 0; j < arr.length - 1 -i; j++){
      if(arr[j]>arr[j+1]){
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]
      }
    }
  }
  return arr
}
console.log(bubbleSort(arr));

(2)快速排序(二分法)

快速排序

// 设第一个元素为标杆,左和右再分别递归 [2,3,1,5,4]
function quickSort(arr){
  // 避免递归停不下来
  if(arr.length<=1){
    return arr
  }
  var pivot=arr[0];
  const left=[];
  const right=[];
  for (let i = 1; i < arr.length; i++) {
    if(arr[i]<=pivot){
      left.push(arr[i])
    }
    if(arr[i]>pivot){
      right.push(arr[i])
    }
  }
  return quickSort(left).concat(pivot, quickSort(right))
}
console.log(quickSort(arr));

(3)选择排序

设第一个元素最小,再在后面的元素中找出最小标记出来并与第一个元素交换顺序,依次排在后面.选择排序(Selection-sort)是一种简单直观的排序算法。它的工作原理:首先在未排序序列中找到最小(大)元素,存放到排序序列的起始位置,然后,再从剩余未排序元素中继续寻找最小(大)元素,然后放到已排序序列的末尾。以此类推,直到所有元素均排序完毕。

function selectionSort(arr){
  var minIndex;
  for(var i=0;i<arr.length-1;i++){
    minIndex=i;
    for (var j = i+1; j < arr.length; j++){
      if (arr[j] < arr[minIndex]){
        minIndex=j;
      }
    }
    [arr[i], arr[minIndex]] = [arr[minIndex], arr[i]];
  }
  return arr
}
console.log(selectionSort(arr));

(4)插入排序

打牌,依次从后往前排序,插在已排序列的后面

  1. 从第一个元素开始,该元素可以认为已经被排序;
  2. 取出下一个元素,在已经排序的元素序列中从后向前扫描;
  3. 如果该元素(已排序)大于新元素,将该元素移到下一位置;
  4. 重复步骤3,直到找到已排序的元素小于或者等于新元素的位置;
  5. 将新元素插入到该位置后;
  6. 重复步骤2~5。

function insertArr(arr){
  for (var i = 1; i < arr.length; i++){
    for (var j = i; j>0; j--){
      if(arr[j]<arr[j-1]){
        [arr[j], arr[j - 1]] = [arr[j-1], arr[j]];
      }else{
        break;
      }
    }
  }
  console.log(arr);
  
}
function insertionSort(arr){
  for (var i = 1; i < arr.length ; i++) {
    var key = arr[i];
    var j = i-1;
    while(j>=0&&arr[j]>key){
      arr[j+1]=arr[j];
      j--;
    }
    arr[j+1]=key;
  }
  return arr
}
console.log(insertionSort(arr));

(5)归并排序

  1. 把长度为n的输入序列分成两个长度为n/2的子序列;
  2. 对这两个子序列分别采用归并排序;
  3. 将两个排序好的子序列合并成一个最终的排序序列。

function mergeSort(arr) {  //采用自上而下的递归方法
    var len = arr.length;
    if(len < 2) {
        return arr;
    }
    var middle = Math.floor(len / 2),
        left = arr.slice(0, middle),
        right = arr.slice(middle);
    return merge(mergeSort(left), mergeSort(right));
}

function merge(left, right)
{
    var result = [];
    console.time('归并排序耗时');
    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());
    console.timeEnd('归并排序耗时');
    return result;
}
var arr=[3,44,38,5,47,15,36,26,27,2,46,4,19,50,48];
console.log(mergeSort(arr));
辅助记忆

时间复杂度记忆

冒泡、选择、直接 排序需要两个for循环,每次只关注一个元素,平均时间复杂度为O(n²)(一遍找元素O(n),一遍找位置O(n))
快速、归并、希尔、堆基于二分思想,log以2为底,平均时间复杂度为O(nlogn)(一遍找元素O(n),一遍找位置O(logn))


稳定性记忆-“快希选堆”(快牺牲稳定性)

3.函数柯理化

掘金无法上传本地图片时,建议上传至一个服务器托管平台如gitee、github等,再用链接形式引入。由于喜好问题,更喜欢用gitee托管postImage图片。

HTTP浏览器请求

六 浏览器缓存

缓存机制

缓存

协商缓存: last-modified

协商缓存

Etag Etag是服务器响应请求时,返回当前资源文件的一个唯一标识(由服务器生成),只要资源有变化,Etag就会重新生成

Etag

实际场景应用缓存策略: 1 对于不常变化的资源:cache-control:max-age:100000000;2 对于经常变化的资源:cache-control:no-cache(ctrl + F5 利用 no-cache不是不缓存,而是需要进行协商缓存;no-store:表示浏览器不进行缓存,每次http请求 200,以及最新内容)

七 CDN

对于首次访问,提高访问速度.分发到离用户最近的cdn节点,通过将静态资源(例如javascript,css,图片等等)缓存到离用户很近的相同网络运营商的CDN节点上,不但能提升用户的访问速度,还能节省服务器的带宽消耗,降低负载。如果CDN节点的缓存失效,它会根据服务配置去我们的内容源服务器获取最新的资源响应给用户,并将内容缓存下来以便响应给后续访问的用户。

八 预解析DNS

资源预加载是另一个性能优化技术,我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。

<a href="//example.com"></a> 浏览器自动对a标签预解析
<link rel="dns-prefetch" href="//example.com">
https:
<meta http-equiv="x-dns-prefetch-control" content="on">

九 图

1 管线化 并行发送 而且响应有序

2 持久连接

3 类型转换

4 this

5 实现双向数据绑定

<body>
    <div id="app">
        <input type="text" id="txt">
        <p id="show-txt"></p>
    </div>
    <script>
        var obj = {}
        Object.defineProperty(obj, 'txt', {
            get: function () {
                return obj
            },
            set: function (newValue) {
                document.getElementById('txt').value = newValue
                document.getElementById('show-txt').innerHTML = newValue
            }
        })
        document.addEventListener('keyup', function (e) {
            obj.txt = e.target.value
        })
    </script>
</body>