易函123

题目地址 https://leetcode.cn/problems/container-with-most-water/ 题目描述12345678910111213141516给定一个长度为 n 的整数数组 height 。有 n 条垂线，第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。找出其中的两条线，使得它们与 x 轴共同构成的容器可以容纳最多的水。返回容器可以储存的最大水量。说明：你不能倾斜容器。示例 1：输入：[1,8,6,2,5,4,8,3,7]输出：49解释：图中垂直线代表输入数组 [1,8,6,2,5,4,8,3,7]。在此情况下，容器能够容纳水（表示为蓝色部分）的最大值为 49。示例 2：输入：height = [1,1]输出：1 解答代码一1234567891011121314151617var maxArea = function (height) { let len = height.length if (len <= 1) return 0 let result = 0, i = 0, j = l ...

LeetCode 第 4 号问题：寻找两个正序数组的中位数题目地址 https://leetcode-cn.com/problems/median-of-two-sorted-arrays/ 题目描述给定两个大小为 m 和 n 的正序（从小到大）数组  nums1 和  nums2。 请你找出这两个正序数组的中位数，并且要求算法的时间复杂度为  O(log(m + n))。 你可以假设  nums1  和  nums2  不会同时为空。 示例 1: 12345678910nums1 = [1, 3]nums2 = [2]则中位数是 2.0示例 2:nums1 = [1, 2]nums2 = [3, 4]则中位数是 (2 + 3)/2 = 2.5 思路暴力解决方法:拼接后找中位数 代码一12345678910111213141516const findMedianSortedArrays = function (nums1, nums2) { let arr = nums1.concat(nums2) // 合并两个数组 arr.sort((a, b) => a ...

说明 从new Vue这个过程最后，vm.$mount(vm.$options.el)可以看到 el 挂载。这一章将研究这一过程。具体分析 vue 如何将组件挂载到页面成为真实 Dom 的。 这是new Vue过程的代码 1234if (vm.$options.el) { // 挂载el vm.$mount(vm.$options.el)} 代码剖析看了很多相关文章，大部分文章并没有讲述为啥要先分析 compiler 版本代码$mount，再去分析 runtime-only 版本的代码上的$mount。所有一开始就会有点懵，为啥要这么去分析。 /src/platforms/web/entry-runtime-with-compiler.js 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374 ...

说明 vue 业务代码写了几年，对其痛点有了相应了解，想更深入理解其痛点原因。 学习源码中的思路，了解其 api 输出的原理。 vue2.6 已经到终版，对比大佬之前版本的源码分析，可以看其最后某些代码优化。 代码剖析new 关键字在 Javascript 语言中代表实例化是一个对象，而 Vue 实际上是一个类，类在 Javascript 中是用 Function 来实现的。所以我们得找到Vue函数，从而去分析其函数执行究竟做了些什么 /src/core/instance/index.js 123456function Vue(options) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue)) { warn('Vue is a constructor and should be called with the `new` keyword') } this ...

浏览器渲染机制首先，浏览器的渲染机制中有几个基本概念名称： （1）、DOM：浏览器将 HTML 解析成树形的数据结构 （2）、CSSOM：浏览器将 CSS 解析成树形的数据结构 （3）、Render Tree：DOM 和 CSSOM 合并后生成 Render Tree（渲染树） （4）、Layout：计算出 Render Tree 每个节点的具***置 （5）、Painting：通过显卡，将 Layout 后的节点内容分别呈现到屏幕上 浏览器整个渲染流程如下： （1）、用户输入一个 URL 后，浏览器就会向服务器发出一个请求，请求 URL 对应的资源 （2）、接到服务器的响应内容后，浏览器的 HTML 解析器，会将 HTML 文件解析成一颗 DOM 树，DOM 树的构建是一个深度遍历的过程，当前节点的所有子节点都构建完成后，才会去构建当前节点的下一个兄弟节点 （3）、将 CSS 解析成 CSSOM 树 （4）、根据 DOM 树与 CSSOM 树，构建 Render Tree （5）、浏览器会根据 Render Tree 能知道网页中哪些有节点，各个节点的 CSS，以及各个节点的从属关系 ...

