<h1 style="text-align: start;">使用数字代替</h1><blockquote>windows 中的使用上下键不生效的情况下，可以用数字代替进行选择</blockquote><img src="http://124.223.185.220:3000/getImage?img=image-1671785228784.png" alt="" data-href="" style=""/><h1 style="text-align: start;">使用 winpty</h1>这里以 <code>vue create</code> 创建项目为例： 将<pre style="text-align: start;"><code class="language-bash">vue create hello-world</code></pre>改为：<pre style="text-align: start;"><code class="language-prism language-bash has-numbering">winpty vue.cmd create hello-world</code></pre>这个时候出现的命令行，将可以使用上下箭头的功能了。

windows 使用 Git Bash 上下箭头不生效的解决方案

收录网址 <a href="https://www.bing.com/webmasters/submiturl" target="_blank">https://www.bing.com/webmasters/submiturl</a> 接口文档 <a href="https://www.bing.com/webmasters/url-submission-api#APIs" target="_blank">https://www.bing.com/webmasters/url-submission-api#APIs</a> apikey获取 &nbsp;<a href="https://learn.microsoft.com/en-us/bingwebmaster/getting-access?source=recommendations#using-api-key" target="_blank">https://learn.microsoft.com/en-us/bingwebmaster/getting-access?source=recommendations#using-api-key</a> <img src="http://124.223.185.220:3000/getImage?img=image-1671782199531.png" alt="" data-href="" style="">

bing搜索提交url接口，实现自动化提交

找到根目录下的 next.config.js 文件废话不多说，直接上代码<pre><code class="language-javascript">/** @type {import('next').NextConfig} */
const nextConfig = {
 reactStrictMode: false,
 swcMinify: true,
 rewrites:async ()=&gt;{
 return [{
 source: '/webmaster/api.svc/json/:slug*',
 destination: `https://www.bing.com/webmaster/api.svc/json/:slug*`,
 },]
 }
}

module.exports = nextConfig
</code></pre><blockquote>source &nbsp; &nbsp;匹配字段，请求路径匹配到该字段将代理到destination字段的接口地址 :slug* &nbsp; &nbsp; &nbsp;为不同接口的不同路径，可视为一个变量，接收匹配字段的后半段路径</blockquote>

nextjs跨域问题解决

<h2>百度</h2> <a href="https://ziyuan.baidu.com/linksubmit/url" target="_blank">https://ziyuan.baidu.com/linksubmit/url</a> <img src="http://124.223.185.220:3000/getImage?img=image-1671778075822.png" alt="" data-href="" style=""/><h2>bing</h2> <a href="https://www.bing.com/webmasters" target="_blank">https://www.bing.com/webmasters</a> <img src="http://124.223.185.220:3000/getImage?img=image-1671778145778.png" alt="" data-href="" style=""/><h2>Google</h2> <a href="https://search.google.com/search-console" target="_blank">https://search.google.com/search-console</a> <img src="http://124.223.185.220:3000/getImage?img=image-1671778194424.png" alt="" data-href="" style=""/>

各个平台搜索引擎的收录网址

