前言

随着时代的发展，业内曾经提出过很多性能优化相关的标准和规范，从最初2007年雅虎提出34条军规，到2020年google开始推广Web Vitals，优化技术已经有将近20多年的发展历史，如下图所示：

Web Vitals

Google在2020年推出了一个名为Web Vitals的新概念，着重评估一组页面访问体验钟的一部分关键指标，目的在于简化网络性能。每个指标代表页面体验的一个关键方面：加载、交互和视觉稳定性。

Web Vitals在感知的性能，交互性和令人愉悦的方面，可作为用户体验的简化基准。在考虑页面性能时，应该首先关注这一套较小的指标。

此外，Web Vitals代表了访问者在访问您的页面时首先在其视口中看到的内容，即首屏内容。他们首先看到的内容最终会影响他们对页面性能的看法。

首先，专注于这三个指标，可以使您获得可感知的和实际的性能可观的收益，然后再深入研究其他优化。

加载

所谓加载，就是进入页面时，页面内容的载入过程。比如，当你打开一些网站时，你会发现，有的网站首页上的文字、图片出现很缓慢，而有的则很快，这个内容出现的过程就是加载。加载缓慢严重消耗用户的耐心，会让用户离开页面。

这里我们拿淘宝首页的network信息观察一些指标：

当鼠标悬浮在具体的色块上，我们可以看到具体的指标详情。如下图所示，资源下载之前经历了0.46ms的排队（Queueing），DNS查找24.79ms（DNS Lookup)、建立TCP连接(Initial connection)、还有https的网站SSL证书验证的时间37.04ms（SSL），最后发送请求再到资源返回也要经历110.71ms（TTFB）。

下面我们再来纵向看瀑布图，主要看2点：

1. 资源之间的联系：如果下载发生了阻塞，很多资源的下载就会是串行处理的。如果是并行的，就可以加快下载过程。


2. 关键时间节点：我们可以看到图中有红蓝两个颜色的两根线，蓝色的是DOM完成的加载时间，红色是页面中所有声明的资源加载完成的时间。

关键指标

那么这么多指标，到底哪些是最值得我们关注的呢？下面我来总结一下：

1. 
   

   白屏时间（FP，First Paint）：也叫首次绘制时间，对于应用页面，首次出现视觉上不同于跳转之前内容的时间点，或者说是页面发生第一次绘制的时间点，它的标准时间是 300ms。如果白屏时间过长，用户会认为我们的页面不可用，或者可用性差。如果超过一定时间（如 1s），用户注意力就会转移到其他页面。

   
   


2. 
   

   首屏时间（FCP，First Contentful Paint）：也叫首次有内容绘制时间，对于所有的网页应用，这是一个非常重要的指标。它是指从浏览器输入地址并回车后，到首屏内容渲染完毕的时间。这期间不需要滚动鼠标或者下拉页面，否则无效。也就是说，它是浏览器完成渲染DOM中第一部分内容（可能是文本、图像或其它任何元素）的时间点，此时用户应该在视觉上有直观的感受。

   
   


3. 
   

   首次有意义绘制（FMP，First Meaningful Paint）：指页面关键元素的渲染时间。这个概念并没有标准化定义，因为关键元素可以由开发者自行定义究竟什么是“有意义”的内容，只有开发者或者产品经理自己了解。

   
   


4. 
   

   速度指数（Speed Index）：指的是网页以多快的速度展示内容，标准时间是4s。

   
   


5. 
   

   总下载时间（Load）：页面所有资源加载完成所需要的时间。一般可以统计 window.onload，得到同步加载的资源全部加载完的耗时。如果页面中存在较多异步渲染，那么可以将异步渲染全部完成的时间作为总下载时间。

   
   


6. 
   

   TTFB（Time To First Byte）：是指网络请求被发起到从服务器接收到地一个字节的这段时间。其中包含了TCP连接时间、发送HTTP请求时间和获得相应消息第一个字节的时间。

   
   

   TTFB这个参数比较重要，因为它可以给用户最直观的感受，如果TTFB很慢，说明资源一直没有返回，增加白屏时间，如果TTFB很快，资源回来之后就可以进行快速的解析和渲染。

   
   

   那么影响TTFB的因素有哪些？

   
   
   
   
   1. 后台处理能力，服务器响应到底有多快
   
   
   2. 资源请求的网络状况，网络是否有延迟

首屏时间 vs 白屏时间

首屏时间 = 白屏时间 + 渲染时间。在加载性能指标方面，相比于白屏时间，首屏时间更重要。为什么？

从重要性角度看，打开页面后，第一眼看到的内容一般都非常关键，比如电商的头图、商品价格、购买按钮等。这些内容即便在最恶劣的网络环境下，我们也要确保用户能看得到。

从体验完整性角度看，进入页面后先是白屏，随着第一个字符加载，到首屏内容显示结束，我们才会认为加载完毕，用户可以使用了。白屏加载完成后，仅仅意味着页面内容开始加载，但我们还是没法完成诸如下单购买等实际操作，首屏时间结束后则可以。

DOMContentLoaded和Load事件的区别

其实从这两个事件的命名就能体会到，DOMContentLoaded 指的是文档中 DOM 加载内容加载完毕的时间，也就是说 HTML 结构已经是完整的了。但是我们知道，很多页面都包含图片、特殊字体、视频、音频等其他资源，由于这些资源由网络请求获取，需要额外的网络请求，因此DOM内容如加载完毕时，这些资源还没有请求或渲染完成。当页面上所有资源加载完成后，Load 事件才会被触发。

因此，在时间线上，Load 事件往往会落后于 DOMContentLoaded 事件。

交互/响应

所谓交互，就是用户点击网站或 App 的某个功能，页面给出的回应，也就是浏览器的响应时间。比如我们点击了一个“点赞”按钮，立刻给出了点赞数加一的展示，这就是交互体验好，反之如果很长时间都没回应，这就是交互体验不好。

关于交互指标，有的公司用 FID 指标 （First Input Delay，首次输入延迟）， 指标必须尽量小于 100ms，如果过长会给人页面卡顿的感觉。还有的公司使用 PSI（Perceptual Speed Index，视觉变化率），衡量标准是小于20%。

一般来说，主要包括以下几个指标：

1. 
   

   交互动作的反馈时间：也叫用户可交互时间，就是用户可以与应用进行加护的时间，一般来讲，我们认为是 DOMReady 的时间，因为我们通常会在这时绑定事件操作。如果页面中设计交互的脚本没有下载完成，那么当然没有达到所谓的用户可交互时间。那么如何定义 DOMReady 时间呢？这里我推荐大家看司徒正美的文章《何谓DOMReady》。

   
   


2. 
   

   刷新率（FPS，Frame Per Second）：也叫帧率，标准的刷新率指标是60帧/s，它可以决定画面是否足够流畅。

   
   


3. 
   

   异步请求的完成时间：所有的异步请求能在1s中内请求回来。

   
   

关于帧率，我们可以用chorme Devtools来查看，打开控制台，点击快捷键command/ctrl+shift+P，弹出下面的弹窗，输入frame，点击FPS一栏，就会在页面左上角看到图2所示的监控台，显示网页交互过程中每一帧的绘制频率。

不同帧率的体验

• 帧率能够达到 50 ～ 60 FPS 的动画将会相当流畅，让人倍感舒适；


• 帧率在 30 ～ 50 FPS 之间的动画，因各人敏感程度不同，舒适度因人而异；


• 帧率在 30 FPS 以下的动画，让人感觉到明显的卡顿和不适感；


• 帧率波动很大的动画，亦会使人感觉到卡顿

现在网上很多关于浏览器reflow的文章都说给要少用offsetTop, offsetLeft 等获取布局信息的。因为这些属性需要触发一次浏览器的的Layout。也就是说在一帧内（16ms）会多了一次layout。如果Layout的次数太多，就会导致掉帧。

视觉稳定性

视觉稳定性指标CLS（Cumulative Layout Shift），也就是布局偏移量，它是指页面从一帧切换到另外一帧时，视线中不稳定元素的偏移情况。

比如，你想要购买的商品正在参加抢购活动，而且时间快要到了。在你正要点击页面链接购买的时候，原来的位置插入了一条 9.9 元包邮的商品广告。结果会怎样？你点成了那个广告商品。如果等你再返回购买的时候，你心仪商品的抢购活动结束了，你是不是很气？所以，CLS也非常重要。

一个好的CLS分数是75%以上的用户小于0.1，如图所示：

布局偏移的具体内容

布局偏移是由 Layout Instability API 定义的。这个API会在任意时间上报 layout-shift 的条目，当一个可见元素在两帧之间，改变了它的起始位置（默认的 writing mode 下指的是top和left属性）。这些元素被当成不稳定元素。

需要注意的是，布局偏移只发生在已经存在的元素改变起始位置的时候。如果一个新的元素被添加到dom上，或者已存在的元素改变它的尺寸，除非改变了其他元素的起始位置，否则都不算布局偏移。

布局偏移主要包含以下几项：

1. 
   

   布局偏移分数：布局偏移的分数是两个度量的乘积：影响分数(impact fraction)和距离分数(distance fraction)。如果是一个很大的元素移动了较小的距离，实际影响并不大，所以分数需要依赖两个度量。

   
   


2. 
   

   影响分数：影响分数测试的是两帧之间，不稳定元素在视图上的影响范围。

   
   


3. 
   

   距离分数：距离分数测试的是两帧之间，不稳定元素在视图上移动的距离（水平和纵向取最大值）。如果有多个不稳定元素，也是取其中最大的一个。

   
   


4. 
   

   动画和过渡：动画和过渡，如果做得好，对用户而言是一个不错的更新内容的方式，这样不会给用户“惊喜”。突然出现的或者预料之外的内容，会给用户一个很差的体验。但如果是一个动画或者过渡，用户可以很清楚的知道发生了什么，在状态变化的时候可以很好的引导用户。

   
   

   CSS中的 transform 属性可以让你在使用动画的时候不会产生布局偏移。

   
   
   
   
   • 用 transform:scale() 来替换 width 和 height 属性
   
   
   • 用 transform:translate() 来替换 top, left, bottom, right 属性
   
   
   
   

CLS是平时开发很少关注的点，页面视觉稳定性对很多web开发而言，可能没有加载性能那么关注度高，但对用户而言，这确实是很困扰的一点。平时开发中，尽可能的提醒自己，不管是产品交互图出来之后，或者是UI的视觉稿出来之后，如果出现了布局偏移的情况，都可以提出这方面的意见。开发过程中也尽可能的遵循上面提到的一些优化点，给用户一个稳定的视觉体验。

RAIL测量模型

RAIL模型是2015年google提出的一个可以量化的测量标准，通过RAIL模型可以指导性能优化的目标，让良好的用户体验成为可能。

1. 
   

   Response 响应：是指用户操作网页的时候浏览器给到用户的反馈时间，其中处理事件应在50ms以内完成。

   
   

   为什么是50ms？谷歌向向用户发起调研，将用户的反馈分成了几个组，经过研究得出用户能接受的反馈时间是100ms。

   
   

   那么为什么我们要设置在50ms以内，因为100ms是用户输入到反馈的时间，但是浏览器处理反馈也需要时间，所以留给开发者优化处理事件的时间在50ms以内。如下图所示：

优质的图片可以有效吸引用户，给用户良好的体验，所以随着互联网的发展，越来越多的产品开始使用图片来提升产品体验。相较于页面其他元素，图片的体积不容忽视。下图是截止 2019 年 6 月 HTTP Archive[1] 上统计的网站上各类资源加载的体积：

1.1. 雪碧图

图片可以合并么？当然。最为常用的图片合并场景就是雪碧图（Sprite）^[3]。

在网站上通常会有很多小的图标，不经优化的话，最直接的方式就是将这些小图标保存为一个个独立的图片文件，然后通过 CSS 将对应元素的背景图片设置为对应的图标图片。这么做的一个重要问题在于，页面加载时可能会同时请求非常多的小图标图片，这就会受到浏览器并发 HTTP 请求数的限制。我见过一个没有使用雪碧图的页面，首页加载时需要发送 20+ 请求来加载图标。将图标合并为一张大图可以实现「20+ → 1」的巨大缩减。

雪碧图的核心原理在于设置不同的背景偏移量，大致包含两点：

• 不同的图标元素都会将 background-url 设置为合并后的雪碧图的 uri；


• 不同的图标通过设置对应的 background-position 来展示大图中对应的图标部分。

你可以用 Photoshop 这类工具自己制作雪碧图。当然比较推荐的还是将雪碧图的生成集成到前端自动化构建工具中，例如在 webpack 中使用 webpack-spritesmith，或者在 gulp 中使用 gulp.spritesmith。它们两者都是基于于 spritesmith 这个库，你也可以自己将这个库集成到你喜欢的构建工具中。

1.2. 懒加载

我们知道，一般来说我们访问一个页面，浏览器加载的整个页面其实是要比可视区域大很多的，也是什么我们会提出“首屏”的概念。这就导致其实很多图片是不在首屏中的，如果我们都加载的话，相当于是加载了用户不一定会看到图片。而图片体积一般都不小，这显然是一种流量的浪费。这种场景在一些带图片的长列表或者配图的博客中经常会遇到。

解决的核心思路就是图片懒加载 —— 尽量只加载用户正在浏览或者即将会浏览到的图片。实现上来说最简单的就是通过监听页面滚动，判断图片是否进入视野，从而真正去加载图片：

function loadIfNeeded($img) {
    const bounding = $img..getBoundingClientRect();
    if (
        getComputedStyle($img).display !== 'none'
        && bounding.top <= window.innerHeight
        && bounding.bottom >= 0
    ) {
        $img.src = $img.dataset.src;
        $img.classList.remove('lazy');
    }
}

// 这里使用了 throttle，你可以实现自己的 throttle，也可以使用 lodash
const lazy = throttle(function () {
    const $imgList = document.querySelectorAll('.lazy');
    if ($imgList.length === 0) {
        document.removeEventListener('scroll', lazy);
        window.removeEventListener('resize', lazy);
        window.removeEventListener('orientationchange', lazy);
        return;
    }
    $imgList.forEach(loadIfNeeded);
}, 200);

document.addEventListener('scroll', lazy);
window.addEventListener('resize', lazy);
window.addEventListener('orientationchange', lazy);

对于页面上的元素只需要将原本的 src 值设置到 data-src 中即可，而 src 可以设置为一个统一的占位图。注意，由于页面滚动、缩放和横竖方向（移动端）都可能会改变可视区域，因此添加了三个监听。

当然，这是最传统的方法，现代浏览器还提供了一个更先进的 Intersection Observer API^[4] 来做这个事，它可以通过更高效的方式来监听元素是否进入视口。考虑兼容性问题，在生产环境中建议使用对应的 polyfill。

如果想使用懒加载，还可以借助一些已有的工具库，例如 aFarkas/lazysizes、verlok/lazyload、tuupola/lazyload 等。

在使用懒加载时也有一些注意点：

• 首屏可以不需要懒加载，对首屏图片也使用懒加载会延迟图片的展示。


• 设置合理的占位图，避免图片加载后的页面“抖动”。


• 虽然目前基本所有用户都不会禁用 JavaScript，但还是建议做一些 JavaScript 不可用时的 backup。

对于占位图这块可以再补充一点。为了更好的用户体验，我们可以使用一个基于原图生成的体积小、清晰度低的图片作为占位图。这样一来不会增加太大的体积，二来会有很好的用户体验。LQIP (Low Quality Image Placeholders)^[5] 就是这种技术。目前也已经有了 LQIP 和 SQIP(SVG-based LQIP) 的自动化工具可以直接使用。

如果你想了解更多关于图片懒加载的内容，这里有一篇更详尽的图片懒加载指南^[6]。

1.3. CSS 中的图片懒加载

除了对于 <img> 元素的图片进行来加载，在 CSS 中使用的图片一样可以懒加载，最常见的场景就是 background-url 

.login {
    background-url: url(/static/img/login.png);
}

对于上面这个样式规则，如果不应用到具体的元素，浏览器不会去下载该图片。所以你可以通过切换 className 的方式，放心得进行 CSS 中图片的懒加载。

1.4. 内联 base64

还有一种方式是将图片转为 base64 字符串，并将其内联到页面中返回，即将原 url 的值替换为 base64。这样，当浏览器解析到这个的图片 url 时，就不会去请求并下载图片，直接解析 base64 字符串即可。

但是这种方式的一个缺点在于相同的图片，相比使用二进制，变成 base64 后体积会增大 33%。而全部内联进页面后，也意味着原本可能并行加载的图片信息，都会被放在页面请求中（像当于是串行了）。同时这种方式也不利于复用独立的文件缓存。所以，使用 base64 需要权衡，常用于首屏加载 CRP 或者骨架图上的一些小图标。

2. 减小图片大小

2.1. 使用合适的图片格式

使用合适的图片格式不仅能帮助你减少不必要的请求流量，同时还可能提供更好的图片体验。

图片格式是一个比较大的话题，选择合适的格式^[7]有利于性能优化。这里我们简单总结一些。

1) 使用 WebP：

考虑在网站上使用 WebP 格式^[8]。在有损与无损压缩上，它的表现都会优于传统（JPEG/PNG）格式。WebP 无损压缩比 PNG 的体积小 26%，webP 的有损压缩比同质量的 JPEG 格式体积小 25-34%。同时 WebP 也支持透明度。下面提供了一种兼容性较好的写法。

<picture>
    <source type="image/webp" srcset="/static/img/perf.webp">
    <source type="image/jpeg" srcset="/static/img/perf.jpg">
    <img src="/static/img/perf.jpg">
