mutongwu

https://open.weixin.qq.com/sns/getexpappinfo?appid=XXX&path=YYY
其中：
https://open.weixin.qq.com/sns/getexpappinfo  //固定地址
?appid  //后面添加自己小程序appid
&path   //后面添加路由路径注意添加.html, 双重 encodeURIComponent
例子

const path = encodeURIComponent(`/pages/webview?url=${encodeURIComponent(resultUrl)}` )

自定义字体，会阻塞浏览器对文本的渲染。 @font-face(https://developers.google.com/web/updates/2016/02/font-display ， https://web.dev/optimize-webfont-loading/ )

@font-face { font-display : ‘auto’;  /*auto, swap, fallback, optional */}

font-display 可以告诉浏览器，在字体加载完成前，先用系统字体显示，减少文本空白的情况。

新的提案建议：在自定义字体完成加载之前，如果使用系统字体显示，虽然可以防止空白，但是如果自定义字体跟现有实现差异太大，渲染后会有很大的差别，用户体验不好。新的提议对@font-face有size-adjust 属性控制，可以减少这种差异，给用户更加平滑的显示过渡。

https://www.smashingmagazine.com/2021/05/reduce-font-loading-impact-css-descriptors/

Async vs defer

1. 相同点：都能够异步并行加载，不阻塞dom和其它资源的加载。
2. 不同点：
    1. 不同的Async script，加载与执行没有顺序，谁先回来先执行，且跟 DomContentLoaded 事件无关（可能在它触发之前或之后）
    2.  defer 的script有顺序，在前面的先执行。代码执行完成后，才会触发 DomContentLoaded 事件。

<style>
	.modal-box{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.modal-mask{

promise的finally 方法，有几点注意：

resolve/reject都会被调用；
函数没有入参，因为它不管状态；
函数的返回值，除了返回一个Promise.reject 对象，不影响后续 then 的传值。
返回 Promise.reject(),将改变后续then方法的执行，进入到 rejected 方法里面

// output: res 2
Promise.resolve(2).finally(() => {return Promise.resolve(11)}).then(res => console.log('res',res), err => console.log('err',err))
Promise.resolve(2).finally(() => {return 11}).then(res => console.log('res',res), err => console.log('err',err))

function LazyMan(name){
	console.log('This is ' + name, new Date());
	var prePromise = Promise.resolve();
	var pending = [Promise.resolve()];
	var firstSleep  = Promise.resolve();

	return {
		eat(food) {
			// setTimeout(function(wait){

Depth-First Traversal

function clone(src){
	var dest = src;
	if(!src) {
		return dest;
	} else {
		if(typeof src === 'object') {
			if(Array.isArray(src)) {
				dest = []

	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>requestAnimationFrame</title>
	<style type="text/css">
	#box {
	width: 50px;

	//https://codepen.io/aghassemi/pen/RpdaKM
	<div style="height:320px">

	<div class="parent">
	<div class="wrapper">
	<!-- To change aspect ratio, change SVG's width/height -->
	<img class="resizer" src='data:image/svg+xml;utf8,<svg height="2px" width="1px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"></svg>'></img>
	<div class="child">Child maintains aspect ratio as parent's height changes</div>
	</div>
	</div>

	npm publish 发布 npm 包
	1. 默认情况下，不存在 .npmignore，npm 会依据 .gitignore 来选择过滤上传的文件；
	2. 如果存在 .npmignore （即便是空白的），则不再使用 .gitignore;
	3. package.json 里面的 files 字段，拥有较高权重，控制打包的文件。

	默认被排除在外的文件：
	.*.swp
	._*
	.DS_Store
	.git