部分 UI 的 JavaScript 错误不应该导致整个应用崩溃，为了解决这个问题，React 16 引入了一个新的概念 —— 错误边界。错误边界是一种 React 组件，这种组件可以捕获发生在其子组件树任何位置的 JavaScript 错误，并打印这些错误，同时展示降级 UI，而并不会渲染那些发生崩溃的子组件树。错误边界可以捕获发生在整个子组件树的渲染期间、生命周期方法以及构造函数中的错误。错误边界是一种 React 组件，这种组件可以捕获发生在其子组件树任何位置的 JavaScript 错误，并打印这些错误，同时展示降级 UI，而并不会渲染那些发生崩溃的子组件树。错误边界可以捕获发生在整个子组件树的渲染期间、生命周期方法以及构造函数中的错误。<blockquote style="text-align: start;">注意 错误边界无法捕获以下场景中产生的错误： 事件处理（了解更多） 异步代码（例如 setTimeout 或 requestAnimationFrame 回调函数） 服务端渲染 它自身抛出来的错误（并非它的子组件）</blockquote>如果一个 class 组件中定义了 <a href="https://zh-hans.reactjs.org/docs/react-component.html#static-getderivedstatefromerror" target=""><code>static getDerivedStateFromError()</code></a> 或 <a href="https://zh-hans.reactjs.org/docs/react-component.html#componentdidcatch" target=""><code>componentDidCatch()</code></a> 这两个生命周期方法中的任意一个（或两个）时，那么它就变成一个错误边界。当抛出错误后，请使用 <code>static getDerivedStateFromError()</code> 渲染备用 UI ，使用 <code>componentDidCatch()</code> 打印错误信息。<pre><code class="language-javascript">class ErrorBoundary extends React.Component {
 constructor(props) {
 super(props);
 this.state = { hasError: false };
 }

 static getDerivedStateFromError(error) { // 更新 state 使下一次渲染能够显示降级后的 UI return { hasError: true }; }
 componentDidCatch(error, errorInfo) { // 你同样可以将错误日志上报给服务器 logErrorToMyService(error, errorInfo); }
 render() {
 if (this.state.hasError) { // 你可以自定义降级后的 UI 并渲染 return &lt;h1&gt;Something went wrong.&lt;/h1&gt;; }
 return this.props.children; 
 }
}</code></pre>然后你可以将它作为一个常规组件去使用：<pre><code class="language-javascript">&lt;ErrorBoundary&gt;
 &lt;MyWidget /&gt;
&lt;/ErrorBoundary&gt;</code></pre>错误边界的工作方式类似于 JavaScript 的 <code>catch {}</code>，不同的地方在于错误边界只针对 React 组件。只有 class 组件才可以成为错误边界组件。大多数情况下, 你只需要声明一次错误边界组件, 并在整个应用中使用它。注意错误边界仅可以捕获其子组件的错误，它无法捕获其自身的错误。如果一个错误边界无法渲染错误信息，则错误会冒泡至最近的上层错误边界，这也类似于 JavaScript 中 <code>catch {}</code> 的工作机制。

错误边界（Error Boundaries）

在nginx.conf文件中location添加header配置项打开访问来源<pre><code > server {
 listen 88; ## 端口
 server_name localhost; ## 域名
 location / { ## 匹配路径
 add_header 'Access-Control-Allow-Origin' '*';
 add_header 'Access-Control-Allow-Credentials' 'true';
 add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
 add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
 root /www/www; ## 文件根目录
 index index.html index.htm; ## 默认页名称
 if (!-e $request_filename) {
 	 rewrite ^/(.*) /index.html last;
 	break;
 }
 }
 error_page 500 502 503 504 /50x.html; ## 报错编码对应页面
 location = /50x.html {
 root html;
 }
 }
 </code></pre>

nginx配置解决访问静态资源跨域问题

通过middleware中间件的方式设置proxy安装插件<pre><code >yarn add http-proxy-middleware --save
或
npm install http-proxy-middleware --save</code></pre>安装middleware插件后，在src目录中新建setupProxy.js文件，在文件中放入如下代码：<pre><code class="language-javascript">const { createProxyMiddleware } = require('http-proxy-middleware')

// 通常使用这种方式就够了，如果报错，可以使用下面的方法
module.exports = function (app) {
 app.use(
 proxy('/api1', { // 遇见/api1开头的请求，触发改代理配置
 target: 'http://172.16.136.249:8080', // 请求转发给谁
 secure: false,
 changeOrigin: true, // 控制服务器收到的请求头中的Host值，默认false，意思为服务端收到的Host值是我们自己本的地址，开启以后，服务端收到的就会他自己的地址
 pathRewrite: {
 "^/api1": "/api" // 把所有/api1重写成api
 }
 }),
 proxy('/api2', {
 target: 'http://172.16.136.250:8080',
 secure: false,
 changeOrigin: true,
 pathRewrite: {
 "^/api2": "/api"
 }
 })
 )
}


//已采用方法，没有问题
module.exports = function (app) {
 app.use(
 createProxyMiddleware('/api', {
 target: 'http://172.16.136.249:8080',
 secure: false,
 changeOrigin: true,
 pathRewrite: {
 "^/api": "/api"
 }
 })
 )
}</code></pre><blockquote>在setupProxy.js文件中不能使用require直接引用本地项目文件，可能和打包后路径偏差影响有关</blockquote>

react项目前端跨域请求解决方案

useObserver 的使用几乎和 Class 组件的 render 函数的使用方式一致。事实上也确实如此，而且他的使用规则也很简单，直接把需要返回的 Node 用该 hooks 包裹后再返回就可以了。经过这样处理的组件，就可以成功监听数据的变化，当数据变化的时候，会触发组件的重渲染。<pre><code class="language-javascript">import { useObserver } from 'mobx-react'

...

return useObserver(() =&gt; (
 &lt;div&gt;
 ...
 &lt;/div&gt;
 ))
</code></pre>

解决mobx6数据更新react无法实时渲染问题

<h2>React.memo()</h2>React.memo 为高阶组件。它与React.PureComponent非常相似。默认情况下其只会对复杂对象做浅层对比，如果你想要控制对比过程，那么请将自定义的比较函数通过第二个参数传入来实现。这与shouldComponentUpdate 方法的返回值相反。<pre><code class="language-javascript">function MyComponent(props) {
 /* 使用 props 渲染 */
}
function areEqual(prevProps, nextProps) {
 /*
 如果把 nextProps 传入 render 方法的返回结果与
 将 prevProps 传入 render 方法的返回结果一致则返回 true，
 否则返回 false
 */
}
export default React.memo(MyComponent, areEqual);</code></pre>问题：如果此时在子组件引用了事件处理函数的话， React.memo()将会失效，因为父组件在每次重新渲染时，定义的事件函数也会重新声明，对子组件来说，该事件属性已经发生改变了所以每次都会重新渲染；<pre><code class="language-javascript">&lt;ChildMemo name={name} onClick={(newName) =&gt; setName(newName)}/&gt;</code></pre><blockquote style="text-align: start;">注意: 如果直接使用<code>useState</code>解构的setName传给子组件, 子组件将不会重复渲染，因为解构出来的是一个memoized 函数。</blockquote><pre style="text-align: start;"><code class="language-javascript">&lt;ChildMemo name={name} onClick={setName}/&gt;</code></pre>如何解决因事件函数产生的重复渲染呢，这个时候需要用到useCallback()了<h2>useCallback()</h2>把内联回调函数及依赖项数组作为参数传入 useCallback，它将返回该回调函数的memoized回调函数，该回调函数仅在某个依赖项改变时才会更新<blockquote><code>memoized</code>回调函数: 使用一组参数初次调用函数时，缓存参数和计算结果，当再次使用相同的参数调用该函数时，直接返回相应的缓存结果。(返回对应饮用，所以恒等于 ===)</blockquote><pre><code class="language-javascript">&lt;ChildMemo name={name} onClick={ useCallback((newName: string) =&gt; setName(newName), []) }/&gt;</code></pre><h2 style="text-align: start;">useMemo()</h2>上面的例子中，name 属性是个字符串，如果换成传递对象会怎样？<pre><code class="language-javascript">const userInfo={name:"jack",age:16}
return (
 ...
 &lt;ChildMemo userInfo={userInfo} /&gt;
)
</code></pre>更新父组件的其他state变量，看到子组件每次都重新渲染了。 分析原因跟调用函数是一样的：<ul><li>更新父组件state，触发父组件重新渲染；</li><li>父组件渲染，userInfo 会重新生成一个新对象，导致传递给子组件的 userInfo 属性值变化，进而导致子组件重新渲染。</li><li>注意: 如果使用<code>useState</code>解构的userInfo, 子组件将不会重复渲染，因为解构出来的是一个memoized 值。</li></ul>解决：使用 useMemo 将对象属性包一层。useMemo()返回一个 memoized 值。<pre><code class="language-javascript">const userInfo = useMemo(() =&gt; ({ name: "小明", age: 18 }), []);
return (
 ...
 &lt;ChildMemo userInfo={userInfo} /&gt;
)</code></pre>

React.memo()、useCallback()、useMemo()实现减少子组件渲染

在网站控制台中，在根目录html节点找到了这个属性 filter: grayscale(1); 将它删除，置灰特效就消失了，那来了解一下吧<h1 style="text-align: start;">filter</h1><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS" target="">CSS</a>属性 <code>filter</code> 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。CSS 标准里包含了一些已实现预定义效果的函数。你也可以参考一个 SVG 滤镜，通过一个 URL 链接到 SVG 滤镜元素（<a href="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/filter" target="">SVG filter element</a>）。<h2><code>grayscale()</code></h2> 对图片进行灰度转换，它是 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter-function" target="" style="text-align: start;"><code>&lt;filter-function&gt;</code></a> 的子属性。<h2><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter-function/grayscale#%E8%AF%AD%E6%B3%95" target="">语法</a></h2><pre><code class="language-css">grayscale(amount)</code></pre><h3>参数</h3>amount转换值的大小，可以是<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/number" target=""><code>&lt;number&gt;</code></a> 或 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/percentage" target=""><code>&lt;percentage&gt;</code></a>. 当值为 100% 时，灰度最大。0% 时与原图没有区别。0% 到 100% 之间的值会使灰度线性变化。amount 为空时使用值为<code>1</code>.<h2>例子</h2><pre><code class="language-css">grayscale(0) /* 无效果 */
grayscale(.7) /* 70% 灰度 */
grayscale(100%) /* 灰度最大 */</code></pre>

全网置灰特效如何做到的？

<h2>前言</h2>我在学习 TS 时遇到了一个问题：比如下面这个例子，可以用 type，也可以用 interface。<pre><code class="language-typescript">interface Person {
 name: string
 age: number
}

const person: Person = {
 name: 'lin',
 age: 18
}</code></pre><pre><code class="language-typescript">type Person = {
 name: string
 age: number
}

const person: Person = {
 name: 'lin',
 age: 18
}</code></pre> <h2>interface</h2>interface（接口） 是 TS 设计出来用于定义对象类型的，可以对对象的形状进行描述。<pre><code class="language-typescript">interface Person {
 name: string
 age: number
}

const person: Person = {
 name: 'lin',
 age: 18
}</code></pre><h2>type</h2>type (类型别名)，顾名思义，类型别名只是给类型起一个新名字。它并不是一个类型，只是一个别名而已就像 NBA 球员 扬尼斯-阿德托昆博，名字太长难记，我们叫他<code>字母哥</code>。就像我们项目中配置 <code>alias</code>，不用写相对路径就能很方便地引入文件<pre><code class="language-typescript">import componentA from '../../../../components/componentA/index.vue'
变成
import componentA from '@/components/componentA/index.vue
复制代码</code></pre>有了 type，我们书写 TS 的时候可以更加方便简洁。比如下面这个例子，<code>getName</code> 这个函数接收的参数可能是字符串，可能是函数，就可以这么写。<pre><code class="language-typescript">type Name = string
type NameResolver = () =&gt; string
type NameOrResolver = Name | NameResolver // 联合类型
function getName(n: NameOrResolver): Name {
 if (typeof n === 'string') {
 return n
 }
 else {
 return n()
 }
}</code></pre>这样调用时传字符串和函数都可以。<pre><code class="language-typescript">getName('lin')
getName(() =&gt; 'lin')</code></pre>如果传的格式有问题，就会提示。 <h2>两者相同点</h2><h3>都可以定义一个对象或函数</h3>定义对象前面已经说了，我们来看一下如何定义函数。<pre><code class="language-typescript">type addType = (num1:number,num2:number) =&gt; number

interface addType {
 (num1:number,num2:number):number
}
这两种写法都可以定义函数类型</code></pre><pre><code class="language-typescript">const add:addType = (num1, num2) =&gt; {
 return num1 + num2
}</code></pre><h3>都允许继承（extends）</h3>我们定义一个 Person 类型和 Student 类型，Student 继承自 Person，可以有下面四种方式<h4>interface 继承 interface</h4><pre><code class="language-typescript">interface Person { 
 name: string 
}
interface Student extends Person { 
 grade: number 
}</code></pre><pre><code class="language-typescript">const person:Student = {
 name: 'lin',
 grade: 100
}</code></pre><h4>type 继承 type</h4><pre><code class="language-typescript">type Person = { 
 name: string 
}
type Student = Person & { grade: number } 用交叉类型</code></pre><h4>interface 继承 type</h4><pre><code class="language-typescript">type Person = { 
 name: string 
}

interface Student extends Person { 
 grade: number 
}</code></pre><h4>type 继承 interface</h4><pre><code class="language-typescript">interface Person { 
 name: string 
}

type Student = Person & { grade: number } 用交叉类型</code></pre>interface 使用 extends 实现继承， type 使用交叉类型实现继承<h2>两者不同点</h2><h3>type 可以，interface 不行</h3><blockquote>类型别名会给一个类型起个新名字。 类型别名有时和接口很像，但是可以作用于原始值，联合类型，元组以及其它任何你需要手写的类型。 -- TS 文档</blockquote><h4>声明基本类型、联合类型、交叉类型、元组</h4><pre><code class="language-typescript">type Name = string // 基本类型

type arrItem = number | string // 联合类型

const arr: arrItem[] = [1,'2', 3]

type Person = { 
 name: Name 
}

type Student = Person & { grade: number } // 交叉类型

type Teacher = Person & { major: string } 

type StudentAndTeacherList = [Student, Teacher] // 元组类型

const list:StudentAndTeacherList = [
 { name: 'lin', grade: 100 }, 
 { name: 'liu', major: 'Chinese' }
]</code></pre><h3>interface可以，type 不行</h3><h4>合并重复声明</h4><pre><code class="language-typescript">interface Person {
 name: string
}

interface Person { // 重复声明 interface，就合并了
 age: number
}

const person: Person = {
 name: 'lin',
 age: 18
}</code></pre>重复声明 type ，就报错了<pre><code class="language-typescript">type Person = {
 name: string
}

type Person = { // Duplicate identifier 'Person'
 age: number
}

const person: Person = {
 name: 'lin',
 age: 18
}
</code></pre> <h2>小结</h2>interface 和 type 被 TS 设计出来，是完全不同的东西，有各自的职责。interface 是接口，用于描述一个对象。type 是类型别名，用于给各种类型定义别名，让 TS 写起来更简洁、清晰。只是有时候两者都能实现同样的功能，才会经常被混淆。平时开发中，一般使用组合或者交叉类型的时候，用 type。一般要用类的 extends 或 implements 时，用 interface。 原文： <a href="https://juejin.cn/post/7063521133340917773" target="_blank">https://juejin.cn/post/7063521133340917773</a>

TS 中 interface 和 type 究竟有什么区别？

<img src="http://124.223.185.220:3000/getImage?img=image-1669969207140.png" alt="" data-href="" style=""/>网上收集了一点信息，简单说一下我的理解先说立场：如果让我选择的话，我不会主动使用TailwindCSS。TailwindCSS框架其实就是将很多的css属性直接class命名单独包装好直接在dom里使用，这样有个优点就是可以不写css文件一切样式皆在元素内实现，但是我认为通过行内样式也可以实现；还有一个优点也是我网上看到很多用户喜欢的一点，使用tailwind可以让你在编码的时候不用再饱受class命名的纠结了，其实我个人开发的时候对于命名问题并没有那么折磨，个人喜欢继承式驼峰命名，并不会太纠结，虽然命名很随意，而且现在用css module并不会担心命名冲突问题，而且我觉得使用TailwindCSS会让元素变得臃肿，而且对于我这种记性不好的，再去记一套名称，真的是灾难；我认为一套框架的出现应该是会让原有的方式发生跳跃式的改变，就比如jQuery、React框架的出现对原生开发的影响一样；所以我不看好TailwindCSS；<pre><code class="language-html">/* 行内样式 */
&lt;div style="{ borderRadius: '0.5rem', padding: '1rem' }"&gt; Click &lt;/div&gt;

/* TailwindCSS */
&lt;div class="rounded-lg p-4"&gt; Click &lt;/div&gt;</code></pre>

谈一谈 CSS框架TailwindCSS

<img src="http://124.223.185.220:3000/getImage?img=image-1669600845465.png" alt="" data-href="" style=""><h1 style="text-align: start;">财阀家的小儿子 更新至6集</h1>豆瓣评分： &nbsp;8.5分类：奇幻,剧情,爱情 &nbsp;地区：韩国 &nbsp;年份：2022 &nbsp;又名：演员：<a href="https://www.hdmoli.com/search.php?searchword=%E5%AE%8B%E4%BB%B2%E5%9F%BA" target="">宋仲基</a> &nbsp;<a href="https://www.hdmoli.com/search.php?searchword=%E6%9D%8E%E6%98%9F%E6%B0%91" target="">李星民</a> &nbsp;<a href="https://www.hdmoli.com/search.php?searchword=%E7%94%B3%E8%B4%A4%E5%BD%AC" target="">申贤彬</a> &nbsp;<a href="https://www.hdmoli.com/search.php?searchword=%E8%B5%B5%E6%B1%89%E5%93%B2" target="">赵汉哲</a> &nbsp;<a href="https://www.hdmoli.com/search.php?searchword=%E9%87%91%E8%B4%9E%E5%85%B0" target="">金贞兰</a> &nbsp; 导演：郑大允 更新：2022-11-28 07:50 &nbsp;更新周期：周五,周六,周日短评：重生复仇商战爽剧解说： 简介： 改编自同名人气网络小说，讲述管理财阀一家的秘书尹贤宇（宋仲基 饰），被冤枉涉嫌侵吞资金而被财阀家杀害。尹贤宇重生为财阀家的小儿子陈道俊，以新的身份一边成长一边复仇的故事。观看链接： <a href="https://www.hdmoli.com/movie/index1636.html" target="_blank">https://www.hdmoli.com/movie/index1636.html</a> <img src="http://124.223.185.220:3000/getImage?img=image-1669600619098.png" alt="" data-href="" style=""/>

最近看的一部爽剧《财阀家的小儿子》

网站链接： <a href="https://paramoji.org/" target="_blank">https://paramoji.org/</a> 看看效果：<img src="https://paramoji.org/paramoji.svg.php?v=67&a1=71&a2=33&d=79&c=56" alt="https://paramoji.org/paramoji.svg.php?v=67&a1=71&a2=33&d=79&c=56" data-href="https://paramoji.org/paramoji.svg.php?v=67&a1=71&a2=33&d=79&c=56" style="width: 299.00px;height: 299.00px;"/>

很有趣的一个表情生成工具

老子的一脸不屑

<h3>一、前言</h3>       上周阿里的面试官问了个面试题 “ 能不能说下 304 的过程，以及影响缓存的头部属性有哪些？”OMG.......因为之前只是大概了解 304 状态码是表示缓存，且因为平时项目开发过程中也没有在缓存这块踩过坑，所以这一块也没有去做特别深入的研究。所以当被问这个问题时，有被当头一棒的感觉，也好好反思了下，自己校招以软件开发工程师的职位进入公司，之前没有想过要从事前端开发，所以前端基础几乎可以忽略不计。工作一年多来，为在工作上表现突出，在工作上投入大量的精力，干到晚上10点是常规操作，周末至少加班1天；并且空余时间，经常看前端相关书籍弥补基础，如《JavaScript 高级程序设计》、《CSS 权威指南》、《Sass 实践》、《JavaScript 高性能编程》....《Webpack 实践》、《深入浅出 node.js》等不下10本书；在广度上涉及的还是很多的，但是存在问题：从事前端时间不长，前端知识杂而多，如果没有专门准备，如果突然问你一个知识点，你虽然大概知道这是啥，但是让你讲的话，你很难有条理的讲清楚。       So，下一阶段的首要任务：“打好打牢前端基础，深入了解所用的技术栈原理”。废话少说，学问学问，不懂就弄清楚！以下“理论知识 + 实践操作”来彻底弄懂 HTTP 缓存机制及原理！<h3>二、缓存规则及解析</h3>       为方便大家理解，我假设览器存在一个缓存数据库，用于存储缓存信息。在客户端第一次请求数据时，此时缓存数据库中没有对应的缓存数据，需要请求服务器，服务器返回后，将数据存储至缓存数据库中。如下流程图所示：<img src="" alt="" data-href="" style=""/><img src="" alt="" data-href="" style=""/><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/3/22/169a1125a6943e17~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image" alt="" data-href="" style=""/>       根据是否需要重新向服务器发起请求来分类，将HTTP缓存规则分为两大类(强制缓存，对比缓存)在详细介绍这两种规则之前，先通过时序图的方式，让大家对这两种规则有个简单了解。（1）已存在缓存数据时，仅基于强制缓存，请求数据的流程如下所示：<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/3/22/169a1131a01649ce~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image" alt="" data-href="" style=""/> （2）已存在缓存数据时，仅基于对比缓存，请求数据的流程如下所示：<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/3/22/169a113789f814d2~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image" alt="" data-href="" style=""/>        我们可以看到两类缓存规则的不同，强制缓存如果生效，不需要再和服务器发生交互，而对比缓存不管是否生效，都需要与服务端发生交互。       两类缓存规则可以同时存在，强制缓存优先级高于对比缓存，也就是说，当执行强制缓存的规则时，如果缓存生效，直接使用缓存，不再执行对比缓存规则。<h3>三、缓存常用字段</h3><h3>1、http1.0时期的缓存方案</h3><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/3/22/169a119737ecdeb2~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image" alt="" data-href="" style=""/> 注意： （1）如果使用了<code>Pragma: 'no-cache'</code>的话，再设置<code>Expires</code>或者<code>Cache-Control</code>，就没有用了，说明<code>Pragma</code>的权值比后两者高。 （2）如果设置了<code>Expires</code>之后，客户端在需要请求数据的时候，首先会对比当前系统时间和这个<code>Expires</code>时间，如果没有超过<code>Expires</code>时间，则直接读取本地磁盘中的缓存数据，不发送请求。 <h3>2、http1.1 时期的缓存方案</h3>2.1、Cache-Control 字段 2.1.1、Cache-Control 作为请求头字段 <img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/3/22/169a11b7c6a465ba~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image" alt="" data-href="" style=""/> （1）Cache-Control: no-cache 使用<code>no-cache</code>指令的目的是为了防止从缓存中返回过期的资源。 客户端发送的请求中如果包含 <code>no-cache</code> 指令，则表示客户端将不会接收缓存的资源。每次请求都是从服务器获取资源，返回304。 （2）Cache-Control: no-store 使用<code>no-store</code> 指令表示请求的资源不会被缓存，下次任何其它请求获取该资源，还是会从服务器获取，返回 200，即资源本身。 2.1.2、Cache-Control 作为响应头字段 <img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/3/22/169a11c6b7651b77~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image" alt="" data-href="" style=""/> Cache-Control: public 当指定使用 <code>public </code>指令时，则明确表明其他用户也可利用缓存。 Cache-Control: private当指定 <code>private</code> 指令后，响应只以特定的用户作为对象，这与 <code>public</code> 指令的行为相反。 缓存服务器会对该特定用户提供资源缓存的服务，对于其他用户发送 过来的请求，代理服务器则不会返回缓存。 Cache-Control: no-cache 如果服务器返回的响应中包含<code> no-cache </code>指令，每次客户端请求，必需先向服务器确认其有效性，如果资源没有更改，则返回304. Cache-Control: no-store 不对响应的资源进行缓存，即用户下次请求还是返回 200，返回资源本身。 Cache-Control: max-age=604800（单位：秒） 资源缓存在本地浏览器的时间，如果超过该时间，则重新向服务器获取。 2.2、请求头部字段 & 响应头部字段2.2.1、请求头部字段 <img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/3/22/169a11dbaa0f8a2a~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image" alt="" data-href="" style=""/> 2.2.2、响应头部字段 <img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/3/22/169a11e177c975f2~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image" alt="" data-href="" style=""/> 注意： （1）<code>If-None-Match</code>的优先级比<code>If-Modified-Since</code>高，所以两者同时存在时，遵从前者。 <h3>四、实验验证</h3>1、实验1 — 请求的资源没修改，验证2种缓存出现的情形服务端使用 node.js ， 客户端使用 axios 进行请求：1.1、请求头部 / 响应头部 设置 （1）服务端响应头部设置：     res.setHeader('Cache-Control', 'public, max-age=10');（2）客户端请求头部使用默认设置 1.2、实验步骤（1）请求 3 次，第一次请求请求资源；第二次在10秒内再次请求该资源，第三次在 10 秒后再次请求该资源（实验过程中，服务端的资源没有进行改变） 1.3、实验结果      3 次请求的 HTTP 信息如下图所示，从图中的信息可以得出，第一次请求该资源是从服务器获取；第二次（10 秒内）请求该资源是直接从浏览器缓存中获取该资源（没有向服务器确认）；第三次（10 秒后）请求该资源时，因为资源缓存时间（10 秒）过期，所以向服务器获取资源，服务器判断该资源与本地缓存的资源没有做更改，所以返回 304，让客户端直接从浏览器缓存中获取该资源；以下，根据 HTTP 头部信息详细介绍三个操作的交互过程。<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/3/22/169a11ff1e022d96~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image" alt="" data-href="" style=""/> 1.3.1、第一次请求资源 第一次请求资源的请求头部和响应头部的截图如下所示，因为第一次请求该资源，本地并没有缓存，所以直接从服务器获取该资源；我们从截图可以看到，服务器返回改资源的响应头部中包含3个属性与资源缓存相关：（1）cache-control: public, max-age=10 &nbsp; &nbsp; 缓存规则的设置，我们这个示例中，设置缓存规则为 public, 并且设置缓存过期时间为10秒；（2）etag: W/"95f15b-16994d7ebf6" &nbsp; &nbsp; 资源的唯一标识符，客户端下次访问该资源时，会在请求头中携带 etag 去向服务器确认，该资源是否被修改；（3）last-modified: Tue, 19 Mar 2019 07:26:12 GMT &nbsp; &nbsp; 资源最后一次修改时间，客户端下次访问该资源时，会在请求头中携带该信息去向服务器进行匹配，该资源是否被修改；<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/3/22/169a12072e2e0cb6~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image" alt="" data-href="" style=""/> 1.3.2、第二次请求资源（10秒内，即在缓存时间失效前）       第二次请求资源的请求头部和响应头部的截图如下所示，因为第二次请求该资源，该资源本地缓存还没失效，所以就直接从浏览器缓存中获取该资源。<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/3/22/169a120bbf711005~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image" alt="" data-href="" style=""/> 1.3.3、第三次请求资源（10秒后，即在缓存时间失效后）       第三次请求资源的请求头部和响应头部的截图如下所示，因为第三次请求该资源，该资源本地缓存已经失效，所以在请求头部中加入 If-Modified-Since 和 If-None-Match 属性，来向服务器进行确认该资源是否有被更改。<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/3/22/169a1211c38c875b~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image" alt="" data-href="" style=""/> 2、实验2 — 请求的资源进行修改，验证2种缓存出现的情形服务端使用 node.js ， 客户端使用 axios 进行请求：2.1、请求头部 / 响应头部 设置（1）服务端响应头部设置：     res.setHeader('Cache-Control', 'public, max-age=20');（2）客户端请求头部使用默认设置 2.2、实验步骤（1）请求 3 次，第一次请求资源；然后在服务器对请求的资源进行修改，第二次在 20 秒内再次请求该资源，第三次在 20 秒后再次请求该资源 2.3、实验结果       3 次请求的 HTTP 信息如下图所示，从图中的信息可以得出，第一次请求该资源是从服务器获取；第二次（20 秒内）请求该资源是直接从浏览器缓存中获取该资源（没有向服务器确认）；第三次（20 秒后）请求该资源时，因为资源缓存时间（20 秒）过期，所以向服务器获取资源，服务器判断该资源与本地缓存的资源不同，所以重新返回该资源；以下，根据 HTTP 头部信息详细介绍三个操作的交互过程。<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/3/22/169a121606944373~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image" alt="" data-href="" style=""/> 2.3.1、第一次请求资源       第一次请求资源的请求头部和响应头部的截图如下所示，具体详细信息与 1.3.1 小节相同，在此不同重复介绍。<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/3/22/169a1219166741f1~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image" alt="" data-href="" style=""/> 2.3.2、第二次请求资源（20 秒内，即在缓存时间失效前）      第二次请求资源的请求头部和响应头部的截图如下所示，（注意：即使此时服务器上的资源已经更改，但是由于缓存在浏览器中的资源没有过期，所以还是从缓存中返回旧资源）。<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/3/22/169a121db9c73552~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image" alt="" data-href="" style=""/> 2.3.3、第三次请求资源（20 秒后，即在缓存时间失效后）       第三次请求资源的请求头部和响应头部的截图如下所示，因为第三次请求该资源，该资源本地缓存已经失效，所以在请求头部中加入 If-Modified-Since 和 If-None-Match 属性，来向服务器进行确认该资源是否有被更改，从下图中可以看到，响应头部的属性 etag 与 请求头部的属性 If-None-Match &nbsp;不同，响应头部的属性 If-Modified-Since 与 请求头部的属性 last-modified 不同；所以服务器返回该资源的最新资源。<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/3/22/169a1221529a99db~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image" alt="" data-href="" style=""/> <h3>五、总结</h3>1、对于强制缓存，服务器通知浏览器一个缓存时间，在缓存时间内，下次请求，直接用缓存，不在时间内，执行比较缓存策略。2、对于比较缓存，将缓存信息中的Etag和Last-Modified通过请求发送给服务器，由服务器校验，返回304状态码时，浏览器直接使用缓存。总结流程图如下所示：<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/3/22/169a12255df4532a~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image" alt="" data-href="" style=""/> <img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/3/22/169a123d14bbb808~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image" alt="" data-href="" style=""/>有任何问题欢迎留言讨论，如果觉得对你有帮助，请点赞鼓励~<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/3/22/169a123d14bbb808~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image" alt="" data-href="" style=""/> 作者：我是你的超级英雄 链接：https://juejin.cn/post/6844903801778864136 来源：稀土掘金

深入理解HTTP缓存机制及原理

<h2 style="text-align: start;">原文： <a href="https://segmentfault.com/a/1190000041449997" target="_blank">https://segmentfault.com/a/1190000041449997</a> </h2><h2 style="text-align: start;">前言-学以致用</h2>之前一直忙于开发，总是零散的去看一些东西，想想学东西了么？额... 好像学了，又好像没有学，不知道你们有没有这种感觉，所以新年初始，换一种学习方法，本着学以致用去完整的学一些东西，正好之前想接触CI,CD 这里的知识，所以就从最常见的github开始吧，毕竟免费又常用。<h2 style="text-align: start;">初始化项目</h2>创建github代码仓库，clone 项目到本地，进入目录初始化项目<pre style="text-align: start; line-height: 1.5;"><code>npx create-react-app</code></pre>然后按照命令提示输入完成初始化,推送项目到github。<h2 style="text-align: start;">配置github actions</h2>目标是实现推送代码到master分支, 自动开始构建项目，部署到Gthub Pages。 按照<a href="https://link.segmentfault.com/?enc=BsHuQ0PzigUZ28kaoAvQ1A%3D%3D.qxiSOELr%2FQtZg8yDLMw5z%2F3N%2Fg7890IdTr0xBDUgph6mtDx00VjRN6ObO29wJLlQ" target="_blank">文档</a>先跑起来第一个流程，让自己看到效果，在去学习语法内容，这样更能激发兴趣，免得直接看文档看睡着了...<ol style="text-align: start;"><li>在目录外层增加 .gihub/workflows文件夹，创建第一个first-demo.yml文件，拷贝示例内容.</li></ol><pre style="text-align: start; line-height: 1.5;"><code>name: GitHub Actions Demo
on: [push]
jobs:
 Explore-GitHub-Actions:
 runs-on: ubuntu-latest
 steps:
 - run: echo "🎉 The job was automatically triggered by a ${{ github.event_name }} event."
 - run: echo "🐧 This job is now running on a ${{ runner.os }} server hosted by GitHub!"
 - run: echo "🔎 The name of your branch is ${{ github.ref }} and your repository is ${{ github.repository }}."
 - name: Check out repository code
 uses: actions/checkout@v2
 - run: echo "💡 The ${{ github.repository }} repository has been cloned to the runner."
 - run: echo "🖥️ The workflow is now ready to test your code on the runner."
 - name: List files in the repository
 run: |
 ls ${{ github.workspace }}
 - run: echo "🍏 This job's status is ${{ job.status }}."</code></pre><ol style="text-align: start;"><li>提交代码，点击gihub仓库上方的Actions按钮，查看效果，第一个工作流程就完成了。 <img src="https://segmentfault.com/img/bVcX4QB" alt="image.png" data-href="" style=""></li></ol><h2 style="text-align: start;">开始编写自己的yml文件,实现自动构建</h2>快速过一遍文档，学习一下语法，实现自己想要的工作流程。从demo可以看到主要有流程有这么几步<ol style="text-align: start;"><li>name 工作流程的名称。 GitHub 在仓库的操作页面上显示工作流程的名称。</li><li>on 触发流程的事件，具体可以触发的事件有<a href="https://link.segmentfault.com/?enc=RQOtsmXdu0%2FEXbROT%2FG%2F2Q%3D%3D.7z%2ByjH%2FOcAA%2Fn%2FAOG%2FPEc7sSAqWm8y9eeuk2jE6mKo3Sady7tvQdfp9twn8zABomtUFNy9UaxNnRKqmagziAA9KkvrPW%2FqZd9INMAa1hQb5%2Bbgd048QnZ4pxSaX8iVBA" target="_blank">这些</a>,我们所要实现的是提交代码，所以用 push.</li><li>jobs 要按顺序运行作业.</li></ol>目标明确后，开始编写yml<pre style="text-align: start; line-height: 1.5;"><code class="language-xml"> # 显示得workflow名称
 name: First GitHub Actions Demo
 on: 
 # 推送到master分支开始打包
 push:
 branches:
 - master

 jobs:
 # 开始打包
 Build:
 runs-on: ubuntu-latest
 steps:
 - name: checkout code
 # 迁出触发的流程的版本 能让下面的工作流程访问
 uses: actions/checkout@v2
 # setup-node 可以提供node环境，指定node版本以及 npm /yarn缓存
 - name: actions/setup-node@v2
 uses: actions/setup-node@v2 
 with:
 node: 16.14
 # 初始用的npm 打包时间太长了，就想着用yarn 结果没仔细看文档，yarn 不用安装 ubuntu 上面有的 
 # - name: install yarn 
 # uses: npm install yarn 
 # - run: yarn install
 # - run: yarn build
 # 简写为
 - run: yarn install &amp;&amp; yarn build</code></pre>好了提交代码看Actions（这是上面没有优化时的流程）。 <img src="https://segmentfault.com/img/bVcX4U4" alt="image.png" data-href="" style=""> 到此已经完成了提交代码自动打包的过程了，但是一看打包时间好家伙一分半，这要是实际开发大量依赖加入，那不得半个小时么？打开流程一看大部分时间都是在下载依赖，所以是不是可以添加缓存呢？一搜索果然有<a href="https://link.segmentfault.com/?enc=pnQPaLLU4xUkEVZs%2FAOMvg%3D%3D.2tU0x25fYK3W5v%2BKIaXbPtcgPRdBA3aCtheR9dRUoYVvVXrZqh4THcigzp8RkBWk" target="_blank">cache</a>,麻溜的按照文档添加进入， 一看时间46s,哈哈果然有效。到此yml内容为<pre style="text-align: start; line-height: 1.5;"><code>name: First GitHub Actions Demo
on: 
 push:
 branches:
 - master

jobs:
 Build:
 runs-on: ubuntu-latest
 steps:
 - name: checkout code
 uses: actions/checkout@v2
 - name: actions/setup-node@v2
 uses: actions/setup-node@v2 
 with:
 node: 16.14
 # 配置依赖缓存
 - name: yarn cache
 id: yarn-cahce-dir-path
 run: echo "::set-output name=dir::$(yarn cache dir)"
 - uses: actions/cache@v2
 id: yarn-cache
 with: 
 path: ${{ steps.yarn-cahce-dir-path.outputs.dir }}
 key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
 restore-keys: | 
 ${{ runner.os }}-yarn-
 - run: yarn install &amp;&amp; yarn build</code></pre><h2 style="text-align: start;">部署页面到Github Pages</h2><ol style="text-align: start;"><li>首先需要设定一个分支，当做站点的根目录，具体<a href="https://link.segmentfault.com/?enc=VmP76VTiM%2BW%2BWDCp%2BCe%2BoQ%3D%3D.jjGmPHjENUgpLSpQUCjLgHZb4H9WteP7M1b8%2BsmlO6wkRYs7iMMi5X5gx4V3jda8WFrsrW7EPYw%2F0ARqadAHDW2cDfEmRicaQHdoj%2FsrssbgNcIGSjNimD2L2tqfO61ovyZJ7VdXGgATlEh37KyxRHVcdBEN3%2FFYiTDin%2B4GKvw%3D" target="_blank">设置文档</a>，设置完成后会告诉你网站访问地址（ps: 一定要把仓库设置为Public,不然无法进行设置）。</li></ol><img src="https://segmentfault.com/img/bVcX41W" alt="image.png" data-href="" style=""><ol style="text-align: start;"><li>按照文档编辑.yml,增加发布流程</li></ol><pre style="text-align: start; line-height: 1.5;"><code> # 上面的步骤拿过来
 # 新增 deploy
 - name: deploy
 uses: JamesIves/github-pages-deploy-action@v4.2.3
 with:
 branch: gh-pages # 部署的分支名 有一定要独立一个分支，第一次设置为master 好家伙构建完成后，直接把我的项目文件清除了，只剩下打包的文件了。
 folder: build # build后文件目录</code></pre>效果 <img src="https://segmentfault.com/img/bVcX42T" alt="image.png" data-href="" style=""> 到这里基本的目标已经实现了，但是当我看公司内部的流程时，install, build, deploy流程是分开的，这样有利于增加一些校验，lint规则等流程，所以我在思考怎么拆分流程呢，第一次我简单的拆分<pre style="text-align: start; line-height: 1.5;"><code>name: First GitHub Actions Demo
on: 
 push:
 branches:
 - master
 - dev

jobs:
 Build:
 runs-on: ubuntu-latest
 steps:
 uses: actions/checkout@v2
 uses: actions/setup-node@v2 
 with:
 node: 16.14
 - name: yarn cache
 id: yarn-cahce-dir-path
 run: echo "::set-output name=dir::$(yarn cache dir)"
 - uses: actions/cache@v2
 id: yarn-cache
 with: 
 path: ${{ steps.yarn-cahce-dir-path.outputs.dir }}
 key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
 restore-keys: | 
 ${{ runner.os }}-yarn- 
 - run: yarn install
 - run: yarn build
 Deploy:
 - name: depploy
 uses: JamesIves/github-pages-deploy-action@v4.2.3
 width:
 branch: gh-pages
 folder: build
 clean: true
 clean-exclude: |
 special-file.txt
 some/*.txt
 ssh-key: ${{ secrets.PAGE_ACCESS_TOKEN }} </code></pre>我想着这样应该就可以了，一提交代码直接GG,第一是没有Deploy没有等待build完成，第二是两个job之间的文件不能够直接用，又翻了下文档才发现官方给了这两个 actions/upload-artifact@v2 actions/download-artifact@v2 可以在不同job之间公用文件，所以又改了改,build阶段上传打包好的文件，deploy阶段下载打包好的文件进行部署（注意deploy也要使用checkout@v2）。 最终结果<pre style="text-align: start; line-height: 1.5;"><code>name: First GitHub Actions Demo
on: 
 push:
 branches:
 - master
 - dev

jobs:
 Build:
 runs-on: ubuntu-latest
 steps:
 # 步骤名称
 - name: checkout code
 uses: actions/checkout@v2
 - name: actions/setup-node@v2
 uses: actions/setup-node@v2 
 with:
 node-version: '16.14'
 cache: 'yarn'
 cache-dependency-path: '**/yarn.lock'
 # 缓存 有需要可以开启 同时 setu node 也可以进行缓存
 # - name: yarn cache
 # id: yarn-cahce-dir-path
 # run: echo "::set-output name=dir::$(yarn cache dir)"
 # - uses: actions/cache@v2
 # id: yarn-cache
 # with: 
 # path: ${{ steps.yarn-cahce-dir-path.outputs.dir }}
 # key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
 # restore-keys: | 
 # ${{ runner.os }}-yarn- 
 - run: yarn install &amp;&amp; yarn build 
 # 上传打包好的文件，所以下一步可以使用
 - name: upload files 
 uses: actions/upload-artifact@v2
 with: 
 name: build-pages
 path: build
 retention-days: 1
 Deploy: 
 needs: Build # 确保build 阶段完成
 runs-on: ubuntu-latest
 steps:
 - name: checkout code
 uses: actions/checkout@v2
 - name: download build files
 uses: actions/download-artifact@v2
 with:
 name: build-pages
 path: build
 - name: deploy
 uses: JamesIves/github-pages-deploy-action@v4.2.3
 with:
 branch: gh-pages
 folder: build 
 token: "${{ secrets.DEPLOY_TOKEN }}" </code></pre>提交代码，查看运行结果，完成拆分。 <img src="https://segmentfault.com/img/bVcX49V" alt="image.png" data-href="" style=""> 到这里可以愉快的访问你的网站了。<h2 style="text-align: start;">结尾</h2>写作思路是按照当时完成的思路一步一步的去完成这个流程来的，所以有些功能可能还没想到，同时如果流程有什么可以优化的地方，欢迎各位大佬指教。当然，完整的流程还欠缺很多，目前只是先完成简单的打包构建流程，接下来还需要去学习gitlab 的CI、CD,完成后会在水一篇文章。在之后才会去看一些部署项目相关的内容。比如Docker,Nginx等，希望能在空闲之余学会整个流程。加油！

使用 Github Actions 部署react-app 到 Github Pages

在next.config.js文件中配置：<pre><code class="language-javascript">/** @type {import('next').NextConfig} */
const nextConfig = {
 reactStrictMode: false,
 swcMinify: true,
 // rewrites:async ()=&gt;{
 // return [{
 // source: '/000000001000/:slug*',
 // destination: `http://111.20.105.192:6610/000000001000/:slug*`,
 // },]
 // }
}

module.exports = nextConfig
</code></pre>注释部分为代理配置，当匹配到 '/000000001000/’请求路径时会代理到`http://111.20.105.192:6610/000000001000/`地址

nextjs代理配置

GitHub Actions 入门教程

做了两种适配，1200px，800px📢📢📢<img src="http://124.223.185.220:3000/getImage?img=image-1669011016533.png" alt="" data-href="" style=""/><img src="http://124.223.185.220:3000/getImage?img=image-1669011093219.png" alt="" data-href="" style=""/><img src="http://124.223.185.220:3000/getImage?img=image-1669011134210.png" alt="" data-href="" style=""/>

做了css媒体查询，自适应屏幕大小

直接使用JS内置 API （toLocaleString），实现金额的格式化<pre><code class="language-javascript">(999999999).toLocaleString(); // 999,999,999

// 还可以加参数，进行更优雅的做法
const options = {
 style: 'currency',
 currency: 'CNY',
};
(999999).toLocaleString('zh-CN', options); // ¥999,999.00
</code></pre><pre><code class="language-javascript">const options = {
 style: 'percent',
 currency: 'CNY',
};
(1).toLocaleString('zh-CN', options); // 100%
</code></pre><blockquote>toLocaleString 可以接收两个可选参数：locales 和 options，而且这个 api在各大浏览器通用不存在兼容问题并且这个 api 不止存在 Number 的原型上，Array、Object、Date 原型上都有这个 api，并且格式化出来的值可以根据我们传入的参数出现各种结果，关于toLocaleString的参数及用法在MDN（Number.prototype.toLocaleString()）中有详细的用法，感兴趣的小伙伴可以深入了解一下</blockquote>

JS格式化金钱（千分位加逗号、保留两位小数）

React 搭建后台项目

在 <a href="https://vercel.com/" target="_blank">https://vercel.com/</a> 中可以免费部署你的nextjs项目或者个人网站；它是通过关联GitHub仓库实现自动化部署，并且会分配一个免费的二级域名；nice！<img src="http://124.223.185.220:3000/getImage?img=image-1668503171393.png" alt="" data-href="" style=""><img src="http://124.223.185.220:3000/getImage?img=image-1668503396271.png" alt="" data-href="" style=""/>

vercel免费分配二级域名，并部署应用🚀

tag！！！tag！！！tag！！！

增加了tag功能📢

节点再也不担心翻车了📢 <a href="https://www.duyaoss.com/" target="_blank">https://www.duyaoss.com/</a>

【收藏】发现一个机场测速平台👨‍💻

属性好多 好难，api参考 <a href="https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html" target="_blank">https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html</a> demo查看 &nbsp;<a href="/gridauto" target="_blank">grid-demo</a> <img src="http://124.223.185.220:3000/getImage?img=image-1668416165008.png" alt="" data-href="" style=""/>

【CSS】display:grid; 布局

Web Sockets、Web Workers、Service Workers……这些术语您可能已经阅读或无意中听到。也许不是全部，但可能至少其中之一。即使您对前端开发有很好的了解，您也很有可能需要查找它们的含义。或者，也许你像我一样，时不时地把它们混在一起。这些术语看起来和听起来都非常相似，很容易让它们混淆。那么，让我们将它们分解在一起，区分 Web Sockets、Web Workers 和 Service Worker。不是从本质上讲，我们会深入研究并获得每个人的实践经验——更像是下次你需要复习时书签的小<s>帮手</s>。<h3 style="text-align: start;">快速参考</h3>我们将从高级概述开始，以便进行快速比较和对比。 <table style="width: auto;"><tbody><tr><th colspan="1" rowspan="1" width="auto" style="text-align: left;">特征</th><th colspan="1" rowspan="1" width="auto" style="text-align: left;">这是什么</th></tr><tr><td colSpan="1" rowSpan="1" width="auto">Web Socket</td><td colSpan="1" rowSpan="1" width="auto">在浏览器和服务器之间建立开放且持久的双向连接，以通过事件触发的单个连接发送和接收消息。</td></tr><tr><td colSpan="1" rowSpan="1" width="auto">Web Worker</td><td colSpan="1" rowSpan="1" width="auto">允许脚本在单独的线程中在后台运行，以防止脚本在主线程上相互阻塞。</td></tr><tr><td colSpan="1" rowSpan="1" width="auto">Service Worker</td><td colSpan="1" rowSpan="1" width="auto">一种 Web Worker，它创建一个后台服务，该服务充当中间件，用于处理浏览器和服务器之间的网络请求，即使在离线情况下也是如此。</td></tr></tbody></table><h3 style="text-align: start;">网络套接字</h3>Web Socket 是一种双向通信协议。把这想象成你和你的朋友之间正在进行的通话，除非你们中的一个人决定挂断，否则它不会结束。唯一的区别是你是浏览器，你的朋友是服务器。客户端向服务器发送请求，服务器通过处理客户端的请求进行响应，反之亦然。<img src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2022/10/s_946F1219BF833C90E2A9F5AFF16573F7EDD61CBB9CE5FD38969485809A5FD1A8_1666620506067_YpooKVs9-.png?resize=500%2C500&amp;ssl=1" alt="分别代表浏览器和服务器的两名女性的插图。 它们之间的箭头显示了活动连接中的通信流程。" data-href="" style="height: auto !important;">通信基于事件。建立一个<code>WebSocket</code>对象并连接到服务器，服务器之间的消息触发发送和接收它们的事件。这意味着当建立初始连接时，我们有一个客户端-服务器通信，其中一个连接被启动并保持活动状态，直到客户端或服务器选择通过发送一个<code>CloseEvent</code>. 这使得 Web Sockets 非常适合需要在客户端和服务器之间进行连续和直接通信的应用程序。我见过的大多数定义都将聊天应用程序称为常见用例——您键入一条消息，将其发送到服务器，触发一个事件，然后服务器用数据进行响应，而无需一遍又一遍地 ping 服务器。考虑这种情况：您正在出门，并决定打开 Google 地图。您可能已经知道 Google 地图的工作原理，但如果您不知道，它会在您连接到应用程序后自动找到您的位置，并随时随地跟踪它。只要此连接处于活动状态，它就会使用实时数据传输来跟踪您的位置。这是一个 Web Socket，它在浏览器和服务器之间建立持久的双向对话，以使数据保持最新。具有实时比分的体育应用程序也可以通过这种方式使用 Web Sockets。Web Sockets 和 Web Worker（以及我们将看到的 Service Worker）之间的最大区别在于它们可以直接访问 DOM。Web Worker（和 Service Worker）在不同的线程上运行，而 Web Sockets 是主线程的一部分，这使它们能够操作 DOM。有一些工具和服务可以帮助建立和维护 Web Socket 连接，包括：<a href="https://socketcluster.io/" target="">SocketCluster</a>、<a href="https://www.asyncapi.com/" target="">AsyncAPI</a>、<a href="https://github.com/ninenines/cowboy" target="">cowboy</a>、<a href="https://websocketking.com/" target="">WebSocket King</a>、<a href="https://channels.readthedocs.io/en/stable/index.html" target="">Channels</a>和<a href="https://pkg.go.dev/github.com/gorilla/websocket" target="">Gorilla WebSocket</a>。MDN 有一个<a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API#tools" target="">包含其他服务的运行列表</a>。<h4 style="text-align: start;">更多 Web 套接字信息</h4><ul style="text-align: start;"><li><a href="https://web.dev/websockets-basics/" target="">介绍 WebSockets – 将 Sockets 引入 Web</a> (web.dev)</li><li><a href="https://css-tricks.com/thinking-about-power-usage-and-websites/" target="">考虑用电和网站</a>(Chris Coyier)</li><li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API" target="">WebSocket API</a> (MDN 文档)</li><li><a href="https://caniuse.com/websockets" target="">最新的浏览器支持</a>(Caniuse)</li></ul><h3 style="text-align: start;"></h3><h3 style="text-align: start;">Web Workers</h3>考虑一个场景，您需要执行一堆复杂的计算，同时对 DOM 进行更改。JavaScript 是一种单线程应用程序，运行多个脚本可能会破坏您尝试更改的用户界面以及正在执行的复杂计算。这就是 Web Workers 发挥作用的地方。Web Worker 允许脚本在不同线程的后台运行，以防止脚本在主线程上相互阻塞。这使得它们非常适合提高需要密集操作的应用程序的性能，因为这些操作可以在后台在单独的线程上执行，而不会影响用户界面的渲染。但是它们在访问 DOM 方面并不是那么出色，因为与 Web Sockets 不同的是，Web Worker 在其自己的线程中运行在主线程之外。Web Worker 是一个对象，它通过使用<code>Worker</code>对象来执行任务来执行脚本文件。当我们谈论工人时，他们往往属于以下三种类型之一：<ul style="text-align: start;"><li>专用工人：专用工人只能通过调用它的脚本来实现。它仍然执行典型 Web Worker 的任务，例如它的多线程脚本。</li><li>共享工作者：共享工作者与专用工作者相反。它可以被多个脚本访问，并且实际上可以执行 web worker 执行的任何任务，只要它们与 worker 存在于同一个域中。</li><li>Service Worker： Service Worker 充当应用程序、浏览器和服务器之间的网络代理，即使在网络离线时也允许脚本运行。我们将在下一节讨论这个问题。</li></ul><h4 style="text-align: start;">More Web Workers information</h4><ul style="text-align: start;"><li><a href="https://css-tricks.com/off-the-main-thread/" target="">“脱离主线”</a>（克里斯·科伊尔）</li><li><a href="https://css-tricks.com/the-state-of-web-workers-in-2021/" target="">2021 年 Web 工作者的状态</a>(Chris Coyier)</li><li><a href="https://zapier.com/engineering/intro-to-web-workers/" target="">Web Workers 简介</a>(Zapier)</li><li> Web Workers<a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API" target=""> API</a>（MDN 文档）</li><li><a href="https://caniuse.com/webworkers" target="">最新的浏览器支持</a>(Caniuse)</li></ul><h3 style="text-align: start;">Service Workers</h3>作为开发人员，有些事情我们无法控制，其中之一就是用户的网络连接。无论用户连接到什么网络，它就是什么。我们只能尽最大努力优化我们的应用程序，以便它们在碰巧使用的任何连接上都能发挥最佳性能。Service Worker 是我们可以做的事情之一，以逐步提高应用程序的性能。服务工作者位于应用程序、浏览器和服务器之间，提供在后台运行在单独线程上的安全连接，这要归功于——你猜对了——Web Workers。正如我们在上一节中了解到的，Service Worker 是三种类型的 Web Worker 之一。那么，为什么你需要一个service worker坐在你的应用程序和用户的浏览器之间呢？同样，我们无法控制用户的网络连接。假设连接由于某种未知原因而中断。这会破坏浏览器和服务器之间的通信，阻止数据来回传递。服务工作者维护连接，充当能够拦截请求和执行任务的异步代理——即使在网络连接丢失之后也是如此。<img src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2022/10/s_946F1219BF833C90E2A9F5AFF16573F7EDD61CBB9CE5FD38969485809A5FD1A8_1666620745315_fmg2Vf-3x.png?resize=500%2C500&amp;ssl=1" alt="一个标记为 Service Worker 的齿轮图标位于标记为客户端的浏览器图标和标记为服务器的云图标之间。" data-href="" style="height: auto !important;">这是通常被称为<a href="https://css-tricks.com/instant-loading-building-offline-first-progressive-web-apps/" target="">“离线优先”开发</a>的主要驱动力。我们可以将资产存储在本地缓存而不是网络中，在用户离线时提供关键信息，预取内容以便在用户需要时准备好，并提供回退以响应网络错误。它们是完全异步的，但与 Web Socket 不同，它们无法访问 DOM，因为它们在自己的线程上运行。关于 Service Workers 要了解的另一件大事是它们拦截来自您的应用程序的每一个请求和响应。因此，它们具有一些安全隐患，最值得注意的是它们遵循同源策略。因此，这意味着没有从 CDN 或第三方服务运行服务工作者。它们还需要安全的 HTTPS 连接，这意味着您需要 SSL 证书才能运行它们。<h4 style="text-align: start;">更多服务工作者信息</h4><ul style="text-align: start;"><li><a href="https://css-tricks.com/add-a-service-worker-to-your-site/" target="">将 Service Worker 添加到您的站点</a>(Chris Ferdinadi)</li><li><a href="https://developer.chrome.com/docs/workbox/service-worker-overview/" target="">Service Worker 概述</a>（Chrome 开发人员）</li><li><a href="https://philipwalton.com/articles/smaller-html-payloads-with-service-workers/" target="">使用 Service Worker 的更小的 HTML 有效负载</a>(Philip Walton)</li><li><a href="https://serviceworke.rs/" target="">服务工作者手册</a>(Mozilla)</li><li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API" target="">服务工作者 API</a>（MDN 文档）</li><li><a href="https://caniuse.com/serviceworkers" target="">最新的浏览器支持</a>(Caniuse)</li></ul><h3 style="text-align: start;">包起来</h3>这是对 Web Sockets、Web Worker 和 Service Worker 之间差异（和相似之处）的超高级解释。同样，术语和概念非常相似，可以将它们混为一谈，但希望这能让您更好地了解如何区分它们。我们从一个快速参考表开始。这是同样的事情，但稍微扩大以进行更深入的比较。 <table style="width: auto;"><tbody><tr><th colspan="1" rowspan="1" width="auto" style="text-align: left;">特征</th><th colspan="1" rowspan="1" width="auto" style="text-align: left;">这是什么</th><th colspan="1" rowspan="1" width="auto" style="text-align: left;">多线程？</th><th colspan="1" rowspan="1" width="auto" style="text-align: left;">HTTPS？</th><th colspan="1" rowspan="1" width="auto" style="text-align: left;">DOM 访问？</th></tr><tr><td colSpan="1" rowSpan="1" width="auto">网络套接字</td><td colSpan="1" rowSpan="1" width="auto">在浏览器和服务器之间建立开放且持久的双向连接，以通过事件触发的单个连接发送和接收消息。</td><td colSpan="1" rowSpan="1" width="auto">在主线程上运行</td><td colSpan="1" rowSpan="1" width="auto">不需要</td><td colSpan="1" rowSpan="1" width="auto">是的</td></tr><tr><td colSpan="1" rowSpan="1" width="auto">Web Worker</td><td colSpan="1" rowSpan="1" width="auto">允许脚本在单独的线程中在后台运行，以防止脚本在主线程上相互阻塞。</td><td colSpan="1" rowSpan="1" width="auto">在单独的线程上运行</td><td colSpan="1" rowSpan="1" width="auto">必需的</td><td colSpan="1" rowSpan="1" width="auto">不</td></tr><tr><td colSpan="1" rowSpan="1" width="auto">Service Worker</td><td colSpan="1" rowSpan="1" width="auto">一种 Web Worker，它创建一个后台服务，该服务充当中间件，用于处理浏览器和服务器之间的网络请求，即使在离线情况下也是如此。</td><td colSpan="1" rowSpan="1" width="auto">在单独的线程上运行</td><td colSpan="1" rowSpan="1" width="auto">必需的</td><td colSpan="1" rowSpan="1" width="auto">不</td></tr></tbody></table>

Web Sockets、Web Worker 和 Service Worker 之间的区别

<img src="http://124.223.185.220:3000/getImage?img=35d92b9406f3a90b65fe0035725885b6-1668229110059.jpeg" alt="" data-href="" style="width: 407.00px;height: 407.00px;">勒好啊

乱搞

纯css实现 <a href="/cubeshover" target="_blank">跳转查看</a> <a href="https://github.com/Mr-majifu/Cubes-Hover-Effects" target="_blank">GitHub</a><img src="http://124.223.185.220:3000/getImage?img=image-1668148205530.png" alt="" data-href="" style="">

【CSS】渐变魔方

🎈 <a href="/navbarcss" target="_blank">跳转查看</a> &nbsp; <a href="https://github.com/Mr-majifu/Magic-Menu-Indicator" target="_blank">Github</a><img src="http://124.223.185.220:3000/getImage?img=image-1668136681098.png" alt="" data-href="" style="">

【CSS】抄了一个好看的navBar

<h2 style="text-align: start;">:root</h2> &nbsp; &nbsp; &nbsp; &nbsp;:root是一个伪类，表示文档根元素，所有主流浏览器均支持 :root 选择器，除了 IE8 及更早的版本。在:root中声明相当于全局属性，只要当前页面引用了:root segment所在文件，都可以使用var()来引用。<pre><code class="language-css">:root {
 --blue: #007bff;
 --indigo: #6610f2;
 --purple: #6f42c1;
 --pink: #e83e8c;
 --red: #dc3545;
 --orange: #fd7e14;
 --yellow: #ffc107;
 --green: #28a745;
 --teal: #20c997;
 --cyan: #17a2b8;
 --white: #fff;
 --gray: #6c757d;
 --gray-dark: #343a40;
 --primary: #007bff;
 --secondary: #6c757d;
 --success: #28a745;
 --info: #17a2b8;
 --warning: #ffc107;
 --danger: #dc3545;
 --light: #f8f9fa;
 --dark: #343a40;
 --breakpoint-xs: 0;
 --breakpoint-sm: 576px;
 --breakpoint-md: 768px;
 --breakpoint-lg: 992px;
 --breakpoint-xl: 1200px;
 --breakpoint-xxl: 1600px;
 --font-family-sans-serif: -apple-system, BlinkMacSystemFont;
 --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas;
}</code></pre><h2>var()</h2> &nbsp; &nbsp; &nbsp; &nbsp;var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。（这样做通常会产生无效的语法或者一个没有关联到变量的值。）<pre><code class="language-css">body {
 background-color: var(--blue); /* 设置背景颜色为蓝色 */
}</code></pre>

【CSS】CSS 中的 :root

🚀<img src="http://124.223.185.220:3000/getImage?img=image-1667976257980.png" alt="" data-href="" style=""/>

Gitee Go 实现远程自动部署

<img src="http://124.223.185.220:3000/getImage?img=xenoblade Homura-1667886321361.jpg" alt="" data-href="" style=""/> &nbsp; 继续调节获取时间语句位置，测试通过！

【壁纸】测试图片上传bug，最终版

<img src="http://124.223.185.220:3000/getImage?img=iTab-e7j33o-1667805206433.jpg" alt="" data-href="" style=""/> &nbsp; &nbsp;规划一下学习路线：<ul><li>TS慢慢学起来</li></ul><ul><li>antd Pro 熟悉起来</li><li>react native 可以学习下</li></ul> &nbsp; &nbsp;

【计划】

【壁纸】2022/11/07

原项目，获取日期创建文件夹写在了全局，导致项目启动日期只获取一次，故过一天会出现图片上传成功，获取图片失败的bug。解决：将获取日期写在接口处理函数内，每次创建文件夹都是最新的日期！<img src="http://124.223.185.220:3000/getImage?img=å¾®ä¿¡å¾ç_20221014151720-1667371174132.jpg" alt="" data-href="" style=""/>

【测试】pm2 图片上传功能修复完成📢

👨‍💻<img src="http://124.223.185.220:3000/getImage?img=å¾®ä¿¡å¾ç_20221025105908-1667369141159.jpg" alt="" data-href="" style=""/>

【屌图】程序员能有什么压力

<h2>对象转换为 JSON 字符串，再转换为对象</h2><pre><code class="language-javascript">const obj = { a: 1, b: 2, c: { d: 4 } };
const copy = JSON.parse(JSON.stringify(obj));
copy.c.d = 5;
console.log(obj); // { a: 1, b: 2, c: { d: 4 } }
</code></pre>JSON.parse(JSON.stringify(obj))可比上面 deepClone 函数简洁多了，但不是好的实践，因为它有以下缺点：<ul><li style="text-align: left;">会忽略 undefined</li><li style="text-align: left;">会忽略 symbol</li><li style="text-align: left;">不能序列化函数</li><li style="text-align: left;">不能解决循环引用的对象</li><li style="text-align: left;">如果 data 里有NaN、Infinity和-Infinity，则序列化的结果会变成null</li><li style="text-align: left;">致命缺陷，性能差</li></ul><h2 style="text-align: left;">structuredClone</h2>structuredClone&nbsp;是 HTML5 一个新的 API，它可以实现深拷贝。<pre><code >const obj = { a: 1, b: 2, c: { d: 4 } };
const copy = structuredClone(obj);
copy.c.d = 5;
console.log(obj); // { a: 1, b: 2, c: { d: 4 } }</code></pre>该方法还支持把原始值中的 transferable objects (en-US) (可转移对象) 转移到新对象，而不是把属性引用拷贝过去。 可转移对象与原始对象分离并附加到新对象;它们不可以在原始对象中访问被访问到。目前要考虑浏览器以及nodejs版本兼容性问题

【技术】structuredClone深拷贝

<h2>FileReader 方法</h2>Load the image as blob via <a href="https://developer.mozilla.org/de/docs/Web/API/XMLHttpRequest" target="">XMLHttpRequest</a> and use the <a href="https://developer.mozilla.org/de/docs/Web/API/FileReader" target="">FileReader API</a> (<a href="https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL" target="">readAsDataURL()</a>) to convert it to a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs" target="">dataURL</a>:通过 XMLHttpRequest 以blob格式请求图像，图像数据返回成功之后， 使用 <a href="https://developer.mozilla.org/de/docs/Web/API/FileReader" target="">FileReader API</a> (<a href="https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL" target="">readAsDataURL()</a>) 将其转换为 dataURL：<pre><code class="language-javascript">function toDataURL(url, callback) {
 var xhr = new XMLHttpRequest();
 xhr.onload = function() {
 var reader = new FileReader();
 reader.onloadend = function() {
 callback(reader.result);
 }
 reader.readAsDataURL(xhr.response);
 };
 xhr.open('GET', url);
 xhr.responseType = 'blob';
 xhr.send();
}

toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0', function(dataUrl) {
 console.log('RESULT:', dataUrl)
})
</code></pre>以下代码发送请求部分也可以使用 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch" target="">fetch API</a> 接口实现：<pre><code class="language-javascript">const toDataURL = url =&gt; fetch(url)
 .then(response =&gt; response.blob())
 .then(blob =&gt; new Promise((resolve, reject) =&gt; {
 const reader = new FileReader()
 reader.onloadend = () =&gt; resolve(reader.result)
 reader.onerror = reject
 reader.readAsDataURL(blob)
 }))


toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0')
 .then(dataUrl =&gt; {
 console.log('RESULT:', dataUrl)
 })
</code></pre>这种方式的好处是支持的格式比较多，缺点就是 FileReader API 的兼容性差一点，有部分手机浏览器不支持。<h2>Canvas 方法</h2>构建一个Image对象，用以加载图片数据。然后通过Canvas的drawImage方法将图片绘制到Canvas上，最后通过Canvas的toDataURL方法将图片转换为base64字符串。<pre><code class="language-javascript">function toDataURL(src, callback, outputFormat) {
 var img = new Image();
 img.crossOrigin = 'Anonymous';
 img.onload = function() {
 var canvas = document.createElement('CANVAS');
 var ctx = canvas.getContext('2d');
 var dataURL;
 canvas.height = this.naturalHeight;
 canvas.width = this.naturalWidth;
 ctx.drawImage(this, 0, 0);
 dataURL = canvas.toDataURL(outputFormat);
 callback(dataURL);
 };
 img.src = src;
 if (img.complete || img.complete === undefined) {
 img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
 img.src = src;
 }
}

toDataURL(
 'https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0',
 function(dataUrl) {
 console.log('RESULT:', dataUrl)
 }
)
</code></pre>这种方式的好处是兼容性好，缺点是只支持图片格式。<h2>本地图片转换</h2>如果是本地图片，可以使用 <a href="https://developer.mozilla.org/de/docs/Web/API/FileReader" target="">FileReader API</a> 的 <a href="https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL" target="">readAsDataURL()</a> 方法将其转换为 dataURL。当然，需要有一个文件上传按钮。<pre><code class="language-javascript">function encodeImageFileAsURL(element) {
 var file = element.files[0];
 var reader = new FileReader();
 reader.onloadend = function() {
 console.log('RESULT', reader.result)
 }
 reader.readAsDataURL(file);
}