</picture>

2) 使用 SVG 应对矢量图场景：

在一些需要缩放与高保真的情况，或者用作图标的场景下，使用 SVG 这种矢量图非常不错。有时使用 SVG 格式会比相同的 PNG 或 JPEG 更小。

3) 使用 video 替代 GIF：

在兼容性允许的情况下考虑，可以在想要动图效果时使用视频，通过静音（muted）的 video 来代替 GIF。相同的效果下，GIF 比视频（MPEG-4）大 5～20 倍。Smashing Magazine 上有篇文章^[9]详细介绍使用方式。

4) 渐进式 JPEG：

基线 JPEG (baseline JPEG) 会从上往下逐步呈现，类似下面这种：

而另一种渐进式 JPEG (progressive JPEG)[10] 则会从模糊到逐渐清晰，使人的感受上会更加平滑。

<img srcset="small.jpg 480w, large.jpg 1080w" sizes="50w" src="large.jpg" >

用户喜欢快速的网络应用，他们希望页面加载速度快，功能流畅。如果在滚动时有破损的动画或滞后，用户很有可能会离开你的网站。作为一名开发者，你可以做很多事情来改善用户体验。本文将重点介绍4个可以用来提高页面渲染速度的CSS技巧。

1. Content-visibility

一般来说，大多数Web应用都有复杂的UI元素，它的扩展范围超出了用户在浏览器视图中看到的内容。在这种情况下，我们可以使用内容可见性（ content-visibility ）来跳过屏幕外内容的渲染。如果你有大量的离屏内容，这将大大减少页面渲染时间。

这个功能是最新增加的功能之一，也是对提高渲染性能影响最大的功能之一。虽然 content-visibility 接受几个值，但我们可以在元素上使用 content-visibility: auto; 来获得直接的性能提升。

让我们考虑一下下面的页面，其中包含许多不同信息的卡片。虽然大约有12张卡适合屏幕，但列表中大约有375张卡。正如你所看到的，浏览器用了1037ms来渲染这个页面。

下一步，您可以向所有卡添加 content-visibility 。

在这个例子中，在页面中加入 content-visibility 后，渲染时间下降到150ms，这是6倍以上的性能提升。

正如你所看到的，内容可见性是相当强大的，对提高页面渲染时间非常有用。根据我们目前所讨论的东西，你一定是把它当成了页面渲染的银弹。

然而，有几个领域的内容可视性不佳。我想强调两点，供大家参考。

• 此功能仍处于试验阶段。 截至目前，Firefox（PC和Android版本）、IE（我认为他们没有计划在IE中添加这个功能）和，Safari（Mac和iOS）不支持内容可见性。


• 与滚动条行为有关的问题。 由于元素的初始渲染高度为0px，每当你向下滚动时，这些元素就会进入屏幕。实际内容会被渲染，元素的高度也会相应更新。这将使滚动条的行为以一种非预期的方式进行。

为了解决滚动条的问题，你可以使用另一个叫做 contain-intrinsic-size 的 CSS 属性。它指定了一个元素的自然大小，因此，元素将以给定的高度而不是0px呈现。

.element{
  content-visibility: auto;
  contain-intrinsic-size: 200px;
}

浏览器上的动画并不是一件新鲜事。通常情况下，这些动画是和其他元素一起定期渲染的。不过，现在浏览器可以使用GPU来优化其中的一些动画操作。

通过will-change CSS属性，我们可以表明元素将修改特定的属性，让浏览器事先进行必要的优化。

下面发生的事情是，浏览器将为该元素创建一个单独的层。之后，它将该元素的渲染与其他优化一起委托给GPU。这将使动画更加流畅，因为GPU加速接管了动画的渲染。

// In stylesheet
.animating-element {
  will-change: opacity;
}

// In HTML
<div class="animating-elememt">
  Animating Child elements
</div>

当在浏览器中渲染上述片段时，它将识别 will-change 属性并优化未来与不透明度相关的变化。

根据Maximillian Laumeister所做的性能基准，可以看到他通过这个单行的改变获得了超过120FPS的渲染速度，而最初的渲染速度大概在50FPS。

.my-class{
  will-change: opacity;
}
.child-class{
  transition: opacity 1s ease-in-out;
}

<link rel="stylesheet" href="styles.css">

<!-- style.css contains only the minimal styles needed for the page rendering -->
<link rel="stylesheet" href="styles.css" media="all" />
<!-- Following stylesheets have only the styles necessary for the form factor -->
<link rel="stylesheet" href="sm.css" media="(min-width: 20em)" />
<link rel="stylesheet" href="md.css" media="(min-width: 64em)" />
<link rel="stylesheet" href="lg.css" media="(min-width: 90em)" />
<link rel="stylesheet" href="ex.css" media="(min-width: 120em)" />
<link rel="stylesheet" href="print.css" media="print" />

# style.css
@import url("windows.css");
# windows.css
@import url("componenets.css");

总结

正文

笔者将通过不同经验程序员的技术视角来分析以上问题, 接下来开始我们的表演.

在开始代码之前我们先做好基础准备, 笔者先用nodejs搭建一个数据服务器, 提供基本的数据请求,核心代码如下:

app.use(async (ctx, next) => {
  if(ctx.url === '/api/getMock') {
    let list = []
    
    // 生成指定个数的随机字符串
    function genrateRandomWords(n) {
      let words = 'abcdefghijklmnopqrstuvwxyz你是好的嗯气短前端后端设计产品网但考虑到付款啦分手快乐的分类开发商的李开复封疆大吏师德师风吉林省附近',
          len = words.length,
          ret = ''
      for(let i=0; i< n; i++) {
        ret += words[Math.floor(Math.random() * len)]
      }
      return ret
    }

    // 生成10万条数据的list
    for(let i = 0; i< 100000; i++) {
      list.push({
        name: `xu_0${i}`,
        title: genrateRandomWords(12),
        text: `我是第${i}项目, 赶快🌀吧~~`,
        tid: `xx_${i}`
      })
    }

    ctx.body = {
      state: 200,
      data: list
    }
  }
  await next()
})

以上笔者是采用koa实现的基本的mock数据服务器, 这样我们就可以模拟真实的后端环境来开始我们的前端开发啦(当然也可以直接在前端手动生成10万条数据). 其中genrateRandomWords方法用来生成指定个数的字符串,这在mock数据技术中应用很多, 感兴趣的盆友可以学习了解一下. 接下来的前端代码笔者统一采用react来实现(vue同理).

初级工程师的方案

直接从后端请求数据, 渲染到页面的硬编码方案,思路如下:

代码可能是这样的:

1. 请求后端数据:

fetch(`${SERVER_URL}/api/getMock`).then(res => res.json()).then(res => {
  if(res.state) {
    data = res.data
    setList(data)
  }
})

2. 渲染页面

{
    list.map((item, i) => {
      return <div className={styles.item} key={item.tid}>
        <div className={styles.tit}>{item.title} <span className={styles.label}>{item.name}</span></div>
        <div>{item.text}</div>
      </div>
    })
}

3. 搜索数据

const handleSearch = (v) => {
    let searchData = data.filter((item, i) => {
      return item.title.indexOf(v) > -1
     })
     setList(searchData)
  }

这样做本质上是可以实现基本的需求,但是有明显的缺点,那就是数据一次性渲染到页面中, 数据量庞大将导致页面性能极具降低, 造成页面卡顿.

中级工程师的方案

作为一名有一定经验的前端开发工程师,一定对页面性能有所了解, 所以一定会熟悉防抖函数和节流函数, 并使用过诸如懒加载和分页这样的方案, 接下来我们看看中级工程师的方案：

通过这个过程的优化, 代码已经基本可用了, 下面来介绍具体实现方案:

1. 懒加载+分页方案 懒加载的实现主要是通过监听窗口的滚动, 当某一个占位元素可见之后去加载下一个数据,原理如下:

1. 这里我们通过监听window的scroll事件以及对poll元素使用getBoundingClientRect来获取poll元素相对于可视窗口的距离, 从而自己实现一个懒加载方案.

在滚动的过程汇总我们还需要注意一个问题就是当用户往回滚动时, 实际上是不需要做任何处理的,所以我们需要加一个单向锁, 具体代码如下:

function scrollAndLoading() {
    if(window.scrollY > prevY) {  // 判断用户是否向下滚动
      prevY = window.scrollY
      if(poll.current.getBoundingClientRect().top <= window.innerHeight) {
        // 请求下一页数据
      }
    }
}

useEffect(() => {
    // something code
    const getData = debounce(scrollAndLoading, 300)
    window.addEventListener('scroll', getData, false)
    return () => {
      window.removeEventListener('scroll', getData, false)
    }
  }, [])

其中prevY存储的是窗口上一次滚动的距离, 只有在向下滚动并且滚动高度大于上一次时才更新其值.

至于分页的逻辑, 原生javascript实现分页也很简单, 我们通过定义几个维度:

• curPage当前的页数


• pageSize 每一页展示的数量


• data 传入的数据量

有了这几个条件,我们的基本能分页功能就可以完成了. 前端分页的核心代码如下:

let data = [];
let curPage = 1;
let pageSize = 16;
let prevY = 0;

// other code...

function scrollAndLoading() {
    if(window.scrollY > prevY) {  // 判断用户是否向下滚动
      prevY = window.scrollY
      if(poll.current.getBoundingClientRect().top <= window.innerHeight) {
        curPage++
        setList(searchData.slice(0, pageSize * curPage))
      }
    }
}

2. 防抖函数实现 防抖函数因为比较简单, 这里直接上一个简单的防抖函数代码:

function debounce(fn, time) {
    return function(args) {
      let that = this
      clearTimeout(fn.tid)
      fn.tid = setTimeout(() => {
        fn.call(that, args)
      }, time);
    }
  }

3. 搜索实现 搜索功能代码如下:

const handleSearch = (v) => {
     curPage = 1;
     prevY = 0;
     searchData = data.filter((item, i) => {
        // 采用正则来做匹配, 后期支持前端模糊搜索
       let reg = new RegExp(v, 'gi')
       return reg.test(item.title)
     })
     setList(searchData.slice(0, pageSize * curPage))
}

需要结合分页来实现, 所以这里为了不影响源数据, 我们采用临时数据searchData来存储. 效果如下:

搜索后

无论是搜索前还是搜索后, 都利用了懒加载, 所以再也不用担心数据量大带来的性能瓶颈了~

高级工程师的方案

作为一名久经战场的程序员, 我们应该考虑更优雅的实现方式,比如组件化, 算法优化, 多线程这类问题, 就比如我们问题中的大数据渲染, 我们也可以用虚拟长列表来更优雅简洁的来解决我们的需求. 至于虚拟长列表的实现笔者在开头已经点过,这里就不详细介绍了, 对于更大量的数据,比如100万(虽然实际开发中不会遇到这么无脑的场景),我们又该怎么处理呢?

第一个点我们可以使用js缓冲器来分片处理100万条数据, 思路代码如下:

function multistep(steps,args,callback){
    var tasks = steps.concat();

    setTimeout(function(){
        var task = tasks.shift();
        task.apply(null, args || []);   //调用Apply参数必须是数组

        if(tasks.length > 0){
            setTimeout(arguments.callee, 25);
        }else{
            callback();
        }
    },25);
}

这样就能比较大量计算导致的js进程阻塞问题了.更多性能优化方案可以参考笔者之前的文章:

• web性能优化的15条实用技巧

我们还可以通过web worker来将需要在前端进行大量计算的逻辑移入进去, 保证js主进程的快速响应, 让web worker线程在后台计算, 计算完成后再通过web worker的通信机制来通知主进程, 比如模糊搜索等, 我们还可以对搜索算法进一步优化,比如二分法等,所以这些都是高级工程师该考虑的问题. 但是一定要分清场景, 寻找出性价比更高的方案.

链接：https://juejin.cn/post/6844904184689475592

可以看到，基本上耗时大户就是eslint-loader和vue-loader了，二者一个耗时40多秒，一个耗时30多秒，非常的占用资源。

接下来再看看具体的包分析👇

这一看就很一下子定位到问题到根源了，右侧的chunk-vendors不用看，只看左侧的chunk-page，这里面的页面数量太多了，相应的文件也很多，这也就直接导致了eslint-loader和vue-loader耗时很久了，这么多文件，一个个检查耗时当然久了。

右侧其实还可以继续优化，但感觉没必要，swiper其实并不大。

那么现在就可以具体定位到问题了，由于项目是多SPA应用，致使.vue文件众多，在项目启动时进行eslint检查和加载耗时过长，导致项目启动时间较久。

解决方案

找到问题之后就得解决问题了，初步的解决方案有两个：

1. 干掉eslint，在本地编译时不检查


2. 缓存

解决方案1必然是最简单的，但其实有点不合理，开着eslint就是为了规范代码格式，虽然在提交代码时也有对应的钩子来格式化代码，但在开发过程中进行提示可以更好的帮助我们形成合理的编码方式。

所以现在剩下的方案就只有进行缓存操作了，接下来笔者就开始找相关插件来更好的进行缓存了。

尝试解决

首先是hard-source-webpack-plugin，这插件为模块提供中间缓存步骤，但项目得跑两次，第一次构建时间正常，第二次大概能省去90%左右的时间。

这插件很多文章都有推荐，感觉很不错的样子，用起来也很简单，只需要👇：

plugins: [
  new HardSourceWebpackPlugin()
]

这就完事了。

就这么简单？确实是这么简单，但也不简单，如果到此为止，笔者也不会折腾一下午了。

就这么简单的一安装：

npm i hard-source-webpack-plugin -D

然后像👆一样简单的配置，然后重启项目，您猜怎么着？

报错了！

原因是什么呢？

是因为speed-measure-webpack-plugin或者webpack-bundle-analyzer中的某一个，为什么呢？

原因笔者其实并不太清楚，因为启动的时候报的错是这样的：

Cannot find module 'webpack/lib/DependenciesBlockVariable'

哦呦，这个错有点小意外，怎么会突然报webpack的错呢？

笔者也是百思不得其解啊，去Google也没有人遇到这种问题。

不得已，只能去hard-source-webpack-plugin的github上看issue，发现其实有人遇到这个问题的，他们的解决方案就是降低webpack的版本，可笔者这里没办法这么做，因为都集成在vue-cli里了，而且这个还是公司内部包了一层的，这就根本不可能降版本了。

第一个转机

那还能怎么办呢？

实在没有办法了，笔者尝试搜索DependenciesBlockVariable的相关内容，这时事情发生了一丝微妙的变换，原来这个功能在webpack5中被移除了，难道是因为公司内部的vue-cli用的是webpack5.x版本？

笔者当即在node_modules里面找到了插件，然后查看了package.json文件，结果失望的发现webpack的版本是4.2.6，这就令人绝望了，难道真的不可以么？

既然打开了webpack的文档，那就好好看看吧。老实说这文档笔者已经看了N次了，真是每次看都有小惊喜，功能真是太多了。

翻着翻着就看到了这个小功能👇：

哦呦，还真有点小惊喜呦，这功能简直了，这不就是我想要的么？然后当机立断，往vue.config.js里一家，您猜怎么着？

成了！

虽然文档是webpack5.0的，但笔者发现4.x版本中也有这个功能，可能若一弱一些吧，多少能用啊。

重启了几次项目后发现启动时间已经稳定了，效果真的还不错呦～

直接给我干到了14秒，虽然有些不太稳定，但这已经是当前状态的最好解决方案了。

所以最后的代码就是：

chainWebpack: (config) => {
  config.cache(true)
}

chainWebpack: (config) => {
  config.plugin('cache').use(HardSourceWebpackPlugin)
}

config.plugin('cache').use(HardSourceWebpackPlugin)

config.cache(true)

上手初体验

刚开始上手时，推荐使用官方的脚手架创建项目，省时省心。

npx create-ink-app --typescript

然后运行这样一段代码:

import React, { useState, useEffect } from 'react'
import { render, Text} from 'ink'

const Counter = () => {
  const [count, setCount] = useState(0)
  useEffect(() => {
    const timer = setInterval(() => {
      setCount(count => ++count)
    }, 100)
    return () => {
      clearInterval(timer)
    }
    
  })

  return (
    <Text color="green">
      {count} tests passed
    </Text>
  )
}

render(<Counter />);

会出现如下的界面:

import { join, parse } from "path";
import { fdir } from 'fdir';
import fse from 'fs-extra'
const staticFiles = await new fdir() 
  .withFullPaths()   
  // 过滤掉 node_modules、ts、tsx
  .filter(
    (p) =>
      !p.includes('node_modules') &&
      !p.endsWith('.ts') &&
      !p.endsWith('.tsx')
  )
  // 搜索 src 目录
  .crawl(srcPath)
  .withPromise() as string[]

await Promise.all(staticFiles.map(file => {
  const targetFilePath = file.replace(srcPath, distPath);
  // 创建目录并拷贝文件
  return fse.mkdirp(parse(targetFilePath).dir)
    .then(() => fse.copyFile(file, distPath))
   );
}))

// index.tsx 引入代码省略
interface AppProps {
 fileConsumer: FileCopyConsumer
}

const ACTIVE_TAB_NAME = {
 STATE: "执行状态",
 LOG: "执行日志"
}

