ssh
## 背景介绍 最近在做vue高仿[网易云音乐](https://juejin.im/post/5d3c0765f265da1b60294b78)的项目，在做的过程中发现音乐表格这个组件会被非常多的地方复用，而且需求比较复杂的和灵活。 ### [预览地址](http://47.99.213.231:8001/) ### [源码地址](https://github.com/sl1673495/vue-netease-music) ## 图片预览 * 歌单详情  * 播放列表  * 搜索高亮  ## 需求分析 它需要支持： * hideColumns参数， 自定义需要隐藏哪些列。 * highLightText，传入字符串，数据中命中的字符串高亮。 首先 看一下我们平常的table写法。 ```javascript ```...
## 初始版 最初的版本，对于 `partition` 这一步中的取基准值，我们直接**取最左边的值**，然后把小于这个值的划分在它的左边，把大于等于这个值的划分在它右边，然后分别对左和右再进一步做递归的快速排序。 它的问题在于，如果数组是个**近似有序**的数组的话，它的时间复杂度会退化到接近 On² 的级别。排序分治形成的二叉树会非常不平衡，退化成接近链表。 ```js function partition(arr, left, right) { // 取一个基准值 取第一项 let pivot = arr[left] // arr[left+1...index] < pivot, arr[index+1...i) > pivot let index...
https://stackoverflow.com/questions/4913343/what-is-the-difference-between-uri-url-and-urn/4913371#4913371 Uniform Resource Identifier (URI) 用来表示网络上的一个名称或者资源。 URN（名称）和URL（定位符）都是URI，并且特定的URI可以同时是名称和定位符。 URL 是 URI 的子集，它明确的标识出在网络上的哪个位置可以找到这个资源。 URN 也是 URI 的一种，它则更像是标识出这个资源的名称，但是不能告诉你如何找到这个资源。 ``` URL: ftp://ftp.is.co.za/rfc/rfc1808.txt URL: http://www.ietf.org/rfc/rfc2396.txt URL: ldap://[2001:db8::7]/c=GB?objectClass?one URL: mailto:[email protected] URL: news:comp.infosystems.www.servers.unix URL: telnet://192.0.2.16:80/ URN (not...
## 注意您发送的资源 1. 由于 CSS 是一种阻塞渲染的资源，CSS 框架的开销可能导致渲染延迟严重。 您可以视情况移除不必要的开销，以加速渲染。 2. 减少不必要的 js 库的引入。 3. 迁移至 HTTP/2。 HTTP/2 可解决 HTTP/1.1 的许多固有性能问题，例如并发请求限制和缺乏标头压缩。 4. 使用资源提示尽早下载资源。 rel=preload 是此类资源提示的一种，允许在浏览器发现关键资源之前提前提取这些资源。 如果能够谨慎使用，该资源会带来显著的积极效果 ## 注意您发送的数据量 1. 压缩源码 2. 服务器配置...
# Fiber ## 出现背景 JavaScript 是单线程运行的，而且在浏览器环境屁事非常多，它要负责页面的JS解析和执行、绘制、事件处理、静态资源加载和处理, 这些任务可以类比上面’进程‘。  对于 Vue 来说， 1. 模板的静态可优化特性 2. 响应式底层机制带来的组件的精确更新 使得他可以把每个任务尽可能的压缩小，这也是尤大觉得Vue3不需要时间分片的原因。  这是React V15 下面的一个列表渲染资源消耗情况。整个渲染花费了130ms, 🔴在这里面 React 会递归比对VirtualDOM树，找出需要变动的节点，然后同步更新它们, 一气呵成。这个过程 React 称为 Reconcilation(中文可以译为协调)。在 Reconcilation 期间，React 会霸占着浏览器资源，一则会导致用户触发的事件得不到响应,...
## 版本管理 `^1.0.0`：帽子符号会在 major version 保持一致的情况下寻找，所以`1.1.0`、`1.9.0` 都会被认为是可行的。 `~1.0.0`：波浪符号会在 minor version 保持一致的情况下寻找，所以 `1.0.1`、`1.0.9` 都可行，但是 `1.1.0`不行。 `rc版本`：对于 `rc`版本来说，用上面的两种符号是无效的，必须精确的指定 rc 版本，或者用 `1.0.0-rc.1 - 1.0.0` 这样的范围符来表示接受所有 rc 版本的更新。 如果是 `0.14.0-alpha1 - 0.14.0` 这样书写的话，则会包含所有的 `alpha`、`beta`、`rc`版本。...
# will-change https://developer.mozilla.org/zh-CN/docs/Web/CSS/will-change mdn 文档明确说明了，`will-change` 属性是一个性能优化的最后手段，没事不要乱用，不要全局挂着，否则会一直请求 gpu 渲染。 同理，一直挂着 `translatez` 也是一个很差的做法，正确的做法是按需使用，使用完了就要把这个属性去掉。
https://html.spec.whatwg.org/multipage/webappapis.html#task-queue ## 事件循环 1. 从任务队列中取出一个任务并执行。 2. 检查微任务队列，清空微任务，如果在微任务的执行中又加入了新的微任务，也会在这一步一起执行。 3. 进入更新渲染阶段，判断是否需要渲染，这里有一个 `rendering opportunity` 的概念，也就是说不一定每一轮 event loop 都会对应一次浏览器渲染，要根据屏幕刷新率、页面性能、页面是否在后台运行来共同决定，通常来说这个渲染间隔是固定的。（所以多个 task 很可能在一次渲染之间执行） - 浏览器会尽可能的保持帧率稳定，例如页面性能无法维持60fps（每16.66ms渲染一次）的话，那么浏览器就会选择30fps的更新速率，而不是偶尔丢帧。 - 如果浏览器上下文不可见，那么页面会降低到4fps左右甚至更低。 - 如果满足以下条件，也会跳过渲染： 1. 浏览器判断更新渲染不会带来视觉上的改变。 2. `map of animation frame...
## thread-loader 把这个 loader 放置在其他 loader 之前， 放置在这个 loader 之后的 loader 就会在一个单独的 worker 池里运行，一个 worker 就是一个 nodeJS 进程。由于进程的启动和进程间通讯也需要消耗时间，因此对比较耗时的 loader 开启这个优化。 **不要随意开**，亲测太多 loader 前加这个反而会拖慢打包速度。 ## hard-source-webpack-plugin hard-source-webpack-plugin 会在第一次打包的时候记录缓存，并且在后续打包中显著提高速度。 https://github.com/webpack-contrib/cache-loader/issues/11#issuecomment-328480598 建议不要和 cache-loader...
Proxy 的 get trap 中的 receiver 是什么？ 在 Reflect.get 的场景下，receiver 可以改变计算属性中 this 的指向。 ```js var target = { get a() { return this.c } } Reflect.get(target, 'a', { c: 4...