&lt;input type="file" onchange="encodeImageFileAsURL(this)" /&gt;</code></pre>参考资料<ul><li style="text-align: left;">How can I convert an image into Base64 string using JavaScript? - Stack Overflow</li></ul>

JavaScript将图片转换成Base64字符串的几种方法

legend:{ data:['rain','sunny'] selected:{ 'rain':false, 'sunny':true, }} legend可以数组（多个）/对象（一个）selected控制是否显示rain的条形数据

【Echarts】legend不能formatter标签和转义字符（老坑人了）

<blockquote>Turbopack 建立在新的增量架构上，以提供最快的开发体验。在大型应用上，它的更新速度比 Vite 快 10 倍，比Webpack 快 700 倍。在更大的应用上，通常会比 Vite 快 20 倍。</blockquote> 10 月 25 日，Next.js 13 正式发布。同时，Vercel 还推出并开源了下一代打包工具：Turbopack。Turbopack 是针对 JavaScript 和 TypeScript 优化的增量打包工具，由 Webpack 的创建者 Tobias Koppers 和 Next.js 团队使用 Rust 编写。Turbopack 的推出吸引了众多开发者的关注，下面就来看看 Turbopack 都有哪些优势！<img src="https://www4.bing.com//th?id=OHR.BridgeofSighs_ZH-CN5414607871_1920x1080.jpg&amp;rf=LaDigue_1920x1080.jpg&amp;pid=hp&amp;w=240&amp;h=135" alt="https://www4.bing.com//th?id=OHR.BridgeofSighs_ZH-CN5414607871_1920x1080.jpg&amp;rf=LaDigue_1920x1080.jpg&amp;pid=hp&amp;w=240&amp;h=135" data-href="https://www4.bing.com//th?id=OHR.BridgeofSighs_ZH-CN5414607871_1920x1080.jpg&amp;rf=LaDigue_1920x1080.jpg&amp;pid=hp&amp;w=240&amp;h=135" style=""><h3 style="text-align: start;">Turbopack 的速度有多快？</h3>Turbopack 建立在新的增量架构上，以提供最快的开发体验。在大型应用上，它的更新速度比 Vite 快 10 倍，比Webpack 快 700 倍。在更大的应用上，通常会比 Vite 快 20 倍。由于 Turbopack 只打包开发所需的最少资源，因此启动时间非常快。在具有 3000 个模块的应用上，Turbopack 需要 1.8 秒即可启动，而 Vite 则需要 11.4 秒： <h3 style="text-align: start;">Turbopack 为什么这么快？</h3>Turbopack 性能的秘诀有两个：高度优化的机器代码和低层级增量计算引擎，可以缓存到单个函数的级别。它的架构吸取了 Turborepo 和 Google 的 Bazel 等工具的经验教训，它们都专注于使用缓存来避免重复执行相同的工作。<h4 style="text-align: start;">Turbo 引擎工作原理</h4>Turbopack 之所以如此之快，是因为它建立在一个可重用的 Rust 库之上，该库支持增量计算，称为 Turbo 引擎。以下是它的工作原理。在 Turbopack 驱动的程序中，可以将某些函数标记为“to be remembered”。当这些函数被调用时，Turbo 引擎会记住它们被调用的内容，以及它们返回的内容。然后它将其保存在内存缓存中。下面是一个简化的示例：我们首先在 api.ts​ 和 sdk.ts​ 这两个文件中调用 readFile。然后打包这些文件，将它们拼接在一起，最后得到 fullBundle。所有这些函数调用的结果都保存在缓存中以备后用。 由于 sdk.ts​ 的结果发生了变化，就需要再次打包，然后需要再次拼接。重要的是，api.ts​ 并没有改变。只需从缓存中读取它的结果并将其传递给 concat。因此，这样就通过不读取并重新打包来节省了时间。Turbo 引擎当前将其缓存存储在内存中。这意味着缓存将与运行它的进程一样长，这对于 Dev server 来说效果很好。将来，计划将这个缓存持久化——要么保存到文件系统中，要么保存到像 Turborepo 这样的远程缓存中。这意味着 Turbopack 可以记住跨运行和机器完成的工作。这种方法使 Turbopack 在计算应用的增量更新方面非常快速，优化了 Turbopack 以处理开发中的更新，这意味着 Dev server 将始终快速响应更改。<h4 style="text-align: start;">按要求编译</h4>Turbo 引擎有助于在 Dev server 上提供极快的更新，但还有另一个重要指标需要考虑——启动时间。Dev server 开始运行的速度越快，开始工作的速度就越快。有两种方法可以使流程更快：工作更快或做工作更少。为了启动 Dev server，减少工作量的方法就是只编译启动所需的代码。（1）页面级编译2-3 年前的 Next.js 版本在显示 Dev server 之前会编译整个应用。从 Next.js 11 开始就只编译请求的页面上的代码。这样会更好，但并不完美。当导航到 /users 时，将打包所有客户端和服务端模块、动态导入的模块以及引用的 CSS 和图片。这意味着如果页面的很大一部分隐藏在视图之外，或者隐藏在选项卡后面，仍然会编译它。（2）请求级编译Turbopack 足够智能，可以只编译请求的代码。这意味着如果浏览器请求 HTML，就只会编译 HTML，而不会编译 HTML 引用的任何内容。如果浏览器需要 CSS，将只编译 CSS，而不编译其引用的图片，Turbopack 甚至知道不编译 source map，除非 Chrome DevTools 是打开的。通过请求级编译，减少了请求的数量，性能改进显着。<h3 style="text-align: start;">为什么基于 Rust 开发？</h3>Turbopack是 基于 Rust 开发的，每当 Next.js 团队将基于 JavaScript 的工具转移到基于 Rust 的工具时，都会看到巨大的改进。Next.js 替换了 JavaScript 编译器 Babel，使编译速度提高达 17 倍，替换了 Terser，使压缩速度提高了 6 倍，同时还减少了加载时间和宽带使用。<h3 style="text-align: start;">为什么选择 Turbopack？</h3>创建 Turbopack 就是为了提高 Next.js 的速度，希望它能够取代 Webpack，成为下一代 Web 打包工具。那为什么不选择新一代打包工具 esbuild 和 swc，而是选择创建自己的打包工具呢？<h4 style="text-align: start;">增量计算</h4>通常，有两种方法可以加快进程：减少工作量或并行工作。想要打造最快的打包工具，就要用力拉动这两个杠杆。因此决定为分布式和增量行为创建一个可重用的 Turbo 构建引擎。Turbo 引擎就像函数调用的调度程序一样工作，允许在所有可用内核上并行调用函数。Turbo 引擎还会缓存它调度的所有函数的结果，这意味着它永远不需要执行两次相同的工作。简而言之，它会以最大速度做最少的工作。其他工具对“做更少的工作”采取不同的方式。比如，Vite 通过在开发模式下使用原生 ESM 将工作量降至最低。在底层，Vite 将 esbuild 用于许多任务。esbuild 是一个非常快的打包器，它不会强迫我们使用原生 ESM。但出于几个原因，决定不采用 esbuild：esbuild 的代码针对一项任务进行了超优化 - 快速打包，因此没有 HMR（热更新）；esbuild 是一个非常快的打包工具，但它并没有做太多的缓存。这意味着会做很多重复的工作；而具有增量计算的 Rust 驱动的打包器在更大的规模上可以比 esbuild 更好地执行。<h4 style="text-align: start;">惰性打包</h4>Next.js 的早期版本试图在开发模式下打包整个 Web 应用，这并不是最优的。Next.js 的现代版本仅打包 Dev server 请求的页面。例如，如果转到localhost:3000​，它将仅打包 pages/index.jsx，以及它导入的模块。这种更“惰性”的方法是快速 Dev server 的关键。而 esbuild 没有“惰性”打包的概念——它是全有或全无的。Turbopack 的开发模式会根据收到的请求构建应用导入和导出的最小图，并且只打包必要的最少代码。此策略使 Turbopack 在首次启动 Dev server 时速度极快。只需计算渲染页面所需的代码，然后在单个块中将其发送到浏览器。在大规模应用中，这最终比原生 ESM 快得多。这就是构建 Turbopack 的原因。<h3 style="text-align: start;">Turbopack 的功能</h3>构建 Web 应用的实践非常多样化。仅在 CSS 中，就有 SCSS、Less、CSS Module、PostCSS等。React、Vue 和 Svelte 等框架需要自定义设置。在构建打包工具时，我们希望它能开箱即用，无需配置，可以通过插件获得一些功能。目前，Turbopack 仍处于 alpha 阶段，在当前状态下，Turbopack 还不能配置，所以插件也还不可用。下面来看一下 Turbopack 默认配置中哪些功能是开箱即用的以及未来将通过插件配置的功能：<ul style="text-align: start;"><li>JavaScript：支持所有 ESNext 功能、Browserslist 和顶层 await；</li><li>TypeScript：开箱即用地支持 TypeScript，包括解析路径和baseUrl；</li><li>Imports：支持 require、import、动态导入等；</li><li>Dev Server：优化的 Dev Server 支持热更新 (HMR) 和快速刷新；</li><li>CSS：支持全局 CSS、CSS Module、postcss-nested 和 @import；</li><li>静态资源：支持 /public 目录、JSON 导入和通过 ESM 导入资源；</li><li>环境变量：通过 .env、.env.local 等支持环境变量。</li></ul><h3 style="text-align: start;">Turbopack vs Vite vs Webpack</h3><h4 style="text-align: start;">Turbopack vs Vite</h4>Turbopack 在以下两个关键指标上的表现优于 Vite。（1）Dev server 启动时间Turbopack 的 Dev server 启动速度比 Vite 快得多。在 1000 个模块的应用中，Vite 需要 4.8 秒才能启动。Turbopack 启动仅需 0.9 秒，快了5.5倍。在大型应用中，这种差异将保持一致。在 30000 个模块的应用中， Turbopack 的启动速度比 Vite 快了 5.4 倍。（2）代码更新当文件更改时，它需要将更改呈现给浏览器。它做到的越快，反馈循环就越紧密，发布的速度就越快。在 1000 个模块的应用中，Turbopack 对文件更改的速度比 Vite 快 5.8 倍。<h4 style="text-align: start;">Turbopack vs Webpack</h4>Turbopack 的增量架构在以下两个关键指标上超过了 Webpack 的速度。（1）Dev server 启动时间Turbopack 的 Dev server 启动速度比 Webpack 快得多。Next.js 12 底层使用了 Webpack，可以在 3.4 秒内在 1000 个模块的应用上启动 build server。Turbopack 的启动速度快了 0.9 秒 - 3.9倍。（2）代码更新在 Dev server 上执行的最常见操作就是更改文件。当文件更改时，它需要将更改呈现给浏览器。它做到的越快，反馈循环就越紧密，发布的速度就越快。在 1000 个模块的应用中，Turbopack 对文件更改的反应速度比 Webpack 快 8.9 倍：<h3 style="text-align: start;">Turbopack 的未来</h3>到目前为止，Turbopack 可以在 Next.js v13 中使用。未来将发布独立的 CLI、插件 API，并支持其他框架，如 Svelte 和 Vue。Turbopack 将用于 Next.js 13 Dev server。它将为闪电般快速的 HMR 提供动力，并将原生支持 React 服务端组件，以及 TypeScript、JSX、CSS 等。Webpack 用户还可以期待使用 Turbopack 进入基于 Rust 的未来的增量迁移路径。期待在 Webpack 的创建者 Tobias Koppers 的带领下，Turbopack 成为 Web 的下一代打包工具。