const App: FC<AppProps> = ({ fileConsumer }) => {
 const [activeTab, setActiveTab] = useState<string>(ACTIVE_TAB_NAME.STATE);
 const handleTabChange = (name) => {
  setActiveTab(name)
 }
 const WELCOME_TEXT = dedent`
  欢迎来到 \`ink-copy\` 控制台！功能概览如下(按 **Tab** 切换):
 `

 return <>
   <FullScreen>
    <Box>
     <Markdown>{WELCOME_TEXT}</Markdown>
    </Box>
    <Tabs onChange={handleTabChange}>
     <Tab name={ACTIVE_TAB_NAME.STATE}>{ACTIVE_TAB_NAME.STATE}</Tab>
     <Tab name={ACTIVE_TAB_NAME.LOG}>{ACTIVE_TAB_NAME.LOG}</Tab>
    </Tabs>
    <Box>
     <Box display={ activeTab === ACTIVE_TAB_NAME.STATE ? 'flex': 'none'}>
      <State />
     </Box>
     <Box display={ activeTab === ACTIVE_TAB_NAME.LOG ? 'flex': 'none'}>
      <Log />
     </Box>
    </Box>
   </FullScreen>
 </>
};

export default App;

export interface EventData {
  kind: string;
  payload: any;
}

export class FileCopyConsumer {

  private callbacks: Function[];
  constructor() {
    this.callbacks = []
  }
  // 供 React 组件绑定回调
  onEvent(fn: Function) {
    this.callbacks.push(fn);
  }
  // 文件操作完成后调用
  onDone(event: EventData) {
    this.callbacks.forEach(callback => callback(event))
  }
}

export class FileOperator {
  fileConsumer: FileCopyConsumer;
  srcPath: string;
  targetPath: string;
  constructor(srcPath ?: string, targetPath ?: string) {
    // 初始化 EventBus 对象
    this.fileConsumer = new FileCopyConsumer();
    this.srcPath = srcPath ?? join(process.cwd(), 'src');
    this.targetPath = targetPath ?? join(process.cwd(), 'dist');
  }

  async copyFiles() {
    // 存储 log 信息
    const stats = [];
    // 在 src 中搜索文件
    const staticFiles = ...
    
    await Promise.all(staticFiles.map(file => {
        // ...
        // 存储 log
        .then(() => stats.push(`Copied file from [${file}] to [${targetFilePath}]`));
    }))
    // 调用 onDone
    this.fileConsumer.onDone({
      kind: "finish",
      payload: stats
    })
  }
}

// 组件当中拿到 fileConsumer & 绑定回调
export const State: FC<{}> = () => {
  const context = useContext(Context);
  const [finish, setFinish] = useState(false);
  context?.fileConsumer.onEvent((data: EventData) => {
    // 下面的逻辑在文件拷贝完成后执行
    if (data.kind === 'finish') {
      setTimeout(() => {
        setFinish(true)
      }, 2000)
    }
  })

  return 
  //(JSX代码)
}

什么是单一责任原则？

单一责任原则告诉我们的是，每个类或组件应该有一个单一的存在目的。

组件应该只做一件事，并且做得很好。

让我们重构一段糟糕但正常工作的代码，并使用这个原则使其更加清晰和完善。

让我们从一个糟糕的例子开始

首先让我们看看一些违反这一原则的代码，添加注释是为了更好地理解:

import React, {useEffect, useReducer, useState} from "react";

const initialState = {
    isLoading: true
};

// 复杂的状态管理
function reducer(state, action) {
    switch (action.type) {
        case 'LOADING':
            return {isLoading: true};
        case 'FINISHED':
            return {isLoading: false};
        default:
            return state;
    }
}

export const SingleResponsibilityPrinciple = () => {

    const [users , setUsers] = useState([])
    const [filteredUsers , setFilteredUsers] = useState([])
    const [state, dispatch] = useReducer(reducer, initialState);

    const showDetails = (userId) => {
        const user = filteredUsers.find(user => user.id===userId);
        alert(user.contact)
    }

    // 远程数据获取
    useEffect(() => {
        dispatch({type:'LOADING'})
        fetch('https://jsonplaceholder.typicode.com/users')
            .then(response => response.json())
            .then(json => {
                dispatch({type:'FINISHED'})
                setUsers(json)
            })
    },[])

    // 数据处理
    useEffect(() => {
        const filteredUsers = users.map(user => {
            return {
                id: user.id,
                name: user.name,
                contact: `${user.phone} , ${user.email}`
            };
        });
        setFilteredUsers(filteredUsers)
    },[users])

    // 复杂UI渲染
    return <>
        
 Users List

        
 Loading state: {state.isLoading? 'Loading': 'Success'}

        {users.map(user => {
            return 
 showDetails(user.id)}>
                
{user.name}

                
{user.email}

            

        })}
    
}

这段代码的作用

这是一个函数式组件，我们从远程数据源获取数据，再过滤数据，然后在 UI 中显示数据。我们还检测 API 调用的加载状态。

为了更好地理解这个例子，我把它简化了。但是你几乎可以在任何地方的同一个组件中找到它们！这里发生了很多事情:

1. 远程数据的获取

2. 数据过滤

3. 复杂的状态管理

4. 复杂的 UI 功能

import {useEffect, useReducer, useState} from "react";

const initialState = {
    isLoading: true
};

function reducer(state, action) {
    switch (action.type) {
        case 'LOADING':
            return {isLoading: true};
        case 'FINISHED':
            return {isLoading: false};
        default:
            return state;
    }
}

export const useGetRemoteData = (url) => {

    const [users , setUsers] = useState([])
    const [state, dispatch] = useReducer(reducer, initialState);

    const [filteredUsers , setFilteredUsers] = useState([])


    useEffect(() => {
        dispatch({type:'LOADING'})
        fetch('https://jsonplaceholder.typicode.com/users')
            .then(response => response.json())
            .then(json => {
                dispatch({type:'FINISHED'})
                setUsers(json)
            })
    },[])

    useEffect(() => {
        const filteredUsers = users.map(user => {
            return {
                id: user.id,
                name: user.name,
                contact: `${user.phone} , ${user.email}`
            };
        });
        setFilteredUsers(filteredUsers)
    },[users])

    return {filteredUsers , isLoading: state.isLoading}
}

import React from "react";
import {useGetRemoteData} from "./useGetRemoteData";

export const SingleResponsibilityPrinciple = () => {

    const {filteredUsers , isLoading} = useGetRemoteData()

    const showDetails = (userId) => {
        const user = filteredUsers.find(user => user.id===userId);
        alert(user.contact)
    }

    return <>
        
 Users List

        
 Loading state: {isLoading? 'Loading': 'Success'}

        {filteredUsers.map(user => {
            return 
 showDetails(user.id)}>
                
{user.name}

                
{user.email}

            

        })}
    
}

import {useEffect, useReducer, useState} from "react";
import {loadingReducer} from "./LoadingReducer";

const initialState = {
    isLoading: true
};

export const useHttpGetRequest = (URL) => {

    const [users , setUsers] = useState([])
    const [state, dispatch] = useReducer(loadingReducer, initialState);

    useEffect(() => {
        dispatch({type:'LOADING'})
        fetch(URL)
            .then(response => response.json())
            .then(json => {
                dispatch({type:'FINISHED'})
                setUsers(json)
            })
    },[])

    return {users , isLoading: state.isLoading}

}

export function loadingReducer(state, action) {
    switch (action.type) {
        case 'LOADING':
            return {isLoading: true};
        case 'FINISHED':
            return {isLoading: false};
        default:
            return state;
    }
}

import {useEffect, useState} from "react";
import {useHttpGetRequest} from "./useHttpGet";
const REMOTE_URL = 'https://jsonplaceholder.typicode.com/users'

export const useGetRemoteData = () => {
    const {users , isLoading} = useHttpGetRequest(REMOTE_URL)
    const [filteredUsers , setFilteredUsers] = useState([])

    useEffect(() => {
        const filteredUsers = users.map(user => {
            return {
                id: user.id,
                name: user.name,
                contact: `${user.phone} , ${user.email}`
            };
        });
        setFilteredUsers(filteredUsers)
    },[users])

    return {filteredUsers , isLoading}
}

const UserDetails = (user) => {

    const showDetails = (user) => {
        alert(user.contact)
    }

    return 
 showDetails(user)}>
        
{user.name}

        
{user.email}

    

}

import React from "react";
import {useGetRemoteData} from "./useGetRemoteData";

export const Users = () => {
    const {filteredUsers , isLoading} = useGetRemoteData()

    return <>
        
 Users List

        
 Loading state: {isLoading? 'Loading': 'Success'}

        {filteredUsers.map(user => )}
    
}

export default class Parent extends React.Component {
  state = {
    count: 0,
  }
  render() {
    return(
      <div>
        我是父组件
        <button onClick={() => this.setState({count: this.state.count++})}>点击按钮</button>
        <Child />
      </div>
    )
  }
}

class Child extends React.Component {
  render() {
    console.log('我是子组件');
    return (
      <div>
        我是子组件
        <Grandson />
      </div>
    )
  }
}

class Grandson extends React.Component {
  render() {
    console.log('孙子组件')
    return(<div>孙子组件</div>)
  }
}

class Child extends React.Component {
  shouldComponentUpdate (nextProps, nextState) {
    console.log(nextProps, this.props);
    if (nextProps.count === this.props.count) {
      return false;
    } else {
      return true;
    }
  }
  ...
}

class Child extends React.PureComponent {
  render() {
    console.log('我是子组件');
    return (
      <div>
        我是子组件
        <Grandson />
      </div>
    )
  }
}

// 下面这种情况不会重新渲染子组件
<Child/>
// 下面这种情况下会重新渲染子组件
<Child count={this.state.count}/>

function Child () {
  console.log('我是子组件');
  return (
    <div>
      子组件
    </div>
  )
}

function Parent () {
  const [count, setCount] = useState(0);
  return (
    <div>
      我是父组件-{count}
      <button onClick={()=>setCount(count + 1)}>点击按钮</button>
      <Child />
    </div>
  )
}

function Child () {
  console.log('我是子组件');
  return (
    <div>
      子组件
    </div>
  )
}

const ChildMemo = React.memo(Child);
function Parent () {
  const [count, setCount] = useState(0);
  return (
    <div>
      我是父组件-{count}
      <button onClick={()=>setCount(count + 1)}>点击按钮</button>
      {/* 这种情况下不会渲染子组件 */}
      <ChildMemo />
      {/* 这种情况下会渲染子组件 */}
      <ChildMemo count={count}/>
    </div>
  )
}

const Child = (props) => {
  console.log('重新渲染子组件', props);
  return (
    <div>子组件</div>
  )
}
const ChildMemo = React.memo(Child);

const Parent = () => {
  const [count, setCount] = useState(0);
  const [number, setNumber]=useState(0)
  const userInfo = {
    age: count,
    name: 'hello',
  }

  const btnHandler = () => {
    setNumber(number+1);
  }
  return (
    <div>
      {number}-{count}
      <button onClick={btnHandler}>按钮</button>
      <ChildMemo userInfo={userInfo}/>
    </div>
  )
}

const userInfo = useMemo(() => {
  return {
    age: count,
    name: 'hello',
  };
}, [count]);

const Child = (props) => {
  console.log('渲染了子组件');
  const { onClick } = props;
  return (
    <button onClick={onClick}>点击按钮获取值</button>
  )
}

const ChildMemo = React.memo(Child);

const Parent = () => {
  const [text, updateText] = useState('');
  const textRef = useRef(text);
  const handleSubmit = () => {
    console.log('当前的值', text);
  }
  return(
    <div>
      我是父组件
      <input type="text" value={text} onChange={(e) => updateText(e.target.value)}/>
      <ChildMemo onClick={handleSubmit}/>
    </div>
  )
}

const Parent = () => {
  const [text, updateText] = useState('');
  const textRef = useRef();

  // useCallback又依赖了textRef的变化，因此可以获取到最新的数据
  const handleSubmit = useCallback(() => {
    console.log('当前输入框的值:', textRef.current);
  }, [textRef])

  // 当text的值变化的时候就会给textRef的current重新赋值
  useEffect(() => {
    textRef.current = text;
  }, [text]);
  
  return(
    <div>
      我是父组件
      <input type="text" value={text} onChange={(e) => updateText(e.target.value)}/>
      <ChildMemo onClick={handleSubmit}/>
    </div>
  )
}

原文：https://juejin.cn/post/6965302793242411021

1.时间复杂度

// 更新前
<div>
  <p >ka</p>
  <h3 >song</h3>
</div>

// 更新后
<div>
  <h3 >song</h3>
  <p>ka</p>
</div>
这种情况下diff react会把p删除然后新建h3 插入 然后删除h3创建p在传入

// 更新前
<div>
  <p key="ka">ka</p>
  <h3 key="song">song</h3>
</div>

// 更新后
<div>
  <h3 key="song">song</h3>
  <p key="ka">ka</p>
</div>
//有key的情况,p节点找到后面key相同的p节点所以节点可以复用 h3也可以复用 只需要做一个p append到h3后面的操作

2.单一节点的diff

1.diff 就是对比jsx和currentfiber的对象生成workingprogress的fiber

2.dom节点是否可复用？1.type必须相同 2.key也必须相同 满足这两个才能复用 先检测key是否同再检测type是否同，可复用就复用这个fiber 不过是换属性而已

//current
<div></div>
<p></p>
//jsx
<p><p>

什么时候执行多节点diff？当jsx此次为数组即可，无论currentfiber是不是数组

一共有三种情况

1.节点更新

//情况1—— 节点属性变化
// 之前
<ul>
  <li key="0" className="before">0<li>
  <li key="1">1<li>
</ul>

// 之后  
<ul>
  <li key="0" className="after">0<li>
  <li key="1">1<li>
</ul>
//情况2—— 节点类型更新
// 之后  
<ul>
  <div key="0">0</div>
  <li key="1">1<li>
</ul>

2.节点新增或者减少

//情况1 —— 新增节点
// 之前
<ul>
  <li key="0">0<li>
  <li key="1">1<li>
</ul>

// 之后 
<ul>
  <li key="0">0<li>
  <li key="1">1<li>
  <li key="2">2<li>
</ul>
//情况2 —— 删除节点
// 之后 
<ul>
  <li key="1">1<li>
</ul>

3.节点位置变化

// 之前
<ul>
  <li key="0">0<li>
  <li key="1">1<li>
</ul>

// 之后
<ul>
  <li key="1">1<li>
  <li key="0">0<li>
</ul>

function reconcileChildrenArray(
    returnFiber: Fiber,
    currentFirstChild: Fiber | null,
    newChildren: Array<*>,
    lanes: Lanes,
  ): Fiber | null {
    // This algorithm can't optimize by searching from both ends since we
    // don't have backpointers on fibers. I'm trying to see how far we can get
    // with that model. If it ends up not being worth the tradeoffs, we can
    // add it later.

    // Even with a two ended optimization, we'd want to optimize for the case
    // where there are few changes and brute force the comparison instead of
    // going for the Map. It'd like to explore hitting that path first in
    // forward-only mode and only go for the Map once we notice that we need
    // lots of look ahead. This doesn't handle reversal as well as two ended
    // search but that's unusual. Besides, for the two ended optimization to
    // work on Iterables, we'd need to copy the whole set.

    // In this first iteration, we'll just live with hitting the bad case
    // (adding everything to a Map) in for every insert/move.

    // If you change this code, also update reconcileChildrenIterator() which
    // uses the same algorithm.

    if (__DEV__) {
      // First, validate keys.
      let knownKeys = null;
      for (let i = 0; i < newChildren.length; i++) {
        const child = newChildren[i];
        knownKeys = warnOnInvalidKey(child, knownKeys, returnFiber);
      }
    }

    let resultingFirstChild: Fiber | null = null;//!返回的fiber
    let previousNewFiber: Fiber | null = null;//!创建fiber链需要一个临时fiber来做连接

    let oldFiber = currentFirstChild;//!遍历到的current的fiber(旧的fiber)
    let lastPlacedIndex = 0;//!新创建的fiber节点对应的dom节点在页面中的位置 用来节点位置变化的
    let newIdx = 0;//!遍历到的jsx数组的索引
    let nextOldFiber = null;//!oldFiber的下一个fiber
    //!第一轮循环 处理节点更新的情况
    for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {
      if (oldFiber.index > newIdx) {//!fiber的index标记为当前fiber在同级fiber中的位置
        nextOldFiber = oldFiber;
        oldFiber = null;
      } else {
        nextOldFiber = oldFiber.sibling;
      }
      const newFiber = updateSlot(//!判断节点是否可以复用 这个函数主要看key是否相同 不相同直接返回null 相同则继续判断type是否相同 不相同则创建新的fiber返回 把旧的fiber打上delete的tag 新的fiber打上place的tag type也相同则可以复用fiber返回
        returnFiber,
        oldFiber,
        newChildren[newIdx],
        lanes,
      );
      if (newFiber === null) {
        // TODO: This breaks on empty slots like null children. That's
        // unfortunate because it triggers the slow path all the time. We need
        // a better way to communicate whether this was a miss or null,
        // boolean, undefined, etc.
        if (oldFiber === null) {
          oldFiber = nextOldFiber;
        }
        break;
      }
      if (shouldTrackSideEffects) {
        if (oldFiber && newFiber.alternate === null) {
          // We matched the slot, but we didn't reuse the existing fiber, so we
          // need to delete the existing child.
          deleteChild(returnFiber, oldFiber);
        }
      }
      lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);//!给newfiber加上place的tag
      if (previousNewFiber === null) {
        // TODO: Move out of the loop. This only happens for the first run.
        resultingFirstChild = newFiber;
      } else {
        // TODO: Defer siblings if we're not at the right index for this slot.
        // I.e. if we had null values before, then we want to defer this
        // for each null value. However, we also don't want to call updateSlot
        // with the previous one.
        previousNewFiber.sibling = newFiber;
      }
      previousNewFiber = newFiber;
      oldFiber = nextOldFiber;
    }
    //!新旧同时遍历完
    if (newIdx === newChildren.length) {
      // We've reached the end of the new children. We can delete the rest.
      deleteRemainingChildren(returnFiber, oldFiber);
      return resultingFirstChild;
    }
    //!老的遍历完 新的没遍历完 遍历剩下的jsx的newchildren
    if (oldFiber === null) {
      // If we don't have any more existing children we can choose a fast path
      // since the rest will all be insertions.
      for (; newIdx < newChildren.length; newIdx++) {
        const newFiber = createChild(returnFiber, newChildren[newIdx], lanes);
        if (newFiber === null) {
          continue;
        }
        lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);//!直接把新的节点打上place 插入dom
        if (previousNewFiber === null) {
          // TODO: Move out of the loop. This only happens for the first run.
          resultingFirstChild = newFiber;
        } else {
          previousNewFiber.sibling = newFiber;
        }
        previousNewFiber = newFiber;
      }
      return resultingFirstChild;
    }
    //!老的没遍历完 新的也没遍历完 证明key不同跳出啦  要处理节点位置变化的情况 我们要找到key相同的复用 那么为了在o(1)时间内找到 我们用map(key:oldfiber.key->value：oldfiber)数据结构
    // Add all children to a key map for quick lookups.
    const existingChildren = mapRemainingChildren(returnFiber, oldFiber);
    //!遍历剩下的newchldren
    // Keep scanning and use the map to restore deleted items as moves.
    for (; newIdx < newChildren.length; newIdx++) {
      const newFiber = updateFromMap(//!找到newchildren的key对应的oldfiber 复用/新建fiber返回
        existingChildren,
        returnFiber,
        newIdx,
        newChildren[newIdx],
        lanes,
      );
      if (newFiber !== null) {
        if (shouldTrackSideEffects) {
          if (newFiber.alternate !== null) {
            // The new fiber is a work in progress, but if there exists a
            // current, that means that we reused the fiber. We need to delete
            // it from the child list so that we don't add it to the deletion
            // list.
            existingChildren.delete(
              newFiber.key === null ? newIdx : newFiber.key,//!从map中去掉已经找到key的oldfiber
            );
          }
        }
        lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);//!新的fiber标记为插入 注意位置  （oldindex<lastplaceindex） 移动位置插入 因为老的fiber的index位置比新的页面位置小 肯定要移动插入了
        if (previousNewFiber === null) {
          resultingFirstChild = newFiber;
        } else {
          previousNewFiber.sibling = newFiber;
        }
        previousNewFiber = newFiber;
      }
    }

    if (shouldTrackSideEffects) {
      // Any existing children that weren't consumed above were deleted. We need
      // to add them to the deletion list.
      existingChildren.forEach(child => deleteChild(returnFiber, child));//!删除多余的oldfiber 因为新的children已经遍历完
    }

    return resultingFirstChild;
  }

