Skip to content

Instantly share code, notes, and snippets.

View mutongwu's full-sized avatar

mutongwu

5 followers · 1 following
View GitHub Profile
@mutongwu
mutongwu / 小程序体验版.md
Created December 10, 2022 03:41 
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)}` )
@mutongwu
mutongwu / requestAnimationFrame-style-update.html
Created November 30, 2022 08:43
<!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;
@mutongwu
mutongwu / @font-face.md
Created November 15, 2022 03:00

自定义字体，会阻塞浏览器对文本的渲染。 @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/

@mutongwu
mutongwu / async_defer.md
Last active November 15, 2022 02:57

Async vs defer

1. 相同点：都能够异步并行加载，不阻塞dom和其它资源的加载。
2. 不同点：
    1. 不同的Async script，加载与执行没有顺序，谁先回来先执行，且跟 DomContentLoaded 事件无关（可能在它触发之前或之后）
    2.  defer 的script有顺序，在前面的先执行。代码执行完成后，才会触发 DomContentLoaded 事件。
@mutongwu
mutongwu / .html
Created March 18, 2020 02:16
如何让一个div跟图片一样，自适应宽高比例
//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>
@mutongwu
mutongwu / modal.md
Created August 20, 2019 09:51
modal stop scroll 
<style>
	.modal-box{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.modal-mask{
@mutongwu
mutongwu / promise_finally.md
Last active July 17, 2019 06:47
promise_finally

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))
@mutongwu
mutongwu / lazyman.md
Created July 16, 2019 15:11 
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){
@mutongwu
mutongwu / clone.md
Last active July 15, 2019 02:37
deep clone object

Depth-First Traversal

function clone(src){
	var dest = src;
	if(!src) {
		return dest;
	} else {
		if(typeof src === 'object') {
			if(Array.isArray(src)) {
				dest = []
@mutongwu
mutongwu / gitignore vs npmignore
Created February 19, 2019 01:46
npm publish 发布 npm 包
1. 默认情况下，不存在 .npmignore，npm 会依据 .gitignore 来选择过滤上传的文件；
2. 如果存在 .npmignore （即便是空白的），则 不再使用 .gitignore;
3. package.json 里面的 files 字段，拥有较高权重，控制打包的文件。
默认被排除在外的文件：
.*.swp
._*
.DS_Store
.git