【技术】比Webpack快700倍的Turbopack，到底快在哪？

<h2>背景</h2><blockquote>在当今Webpack横行的时代，Webpack的影响力不可谓之不大。对于一个主流Web项目的开发而言，大多数时候我们都会采用现有的脚手架作为项目开发，打包工具如：Vue-cli、create-react-app，而他们都基于Webpack。但是，在不断的使用和日常项目的迭代中，我们慢慢会走入一个窘境，就会出现我们稍微改动一行代码我们就需要等待十几秒甚至是数十秒的情况，这对于我们日益增长的业务开发来说是十分不友好的。 深入Webpack打包原理我们可以清晰的知道他的编译过程是静态的，也就是说他会把所有可能用到的代码全部进行打包构建，会借助胶水代码用来组装各模块，这样打包出来的代码是十分庞大的，很多时候其实我们在开发过程中并不需要全部代码的功能，而是一小部分，这个时候大量的构建时间都是多余的，我们需要一个能够真正意义上实现懒加载的开发工具。</blockquote><h2>Vite是什么？</h2><h3>定义</h3><blockquote>Vite（轻量，轻快）vite是一个基于vue3单文件组件的非打包开发服务器。它做到了本地快速开发启动，实现按需编译，不再等待整个应用编译完成。 面向现代化浏览器，基于原生模块系统 ES moudle 的开发服务器，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。 浏览器端使用 export、import 的方式导入和导出模块，在 script 标签里设置 type="module"，浏览器会识别所有添加了type='module'的script标签，对于该标签中的import关键字，浏览器会发起http请求获取模块内容。</blockquote><blockquote>它主要具有以下特点： 快速的冷启动 即时的模块热更新 真正的按需编译</blockquote><h3>基本架构</h3>启动项目时，则是启动一个koa服务器，服务器拦截浏览器的es module的请求，服务器直接将 ESM 模块内容处理后，通过 path 找到目录下对应的文件做一定的处理最终以 ES Modules 格式返回给客户端。接着，现代浏览器通过解析 script module，对每一个 import 到的模块进行 HTTP 请求，服务器继续对这些 HTTP 请求进行处理并响应。（热更新） 图中的目标项目即我们开发时的项目，vite服务在解析模块路径以及读取文件内容时需要访问目标项目中的模块内容或者配置文件等。 <h2>Vite的原理介绍</h2><ul><li>使用vite后项目分析</li><li></li></ul><pre><code class="language- language-jsx">它的核心在于使用了es的语法，我们可以看到index.html文件，和以前不一样的地方在于，它使用了:
 &lt;script type="module" src="/src/main.js"&gt;&lt;/script&gt;