原文：https://juejin.cn/post/6964653615256436750

// ./components/TodoList.js

import React from 'react';

import { useTodoList } from '../hooks/useTodoList';
import { useQuery } from '../hooks/useQuery';
import TodoItem from './TodoItem';
import NewTodo from './NewTodo';

const TodoList = () => {
  const { getQuery, setQuery } = useQuery();
  const todos = useTodoList();
  return (
    <div>
      <ul>
        {todos.map(({ id, title, completed }) => (
          <TodoItem key={id} id={id} title={title} completed={completed} />
        ))}
        <NewTodo />
      </ul>
      <div>
        Highlight Query for incomplete items:
        <input value={getQuery()} onChange={e => setQuery(e.target.value)} />
      </div>
    </div>
  );
};

export default TodoList;

2. 直接更改state

在React中，状态应该是不变的。如果你直接修改state，会导致难以修改的性能问题。

比如下面例子：

const modifyPetsList = (element, id) => {
  petsList[id].checked = element.target.checked;
  setPetsList(petList)
}

const modifyPetsList = (element, id) => {
  const { checked } = element.target;
  setpetsList((pets) => {
    return pets.map((pet, index) => {
      if (id === index) {
        pet = { ...pet, checked };
      }
      return pet;
    });
  });
};

class Arrival extends React.Component {
  render() {
    return (
      <h1>
        Hi! You arrived {this.props.position === 1 ? "first!" : "last!"} .
      </h1>
    );
  }
}

// ❌
const element = <Arrival position='1' />;

// ✅
const element = <Arrival position={1} />;

const lists = ['cat', 'dog', 'fish’];

render() {
  return (
    <ul>
      {lists.map(listNo =>
        <li>{listNo}</li>)}
    </ul>
  );
}

<ul>
  {lists.map(listNo =>
    <li key={listNo}>{listNo}</li>)}
</ul>

handlePetsUpdate = (petCount) => {
  this.setState({ petCount });
  this.props.callback(this.state.petCount); // Old value
};

handlePetsUpdate = (petCount) => {
  this.setState({ petCount }, () => {
    this.props.callback(this.state.petCount); // Updated value
  });
};

如果我们的应用程序没有需要交换信息的并行级组件的时候，那么就不需要在项目中添加额外的库。比如我们想更改组件中的表单按钮状态的时候，我们更多的是优先考虑state方法或者useState钩子。

7. 组件没以大写字母开头命名

在JSX中，以小写开头的组件会向下编译为HTML元素。

所以我们应该避免下面的写法：

class demoComponentName extends React.Component {
}

这将导致一个错误：如果你想渲染React组件，则需要以大写字母开头。

那么得采取下面这种写法：

class DemoComponentName extends React.Component {
}

后话

上面的内容提取自Top 10 mistakes to avoid when using React，采用了意译的方式，提取了7条比较实用的内容。

原文：https://juejin.cn/post/6963032224316784654

简单功能：点击浏览器右上角插件icon弹出小弹窗，点击设置弹出设置页，并替换背景颜色。

开始

• 1.本地创建文件夹testPlugin并新建manifest.json文件

{
    "name": "testPlugin",
    "description": "这是一个测试用例",
    "version": "0.0.1",
    "manifest_version": 2
}

{
    "name": "testPlugin",
    "description": "这是一个测试用例",
    "version": "0.0.1",
    "manifest_version": 2,
    "icons": {
      "16": "icons/16.png",
      "48": "icons/16.png"
  }
}

"browser_action": {
  "default_title": "test plugin",
  "default_icon": "icons/16.png",
  "default_popup": "index.html"
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test plugin</title>
</head>

<body>
  <input id="name" placeholder="请输入"/>
</body>
</html>

document.getElementById('button').onclick = function() {
    alert(document.getElementById('name').value)
}

<input id="name" placeholder="请输入"/>
<input id="button" type="button" value="点击"/>
<script src="js/index.js"></script>

"content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "css": [
        "css/index.css"
      ],
      "js": [
        "js/vue.js",
        "js/element.js",
        "js/index.js"
      ],
      "run_at": "document_idle"
    }
  ],

let element = document.createElement('div')
let attr =  document.createAttribute('id')
attr.value = 'appPlugin'
element.setAttributeNode(attr)
document.getElementsByTagName('body')[0].appendChild(element)

let link = document.createElement('link')
let linkAttr =  document.createAttribute('rel')
linkAttr.value = 'stylesheet'
let linkHref =  document.createAttribute('href')
linkHref.value = 'https://unpkg.com/element-ui/lib/theme-chalk/index.css'
link.setAttributeNode(linkAttr)
link.setAttributeNode(linkHref)
document.getElementsByTagName('head')[0].appendChild(link)


const vue = new Vue({
    el: '#appPlugin',
    template:`
      <div class="app-plugin-content">{{text}}{{icon_post_message}}<el-button @click="Button">Button</el-button></div>
    `,
    data: function () {
        return { text: 'hhhhhh', icon_post_message: '_icon_post_message', isOcContentPopShow: true }
    },
    mounted() {
        console.log(this.text)
    },
    methods: {
        Button() {
            this.isOcContentPopShow = false
        }
    }
})

let element = document.createElement('div')
let attr = document.createAttribute('id')
attr.value = 'appPlugin'
element.setAttributeNode(attr)
document.getElementsByTagName('body')[0].appendChild(element)

let link = document.createElement('link')
let linkAttr = document.createAttribute('rel')
linkAttr.value = 'stylesheet'
let linkHref = document.createAttribute('href')
linkHref.value = 'https://unpkg.com/element-ui/lib/theme-chalk/index.css'
link.setAttributeNode(linkAttr)
link.setAttributeNode(linkHref)
document.getElementsByTagName('head')[0].appendChild(link)


const vue = new Vue({
    el: '#appPlugin',
    template: `
        <div v-if="isOcContentPopShow" class="oc-move-page" id="oc_content_page">
            <div class="oc-content-title" id="oc_content_title">颜色 <el-button type="text" icon="el-icon-close" @click="close"></el-button></div>
            <div class="app-plugin-content">背景：<el-color-picker v-model="color1"></el-color-picker></div>
            <div class="app-plugin-content">字体：<el-color-picker v-model="color2"></el-color-picker></div>
        </div>
    `,
    data: function () {
        return { color1: null, color2: null, documentArr: [], textArr: [], isOcContentPopShow: true }
    },
    watch: {
        color1(val) {
            let out = document.getElementById('oc_content_page')
            let outC = document.getElementsByClassName('el-color-picker__panel')
            this.documentArr.forEach(item => {
                    if(!out.contains(item) && !outC[0].contains(item) && !outC[1].contains(item)) {
                        item.style.cssText = `background-color: ${val}!important;color: ${this.color2}!important;`
                    }
            })
        },
        color2(val) {
            let out = document.getElementById('oc_content_page')
            let outC = document.getElementsByClassName('el-color-picker__panel')[1]
            this.textArr.forEach(item => {
                if(!out.contains(item) && !outC.contains(item)) {
                        item.style.cssText = `color: ${val}!important;`
                    }
            })
        }
    },
    mounted() {
        chrome.runtime.onConnect.addListener((res) => {
            if (res.name === 'testPlugin') {
                res.onMessage.addListener(mess => {
                    this.isOcContentPopShow = mess.isShow
                })
            }
        })
        this.$nextTick(() => {
            let bodys = [...document.getElementsByTagName('body')]
            let headers = [...document.getElementsByTagName('header')]
            let divs = [...document.getElementsByTagName('div')]
            let lis = [...document.getElementsByTagName('li')]
            let articles = [...document.getElementsByTagName('article')]
            let asides = [...document.getElementsByTagName('aside')]
            let footers = [...document.getElementsByTagName('footer')]
            let navs = [...document.getElementsByTagName('nav')]
            this.documentArr = bodys.concat(headers, divs, lis, articles, asides, footers, navs)

            let as = [...document.getElementsByTagName('a')]
            let ps = [...document.getElementsByTagName('p')]
            this.textArr = as.concat(ps)

        })

    },
    methods: {
        close() {
            this.isOcContentPopShow = false
        }
    }
})

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>my plugin</title>
  <link rel="stylesheet" href="css/index.css">
</head>

<body>
  <div class="plugin">
    <input id="plugin_button" type="button" value="打开" />
  </div>
</body>
<script src="js/icon.js"></script>

</html>

plugin_button.onclick = function () {
  mess()
}
async function mess () {
  const tabId = await getCurrentTabId()
  const connect = chrome.tabs.connect(tabId, {name: 'testPlugin'});
  connect.postMessage({isShow: true})
}
function getCurrentTabId() {
  return new Promise((resolve, reject) => {
      chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
          resolve(tabs.length ? tabs[0].id : null)
      });
  })
}

.oc-move-page{
  width: 100px; 
  height: 200px; 
  background: white; 
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  position: fixed; 
  transform: translateY(-50%);
  right: 0; 
  top: 50%; 
  z-index: 1000001;
}
.oc-move-page .oc-content-title{
  text-align: left; 
  padding: 12px 16px;
  font-weight: 600;
  font-size: 18px;
  border-bottom: 1px solid #DEE0E3;
}
.oc-move-page .app-plugin-content {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.el-color-picker__panel {
  right: 100px!important;
  left: auto!important;
}

效果演示

Canvas简介

这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

HTML5 标签用于绘制图像（通过脚本，通常是 JavaScript）

不过， 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务

getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性

本手册提供完整的 getContext(“2d”) 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等

标记和 SVG 以及 VML 之间的差异：

标记和 SVG 以及 VML 之间的一个重要的不同是， 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。

这两种方式在功能上是等同的，任何一种都可以用另一种来模拟。从表面上看，它们很不相同，可是，每一种都有强项和弱点。例如，SVG 绘图很容易编辑，只要从其描述中移除元素就行。

要从同一图形的一个 标记中移除元素，往往需要擦掉绘图重新绘制它

知识点简介

• 利用js创建图片

let img = new Image()
//可以给图片一个链接
img.src = 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=826495019,1749283937&fm=26&gp=0.jpg'
//或者本地已有图片的路径
//img.src = './download.jpg'

//添加到HTML中
document.body.appendChild(img)

• canvas.getContext(“2d”)

let ctx = Canvas.getContext(contextID)

• ctx.drawImage()

JavaScript 语法 1：
在画布上定位图像：

context.drawImage(img,x,y);

JavaScript 语法 2：
在画布上定位图像，并规定图像的宽度和高度：
context.drawImage(img,x,y,width,height);
JavaScript 语法 3：
剪切图像，并在画布上定位被剪切的部分：
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

JavaScript 语法
getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。
对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：
R - 红色 (0-255)
G - 绿色 (0-255)
B - 蓝色 (0-255)
A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)
color/alpha 以数组形式存在，并存储于 ImageData 对象的 data 属性中
var imgData=context.getImageData(x,y,width,height);

putImageData() 方法将图像数据（从指定的 ImageData 对象）放回画布上。

<body>
    <img src="./download.jpg">
    <button onclick="addCanvas()">生成Canvas</button>
    <button onclick="generateImg()">生成图片</button>
</body>

接下来写addCanvas方法

function addCanvas() {
		let bt = document.querySelector('button')

        let img = new Image();	//1.准备赋值复制一份图片
        img.src = './download.jpg'; 
        img.onload = function() { //2.待图片加载完成
            let width = this.width
            let height = this.height
			
			let canvas = document.createElement('canvas') //3.创建画布
			let ctx = canvas.getContext("2d");  //4.获得该画布的内容
        	canvas.setAttribute('width', width)  //5.为了统一，设置画布的宽高为图片的宽高
        	canvas.setAttribute('height', height)
   
            ctx.drawImage(this, 0, 0, width, height);  //5.在画布上绘制该图片

            document.body.insertBefore(canvas, bt) //5.把canvas插入到按钮前面

        }
    }

嗯，我们已经成功走出了成功的一小步，接下来是干什么呢？…嗯，我们需要利用原生的onmouseup和onmousedown事件，代表我们按下鼠标这个过程，那么这两个事件添加到哪呢？

没错，既然我们要在canvas上进行马赛克操作，那我们必然要给canvas元素添加这两个事件

考虑到我们创建canvas的过程复杂了一点，我们做一个模块封装吧！

function addCanvas() {
        let bt = document.querySelector('button')

        let img = new Image();
        img.src = './download.jpg'; //这里放自己的图片
        img.onload = function() {
            let width = this.width
            let height = this.height

            let {
                canvas,
                ctx
            } = createCanvasAndCtx(width, height)  //对象解构接收canvas和ctx

            ctx.drawImage(this, 0, 0, width, height);

            document.body.insertBefore(canvas, bt)

        }
    }

    function createCanvasAndCtx(width, height) {
        let canvas = document.createElement('canvas')
        canvas.setAttribute('width', width)
        canvas.setAttribute('height', height)
        canvas.setAttribute('onmouseout', 'end()') //修补鼠标不在canvas上离开的补丁
        canvas.setAttribute('onmousedown', 'start()')  //添加鼠标按下
        canvas.setAttribute('onmouseup', 'end()')	//添加鼠标弹起
        let ctx = canvas.getContext("2d");
        return {
            canvas,
            ctx
        }
    }

	function start() {
            let canvas = document.querySelector('canvas')
            canvas.onmousemove = () => {
                console.log('你按下了并移动了鼠标')
            }
        }

        function end() {
            let canvas = document.querySelector('canvas')
            canvas.onmousemove = null
        }

嗯，目前来看，我们的代码依然如我们所愿的正常工作

接下来的挑战更加严峻，我们需要去获取像素和处理像素，让我们再重写start()函数

function start() {
    let img = document.querySelector('img')
    let canvas = document.querySelector('canvas')
    let ctx = canvas.getContext("2d");
    imgData = ctx.getImageData(0, 0, img.clientWidth, img.clientHeight);
    canvas.onmousemove = (e) => {
        let w = imgData.width; //1.获取图片宽高
        let h = imgData.height;

        //马赛克的程度，数字越大越模糊
        let num = 10;

        //获取鼠标当前所在的像素RGBA
        let color = getXY(imgData, e.offsetX, e.offsetY);

        for (let k = 0; k < num; k++) {
            for (let l = 0; l < num; l++) {
                //设置imgData上坐标为(e.offsetX + l, e.offsetY + k)的的颜色
                setXY(imgData, e.offsetX + l, e.offsetY + k, color);
            }
        }
        //更新canvas数据
        ctx.putImageData(imgData, 0, 0);
    }
}