什么是跨域？（CORS、同源策略） 同源策略：限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。（来自 MDN 官方的解释） 受浏览器同源策略的限制，非同源的两个 URL 间不能通信，非同源的脚本不能操作其他源下面的对象，但在实际开发场景中， 这种情况经常出现， 此时需要通过跨域进行非同源通信 跨域问题的来源是浏览器为了请求安全而引入的基于同源策略的安全特性。当页面和请求的协议、主机名或端口不同时，浏览器判定两者不同源，即为跨域请求。需要注意的是跨域是浏览器的限制，服务端并不受此影响。 出于安全性，浏览器限制脚本内发起的跨源 HTTP 请求。例如，XMLHttpRequest 和 Fetch API 遵循同源策略。这意味着使用这些 API 的 Web 应用程序只能从加载应用程序的同一个域请求 HTTP 资源，除非响应报文包含了正确 CORS 响应头。 当产生跨域时，我们可以通过 JSONP、CORS、postMessage 等方式解决。 同源策略有什么限制 源包括三个部分：协议、域名、端口（http 协议的默认端口是 80）。 ...

概览 浏览器缓存，也就是客户端缓存，既是网页性能优化里面静态资源相关优化的一大利器，也是无数 web 开发人员在工作过程不可避免的一大问题，所以在产品开发的时候我们总是想办法避免缓存产生，而在产品发布之时又在想策略管理缓存提升网页的访问速度。 缓存，是优化网络请求。（js,css,img 可以被缓存） 它分为强缓存和协商缓存： 1）浏览器在加载资源时，先根据这个资源的一些 http header 判断它是否命中强缓存，强缓存如果命中，浏览器直接从自己的缓存中读取资源，不会发请求到服务器。比如某个 css 文件，如果浏览器在加载它所在的网页时，这个 css 文件的缓存配置命中了强缓存，浏览器就直接从缓存中加载这个 css，连请求都不会发送到网页所在服务器； 2）当强缓存没有命中的时候，浏览器一定会发送一个请求到服务器，通过服务器端依据资源的另外一些 http header 验证这个资源是否命中协商缓存，如果协商缓存命中，服务器会将这个请求返回，但是不会返回这个资源的数据，而是告诉客户端可以直接从缓存中加载这个资源，于是浏览器就又会从自己的缓存中去加载这个资源； 3）强缓存与协商缓 ...

逻辑 1、在序列 arr 中找到最大（Max）或者最小（Min）的值，并将该值存在排序序列的起始位置。 2、再从剩下的原序列 arr 中找到最大（Max）或者最小（Min）的值，并将该值存在排序序列的末尾。 3、重复步骤 2 的操作。 JavaScript 代码实现123456789101112131415161718192021222324252627282930313233const arr = [1, 2, 6, 34, 7, 9, 11, 16, 13, 19, 0, 3]function selectionMaxSort(arr) { let len = arr.length for (let i = 0, max = len - 1; i < max; i++) { let MaxIndex = i for (let j = i + 1, max = len; j < max; j++) { if (arr[MaxIndex] < arr[j]) { MaxIndex = j ...

基本思想 将整个待排序序列进行的记录分割成若干个子序列，进行直接插入排序；待整个序列基本有序时，再对整个序列进行直接插入排序。 逻辑 1、选择一个增量序列 t1,t2….tk,其中 ti>tj，tk=1； 2、按增量序列个数 k,对序列进行 K 趟排序； 3、每趟排序，根据对应的增量 ti，将待排序列分割成若干长度为 m 的子序列，分别对各子表进行直接插入排序。仅增量因子为 1 时，整个序列作为一个表来处理，表长度即为整个序列的长度。 JavaScript 代码实现12345678910111213141516171819202122232425262728293031323334353637const arr = [1, 9, 7, 10, 5, 8, 11, 14, 66, 0]function shellSort(arr) { let len = arr.length for (let gap = Math.floor(len / 2); gap > 0; gap = Math.floor(gap / 2)) { for ( ...

逻辑 1、序列的第一个元素看成一个有序序列，第二个元素到序列末尾看成未排序序列； 2、取未排序序列的第一个元素与有序序列进行比较，并插到有序序列合适的位置； 3、重复步骤 2，直至未排序序列末尾为止。 JavaScript 代码实现12345678910111213141516const arr = [1, 2, 6, 34, 7, 9, 11, 16, 13, 19, 0, 3]function insertionSort(arr) { let len = arr.length for (let i = 1, max = len; i < max; i++) { let currentI = arr[i] let j = i - 1 // 把当前的元素与已排序列进行比较（从最后一位开始），如果已排序列元素大于当前元素，就把已排序列的元素向后移动一位，依次类推。 while (j >= 0 && arr[j] > currentI) { arr[j + 1] = arr[j] ...