// 这样引入的话就表示它是一个模块，那这个script里面就可以使用import
//默认引入的是src下的main.js




<img src="//upload-images.jianshu.io/upload_images/8496278-969c945a7160f9f8.png?imageMogr2/auto-orient/strip|imageView2/2/w/909/format/webp" alt="" data-href="" style=""/>
image.png</code></pre>从其他请求中我们也可以看出每一个.vue文件都被拆分成了多个请求，并通过type来标识是template还是style。 <img src="//upload-images.jianshu.io/upload_images/8496278-5b47c8ada339e630.png?imageMogr2/auto-orient/strip|imageView2/2/w/904/format/webp" alt="" data-href="" style=""/>image.png<ul><li>结论</li></ul><blockquote>vite在这里做了两件事，第一是修改了模块请求路径，第二就是将.vue文件进行解析拆分。（只是本文会进行详细讲解的有关于Vite实现的部分，而不是说Vite只干了这两件事 Vite的功能还是十分强大的）</blockquote><h2>深入源码讲原理</h2><h4>1、创建自己的vite工具 my-vite</h4><blockquote>项目目录概述： my-vite -bin 。www.js -node_modules -plugins -index.js -package.json</blockquote>在项目根目录创建bin目录，并在bin目录下创建一个<a href="https://links.jianshu.com/go?to=http%3A%2F%2Fwww.js" target="_blank">www.js</a>文件，文件内容如下： <pre><code class="language- language-jsx">! /usr/bin/env node
// 执行的入口
require('../index');
</code></pre><h4>2、创建服务</h4>在创建<a href="https://links.jianshu.com/go?to=http%3A%2F%2Fwww.js" target="_blank">www.js</a>文件中引入了index.js文件，主要是使用了koa启动了一个简单服务以及实现vite的功能 <pre><code class="language- language-tsx">const Koa = require('koa')
const { moduleRewritePlugin } = require('./plugins/serverPluginModuleRewrite')
const serveStaticPlugin = require('./plugins/serverPluginServeStatic')
const { moduleResolvePlugin } = require('./plugins/serverPluginModuleResolve')
const { vuePlugin } = require('./plugins/serverPluginVue')