//这里为你提供了setXY和getXY两个函数，如果你有兴趣，可以去研究获取的原理
function setXY(obj, x, y, color) {
    var w = obj.width;
    var h = obj.height;
    var d = obj.data;
    obj.data[4 * (y * w + x)] = color[0];
    obj.data[4 * (y * w + x) + 1] = color[1];
    obj.data[4 * (y * w + x) + 2] = color[2];
    obj.data[4 * (y * w + x) + 3] = color[3];
}

function getXY(obj, x, y) {
    var w = obj.width;
    var h = obj.height;
    var d = obj.data;
    var color = [];
    color[0] = obj.data[4 * (y * w + x)];
    color[1] = obj.data[4 * (y * w + x) + 1];
    color[2] = obj.data[4 * (y * w + x) + 2];
    color[3] = obj.data[4 * (y * w + x) + 3];
    return color;
}

嗯，我们离成功不远拉，最后一步就是生成图片

好在canavs给我们提供了直接的方法，可以直接将画布导出为Base64编码的图片：

function generateImg() {
    let canvas = document.querySelector('canvas')
    var newImg = new Image();
    newImg.src = canvas.toDataURL("image/png");
    document.body.insertBefore(newImg, canvas)
}

是不是无比轻松呢~，来看看你手写的代码是否和下面一样叭：

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <body>
        <img src="./download.jpg">
        <button onclick="addCanvas()">生成Canvas</button>
        <button onclick="generateImg()">生成图片</button>
    </body>
    <script>
        function addCanvas() {
            let bt = document.querySelector('button')

            let img = new Image();
            img.src = './download.jpg'; //这里放自己的图片
            img.onload = function() {
                let width = this.width
                let height = this.height

                let {
                    canvas,
                    ctx
                } = createCanvasAndCtx(width, height)

                ctx.drawImage(this, 0, 0, width, height);

                document.body.insertBefore(canvas, bt)

            }
        }

        function createCanvasAndCtx(width, height) {
            let canvas = document.createElement('canvas')
            canvas.setAttribute('width', width)
            canvas.setAttribute('height', height)
            canvas.setAttribute('onmouseout', 'end()')
            canvas.setAttribute('onmousedown', 'start()')
            canvas.setAttribute('onmouseup', 'end()')
            let ctx = canvas.getContext("2d");
            return {
                canvas,
                ctx
            }
        }

        function start() {
            let img = document.querySelector('img')
            let canvas = document.querySelector('canvas')
            let ctx = canvas.getContext("2d");
            imgData = ctx.getImageData(0, 0, img.clientWidth, img.clientHeight);
            canvas.onmousemove = (e) => {
                let w = imgData.width; //1.获取图片宽高
                let h = imgData.height;

                //马赛克的程度，数字越大越模糊
                let num = 10;

                //获取鼠标当前所在的像素RGBA
                let color = getXY(imgData, e.offsetX, e.offsetY);

                for (let k = 0; k < num; k++) {
                    for (let l = 0; l < num; l++) {
                        //设置imgData上坐标为(e.offsetX + l, e.offsetY + k)的的颜色
                        setXY(imgData, e.offsetX + l, e.offsetY + k, color);
                    }
                }
                //更新canvas数据
                ctx.putImageData(imgData, 0, 0);
            }
        }

        function generateImg() {
            let canvas = document.querySelector('canvas')
            var newImg = new Image();
            newImg.src = canvas.toDataURL("image/png");
            document.body.insertBefore(newImg, canvas)
        }

        function setXY(obj, x, y, color) {
            var w = obj.width;
            var h = obj.height;
            var d = obj.data;
            obj.data[4 * (y * w + x)] = color[0];
            obj.data[4 * (y * w + x) + 1] = color[1];
            obj.data[4 * (y * w + x) + 2] = color[2];
            obj.data[4 * (y * w + x) + 3] = color[3];
        }

        function getXY(obj, x, y) {
            var w = obj.width;
            var h = obj.height;
            var d = obj.data;
            var color = [];
            color[0] = obj.data[4 * (y * w + x)];
            color[1] = obj.data[4 * (y * w + x) + 1];
            color[2] = obj.data[4 * (y * w + x) + 2];
            color[3] = obj.data[4 * (y * w + x) + 3];
            return color;
        }

        function end() {
            let canvas = document.querySelector('canvas')
            canvas.onmousemove = null
        }
    </script>
</body>

</html>

本文链接：https://blog.csdn.net/JKR10000/article/details/116803023

鉴于微信 开放标签说明文档 写的不是很清楚，大多数开发者看了以后表示：我从哪里来？要到哪里去？

所以鄙人记录下这篇文章，以便帮助到一些人。

静态网页跳转小程序

废话不多说，上才艺！

<html>
<head>
    <meta charset="utf-8">
    <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />
    <title>小程序跳转测试</title>
</head>
<body style="text-aligin:center;">
<wx-open-launch-weapp
        id="launch-btn"
        username="gh_e16de8f****" <!-- 这里填写小程序的原始ID -->
        path="/pages/index/index.html"> <!-- 这里填写跳转对于小程序的页面 注意这里的 .html -->
    <template>
        <style>.btn { padding: 12px width:200px;height:50px;}</style>
        <button class="btn">打开小程序</button>
    </template>
</wx-open-launch-weapp>

<script src="/js/jquery-1.12.4.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <!-- 至少必须是1.6版本 -->

<script>
    
    $(function () {
    
        //=== 这里仅仅是获取 config 的参数以及签名=== start
        var url = location.href;
	var functions = "updateAppMessageShareData";
        $.get("https://xxx.com/wechat/jssdk/config", {"functions":functions}, function(response){
            if(response.status == 0) {
                var info = response.data;
                wx.config({
                    debug: false,
                    appId: info.appId,
                    timestamp: info.timestamp,
                    nonceStr: info.nonceStr,
                    signature: info.signature,
                    jsApiList: info.jsApiList,
                    openTagList: ['wx-open-launch-weapp']//这里直接添加，什么都不用管
                });
            }
        });
        //=== 获取 config 的参数以及签名=== end
        
        var btn = document.getElementById('launch-btn');
        btn.addEventListener('launch', function (e) {
            console.log('success');
        });
        btn.addEventListener('error', function (e) {
            console.log('fail', e.detail);
        });
    });
</script>
</body>
</html>

开放对象：

1、已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。

2、已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。

客户端要求

微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上。

注意：微信开发者工具暂时不支持！所以建议直接使用手机访问进行测试。

其他说明

这个功能其实很简单，并没有想象中那么复杂。 实质是在你能够做到自定义分享到朋友圈或朋友的基础上，config多了

openTagList: ['wx-open-launch-weapp']

再者需要注意的是，path的页面url 必须带有 .html 带参数的话则参数跟在html的后面。

<wx-open-launch-weapp
        id="launch-btn"
        username="gh_e16de8f****" <!-- 这里填写小程序的原始ID -->
        path="/pages/index/index.html">
        
<wx-open-launch-weapp
        id="launch-btn"
        username="gh_e16de8f****" <!-- 这里填写小程序的原始ID -->
        path="/pages/index/index.html?id=123">

VUE项目H5跳转

1、先请求接口配置微信需要的一些参数

// 需要先请求后端接口 
let url = window.location.href.split("#")[0];
let shareConfig = await shareViewAPI.getWechatConfig({url});
let _this = this;
// 将接口返回的信息配置 
wx.config({
   debug: false,
   appId: _this.app_id, // 必填，公众号的唯一标识
   timestamp: shareConfig.timestamp, // 必填，生成签名的时间戳
   nonceStr: shareConfig.nonceStr, // 必填，生成签名的随机串
   signature: shareConfig.signature, // 必填，签名
   jsApiList: ["onMenuShareAppMessage"], // 必填，如果只是为了跳转小程序，随便填个值都行
   openTagList: ["wx-open-launch-weapp"] // 跳转小程序时必填
});

配置的方法需要放到created、mounted或者beforeRouteEnter里

2、在页面中添加wx-open-launch-weapp标签

<!-- 关于username 与 path的值 参考官方文档  -->
<wx-open-launch-weapp
   id="launch-btn"
   username="gh_***"
   path="/pages/index/index.html"
   @error="handleErrorFn"
   @launch="handleLaunchFn"
>
 <!-- vue中需要使用script标签代替template插槽 html中使用template -->
  <script type="text/wxtag-template">
    <p class="store-tool_tip">点击进入选基工具</p>
  </script>
</wx-open-launch-weapp>

methods: {
    handleLaunchFn(e) {
      console.log("success", e);
    },
    handleErrorFn(e) {
      console.log("fail", e.detail);
    }
}

3、好啦

备注：
使用该标签的时候可能会报错，在main.js文件中添加上该行代码即可

// 忽略打开微信小程序的组件
Vue.config.ignoredElements = ['wx-open-launch-weapp']

现在的应用开发，基本上都是前后端分离的，前端主流框架有SPA、MPA等，那么解决页面渲染、白屏时间成为首要关注的点

webpack可以按需加载，减小首屏需要加载代码的体积；

使用CDN技术、静态代码等缓存技术，可以减小加载渲染的时长

问题：但是首页依然存在加载、渲染等待时长的问题。那么如何从视觉效果上减小首屏白屏的时间呢？

骨架屏：举个例子：其实就是在模版文件中id=app容器下面写想要展示的效果，在new Vue(option)之后，该id下的内容就被替换了( 这时候，可能Vue编译生成的内容还没有挂载。因为new Vue的时候会进行一系列的初始化，这也需要耗费时间的)。这样就可以从视觉上减小白屏的时间

骨架屏的实现方式

1、直接在模版文件id=app容器下面，写进想要展示的效果html

2、直接在模板文件id=app容器下面，用图片展示

3、使用vue ssr提供的webpack插件

4、自动生成并且自动插入静态骨架屏

方式1和方式2存在的缺陷：针对不同入口，展示的效果都一样，导致不能灵活的针对不同的入口，展示不同的样式

方式3可以针对不同的入口展示不同的效果。（实质也是先通过ssr生成一个json文件，然后将json文件内容注入到模板文件的id=app容器下）

方案一、直接在模版文件id=app容器下面，写进想要展示的效果html

在根目录的模版文件内写进内容，如红色圈出来的地方

在浏览器打开项目

在调用new Vue之前的展示效果(只是做了个简单效果，不喜勿喷)：

可以看到elements中id=app的容器下内容，就是我们写进的骨架屏效果内容

在看下调了new Vue之后的效果，id=app容器下的内容被vue编译生成的内容替换了

方案二、直接在模板文件id=app容器下面，用图片展示(这个就不做展示了)

方案三、使用vue ssr提供的webpack插件：即用.vue文件完成骨架屏

在方案一的基础上，将骨架屏的代码抽离出来，不在模版文件里面书写代码，而是在vue文件里面书写效果代码，这样便于维护

1、在根目录下建一个skeleton文件夹，在该目录下创建文件App.vue文件（根组件，类似Vue项目的App.vue）、home.skeleton.vue(首页骨架屏展示效果的代码，类似Vue项目写的路由页面)、skeleton-entry.js(入口文件类似Vue项目的入口文件)、plugin/server-plugin.js(vue-server-renderer包提供了server-plugin插件，从里面将代码拷贝出来)

home.skeleton.vue(首页骨架屏展示效果的代码)

<template>
  <div class="skeleton-home">
    <div>加载中...</div>
  </div>
</template>
 
<style>
.skeleton-home {
  width: 100vw;
  height: 100vh;
  background-color: #eaeaea;
}
</style>

App.vue(根组件)

<template>
  <div id="app">
    <!-- 根组件 -->
    <home style="display:none" id="homeSkeleton"></home>
  </div>
</template>
<script>
import home from './home.skeleton.vue'
export default{
  components: {
    home
  }
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
*{
  padding: 0;
  margin: 0;
}
</style>

skeleton-entry.js(入口文件)

// 入口文件
import Vue from 'vue'
import App from './App.vue'
let skeleton = new Vue({
  render(h) {
    return h(App)
  }
})
export default skeleton

plugin/server-plugin.js(vue-server-renderer包提供了server-plugin插件)

'use strict';
 
/*  */
 
var isJS = function (file) { return /\.js(\?[^.]+)?$/.test(file); };
 
var ref = require('chalk');
var red = ref.red;
var yellow = ref.yellow;
 
var prefix = "[vue-server-renderer-webpack-plugin]";
var warn = exports.warn = function (msg) { return console.error(red((prefix + " " + msg + "\n"))); };
var tip = exports.tip = function (msg) { return console.log(yellow((prefix + " " + msg + "\n"))); };
 
var validate = function (compiler) {
  if (compiler.options.target !== 'node') {
    warn('webpack config `target` should be "node".');
  }
 
  if (compiler.options.output && compiler.options.output.libraryTarget !== 'commonjs2') {
    warn('webpack config `output.libraryTarget` should be "commonjs2".');
  }
 
  if (!compiler.options.externals) {
    tip(
      'It is recommended to externalize dependencies in the server build for ' +
      'better build performance.'
    );
  }
};
 
var VueSSRServerPlugin = function VueSSRServerPlugin (options) {
  if ( options === void 0 ) options = {};
 
  this.options = Object.assign({
    filename: 'vue-ssr-server-bundle.json'
  }, options);
};
 
VueSSRServerPlugin.prototype.apply = function apply (compiler) {
    var this$1 = this;
 
  validate(compiler);
 
  compiler.plugin('emit', function (compilation, cb) {
    var stats = compilation.getStats().toJson();
    var entryName = Object.keys(stats.entrypoints)[0];
    var entryAssets = stats.entrypoints[entryName].assets.filter(isJS);
 
    if (entryAssets.length > 1) {
      throw new Error(
        "Server-side bundle should have one single entry file. " +
        "Avoid using CommonsChunkPlugin in the server config."
      )
    }
 
    var entry = entryAssets[0];
    if (!entry || typeof entry !== 'string') {
      throw new Error(
        ("Entry \"" + entryName + "\" not found. Did you specify the correct entry option?")
      )
    }
 
    var bundle = {
      entry: entry,
      files: {},
      maps: {}
    };
 
    stats.assets.forEach(function (asset) {
      if (asset.name.match(/\.js$/)) {
        bundle.files[asset.name] = compilation.assets[asset.name].source();
      } else if (asset.name.match(/\.js\.map$/)) {
        bundle.maps[asset.name.replace(/\.map$/, '')] = JSON.parse(compilation.assets[asset.name].source());
      }
      // do not emit anything else for server
      delete compilation.assets[asset.name];
    });
 
    var json = JSON.stringify(bundle, null, 2);
    var filename = this$1.options.filename;
 
    compilation.assets[filename] = {
      source: function () { return json; },
      size: function () { return json.length; }
    };
 
    cb();
  });
};
 
module.exports = VueSSRServerPlugin;

2、新建一个骨架屏构建配置文件：build/webpack.skeleton.conf.js，这个文件配合vue-server-renderer插件，将App.vue内容构建成单个json格式的文件

'use strict'
 
const path = require('path')
const nodeExternals = require('webpack-node-externals')
const VueSSRServerPlugin = require('../skeleton/plugin/server-plugin')
 
module.exports = {
  // 这允许 webpack 以 Node 适用方式(Node-appropriate fashion)处理动态导入(dynamic import)，
  // 并且还会在编译 Vue 组件时，
  // 告知 `vue-loader` 输送面向服务器代码(server-oriented code)。
  target: 'node',
 
  // 对 bundle renderer 提供 source map 支持
  devtool: 'source-map',
 
  // 将 entry 指向应用程序的 server entry 文件
  entry: path.resolve(__dirname, '../skeleton/skeleton-entry.js'),
 
  output: {
    path: path.resolve(__dirname, '../skeleton'),  // 生成的文件的目录
    publicPath: '/skeleton/',
    filename: '[name].js',
    libraryTarget: 'commonjs2' // 此处告知 server bundle 使用 Node 风格导出模块(Node-style exports)
  },
 
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          compilerOptions: {
            preserveWhitespace: false
          }
        }
      },
      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader']
      }
    ]
  },
 
  performance: {
    hints: false
  },
 
  // https://webpack.js.org/configuration/externals/#function
  // https://github.com/liady/webpack-node-externals
  // 外置化应用程序依赖模块。可以使服务器构建速度更快，
  // 并生成较小的 bundle 文件。
  externals: nodeExternals({
    // 不要外置化 webpack 需要处理的依赖模块。
    // 你可以在这里添加更多的文件类型。例如，未处理 *.vue 原始文件，
    // 你还应该将修改 `global`（例如 polyfill）的依赖模块列入白名单
    allowlist: /\.css$/
  }),
 
  // 这是将服务器的整个输出
  // 构建为单个 JSON 文件的插件。
  // 不配置filename，则默认文件名为 `vue-ssr-server-bundle.json`
  plugins: [
    new VueSSRServerPlugin({
      filename: 'skeleton.json'
    })
  ]
}

3、使用webpack-cli运行文件webpack.skeleton.conf.js，生成skeleton.json文件，放置在文件夹skeleton下

在package.json文件里面书写运行命令：create-skeleton

"scripts": {
    "create-skeleton": "webpack --progress --config build/webpack.skeleton.conf.js",
    "fill-skeleton": "node ./skeleton/skeleton.js"
  }

在控制台上运行命令：

npm run create-skeleton

文件夹skeleton下就会多出skelleton.json文件

4、将生成的skeleton.json内容注入到根目录下的index.html(模版文件)

1）在文件夹skeleton下新建skeleton.js

// 将生成的skeleton.json的内容填充到模板文件中
const fs = require('fs')
const { resolve } = require('path')
const createBundleRenderer = require('vue-server-renderer').createBundleRenderer
 
// 读取skeleton.json，以skeleton/index.html为模版写入内容
const renderer = createBundleRenderer(resolve(__dirname, '../skeleton/skeleton.json'), {
  template: fs.readFileSync(resolve(__dirname, '../skeleton/index.html'), 'utf-8')
})
// 把上一步模版完成的内容写入根目录下的模版文件'index.html'
renderer.renderToString({}, (err, html) => {
  if (err) {
    return console.log(err)
  }
  console.log('render complete!')
  fs.writeFileSync('index.html', html, 'utf-8')
})

2）添加运行命令：fill-skeleton

"fill-skeleton": "node ./skeleton/skeleton.js"

3）在控制台上运行该命令，则skeleton.json文件内容被填充至根目录下的模板文件index.html了

本文链接：https://blog.csdn.net/tangxiujiang/article/details/116832585

坦克游戏玩法及介绍

我们先来看一下首页。

打开这个首页很简单，基本是上面这个样子，然后选择两个人回车就可以进行玩耍了，这个游戏需要两个人一起操作，玩家1（我）： 使用WASD四个键进行上左下右方向的控制，通过space键进行设计射击。玩家2（女朋友）：通过方向键上下左右控制方向，通过enter键盘射击。基本上我控制整个电脑键盘的左边，她控制电脑键盘的右边。通过N键进行下一关，P键选择上一关。再键盘上显示如下。

演示如何进入游戏

通过方向键的下键选择两个人，然后点击回车进入游戏。也可以选择一个人进行回车进行战斗。

一个人战斗的状态。

两个人战斗的状态。

比如图中红色标记的砖头是打不破的，只能绕道走，还有只能再yellow标记的区域内操作，其它砖头用子弹就可以打破，不能让对手先打破你的大本营（我右边中间的老鹰），不然又得GG.

整个游戏规则大体是这样，下面看一下代码。

项目结构

整个项目由五部分组成，分为背景音乐、基础样式、动图、核心JS及首页静态展示。不涉及后端，纯前端实现。

index.html

<!DOCTYPE html>
<html lang="zh" class="no-js demo-1">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<script src="js/jquery.min.js"></script>
		<script src="js/Helper.js"></script>
		<script src="js/keyboard.js"></script>
		<script src="js/const.js"></script>
		<script src="js/level.js"></script>
		<script src="js/crackAnimation.js"></script>
		<script src="js/prop.js"></script>
		<script src="js/bullet.js"></script>
		<script src="js/tank.js"></script>
		<script src="js/num.js"></script>
		<script src="js/menu.js"></script>
		<script src="js/map.js"></script>
		<script src="js/Collision.js"></script>
		<script src="js/stage.js"></script>
		<script src="js/main.js"></script>
		<link rel="stylesheet" type="text/css" href="css/default.css" />
		<style type="text/css">
			#canvasDiv canvas{
				position:absolute;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<head><h3>操作说明：玩家1：WASD上左下右，space射击；玩家2：方向键，enter射击。n下一关，p上一关。</h3></head>
			<div class="main clearfix">
				<div id="canvasDiv" >
					<canvas id="wallCanvas" ></canvas> 
					<canvas id="tankCanvas" ></canvas>
					<canvas id="grassCanvas" ></canvas>
					<canvas id="overCanvas" ></canvas> 
					<canvas id="stageCanvas" ></canvas>
				</div>
			</div>
			
		</div><!-- /container -->
		<div style="text-align:center;">
<p>来源:<a href="https://sunmenglei.blog.csdn.net/" target="_blank">孙叫兽的博客</a></p>
</div>
 
	</body>
</html>

css

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0; height: 100%;}
 
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
 
body {
	font-family: "Helvetica Neue",Helvetica,Arial,'Microsoft YaHei',sans-serif,'Lato', Calibri;
	color: #777;
	background: #f6f6f6;
}
 
a {
	color: #555;
	text-decoration: none;
	outline: none;
}
 
a:hover,
a:active {
	color: #777;
}
 
a img {
	border: none;
}
/* Header Style */
.main,
.container > header {
	margin: 0 auto;
	/*padding: 2em;*/
}
 
.container {
	height: 100%;
}
 
.container > header {
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
	background: rgba(0,0,0,0.01);
}
 
.container > header h1 {
	font-size: 2.625em;
	line-height: 1.3;
	margin: 0;
	font-weight: 300;
}
 
.container > header span {
	display: block;
	font-size: 60%;
	opacity: 0.3;
	padding: 0 0 0.6em 0.1em;
}
 