function createServer() {
 let app = new Koa();
 const context = { //直接创建一个上下文，来给不同的插件共享功能
 app,
 root: process.cwd() 
 }
 const resolvePlugin = [
 moduleRewritePlugin, //2.重写我们的请求路径, 重写后浏览器会再次发送请求
 moduleResolvePlugin,//解析模块路径,服务端来解析模块真实位置
 vuePlugin, // 解析.vue文件
 serveStaticPlugin //1.静态服务插件,处理所需要处理的静态文件 
 ]
 resolvePlugin.forEach(plugin =&gt; plugin(context))
 return app;
}
createServer().listen(4000, () =&gt; {
 console.log('vite start 4000')
})

</code></pre><h4>3、静态服务插件</h4>serverPluginServeStatic.js文件:使用koa-static中间件来托管静态资源，同时我们需要拿到koa实例（app），其次需要获取到目标项目的根目录路径（root），将目标项目进行整体托管，同时对于目标项目的 public目录也进行托管，这样，我们需要处理的静态文件基本完成了。 <pre><code class="language- language-jsx">const static = require('koa-static')
const path = require('path')

function serveStaticPlugin({ app, root }) {

 app.use(static(root)) // root指的是根目录 访问根目录下的index.html
 app.use(static(path.resolve(root, 'public'))) //可以直接http://localhost:4000/文件名，访问public下的文件,比如public文件下有aa.txt,则直接访问http://localhost:4000/aa.txt
}

module.exports = serveStaticPlugin
</code></pre><h4>4、重写模块路径插件</h4>为什么要重写模块路径呢？ 这是因为我们在使用import方式导入模块的时候，浏览器只能识别./、../、/这种开头的路径，对于直接使用模块名比如：import vue from 'vue'，浏览器就会报错，因为它无法识别这种路径，这就是我们需要进行处理的地方了。 <img src="//upload-images.jianshu.io/upload_images/8496278-cff68afc3687df15.png?imageMogr2/auto-orient/strip|imageView2/2/w/1003/format/webp" alt="" data-href="" style=""/>image.png serverPluginModuleRewrite.js文件： <img src="//upload-images.jianshu.io/upload_images/8496278-b8f5c37f492f3653.png?imageMogr2/auto-orient/strip|imageView2/2/w/1125/format/webp" alt="" data-href="" style=""/>image.png <img src="//upload-images.jianshu.io/upload_images/8496278-3ff52d2268e84a58.png?imageMogr2/auto-orient/strip|imageView2/2/w/807/format/webp" alt="" data-href="" style=""/>image.png <h4>5、解析模块路径插件</h4>在处理完所有的模块路径之后，我们就需要在服务端来解析模块真实位置。 <pre><code class="language- language-jsx">const reg = /^\/@modules\//
const fs = require('fs').promises
const path = require('path')
 
function moduleResolvePlugin({ app, root }) {
 app.use(async(ctx, next) =&gt; {
 // 如果没有匹配到 /@modules就往下执行即可
 if (!reg.test(ctx.path)) {
 return next();
 }
 const id = ctx.path.replace(reg, '');
 //console.log("id--&gt;", id) //vue
 let mapping = {
 vue: path.resolve(root, 'node_modules', '@vue/runtime-dom/dist/runtime-dom.esm-browser.js')
 }
 //如果是第三方模块，则可以根据package.json进行查找
 const content = await fs.readFile(mapping[id], 'utf8')
 ctx.type = 'js' //返回的文件为js
 ctx.body = content
 })
}

exports.moduleResolvePlugin = moduleResolvePlugin
</code></pre><h4>6、解析.vue文件</h4>当 Vite 遇到一个 .vue 后缀的文件时。由于 .vue 模板文件的特殊性，它被拆分成 template , css ,script 模块三个模块进行分别处理。最后会对 script ,template, css 发送多个请求获取。 <img src="//upload-images.jianshu.io/upload_images/8496278-3ed884d6ce6c3225.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp" alt="" data-href="" style=""/>image.png<h4>7、总结</h4><blockquote>在 koa 中间件里获取请求 body 通过 es-module-lexer 解析资源 ast 拿到 import 的内容 判断 import 的资源是否是 npm 模块 返回处理后的资源路径："vue" =&gt; "/@modules/vue" 将处理的template,script,style等所需的依赖以http请求的形式，通过query参数形式区分并加载SFC文件各个模块内容。</blockquote><h2>Webpack & Vite 对比</h2><ul><li> </li></ul><blockquote>1.当我们对比使用 vue-cli-service serve 的时候，会有明显感觉。因为 Webpack Dev Server 在启动时，需要先 build—遍，而 build 的过程是需要耗费很多时间的。 2.而 Vite 则完全不同，当我们执行 Vite serve 时（npm run dev），内部直接启动了 Web Server，并不会先编译所有的代码文件。那仅仅是启动 Web Server，那么及时请求的编译呢？关于支持 JSX， TSX，Typescript 编译到原生 JS —— Vite 引入了EsBuild，是使用 Go 写的，直接编译为 Native 代码，性能要比 TSC 好二三十倍， 当然也会用上缓存。</blockquote><ul><li>即时的热模块更新</li></ul><blockquote>1.热更新的时候，Vite 只需要立即编译当前所修改的文件即可，所以 响应速度非常快。 2.而 Webpack 修改某个文件过后，会自动以这个文件为入口重写 build—次，所有的涉及到的依赖也都会被加载一遍，所以反应速度会慢很多。</blockquote><ul><li>真正的按需编译</li></ul><blockquote>1.Webpack 这类工具的做法是将所有模块提前编译、打包进 bundle 里，换句话说，不管模块是否会被执行，都要被编译和打包到 bundle 里。随着项目越来越大打包后的 bundle 也越来越大，打包的速度自然也就越来越慢。 2.Vite 利用现代浏览器原生支持 ESM 特性，省略了对模块的打包。对于需要编译的文件，Vite 采用的是另外一种模式：即时编译。也就是说，只有具体去请求某个文件时才会编译这个文件。所以，这种「即时编译」的好处主要体现在：按需编译。 </blockquote>作者：江南之城 链接：https://www.jianshu.com/p/0d00a49adb20 来源：简书

【技术】Vite的原理介绍及应用

使用 JavaScript 阻止屏幕进入睡眠状态。最近在 H5 端有需要保持手机屏幕常亮的需求，辗转之下，发现了一个早在 chrome 85 中就已经支持的 Web API，不过，截止到今天发文时，Safari 仍不支持，尽管如此，在安卓端我们还是能调用这个 API 来节省设备电池电量（相对于 NoSleep.js 来说），ios 端使用 polyfill 的方式，在将来 Safari 支持该 API 后移除即可。Wake Lock 可防止屏幕关闭、变暗或锁定，仅适用于活动的选项卡/窗口，这可以防止后台选项卡使您的设备保持唤醒状态，也提供了函数以随时通过代码手动释放。调用 Wake Lock 之前，我们首先需要检查当前浏览器中是否存在该功能。我们可以使用以下简单函数来做到这一点。<pre><code class="language-javascript">const canWakeLock = () =&gt; 'wakeLock' in navigator;</code></pre><h2 style="text-align: start;">请求唤醒锁</h2>下面的示例演示如何请求 WakeLockSentinel 对象。<code>WakeLock.request</code> 方法是基于 Promise 的，因此我们可以创建一个异步函数。<pre><code class="language-javascript">let wakeLock = null;const requestWakeLock = async ()=&gt;{
 try {
 wakeLock = await navigator.wakeLock.request('screen');
 console.log('Wake Lock is active!');
 } catch (err) {
 console.log(`${err.name}, ${err.message}`);
 }

}

requestWakeLock()</code></pre><h2 style="text-align: start;">释放唤醒锁</h2>下面的示例演示如何释放以前获取的唤醒锁。<pre><code class="language-javascript">wakeLock.release().then(() =&gt; wakeLock = null);</code></pre><h2 style="text-align: start;">侦听唤醒锁释放</h2>如因任何原因（例如离开活动窗口/选项卡）而释放唤醒锁，将出触发 release 监听函数。 <pre><code class="language-javascript">复制wakeLock.addEventListener('release', () =&gt; {
 console.log('Wake Lock has been released');
});</code></pre><h2 style="text-align: start;">重新获取唤醒锁</h2>以下代码在文档的可见性发生更改并释放唤醒锁时重新获取唤醒锁。 <pre><code class="language-javascript">复制document.addEventListener('visibilitychange', async () =&gt; {
 if (wakeLock !== null && document.visibilityState === 'visible') {
 requestWakeLock()
 }
});</code></pre>

【笔记】JavaScript阻止屏幕进入睡眠状态

【图片】发现一张邓紫棋照片🖼