/* Main Content */
.main {
	/*max-width: 69em;*/
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.demo-scroll{
	overflow-y: scroll;
	width: 100%;
	height: 100%;
}
.column {
	float: left;
	width: 50%;
	padding: 0 2em;
	min-height: 300px;
	position: relative;
}
 
.column:nth-child(2) {
	box-shadow: -1px 0 0 rgba(0,0,0,0.1);
}
 
.column p {
	font-weight: 300;
	font-size: 2em;
	padding: 0;
	margin: 0;
	text-align: right;
	line-height: 1.5;
}
 
/* To Navigation Style */
.htmleaf-top {
	background: #fff;
	background: rgba(255, 255, 255, 0.6);
	text-transform: uppercase;
	width: 100%;
	font-size: 0.69em;
	line-height: 2.2;
}
 
.htmleaf-top a {
	padding: 0 1em;
	letter-spacing: 0.1em;
	color: #888;
	display: inline-block;
}
 
.htmleaf-top a:hover {
	background: rgba(255,255,255,0.95);
	color: #333;
}
 
.htmleaf-top span.right {
	float: right;
}
 
.htmleaf-top span.right a {
	float: left;
	display: block;
}
 
.htmleaf-icon:before {
	font-family: 'codropsicons';
	margin: 0 4px;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
 
 
 
/* Demo Buttons Style */
.htmleaf-demos {
	padding-top: 1em;
	font-size: 0.9em;
}
 
.htmleaf-demos a {
	display: inline-block;
	margin: 0.2em;
	padding: 0.45em 1em;
	background: #999;
	color: #fff;
	font-weight: 700;
	border-radius: 2px;
}
 
.htmleaf-demos a:hover,
.htmleaf-demos a.current-demo,
.htmleaf-demos a.current-demo:hover {
	opacity: 0.6;
}
 
.htmleaf-nav {
	text-align: center;
}
 
.htmleaf-nav a {
	display: inline-block;
	margin: 20px auto;
	padding: 0.3em;
}
.bb-custom-wrapper {
	width: 420px;
	position: relative;
	margin: 0 auto 40px;
	text-align: center;
}
/* Demo Styles */
 
.demo-1 body {
	color: #87968e;
	background: #fff2e3;
}
 
.demo-1 a {
	color: #72b890;
}
 
.demo-1 .htmleaf-demos a {
	background: #72b890;
	color: #fff;
}
 
.demo-2 body {
	color: #fff;
	background: #c05d8e;
}
 
.demo-2 a {
	color: #d38daf;
}
 
.demo-2 a:hover,
.demo-2 a:active {
	color: #fff;
}
 
.demo-2 .htmleaf-demos a {
	background: #883b61;
	color: #fff;
}
 
.demo-2 .htmleaf-top a:hover {
	background: rgba(255,255,255,0.3);
	color: #333;
}
 
.demo-3 body {
	color: #87968e;
	background: #fff2e3;
}
 
.demo-3 a {
	color: #ea5381;
}
 
.demo-3 .htmleaf-demos a {
	background: #ea5381;
	color: #fff;
}
 
.demo-4 body {
	color: #999;
	background: #fff2e3;
	overflow: hidden;
}
 
.demo-4 a {
	color: #1baede;
}
 
.demo-4 a:hover,
.demo-4 a:active {
	opacity: 0.6;
}
 
.demo-4 .htmleaf-demos a {
	background: #1baede;
	color: #fff;
}
 
.demo-5 body {
	background: #fffbd6;
}
/****/
.related {
	/*margin-top: 5em;*/
	color: #fff;
	background: #333;
	text-align: center;
	font-size: 1.25em;
	padding: 3em 0;
	overflow: hidden;
}
 
.related a {
	display: inline-block;
	text-align: left;
	margin: 20px auto;
	padding: 10px 20px;
	opacity: 0.8;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
	-webkit-backface-visibility: hidden;
}
 
.related a:hover,
.related a:active {
	opacity: 1;
}
 
.related a img {
	max-width: 100%;
}
 
.related a h3 {
	font-weight: 300;
	margin-top: 0.15em;
	color: #fff;
}
 
@media screen and (max-width: 40em) {
 
	.htmleaf-icon span {
		display: none;
	}
 
	.htmleaf-icon:before {
		font-size: 160%;
		line-height: 2;
	}
 
}
 
@media screen and (max-width: 46.0625em) {
	.column {
		width: 100%;
		min-width: auto;
		min-height: auto;
		padding: 1em; 
	}
 
	.column p {
		text-align: left;
		font-size: 1.5em;
	}
 
	.column:nth-child(2) {
		box-shadow: 0 -1px 0 rgba(0,0,0,0.1);
	}
}
 
@media screen and (max-width: 25em) {
 
	.htmleaf-icon span {
		display: none;
	}
 
}

核心js

/**
 * 检测2个物体是否碰撞
 * @param object1 物体1
 * @param object2 物体2
 * @param overlap 允许重叠的大小
 * @returns {Boolean} 如果碰撞了，返回true
 */
function CheckIntersect(object1, object2, overlap)
{
	//    x-轴                      x-轴
	//  A1------>B1 C1              A2------>B2 C2
	//  +--------+   ^              +--------+   ^
	//  | object1|   | y-轴         | object2|   | y-轴
	//  |        |   |              |        |   |
	//  +--------+  D1              +--------+  D2
	//
	//overlap是重叠的区域值
	A1 = object1.x + overlap;
	B1 = object1.x + object1.size - overlap;
	C1 = object1.y + overlap;
	D1 = object1.y + object1.size - overlap;
 
	A2 = object2.x + overlap;
	B2 = object2.x + object2.size - overlap;
	C2 = object2.y + overlap;
	D2 = object2.y + object2.size - overlap;
 
	//假如他们在x-轴重叠
	if(A1 >= A2 && A1 <= B2
	   || B1 >= A2 && B1 <= B2)
	{
		//判断y-轴重叠
		if(C1 >= C2 && C1 <= D2 || D1 >= C2 && D1 <= D2)
		{
			return true;
		}
	}
	return false;
}
 
/**
 * 坦克与地图块碰撞
 * @param tank 坦克对象
 * @param mapobj 地图对象
 * @returns {Boolean} 如果碰撞，返回true
 */
function tankMapCollision(tank,mapobj){
	//移动检测，记录最后一次的移动方向，根据方向判断+-overlap,
	var tileNum = 0;//需要检测的tile数
	var rowIndex = 0;//map中的行索引
	var colIndex = 0;//map中的列索引
	var overlap = 3;//允许重叠的大小
	
	//根据tank的x、y计算出map中的row和col
	if(tank.dir == UP){
		rowIndex = parseInt((tank.tempY + overlap  - mapobj.offsetY)/mapobj.tileSize);
		colIndex = parseInt((tank.tempX + overlap- mapobj.offsetX)/mapobj.tileSize);
	}else if(tank.dir == DOWN){
		//向下，即dir==1的时候，行索引的计算需要+tank.Height
		rowIndex = parseInt((tank.tempY - overlap - mapobj.offsetY + tank.size)/mapobj.tileSize);
		colIndex = parseInt((tank.tempX + overlap- mapobj.offsetX)/mapobj.tileSize);
	}else if(tank.dir == LEFT){
		rowIndex = parseInt((tank.tempY + overlap- mapobj.offsetY)/mapobj.tileSize);
		colIndex = parseInt((tank.tempX + overlap - mapobj.offsetX)/mapobj.tileSize);
	}else if(tank.dir == RIGHT){
		rowIndex = parseInt((tank.tempY + overlap- mapobj.offsetY)/mapobj.tileSize);
		//向右，即dir==3的时候，列索引的计算需要+tank.Height
		colIndex = parseInt((tank.tempX - overlap - mapobj.offsetX + tank.size)/mapobj.tileSize);
	}
	if(rowIndex >= mapobj.HTileCount || rowIndex < 0 || colIndex >= mapobj.wTileCount || colIndex < 0){
		return true;
	}
	if(tank.dir == UP || tank.dir == DOWN){
		var tempWidth = parseInt(tank.tempX - map.offsetX - (colIndex)*mapobj.tileSize + tank.size - overlap);//去除重叠部分
		if(tempWidth % mapobj.tileSize == 0 ){
			tileNum = parseInt(tempWidth/mapobj.tileSize);
		}else{
			tileNum = parseInt(tempWidth/mapobj.tileSize) + 1;
		}
		for(var i=0;i<tileNum && colIndex+i < mapobj.wTileCount ;i++){
			var mapContent = mapobj.mapLevel[rowIndex][colIndex+i];
			if(mapContent == WALL || mapContent == GRID || mapContent == WATER || mapContent == HOME || mapContent == ANOTHREHOME){
				if(tank.dir == UP){
					tank.y = mapobj.offsetY + rowIndex * mapobj.tileSize + mapobj.tileSize - overlap;
				}else if(tank.dir == DOWN){
					tank.y = mapobj.offsetY + rowIndex * mapobj.tileSize - tank.size + overlap;
				}
				return true;
			}
		}
	}else{
		var tempHeight = parseInt(tank.tempY - map.offsetY - (rowIndex)*mapobj.tileSize + tank.size - overlap);//去除重叠部分
		if(tempHeight % mapobj.tileSize == 0 ){
			tileNum = parseInt(tempHeight/mapobj.tileSize);
		}else{
			tileNum = parseInt(tempHeight/mapobj.tileSize) + 1;
		}
		for(var i=0;i<tileNum && rowIndex+i < mapobj.HTileCount;i++){
			var mapContent = mapobj.mapLevel[rowIndex+i][colIndex];
			if(mapContent == WALL || mapContent == GRID || mapContent == WATER || mapContent == HOME || mapContent == ANOTHREHOME){
				if(tank.dir == LEFT){
					tank.x = mapobj.offsetX + colIndex * mapobj.tileSize + mapobj.tileSize - overlap;
				}else if(tank.dir == RIGHT){
					tank.x = mapobj.offsetX + colIndex * mapobj.tileSize - tank.size + overlap;
				}
				return true;
			}
		}
	}
	return false;
}
 
/**
 * 子弹与地图块的碰撞
 * @param bullet 子弹对象
 * @param mapobj 地图对象
 */
function bulletMapCollision(bullet,mapobj){
	var tileNum = 0;//需要检测的tile数
	var rowIndex = 0;//map中的行索引
	var colIndex = 0;//map中的列索引
	var mapChangeIndex = [];//map中需要更新的索引数组
	var result = false;//是否碰撞
	//根据bullet的x、y计算出map中的row和col
	if(bullet.dir == UP){
		rowIndex = parseInt((bullet.y - mapobj.offsetY)/mapobj.tileSize);
		colIndex = parseInt((bullet.x - mapobj.offsetX)/mapobj.tileSize);
	}else if(bullet.dir == DOWN){
		//向下，即dir==1的时候，行索引的计算需要+bullet.Height
		rowIndex = parseInt((bullet.y - mapobj.offsetY + bullet.size)/mapobj.tileSize);
		colIndex = parseInt((bullet.x - mapobj.offsetX)/mapobj.tileSize);
	}else if(bullet.dir == LEFT){
		rowIndex = parseInt((bullet.y - mapobj.offsetY)/mapobj.tileSize);
		colIndex = parseInt((bullet.x - mapobj.offsetX)/mapobj.tileSize);
	}else if(bullet.dir == RIGHT){
		rowIndex = parseInt((bullet.y - mapobj.offsetY)/mapobj.tileSize);
		//向右，即dir==3的时候，列索引的计算需要+bullet.Height
		colIndex = parseInt((bullet.x - mapobj.offsetX + bullet.size)/mapobj.tileSize);
	}
	if(rowIndex >= mapobj.HTileCount || rowIndex < 0 || colIndex >= mapobj.wTileCount || colIndex < 0){
		return true;
	}
	
	if(bullet.dir == UP || bullet.dir == DOWN){
		var tempWidth = parseInt(bullet.x - map.offsetX - (colIndex)*mapobj.tileSize + bullet.size);
		if(tempWidth % mapobj.tileSize == 0 ){
			tileNum = parseInt(tempWidth/mapobj.tileSize);
		}else{
			tileNum = parseInt(tempWidth/mapobj.tileSize) + 1;
		}
		for(var i=0;i<tileNum && colIndex+i < mapobj.wTileCount ;i++){
			var mapContent = mapobj.mapLevel[rowIndex][colIndex+i];
			if(mapContent == WALL || mapContent == GRID || mapContent == HOME || mapContent == ANOTHREHOME){
				//bullet.distroy();
				result = true;
				if(mapContent == WALL){
					//墙被打掉
					mapChangeIndex.push([rowIndex,colIndex+i]);
				}else if(mapContent == GRID){
					
				}else{
					isGameOver = true;
					break;
				}
			}
		}
	}else{
		var tempHeight = parseInt(bullet.y - map.offsetY - (rowIndex)*mapobj.tileSize + bullet.size);
		if(tempHeight % mapobj.tileSize == 0 ){
			tileNum = parseInt(tempHeight/mapobj.tileSize);
		}else{
			tileNum = parseInt(tempHeight/mapobj.tileSize) + 1;
		}
		for(var i=0;i<tileNum && rowIndex+i < mapobj.HTileCount;i++){
			var mapContent = mapobj.mapLevel[rowIndex+i][colIndex];
			if(mapContent == WALL || mapContent == GRID || mapContent == HOME || mapContent == ANOTHREHOME){
				//bullet.distroy();
				result = true;
				if(mapContent == WALL){
					//墙被打掉
					mapChangeIndex.push([rowIndex+i,colIndex]);
				}else if(mapContent == GRID){
					
				}else{
					isGameOver = true;
					break;
				}
			}
		}
	}
	//更新地图
	map.updateMap(mapChangeIndex,0);
	return result;
}

原文地址：https://blog.csdn.net/weixin_41937552/article/details/116559485

前言

vue组件中的数据传递最最常见的就是父子组件之间的传递。父传子通过props向下传递数据给子组件；子传父通过$emit发送事件，并携带数据给父组件。而有时两个组件之间毫无关系，或者他们之间的结构复杂，如何传递数据呢？这时就要用到 vue 中的事件总线 EventBus的概念

正文

EventBus的简介

EventBus又称事件总线，相当于一个全局的仓库，任何组件都可以去这个仓库里获取事件，如图：

EventBus的使用

废话不多说，直接开始使用EventBus

一、初始化

要用EventBus，首先要初始化一个EventBus，这里称它为全局事件总线。

• 第一种初始化方法

import Vue from 'vue'
//因为是全局的一个'仓库'，所以初始化要在全局初始化
const EventBus = new Vue()

//在已经创建好的Vue实例原型中创建一个EventBus
Vue.prototype.$EventBus = new Vue()

发送事件的语法：this.$EventBus.$emit(发送的事件名,传递的参数)

已经创建好EventBus后我们就需要向它发送需要传递的事件，以便其他组件可以向EventBus获取。
例子：有两个组件A和B需要通信，他们不是父子组件关系，B事件需要获得A事件里的一组数据data

<!-- A.vue 这里是以模块化的方式讲解的，即A组件和B组件分别各自
一个.vue文件,所以代码中会有导入的语法-->

<template>
    <button @click="sendMsg">发送MsgA</button>
</template>

<script> 
export default {
  data(){
  	return{
  		MsgA: 'A组件中的Msg'
  	}
  },
  methods: {
    sendMsg() {
      /*调用全局Vue实例中的$EventBus事件总线中的$emit属性，发送事
      件"aMsg",并携带A组件中的Msg*/
      this.$EventBus.$emit("aMsg", this.MsgA);
    }
  }
}; 
</script>

三、接收事件

接收事件的语法：this.$EventBus.$on(监听的事件名, 回调函数)

A组件已经向全局事件总线EventBus发送了一个aMsg事件，这时B组件就可以去aMsg监听这个事件，并可以获得一些数据。

<!-- B.vue -->

<template>

  <!-- 展示msgB -->
  <p>{{msgB}}</p>
  
</template>

<script> 
export default {
  data(){
    return {
      //初始化一个msgB
      msgB: ''
    }
  },
  mounted() {
    /*调用全局Vue实例中的$EventBus事件总线中的$on属性,监听A组件发送
    到事件总线中的aMsg事件*/
    this.$EventBus.$on("aMsg", (data) => {
      //将A组件传递过来的参数data赋值给msgB
      this.msgB = data;
    });
  }
};
</script>

B组件展示结果：A组件中的Msg

这样，B组件就轻松接收到了A组件传递过来的参数，并成功展示了该参数，这样是不是就很简单的解决了各组件之间的通讯呢？虽然EventBus是一个很轻便的方法，任何数据都可以往里传，然后被别的组件获取，但是如果用不好，容易出现很严重的BUG，所以接下来我们就来讲解一下移除监听事件。

四、移除监听事件

在上一个例子中，我们A组件向事件总线发送了一个事件aMsg并传递了参数MsgA，然后B组件对该事件进行了监听，并获取了传递过来的参数。但是，这时如果我们离开B组件，然后再次进入B组件时，又会触发一次对事件aMsg的监听，这时时间总线里就有两个监听了，如果反复进入B组件多次，那么就会对aMsg进行多次的监听。

总而言之，A组件只向EventBus发送了一次事件，但B组件却进行了多次监听，EventBus容器中有很多个一模一样的事件监听器这时就会出现，事件只触发一次，但监听事件中的回调函数执行了很多次

• 解决办法：在组件离开，也就是被销毁前，将该监听事件给移除，以免下次再重复创建监听
• 语法：this.$EventBus.$off(要移除监听的事件名)

<!-- B.vue -->

<template>

  <!-- 展示msgB -->
  <p>{{msgB}}</p>
  
</template>

<script> 
export default {
  data(){
    return {
      //初始化一个msgB
      msgB: ''
    }
  },
  mounted() {
    /*调用全局Vue实例中的$EventBus事件总线中的$on属性,监听A组件发送
    到事件总线中的aMsg事件*/
    this.$EventBus.$on("aMsg", (data) => {
      //将A组件传递过来的参数data赋值给msgB
      this.msgB = data;
    });
  },
  beforeDestroy(){
    //移除监听事件"aMsg"
  	this.$EventBus.$off("aMsg")
  }
};
</script>

本文以简洁为目标，帮助快速上手react-router-dom默认你接触过路由相关的开发

安装

输入以下命令进行安装：

// npm
npm install react-router-dom

// yarn
yarn add react-router-dom

react-router相关标签

react-router常用的组件有以下八个：

import { 
  BrowserRouter,
  HashRouter,
  Route,
  Redirect,
  Switch,
  Link,
  NavLink,
  withRouter,
} from 'react-router-dom'

简单路由跳转

实现一个简单的一级路由跳转

import { 
    BrowserRouter as Router, 
    Route, 
    Link 
} from 'react-router-dom'
import Home from './home'
import About from './about'

function App() {
  return (
    <div className="App">
      <Router>
        <Link to="/home" className="link">跳转Home页面</Link>
        <Link to="/about" className="link">跳转About页面</Link>
        <Route path="/home" component={Home}/>
        <Route path="/about" component={About}/>
      </Router>
    </div>
  );
}

export default App;

要点总结：

1. Route组件必须在Router组件内部
2. Link组件的to属性的值为点击后跳转的路径
3. Route组建的path属性是与Link标签的to属性匹配的; component属性表示Route组件匹配成功后渲染的组件对象

import { 
  BrowserRouter as Router, 
  Route, 
  Link,
} from 'react-router-dom'
import Home from './home'
import About from './about'

function App() {

  return (
    <div className="App">
      <Router>
        <Link to="/home">跳转Home页面</Link>
        <Link to="/about">跳转About页面</Link>

        <Route path="/home" component={Home}/>
        <Route path="/about" component={About}/>                           

      </Router>
    </div>
  );
}

export default App;

import React from 'react'
import {
    Route,
    Link,
} from 'react-router-dom'
import One from './one'
import Two from './two'

function Home () {
    
    return (
        <>
            我是Home页面
            <Link to="/home/one">跳转到Home/one页面</Link>
            <Link to="/home/two">跳转到Home/two页面</Link>

            <Route path="/home/one" component={One}/>
            <Route path="/home/two" component={Two}/>
        </>
    )
}

export default Home

动态链接

NavLink可以将当前处于active状态的链接附加一个active类名，例如：

import { 
    BrowserRouter as Router, 
    Route, 
    NavLink 
} from 'react-router-dom'
import Home from './home'
import About from './about'

function App() {
  return (
    <div className="App">
      <Router>
        <NavLink to="/home" className="link">跳转Home页面</NavLink>
        <NavLink to="/about" className="link">跳转About页面</NavLink>
        <Route path="/home" component={Home}/>
        <Route path="/about" component={About}/>
      </Router>
    </div>
  );
}

export default App;
/* 设置active类的样式 */
.active {
    font-weight: blod;
    color: red;
}

路由匹配优化

当点击跳转链接时，会自动去尝试匹配所有的Route对应的路径：

正常情况下，只需匹配到一个规则，渲染即可，即匹配成功一个后，无需进行后续的匹配尝试，此时可以用Switch组件，如下所示：

import { 
  BrowserRouter as Router, 
  Route, 
  NavLink,
  Switch,
} from 'react-router-dom'
import Home from './home'
import About from './about'

function App() {
  return (
    <div className="App">
      <Router>
        <NavLink to="/home" className="link">跳转Home页面</NavLink>   
        <NavLink to="/about" className="link">跳转About页面</NavLink>

        <Switch>
          <Route path="/home" component={Home}/>       
          <Route path="/about" component={About}/>      
          <Route path="/home" component={Home}/>       
          <Route path="/home" component={Home}/>        
          {/* 此处省略一万个Route组件 */}                  
          <Route path="/home" component={Home}/>                           
        </Switch>

      </Router>
    </div>
  );
}

export default App;

要点总结：

1. 将多个Route组件同时放在一个Switch组件中，即可避免多次无意义的路由匹配，以此提升性能

import { 
  BrowserRouter as Router, 
  Route, 
  NavLink,
  Switch,
  Redirect,
} from 'react-router-dom'
import Home from './home'
import About from './about'

function App() {
  return (
    <div className="App">
      <Router>
        <NavLink to="/home" className="link">跳转Home页面</NavLink>   
        <NavLink to="/about" className="link">跳转About页面</NavLink>
        <NavLink to="/shop" className="link">跳转Shop页面</NavLink>   {/* 点击，跳转到/shop，但该路径没有设置 */}

        <Switch>
          <Route path="/home" component={Home}/>       
          <Route path="/about" component={About}/>      
          <Redirect to="/home" />    {/* 当以上Route组件都匹配失败时，重定向到/home */}                    
        </Switch>

      </Router>
    </div>
  );
}

export default App;

import { 
  BrowserRouter as Router, 
  Route, 
  NavLink,
  Switch,
} from 'react-router-dom'
import Home from './home'
import About from './about'

function App() {
  return (
    <div className="App">
      <Router>
        {/* 在 /home 的路径上携带了 张三、18 共两个参数 */}
        <NavLink to="/home/张三/18" className="link">跳转Home页面</NavLink>   
        <NavLink to="/about" className="link">跳转About页面</NavLink>

        <Switch>
          {/* 在 /home 匹配路径上相同的位置接收了 name、age 两个参数 */}
          <Route path="/home/:name/:age" component={Home}/>       
          <Route path="/about" component={About}/>                           
        </Switch>

      </Router>
    </div>
  );
}

export default App;

import { 
  BrowserRouter as Router, 
  Route, 
  NavLink,
  Switch,
} from 'react-router-dom'
import Home from './home'
import About from './about'

function App() {
  return (
    <div className="App">
      <Router>
        {/* 在跳转路径后面以?开头传递两个参数，分别为name=张三、age=18 */}
        <NavLink to="/home?name=张三&age=18" className="link">跳转Home页面</NavLink>   
        <NavLink to="/about" className="link">跳转About页面</NavLink>

        <Switch>
          {/* 此处无需做接收操作 */}
          <Route path="/home" component={Home}/>       
          <Route path="/about" component={About}/>                           
        </Switch>

      </Router>
    </div>
  );
}

export default App;

import { 
  BrowserRouter as Router, 
  Route, 
  NavLink,
  Switch,
} from 'react-router-dom'
import Home from './home'
import About from './about'

function App() {
  return (
    <div className="App">
      <Router>
        {/* 以对象的形式描述to属性，路径属性名为pathname，参数属性名为state */}
        <NavLink to={{pathname: "/home", state: {name: '张三', age: 18}}} className="link">跳转Home页面</NavLink>   
        <NavLink to="/about" className="link">跳转About页面</NavLink>

        <Switch>
          {/* 此处无需特地接收属性 */}
          <Route path="/home" component={Home}/>       
          <Route path="/about" component={About}/>                           
        </Switch>

      </Router>
    </div>
  );
}

export default App;

import React from 'react'

function Home (props) {

    let pushLink = () => {
        props.history.push('/about')
    }
    
    return (
        <div className="a">
            我是Home页面
            <button onClick={pushLink}>跳转到about页面</button>
        </div>
    )
}

export default Home

import React from 'react'

function Home (props) {

    let replaceLink = () => {
        props.history.replace('/about')
    }
    
    return (
        <div className="a">
            我是Home页面
            <button onClick={replaceLink}>跳转到about页面</button>
        </div>
    )
}

export default Home

goBack

调用 goBack 方法，就相当于点击了浏览器的返回上一个页面的按钮，如下图所示：

go

go 方法顾名思义，是用于跳转到指定路径的。

该方法接受一个参数（参数类型为 Number），情况如下：

1. 当参数为正数 n 时，表示跳转到下 n 个页面。例如 go(1) 相当于调用了一次 goForward 方法
2. 当参数为负数 n 时，表示跳转到上 n 个页面。例如 go(-3) 相当于调用了三次 goBack 方法
3. 当参数为 0 时，表示刷新当前页面

一、数据图表

一张图表胜过千万句话

1.1HighChart

• 概念

兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库

一、通过CDN
https://code.highcharts.com.cn/index.html
二、通过NPM下载（用的比较多）
npm install highcharts
三、通过官网下载
https://www.highcharts.com.cn/download
通过引入库的方式引入到本地

一、通过CDN 
jsdelivr.com/package/npm/echarts
二、通过NPM(通过NPM)
npm install echarts
三、通过官网
https://echarts.apache.org/zh/download.html
四、通过github
https://github.com/apache/echarts/releases

//全局引入echart
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

svn (小乌龟)
https://tortoisesvn.net/
git (命令)
github(所有开源项目的归属地)
https://github.com/
码云
https://gitee.com/
git软件
https://git-scm.com/

无论是gihub还是码云，他们都是用git命令去操作的。所以命令都一样

git软件的安装，下一步，下一步，傻瓜式安装即可

装成功的状态： 鼠标右键看到 git Bash Here 就OK

2.2创建一个远程仓库 （新项目）

先去GitHub/码云创建一个新的远程仓库，然后把本地暂缓区的内容提交到远程仓库

一、登录github/码云输入用户名密码
二、新建一个远程仓库，在官网右上角（点击+ ）
三、创建一个仓库名称，添加仓库描述，创建一个公有的仓库，不需要为仓库创建其他内容

在公司的创建一个新项目的骚操作

一般这一部分，轮不到大家去做。

一、在本地创建一个文件夹，创建相关的基本骨架
二、初始化当前文件夹变成本地仓库(会出现一个.git的隐藏文件)
git init
三、本地的所有内容上传到暂缓区
git add . 
四、提交的时候要做记录
git commit -m '尽量写英文，非要写写中文也可以'
五、链接远程仓库
git remote add origin https://gitee.com/zhangzhangzhangdada/shop-admin.git
六、把暂缓区的内容推送到远程仓库  (master 默认的分支名字)
git push -u origin master

原文：https://blog.csdn.net/weixin_49030317/article/details/116666179

数组的循环
    一、forEach（）
    二、map（）
    三、filter（）
    四、reduce（）与reduceRight()
    五、every（）
    六、some（）
    七、find（）与findIndex（）
    八、 for in
    九、 for of
    十、 for    
总结
数组的循环
一、forEach（）
对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。
参数都是function类型，默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身。

var arr = [1, 2, 3, 4, 5];
  arr.forEach(function (item, index, arr) {
      console.log(item, index, arr);
      // item:遍历的数组内容,index:第对应的数组索引，arr:数组本身。
  });

二、map（）

• 指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组
• 参数都是function类型，默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身

var arr = [1, 2, 3, 4, 5];
 var arr2 = arr.map(function (item) {
   return item * item;
  });
 console.log(arr2); //[1, 4, 9, 16, 25]

三、filter（）

• “过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。
• 参数都是function类型，默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身

var arr = [1, 2, 3, 4, 5];
  var arr2 = arr.filter(function (x, index) {
    return x % 2 == 0 || index >= 2;
  });
  console.log(arr2); // [2,3,4,5]

//  reduce（）
   let array = [1, 2, 3, 4, 5];
   let arrayNew = array.reduce((x, y) => {
        console.log("x===>" + x);
        console.log("y===>" + y);
        console.log("x+y===>", Number(x) + Number(y));
        return x + y;
   });
   console.log("arrayNew", arrayNew); // 15
   console.log(array); // [1, 2, 3, 4, 5]
   // reduceRight()  只是执行数组顺序为倒序

var arr = [1, 2, 3, 4, 5];
  var arr2 = arr.every(function (x) {
        return x < 8;
  });
  console.log(arr2); //true
  var arr3 = arr.every(function (x) {
        return x < 3;
  });
  console.log(arr3); // false

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
return x < 3;
});
console.log(arr2); //true
var arr3 = arr.some(function(x) {
return x > 6;
});
console.log(arr3); // false

// find()
  let arr = [1, 2, 3, 4, 5];
  let res = arr.find(function (val, index, arr) {
    return val > 3;
  });
  console.log(res); //4
  // findIndex
  let arr = [1, 2, 3, 4, 5];
  let res = arr.findIndex(function (val, index, arr) {
    return val > 3;
  });
  console.log(res); //3

var arr = [
        { id: 1, name: "程序员" },
        { id: 2, name: "掉头发" },
        { id: 3, name: "你不信" },
        { id: 4, name: "薅一下" },
      ];
      var arrNew = [];
      for (var key in arr) {
        console.log(key);
        console.log(arr[key]);
        arrNew.push(arr[key].id);
      }
      console.log(arrNew);