<ol><li>方案一：使用zoom</li></ol><ul><li>zoom 可以改变页面上元素的尺寸，属于真实尺寸。</li><li>zoom:50%，表示缩小到原来的一半</li><li>zoom:0.5，表示缩小到原来的一半</li></ul> <pre style="text-align: left;"><code>.span10{
 font-size: 12px;
 display: inline-block;
 zoom: 0.8;
}
</code></pre>方法二： transform:scale(0.8)<pre style="text-align: left;"><code>.span10{
 font-size: 12px;
 display: inline-block;
 transform:scale(0.8);
}</code></pre><img src="http://img.poooster.com/poooster/2022/10/illuminator_POSTER_01.jpg" alt="钻石" data-href="http://img.poooster.com/poooster/2022/10/illuminator_POSTER_01.jpg" style="width: 50%;">

【CSS】Chrome如何支持小于12px 的文字 🎃

<ul style="text-align: start;"><li>dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。</li><li>darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。</li><li>dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。</li><li>dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。</li><li>dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。</li><li>drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。</li><li>dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。</li></ul>

【HTML】HTML5 drag API 🎈

钻石💎

<img src="http://124.223.185.220:3000/getImage?img=35d92b9406f3a90b65fe0035725885b6-1666106223817.jpeg" alt="" data-href="" style="width: 129.00px;height: 129.00px;"/> 表情包 😊 ❤️🏋️‍♂️🥌

钱钱刚刚在叫

【测试】标题表情包测试🧛‍♀️🧛‍♂️🧜‍♀️🧜‍♂️

【测试】表情包测试

梦到乔丹从一个少年成为篮球巨星的故事，乔丹，生于单亲妈妈家庭，是一个白人，没错是白人，由妈妈带大，篮球目标也是妈妈为他选好的，参加选秀的时候，一枝独秀；出名后故意晒黑（也可能是纹身）让自己成为黑皮肤，报复母亲；衔接上个梦境，成为超人，一群人来挑事，往我电脑安装监控器，被发现后还态度强硬，后被我暴揍，将他们最厉害两个人按地上暴捶；醒莫名其妙

【记录一下】梦  2022/10/18

和人可人去人咬人不人马人和人可人去人咬人不人马人

和人可人去人咬人不人马人

<ol><li>首页加载数据限制，下拉刷新</li><li>视频功能加上？（痛点：服务器存储不够）</li><li>资源整理</li><li>服务器数据区emoji字符集还未更新！</li><li>手机访问适配，媒体查询</li><li>其他板块探索</li></ol>

后期优化点

<img src="http://124.223.185.220:3000/getImage?img=HYDRA-1665389786925.jpg" alt="" data-href="" style=""/><blockquote> &nbsp; 问题：使用PM2管理项目，上传图片会失败，终端npm start启动项目成功上传图片！</blockquote>

发布图片测试-问题

I was using MySQL 8 and non of the above worked for me.This is what I had to do:<pre><code ># ALTER USER 'root'@'localhost' IDENTIFIED BY 'new_password';</code></pre><blockquote><code>This worked for me on: mysql ver 8.0.16 for osx10.14 on x86_64 (Homebrew). Update query resulted in syntax error.</code> – <a href="https://stackoverflow.com/users/2010877/nishant-ghodke" target="">Nishant Ghodke</a> Jul 14, 2019 at 12:42 Yup... only this works on: mysql ver 8.0.16 for mac installed with homebrew – <a href="https://stackoverflow.com/users/1364747/teddy" target="">Teddy</a> Jul 16, 2019 at 9:25 This was the only thing that worked for me been googling forever!! – <a href="https://stackoverflow.com/users/4245513/sam-johnson" target="">Sam Johnson</a> Jan 7, 2020 at 22:37</blockquote>On MySQL 8.0.15 (maybe earlier than this too) the <code>PASSWORD()</code> function does not work anymore, so you have to do:Make sure you have stopped MySQL first (Go to: 'System Preferences' &gt;&gt; 'MySQL' and stop MySQL).Run the server in safe mode with privilege bypass: <pre><code >sudo mysqld_safe --skip-grant-tables
mysql -u root
UPDATE mysql.user SET authentication_string=null WHERE User='root';
FLUSH PRIVILEGES;
exit;</code></pre>Then<pre><code >mysql -u root
ALTER USER 'root'@'localhost' IDENTIFIED WITH caching_sha2_password BY 'yourpasswd';</code></pre>Finally, start MySQL again.

ERROR 1064 (42000): You have an error in your SQL syntax; Want to configure a password as root being the user

昨日俩鸡 over

今日0914

<h3 style="text-align: start;">SSG</h3>SSG(Static Site Generation) 是指在应用编译构建时预先渲染页面，并生成静态的 HTML。把生成的 HTML 静态资源部署到服务器后，浏览器不仅首次能请求到带页面内容的 HTML ，而且不需要服务器实时渲染和响应，大大节约了服务器运维成本和资源。Next.js 默认为每个页面开启 SSG。对于页面内容需要依赖静态数据的场景，允许在每个页面中 export 一个 getStaticProps 异步函数，在这个函数中可以把该页面组件所需要的数据收集并返回。当 getStaticProps 函数执行完成后，页面组件就能在 props 中拿到这些数据并执行静态渲染。举个在静态路由中使用 SSG 的例子：<pre><code class="language-javascript">// pages/posts/first-post.js
function Post(props) {
 const { postData } = props;
 
 return &lt;div&gt;{postData.title}&lt;/div&gt;
}

export async function getStaticProps() {
 // 模拟获取静态数据
 const postData = await getPostData();
 return {
 props: { postData }
 }
}</code></pre>对于动态路由的场景，Next.js 是如何做 SSG 的呢？Next.js 提供 getStaticPaths 异步函数，在这个方法中，会返回一个 paths 数组，这个数组包含了这个动态路由在构建时需要预渲染的页面数据。举个例子：<pre><code class="language-javascript">// pages/posts/[id].js
function Post(props) {
 const { postData } = props;
 
 return &lt;div&gt;{postData.title}&lt;/div&gt;
}

export async function getStaticPaths() {
 // 返回该动态路由可能会渲染的页面数据，比如 params.id
 const paths = [
 {
 params: { id: 'ssg-ssr' }
 },
 {
 params: { id: 'pre-rendering' }
 }
 ]
 return {
 paths,
 // 命中尚未生成静态页面的路由直接返回 404 页面
 fallback: false
 }
}

export async function getStaticProps({ params }) {
 // 使用 params.id 获取对应的静态数据
 const postData = await getPostData(params.id)
 return {
 props: {
 postData
 }
 }
}</code></pre>当我们执行 nextjs build 后，可以看到打包结果包含 pre-rendering.html 和 ssg-ssr.html 两个 HTML 页面，也就是说在执行 SSG 时，会对 getStaticPaths 函数返回的 paths 数组进行循环，逐一预渲染页面组件并生成 HTML。<pre><code >├── server
| ├── chunks
| ├── pages
| | ├── api
| | ├── index.html
| | ├── index.js
| | ├── index.json
| | └── posts
| | ├── [id].js
| | ├── first-post.html
| | ├── first-post.js
| | ├── pre-rendering.html # 预渲染生成 pre-rendering 页面
| | ├── pre-rendering.json
| | ├── ssg-ssr.html # 预渲染生成 ssg-ssr 页面
| | └── ssg-ssr.json</code></pre>SSG 虽然很好解决了白屏时间过长和 SEO 不友好的问题，但是它仅仅适合于页面内容较为静态的场景，比如官网、博客等。面对页面数据更新频繁或页面数量很多的情况，它似乎显得有点束手无策，毕竟在静态构建时不能拿到最新的数据和无法枚举海量页面。这时，就需要增量静态再生成(Incremental Static Regeneration)方案了。

<h3 style="text-align: start;">ISR</h3>Next.js 推出的 ISR(Incremental Static Regeneration) 方案，允许在应用运行时再重新生成每个页面 HTML，而不需要重新构建整个应用。这样即使有海量页面，也能使用上 SSG 的特性。一般来说，使用 ISR 需要 getStaticPaths 和 getStaticProps 同时配合使用。举个例子：<pre><code class="language-javascript">// pages/posts/[id].js
function Post(props) {
 const { postData } = props;
 
 return &lt;div&gt;{postData.title}&lt;/div&gt;
}

export async function getStaticPaths() {
 const paths = await fetch('https://.../posts');
 return {
 paths,
 // 页面请求的降级策略，这里是指不降级，等待页面生成后再返回，类似于 SSR
 fallback: 'blocking'
 }
}

export async function getStaticProps({ params }) {
 // 使用 params.id 获取对应的静态数据
 const postData = await getPostData(params.id)
 return {
 props: {
 postData
 },
 // 开启 ISR，最多每10s重新生成一次页面
 revalidate: 10,
 }
}</code></pre>在应用编译构建阶段，会生成已经确定的静态页面，和上面 SSG 执行流程一致。在 <code>getStaticProps</code> 函数返回的对象中增加 <code>revalidate</code> 属性，表示开启 ISR。在上面的例子中，指定 <code>revalidate = 10</code>，表示最多10秒内重新生成一次静态 HTML。当浏览器请求已在构建时渲染生成的页面时，首先返回的是缓存的 HTML，10s 后页面开始重新渲染，页面成功生成后，更新缓存，浏览器再次请求页面时就能拿到最新渲染的页面内容了。对于浏览器请求构建时未生成的页面时，会马上生成静态 HTML。在这个过程中，<code>getStaticPaths</code> 返回的 <code>fallback</code> 字段有以下的选项：<ul style="text-align: start;"><li><code>fallback: 'blocking'</code>：不降级，并且要求用户请求一直等到新页面静态生成结束，静态页面生成结束后会缓存</li><li><code>fallback: true</code>：降级，先返回降级页面，当静态页面生成结束后，会返回一个 JSON 供降级页面 CSR 使用，经过二次渲染后，完整页面出来了</li></ul>在上面的例子中，使用的是不降级方案(<code>fallback: 'blocking'</code>)，实际上和 SSR 方案有相似之处，都是阻塞渲染，只不过多了缓存而已。If fallback is 'blocking', new paths not returned by getStaticPaths will wait for the HTML to be generated, identical to SSR (hence why blocking), and then be cached for future requests so it only happens once per path.也不是所有场景都适合使用 ISR。对于实时性要求较高的场景，比如新闻资讯类的网站，可能 SSR 才是最好的选择。

2022/08/24 09:06

今天成功打包了一个nextJs项目问题：npm run build后终端报错打包失败：panicked at 'The global thread pool has not been initialized.解决：问题看不懂来源，我直接把 node_modules文件夹整个删掉；再 npm install 下回来，<pre><code >npm install</code></pre>依赖下完后继续打包<pre><code >npm run build</code></pre>打包成功，成功解决。笑死~ 问题来的触不及防，走的也悄无声息。

2022/08/23 17:06

<h2>最好看的华华</h2><pre><code class="language-javascript">log('仙女华华')</code></pre>

华华美女

富文本内容只读操作<pre><code class="language-javascript">import React, { useEffect, useState } from 'react'
import Head from 'next/head'
import Image from 'next/image'
import styles from '../../styles/artcontent.module.css'
import axios from 'axios'
import { useRouter } from 'next/router'
import '@wangeditor/editor/dist/css/style.css'
import dynamic from 'next/dynamic';

export async function getStaticPaths() {
 const res = await fetch('http://192.168.70.98:3030/api/msq/test')
 const arts = await res.json()
 const narts= arts.data.map(item=&gt;{
 return {
 params:{aid:item.id+''}
 }
 })
 // console.log('arts',narts);
 return {
 paths: narts,
 // paths: [{ params: { aid: '1' } }, { params: { aid: '2' }}],
 fallback: false, // can also be true or 'blocking'
 }
 }
export async function getStaticProps(context) {
 
 // Call an external API endpoint to get posts.
 // You can use any data fetching library
 const res = await fetch('http://192.168.70.98:3030/api/msq/search?id='+context.params.aid)
 const detail = await res.json()
 console.log(detail);
// // By returning { props: { posts } }, the Blog component
// // will receive `posts` as a prop at build time
 return {
 props: {
 datas:detail.data,
 },
 }
}

const DisplayPanels = dynamic(import("../../components/DisplayPanels"), {
 ssr: false,
 loading: () =&gt; &lt;p&gt;Loading ...&lt;/p&gt;,
 });


export default function Artcontent(props) {
 const router = useRouter()
 const { aid } = router.query
 const {datas={}}=props
 useEffect(()=&gt;{
 
 },[])

 return (
 &lt;div className={styles.container}&gt;
 &lt;Head&gt;
 &lt;title&gt;yellow star blog&lt;/title&gt;
 &lt;meta name="description" content="yellow star blog" /&gt;
 &lt;link rel="icon" href="/CarStation.svg" /&gt;
 &lt;/Head&gt;

 &lt;main className={styles.main}&gt;
 &lt;h1&gt;{datas.art_title}&lt;/h1&gt;
 &lt;DisplayPanels
 EditorCfg={{
 defaultConfig:{
 placeholder: '无内容',
 readOnly:true
 },
 value:datas.art_content,
 // onCreated:setEditor,
 // onChange:editor =&gt; setHtml(editor.getHtml()),
 mode:'default',
 style:{ height: '500px', 'overflowY': 'hidden' },
 readOnly:true
 }}
 &gt;&lt;/DisplayPanels&gt;
 &lt;/main&gt;

 &lt;footer className={styles.footer}&gt;
 &lt;a
 href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
 target="_blank"
 rel="noopener noreferrer"
 &gt;
 Powered by{' '}
 &lt;span className={styles.logo}&gt;
 &lt;Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} /&gt;
 &lt;/span&gt;
 &lt;/a&gt;
 &lt;/footer&gt;
 &lt;/div&gt;
 )
}
</code></pre>

20220822/17:01

今天周一，天气晴，做了核酸！