var arr = [
        { name: "程序员" },
        { name: "掉头发" },
        { name: "你不信" },
        { name: "薅一下" },
      ];
      // key()是对键名的遍历；
      // value()是对键值的遍历；
      // entries()是对键值对的遍历；
      for (let item of arr) {
        console.log(item);
      }
      // 输出数组索引
      for (let item of arr.keys()) {
        console.log(item);
      }
      // 输出内容和索引
      for (let [item, val] of arr.entries()) {
        console.table(item + ":" + val);
      }

var arr = [
        { name: "程序员" },
        { name: "掉头发" },
        { name: "你不信" },
        { name: "薅一下" },
      ];
 for (let index = 0; index < arr.length; index++) {
        const element = arr[index];
        console.log(element )
    }

说实话，阅读文档并不是我们大多数人喜欢的事情，但当使用像Vue这样不断发展的现代前端框架时，很多东西会随着每一个新版本的发布而改变，你可能会错过一些后来推出的新的闪亮功能。让我们看一下那些有趣但不那么流行的功能和优化的写法。请记住，所有这些都是Vue文档的一部分。

7种Vue.js模式
1.处理加载状态
在大型应用程序中，我们可能需要将应用程序划分为更小的块，只有在需要时才从服务器加载组件。为了使这一点更容易，Vue允许你将你的组件定义为一个工厂函数，它异步解析你的组件定义。Vue只有在需要渲染组件时才会触发工厂函数，并将缓存结果，以便将来重新渲染。2.3版本的新功能是，异步组件工厂也可以返回一个如下格式的对象。

const AsyncComponent = () => ({
  // 要加载的组件（应为Promise）
  component: import('./MyComponent.vue'),
  // 异步组件正在加载时要使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 显示加载组件之前的延迟。默认值：200ms。
  delay: 200,
  // 如果提供并超过了超时，则会显示error组件。默认值:无穷。
  timeout: 3000
})

通过这种方法，你有额外的加载和错误状态、组件获取的延迟和超时等选项。

2.廉价的“v-once”静态组件
在Vue中渲染纯HTML元素的速度非常快，但有时你可能有一个包含大量静态内容的组件。在这种情况下，你可以通过在根元素中添加 v-once 指令来确保它只被评估一次，然后进行缓存，就像这样。

Vue.component('terms-of-service', {
  template: `
    <div v-once>
      <h1>Terms of Service</h1>
      ... a lot of static content ...
    </div>
  `
})

3.递归组件

组件可以在自己的模板中递归调用自己，但是，它们只能通过 name 选项来调用。

如果你不小心，递归组件也可能导致无限循环：

name: 'stack-overflow',
template: '<div><stack-overflow></stack-overflow></div>'

像上面这样的组件会导致“超过最大堆栈大小”的错误，所以要确保递归调用是有条件的即(使用 v-if 最终将为 false）

4.内联模板
当特殊属性 inline-template 存在于一个子组件上时，该组件将使用它的内部内容作为它的模板，而不是将其视为分布式内容，这允许更灵活的模板编写。

<my-component inline-template>
  <div>
    <p>These are compiled as the component's own template.</p>
    <p>Not parent's transclusion content.</p>
  </div>
</my-component>

5.动态指令参数
指令参数可以是动态的。例如，在 v-mydirective:[argument]=“value" 中， argument 可以根据组件实例中的数据属性更新！这使得我们的自定义指令可以灵活地在整个应用程序中使用。

这是一条指令，其中可以根据组件实例更新动态参数：

<div id="dynamicexample">
  <h3>Scroll down inside this section ↓</h3>
  <p v-pin:[direction]="200">I am pinned onto the page at 200px to the left.</p>
</div>
Vue.directive('pin', {
  bind: function (el, binding, vnode) {
    el.style.position = 'fixed'
    var s = (binding.arg == 'left' ? 'left' : 'top')
    el.style[s] = binding.value + 'px'
  }
})

new Vue({
  el: '#dynamicexample',
  data: function () {
    return {
      direction: 'left'
    }
  }
})

6.事件和键修饰符

对于 .passive、.capture 和 .once 事件修饰符，Vue提供了可与 on 一起使用的前缀：

on: {
  '!click': this.doThisInCapturingMode,
  '~keyup': this.doThisOnce,
  '~!mouseover': this.doThisOnceInCapturingMode
}

7.依赖注入(Provide/Inject)
有几种方法可以让两个组件在 Vue 中进行通信，它们各有优缺点。在2.2版本中引入的一种新方法是使用Provide/Inject的依赖注入。

这对选项一起使用，允许一个祖先组件作为其所有子孙的依赖注入器，无论组件层次结构有多深，只要它们在同一个父链上。如果你熟悉React，这与React的上下文功（context）能非常相似。

// parent component providing 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// child component injecting 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

一.父传子传递

（1）在父组件的子组件标签上绑定一个属性，挂载要传输的变量
（2）在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props: [“属性 名”] props:{属性名:数据类型}
代码示例：

//父组件
<template>
  <div>
    <i>父组件</i>
    <!--页面使用-->
    <son :data='name'></son> 
  </div>
</template>

<script>
import son from "./son.vue";//导入父组件
export default {
  components: { son },//注册组件
  name: "父组件",
  data() {
    return {
      name: "Frazier", //父组件定义变量
    };
  },
};
</script>

//子组件
<template>
  <div>{{data}}</div>
</template>

<script>
export default {
components: { },
  name: '子组件',
  props:["data"],
};
</script>

二.子传父传递

（1）在父组件的子组件标签上自定义一个事件，然后调用需要的方法
（2）在子组件的方法中通过 this.$emit(“事件”)来触发在父组件中定义的事件，数据是以参数的形式进行传递的
代码示例：

//父组件
<template>
  <div>
    <i>父组件</i>
    <!--页面使用-->
    <son @lcclick="lcclick"></son>//自定义一个事件
  </div>
</template>

<script>
import son from "./son.vue"; //导入父组件
export default {
  components: { son }, //注册组件
  name: "父组件",
  data() {
    return {};
  },
  methods: {
    lcclick(){
      alert('子传父')
    }
  },
};
</script>

//子组件
<template>
  <div>
    <button @click="lcalter">点我</button>
  </div>
</template>

<script>
export default {
components: { },
  name: '子组件',
  methods: {
    lcalter(){
      this.$emit('lcclick')//通过emit来触发事件
    }
  },
};
</script>

三.兄弟组件通信（bus总线）
（1）在src中新建一个Bus.js的文件，然后导出一个空的vue实例
（2）在传输数据的一方引入Bus.js 然后通过Bus.e m i t ( “ 事 件 名 ” , " 参 数 " ) 来 来 派 发 事 件 ， 数 据 是 以 emit(“事件名”,"参数")来来派发事件，数据是以emit(“事件名”,"参数")来来派发事件，数据是以emit()的参 数形式来传递
（3）在接受的数据的一方 引入 Bus.js 然后通过 Bus.$on(“事件名”,(data)=>{data是接受的数据})
图片示例：

四.ref/refs（父子组件通信）

（1）ref 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例，
（2）可以通过实例直接调用组件的方法或访问数据。也算是子组件向父组件传值的一种
代码示例：

//父组件
<template>
  <div>
    <button @click="sayHello">sayHello</button>
    <child ref="childForRef"></child>
  </div>
</template>
<script>
import child from './child.vue'
  export default {
    components: { child },
    data () {
      return {
        childForRef: null,
      }
    },
    mounted() {
      this.childForRef = this.$refs.childForRef;
      console.log(this.childForRef.name);
    },
    methods: {
      sayHello() {
        this.childForRef.sayHello()
      }
    }
  }
</script>

//子组件
<template>
  <div>child 的内容</div>
</template>
<script>
export default {
  data () {
    return {
      name: '我是 child',
    }
  },
  methods: {
    sayHello () {
      console.log('hello');
      alert('hello');
    }
  }
}
</script>

五.Vuex通信

组件通过 dispatch 到 actions，actions 是异步操作，再 actions中通过 commit 到 mutations，mutations 再通过逻辑操作改变 state，从而同步到组件，更新其数据状态
代码示例：

//父组件
template>
  <div id="app">
    <ChildA/>
    <ChildB/>
  </div>
</template>
<script>
  import ChildA from './ChildA' // 导入A组件
  import ChildB from './ChildB' // 导入B组件
  export default {
    components: {ChildA, ChildB} // 注册组件
  }
</script>

//子组件A
<template>
 <div id="childA">
   <h1>我是A组件</h1>
   <button @click="transform">点我让B组件接收到数据</button>
   <p>因为点了B，所以信息发生了变化：{{BMessage}}</p>
 </div>
</template>
<script>
 export default {
   data() {
     return {
       AMessage: 'Hello，B组件，我是A组件'
     }
   },
   computed: {
     BMessage() {
       // 这里存储从store里获取的B组件的数据
       return this.$store.state.BMsg
     }
   },
   methods: {
     transform() {
       // 触发receiveAMsg，将A组件的数据存放到store里去
       this.$store.commit('receiveAMsg', {
         AMsg: this.AMessage
       })
     }
   }
 }
</script>

//子组件B
<template>
 <div id="childB">
   <h1>我是B组件</h1>
   <button @click="transform">点我让A组件接收到数据</button>
   <p>点了A，我的信息发生了变化：{{AMessage}}</p>
 </div>
</template>

<script>
 export default {
   data() {
     return {
       BMessage: 'Hello，A组件，我是B组件'
     }
   },
   computed: {
     AMessage() {
       // 这里存储从store里获取的A组件的数据
       return this.$store.state.AMsg
     }
   },
   methods: {
     transform() {
       // 触发receiveBMsg，将B组件的数据存放到store里去
       this.$store.commit('receiveBMsg', {
         BMsg: this.BMessage
       })
     }
   }
 }
</script>

//vuex
import Vue from 'vue'
 import Vuex from 'vuex'
 Vue.use(Vuex)
 const state = {
   AMsg: '',
   BMsg: ''
 }
 
 const mutations = {
   receiveAMsg(state, payload) {
     // 将A组件的数据存放于state
     state.AMsg = payload.AMsg
   },
   receiveBMsg(state, payload) {
     // 将B组件的数据存放于state
     state.BMsg = payload.BMsg
   }
 }
 
 export default new Vuex.Store({
   state,
   mutations
 })

六.$parent
通过parent可以获父组件实例 ，然 后通过这个实例就可以访问父组件的属 性和方法 ，它还有一个兄弟parent可以获父组件实例，然后通过这个实例就可以访问父组件的属性和方法，它还有一个兄弟parent可以获父组件实例，然后通过这个实例就可以访问父组件的属性和方法，它还有一个兄弟root，可以获取根组件实例。
代码示例：

// 获父组件的数据
this.$parent.foo

// 写入父组件的数据
this.$parent.foo = 2

// 访问父组件的计算属性
this.$parent.bar

// 调用父组件的方法
this.$parent.baz()

//在子组件传给父组件例子中，可以使用this.$parent.getNum(100)传值给父组件。

七.sessionStorage传值

sessionStorage 是浏览器的全局对象，存在它里面的数据会在页面关闭时清除 。运用这个特性，我们可以在所有页面共享一份数据。
代码示例：

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

注意：里面存的是键值对，只能是字符串类型，如果要存对象的话，需要使用 let objStr = JSON.stringify(obj) 转成字符串然后再存储（使用的时候 let obj = JSON.parse(objStr) 解析为对象）。
推荐一个库 good-storage ，它封装了sessionStorage ，可以直接用它的API存对象

//localStorage
 storage.set(key,val) 
 storage.get(key, def)
//sessionStorage
 storage.session.set(key, val)
 storage.session.get(key, val)

八.路由传值
使用问号传值
A页面跳转B页面时使用 this.r o u t e r . p u s h ( ’ / B ? n a m e = d a n s e e k ’ ) B 页 面 可 以 使 用 t h i s . router.push(’/B?name=danseek’) B页面可以使用 this.router.push(’/B?name=danseek’)B页面可以使用this.route.query.name 来获取A页面传过来的值
上面要注意router和route的区别
使用冒号传值
配置如下路由：

{
    path: '/b/:name',
    name: 'b',
    component: () => import( '../views/B.vue')
 },

在B页面可以通过 this.$route.params.name 来获取路由传入的name的值

使用父子组件传值
由于router-view本身也是一个组件，所以我们也可以使用父子组件传值方式传值，然后在对应的子页面里加上props，因为type更新后没有刷新路由，所以不能直接在子页面的mounted钩子里直接获取最新type的值，而要使用watch

<router-view :type="type"></router-view>

// 子页面
props: ['type']
watch: {
       type(){
           // console.log("在这个方法可以时刻获取最新的数据:type=",this.type)
       },
},

九.祖传孙 $attrs

正常情况下需要借助父亲的props作为中间过渡，但是这样在父亲组件就会多了一些跟父组件业务无关的属性，耦合度高，借助$attrs可以简化些，而且祖跟孙都无需做修改
祖组件：

<template>
    <section>
        <parent name="grandParent" sex="男" age="88" hobby="code" @sayKnow="sayKnow"></parent>
    </section>
</template>

<script>
    import Parent from './Parent'
    export default {
        name: "GrandParent",
        components: {
          Parent
        },
        data() {
            return {}
        },
        methods: {
          sayKnow(val){
            console.log(val)
          }
        },
        mounted() {
        }
    }
</script>

template>
  <section>
    <p>父组件收到</p>
    <p>祖父的名字：{{name}}</p>
    <children v-bind="$attrs" v-on="$listeners"></children>
  </section>
</template>

<script>
  import Children from './Children'

  export default {
    name: "Parent",
    components: {
      Children
    },
    // 父组件接收了name,所以name值是不会传到子组件的
    props:['name'],
    data() {
      return {}
    },
    methods: {},
    mounted() {
    }
  }
</script>

<template>
  <section>
    <p>子组件收到</p>
    <p>祖父的名字：{{name}}</p>
    <p>祖父的性别：{{sex}}</p>
    <p>祖父的年龄：{{age}}</p>
    <p>祖父的爱好：{{hobby}}</p>

    <button @click="sayKnow">我知道啦</button>
  </section>
</template>

<script>
  export default {
    name: "Children",
    components: {},
    // 由于父组件已经接收了name属性，所以name不会传到子组件了
    props:['sex','age','hobby','name'],
    data() {
      return {}
    },
    methods: {
      sayKnow(){
        this.$emit('sayKnow','我知道啦')
      }
    },
    mounted() {
    }
  }
</script>

十.孙传祖使用$listeners

文字内容同第九个

祖组件

<template>
  <div id="app">
    <children-one @eventOne="eventOne"></children-one>
    {{ msg }}
  </div>
</template>
<script>
import ChildrenOne from '../src/components/children.vue'
export default {
  name: 'App',
  components: {
    ChildrenOne,
  },
  data() {
    return {
      msg: ''
    }
  },
  methods: {
    eventOne(value) {
      this.msg = value
    }
  }
}
</script>

//父组件
<template>
  <div>
    <children-two v-on="$listeners"></children-two>
  </div>
</template>

<script>
import ChildrenTwo from './childrenTwo.vue'

export default {
  name: 'childrenOne',
  components: {
    ChildrenTwo
  }
}
</script>

//子组建
<template>
  <div>
    <button @click="setMsg">点击传给祖父</button>
  </div>
</template>

<script>
export default {
  name: 'children',
  methods: {
    setMsg() {
      this.$emit('eventOne', '123')
    }
  }
}
</script>

十一.promise传参

promise 中 resolve 如何传递多个参数

//类似与这样使用，但实际上后面两个参数无法获取
promise = new Promise((resolve,reject)=>{
    let a = 1
    let b = 2
    let c = 3
    resolve(a,b,c) 
})
promise.then((a,b,c)=>{
    console.log(a,b,c)
})

resolve() 只能接受并处理一个参数，多余的参数会被忽略掉。
如果想多个用数组，或者对象方式。。
数组

promise = new Promise((resolve,reject)=>{
    resolve([1,2,3]) 
})
promise.then((arr)=>{
    console.log(arr[0],arr[1],arr[2])
})

对象

promise = new Promise((resolve,reject)=>{
    resolve({a:1,b:2,c:3}) 
})
promise.then(obj=>{
    console.log(obj.a,obj.b,obj.c)
})

十二.全局变量

定义一个全局变量，在有值的组件直接赋值，在需要的组件内直接使用就可以了

本文链接：https://blog.csdn.net/Frazier1995/article/details/116069811

六种基本数据类型

undefined
null
string
boolean
number
symbol(ES6)

• 一种引用类型
  

• Object

string

1. length属性
2. prototype 添加的方法或属性在所有的实例上共享
3. charAt(index) 返回值
4.  charCodeAt(index) 返回字符的Unicode编码
5.  indexOf(searchVal，index) 值所在的位置 param2是从位置开始算
6. search()方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符

var str = 'abcDEF'; 
console.log(str.search('c')); //返回2 
console.log(str.search('d')); //返回-1
console.log(str.search(/d/i)); //返回3

Object

1. 对象可以通过执行new操作符后跟要创建的对象类型的名称来创建。

前端错误的分类

即时运行错误：代码错误

资源加载错误

错误的捕获方式

代码错误

try...catch

window.onerror

资源错误

object.onerror(不会冒泡到window)：节点上绑定error事件

performance.getEntries:获取资源的加载时长

error的事件捕获：用捕获不用冒泡可以监控

上报错误的基本原理

1.ajax通讯方式上报

2.image对象上报

跨域的代码错误怎么捕获