mittyx / blog Goto Github PK

/**
 * 图片懒加载
 * @parma imgItems {node[]} DOM节点
 * @returns {boolean} 可改进为promise方法
 */
function lazyLoad(imgItems) {
    let _fnScrollTop =  window.scrollY;
    /**
     * @parma arr {node[]}  
     * @parma item {node}
     */
    function delItem(arr, item) {
    	if(arr.indexOf(item) != -1) {
    		item.setAttribute('src',item.dataset.src)
    		// arr.indexOf(item)寻找对应位置
    		arr.splice(arr.indexOf(item), 1)
    	}
    }
    imgItems.forEach((item, index, arr) => {
    	// 获取img的底部高度
    	let itemClientY = item.offsetTop +item.offsetHeight;
    	// 判断img高度(底部)是否在屏幕中
    	if(item.offsetTop < window.innerHeight + _fnScrollTop && item.offsetTop > _fnScrollTop) {
    		delItem(arr, item)
    	} else if (itemClientY < window.innerHeight + _fnScrollTop && itemClientY > _fnScrollTop)  {
    		delItem(arr, item)
    		
    	}
    })
}

function lazyLoad(imgItems) {
    ...
    if(imgItems.length === 0) {
    	return true
    }
    ...
}

function lazyLoad(imgItems) {
    ...
    if(!Array.isArray(imgItems)) {
    	return false
    }
    ...
}

// html
<ul>
    <li><img src="img/10.gif" data-src="img/1.jpg"></li>
    <li><img src="img/10.gif" data-src="img/2.jpg"></li>
    <li><img src="img/10.gif" data-src="img/3.jpg"></li>
    <li><img src="img/10.gif" data-src="img/4.jpg"></li>
    <li><img src="img/10.gif" data-src="img/5.jpg"></li>
    <li><img src="img/10.gif" data-src="img/6.jpg"></li>
    <li><img src="img/10.gif" data-src="img/7.jpg"></li>
</ul>
// js
let imgNodes = [...document.querySelectorAll('img')];
lazyLoad(imgNodes);

/**
 * 去抖
 * @parma fn {function} 执行的方法
 * @parma delay {nubmer} 去抖的时间
 * @parma args {any | object} fn的参数
 */
function debounce(fn = function(){}, delay, args) {
    let timer;
    return () => {
        if(timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            fn(args);
    	}, delay)
    }
}

/**
 * 节流
 * @parma fn {function} 执行的方法
 * @parma delay {nubmer} 节流的时间
 * @parma args {any | object} fn的参数
 */
function throttle(fn = function(){}, delay, args) {
    let times = true;
    return () => {
    	if(times) {
            setTimeout(() => {
            	fn(args);
            	times = true;
            }, delay)
    	}
    	times = false;
    }
}

<ul>
    <li><img src="img/10.gif" data-src="img/1.jpg"></li>
    <li><img src="img/10.gif" data-src="img/2.jpg"></li>
    <li><img src="img/10.gif" data-src="img/3.jpg"></li>
    <li><img src="img/10.gif" data-src="img/4.jpg"></li>
    <li><img src="img/10.gif" data-src="img/5.jpg"></li>
    <li><img src="img/10.gif" data-src="img/6.jpg"></li>
    <li><img src="img/10.gif" data-src="img/7.jpg"></li>
</ul>
<script>
    let imgNodes = [...document.querySelectorAll('img')];
    lazyLoad(imgNodes)
    // debounce
    window.addEventListener('scroll', debounce(lazyLoad, 100, imgNodes))
    // throttle
    window.addEventListener('scroll', throttle(lazyLoad, 100, imgNodes))
</script>

// JS Lookahead assertion x(?=y)

let regex = /First(?= test)/g;

console.log('First test'.match(regex)); // [ 'First' ]
console.log('First peach'.match(regex)); // null
console.log('This is a First test in a year.'.match(regex)); // [ 'First' ]
console.log('This is a First peach in a month.'.match(regex)); // null

console.log(/\d+(?!\.)/g.exec('3.141')); // [ '141', index: 2, input: '3.141' ]

let oranges = ['ripe orange A ', 'green orange B', 'ripe orange C',];

let ripe_oranges = oranges.filter( fruit => fruit.match(/(?<=ripe )orange/));
console.log(ripe_oranges); // [ 'ripe orange A ', 'ripe orange C' ]

// [00:00.000] 作曲 : 接个吻，开一枪
// [00:01] 作词 : 接个吻，开一枪/王东旭/Lambert

let time = elem.match(/\[(\d{2,}):(\d{2})(?:\.(\d{2,3}))?]/g)
console.log(time)
// [00:00.000]
// [00:01]

// ([a-z]\d){3} 3组
'a1b2c3d4'.replace(/([a-z]\d){3}/g, 'X')
// Xd4

var str = 'For more information, see Chapter 3.4.5.1';
var re = /see (chapter \d+(\.\d)*)/i;
var found = str.match(re);

console.log(found);

// logs [ 'see Chapter 3.4.5.1',
//        'Chapter 3.4.5.1',
//        '.1',
//        index: 22,
//        input: 'For more information, see Chapter 3.4.5.1' ]

'a1b2c3d4'.replace(/(a1)(b2).+/g, '$1$2')
// a1b2
// $1='a1' $2=b2

const p = 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?';

const regex = /dog/gi;

console.log(p.replace(regex, 'ferret'));
// expected output: "The quick brown fox jumps over the lazy ferret. If the ferret reacted, was it really lazy?"

console.log(p.replace('dog', 'monkey'));
// expected output: "The quick brown fox jumps over the lazy monkey. If the dog reacted, was it really lazy?"

var str = 'For more information, see Chapter 3.4.5.1';
var re = /see (chapter \d+(\.\d)*)/i;
var found = str.match(re);

console.log(found);

// logs [ 'see Chapter 3.4.5.1',
//        'Chapter 3.4.5.1',
//        '.1',
//        index: 22,
//        input: 'For more information, see Chapter 3.4.5.1' ]

// 'see Chapter 3.4.5.1' 是整个匹配。
// 'Chapter 3.4.5.1' 被'(chapter \d+(\.\d)*)'捕获。
// '.1' 是被'(\.\d)'捕获的最后一个值。
// 'index' 属性(22) 是整个匹配从零开始的索引。
// 'input' 属性是被解析的原始字符串。

let lrc = `[00:00.000] 作曲 : 接个吻，开一枪
            [00:01] 作词 : 接个吻，开一枪/王东旭/Lambert
            [00:05.260]编曲：接个吻，开一枪
            [00:11.570]早上光照在房间 穿上新衬衫
            [00:14.460]镜子里我又长高了些
            [00:16.960]和同学吃火锅然后开黑带妹
            [00:19.280]一起狼人杀不用上学就不累
            [00:21.630]发条祝福传给你 请你别忘记`
let res = lrc.match(/\[(.+)\]/gm)
console.log(res)
// 0: "[00:00.000]"
// 1: "[00:01]"
// 2: "[00:05.260]"
// 3: "[00:11.570]"
// 4: "[00:14.460]"
// 5: "[00:16.960]"
// 6: "[00:19.280]"
// 7: "[00:21.630]"]

let lrc = `[00:00.000] 作曲 : 接个吻，开一枪
            [00:01] 作词 : 接个吻，开一枪/王东旭/Lambert
            [00:05.260]编曲：接个吻，开一枪
            [00:11.570]早上光照在房间 穿上新衬衫
            [00:14.460]镜子里我又长高了些
            [00:16.960]和同学吃火锅然后开黑带妹
            [00:19.280]一起狼人杀不用上学就不累
            [00:21.630]发条祝福传给你 请你别忘记`
let res = lrc.matchAll(/\[(.+)\]/gm)
console.log([...res])

// 0: (2) ["[00:00.000]", "00:00.000", index: 0, input: ..., groups: undefined]
// 1: (2) ["[00:01]", "00:01", index: 25, input:...
...

var re = /quick\s(brown).+?(jumps)/ig;
var result = re.exec('The Quick Brown Fox Jumps Over The Lazy Dog');
// result log: 
/**
0: "Quick Brown Fox Jumps"
1: "Brown"
2: "Jumps"
groups: undefined
index: 4
input: "The Quick Brown Fox Jumps Over The Lazy Dog"
**/

let str = 'hello world!';
let result = /^hello/.test(str);
console.log(result); 
// true

const paragraph = 'The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?';

// any character that is not a word character or whitespace
const regex = /[^\w\s]/g;

console.log(paragraph.search(regex));
// expected output: 43

console.log(paragraph[paragraph.search(regex)]);
// expected output: "."

Referer=http://www.google.com

Accept: text/html

Accept: image/*

Accept: text/html, application/xhtml+xml, application/xml;q=0.9, */*;q=0.8

Expires: Wed, 04 Jul 2012 08:26:05 GMT
#通过HTTP的META设置expires和cache-control
<meta http-equiv="Expires"  content="Wed, 04 Jul 2012 08:26:05 GMT">//仅对该网页有效，对网页中的图片或其他请求无效

# Response Headers(响应头部)
Content-Encoding： gzip
Content-Type：text/plain;charset=iso-8859-1

服务器-->Content-Type:text/plain和Content-Encoding:gzip
-->浏览器-->先解析压缩算法Content-Encoding:gzip-->
先解析压缩算法Content-Encoding:gzip-->后解析Content-Type

Last-Modified: Fri, 23 Oct 2020 07:33:48 GMT

If-Modified-Since: Fri, 23 Oct 2020 07:33:48 GMT

ETag: "5f92875c-6fa"

If-None-Match: "5f92875c-6fa"

# rgba实现
.semitransparentBox {
  background: rgba(170,240,0,0.5);
}

# opacity实现
.semitransparentBox {
  background: rgb(170,240,0);
  opacity: 0.5;
}

.roundedBox {
  background: yellow;
  border-top-left-radius: 150px 30px;
  border-top-right-radius: 150px 30px;
}

background: linear-gradient(to top, white, blue);

background: linear-gradient(top left, white, lightblue)

background: linear-gradient(from top, red 0%, orange 20%, yellow 80%,
  violet 100%);

background-image: repeating-linear-gradient(190deg,red,yellow 7%,green 10%);

1   @font-face {
2     font-family: 'ChantelliAntiquaRegular';
3     src: url('Chantelli_Antiqua-webfont.eot');
4     src: local('Chantelli Antiqua'),
5       url('Chantelli_Antiqua-webfont.woff') format('woff'),
6       url('Chantelli_Antiqua-webfont.ttf') format('truetype'),
7       url('Chantelli_Antiqua-webfont.svg') format('svg');
8   }

body {
  font-family: 'ChantelliAntiquaRegular';
}

# column-count实现
text-align: justify;
column-count: 5;
# column-width实现
text-align: justify;
column-width: 10em

-webkit-column-rule: 1px solid red;
-moz-column-rule: 1px solid red;
column-rule: 1px solid red;

-moz-column-span: all;
-webkit-column-span: all;
column-span: all;

/* Normal styles here */
...

@media (media-feature-name:value) {
  /*符合条件时应用的样式*/
}

@media (min-width: 600px) and (max-width: 700px) {
  /* Override the styles for 600-700 pixel windows. */
}

<link rel="stylesheet" media="(min-width: 568.01px)" href="standard.css">
<link rel="stylesheet" media="(max-width: 568px)" href="small_styles.css">
<! --[if lt IE 9]>
  <link rel="stylesheet" href="standard.css">
<! [endif]-->

<video controls width="400" height="300">
  <source src="butterfly_mobile.mp4" type="video/mp4" media="(max-device-width:480px)">
  <source src="butterfly.mp4" type="video/mp4">
  <source src="butterfly.ogv" type="video/ogg">
</video>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

<html font-size="50px">
    <div class="box" width="1.25rem"></div>
</html>

@charset "UTF-8";

@mixin queryWidth($min, $max) {
 @if $min == -1 {
   @media screen and (max-width: $max+px) {
     html {
       font-size: ( ($max+1) / 375 ) * 100px;
     }
   }
 } @else if $max == -1 {
   @media screen and (min-width: $min+px) {
     html {
       font-size: ( $min / 375 ) * 100px;
     }
   }
 } @else {
   @media screen and (min-width: $min+px) and (max-width: $max+px) {
     html {
       font-size: ( $min / 375 ) * 100px;
     }
   }
 }
}

@include queryWidth(-1, 319);    // for iphone 4
@include queryWidth(320, 359);   // for iphone 5
@include queryWidth(360, 374);
@include queryWidth(375, 383);   // for iphone 6
@include queryWidth(384, 399);
@include queryWidth(400, 413);
@include queryWidth(414, -1);    // for iphone 6 plus

/* 基于UI width=750px DPR=2的页面 */
html {
    font-size: calc(100vw / 7.5);
}

$(window).resize(infinite);
             
infinite();
function infinite() {
var htmlWidth = $('html').width();
    if (htmlWidth >750) {
        $("html").css({
            "font-size" : "100px"
        });
    } else {
        $("html").css({
            "font-size" :  100 / 750 * htmlWidth + "px"
        });
    }
}

#body标签
width: 7.5rem;

npm i -S amfe-flexible

# 安装postcss-px-to-viewport：
npm install postcss-px-to-viewport --save

# postcss.config.js配置：
module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px-to-viewport": {
        viewportWidth: 375,   // 视窗的宽度，对应的是我们设计稿的宽度，Iphone6的一般是375 （xx/375*100vw）
        viewportHeight: 667, // 视窗的高度，Iphone6的一般是667
        unitPrecision: 3,     // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
        viewportUnit: "vw",   // 指定需要转换成的视窗单位，建议使用vw
        selectorBlackList: ['.ignore', '.hairlines'],// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
        minPixelValue: 1,     // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
        mediaQuery: false     // 允许在媒体查询中转换`px`
    }
  }
}

/* 转换位置 */
const swap = (array, i, j) => {
	[arr[i], arr[j]] = [arr[j], arr[i]]
}
/* 拷贝数组 */
const copyArray = (arr) => {
	return [...arr];
}

/**
* @description 生成指定期间的数组
* @param {Num} arrayNumber 数组数量
* @param {Num} min 最小数
* @param {Num} max 最大数
* @return {number[]} return 数组
*/
const getRandomArray = (arrayNumber, min, max) => {
	const array = [],
		  range = max - min;
	for(let i=0; i<arrayNumber; i++) {
		let rand = Math.random();
		array[i] = min + Math.round(rand * range); 
	}
	return array;
}
// 获取50000个数组的方法
const arr = getRandomArray(50000, 0, 50000)

jsArray.sort((a,b) => a-b)

let insertArray = copyArray(arr);
function insertSort(arr) {
	for(let i=1; i<arr.length; i++) {
		for(let j=i; j>0 && arr[j] < arr[j-1]; j--) {
			swap(arr, j-1, j);
		}
	}
	return arr
}

let intensifyInsertArray = copyArray(arr);
function intensifyInsertSort(arr) {
	for(let i=1; i<arr.length; i++) {
		let temp = arr[i], j;
		for(j=i; j>0 && arr[j-1] > temp; j--) {
			arr[j] = arr[j-1]
		}
		arr[j] = temp;
	}
	return arr
}

let selectArray = copyArray(arr);
function selectSort(arr) {
	let minIndex;
	for(let i=0; i<arr.length-1; i++){
		minIndex = i;
		for(let j=i+1; j<arr.length; j++) {
			if(arr[minIndex] > arr[j]) {
				minIndex = j
			}
		}
		swap(arr, i, minIndex);
	}
	return arr;
}

let bubbleArray = copyArray(arr);
function bubbleSort(arr) {
	for(let i=0; i<arr.length-1; i++) {
		for(let j=i+1;j<arr.length;j++) {
			if(arr[i] > arr[j]) {
				swap(arr, i, j)
			}
		}
	}
	return arr
}

let mergeSortArray = copyArray(arr);
function merge(arr, l, mid, r) {
	let i = l, j = mid+1, newArr = arr.slice(l, r+1);
	for(let m = l; m<=r; m++) {
		if(i > mid) {
			arr[m] = newArr[j-l]
			j++;
		} else if(j > r) {
			arr[m] = newArr[i-l]
			i++;
		} else if(newArr[i-l] < newArr[j-l]) {
			arr[m] = newArr[i-l]
			i++;
		} else {
			arr[m] = newArr[j-l]
			j++;
		}
	}
}

function mergeSortEvent(arr, l, r) {
	if(l >= r) return;
	
	let mid = Math.floor((l + r) / 2);
	mergeSortEvent(arr, l, mid);
	mergeSortEvent(arr, mid+1, r);
	merge(arr, l, mid, r);
	
}

function mergeSort(arr) {
	mergeSortEvent(arr, 0, arr.length-1)
}

let intensifyMergeArray = copyArray(arr);
function intensifyMerge(arr, l, mid, r) {
	let i = l, j = mid+1, newArr = arr.slice(l, r+1);
	for (let m = l; m<=r; m++) {
		if (i > mid) {
			arr[m] = newArr[j-l]
			j++;
		} else if (j > r) {
			arr[m] = newArr[i-l]
			i++;
		} else if (newArr[i-l] < newArr[j-l]) {
			arr[m] = newArr[i-l]
			i++;
		} else {
			arr[m] = newArr[j-l]
			j++;
		}
	}
}

function intensifyMergeEvent(arr, l, r) {
	if (l >= r) return;
	
	let mid = Math.floor((l + r) / 2);
	intensifyMergeEvent(arr, l, mid);
	intensifyMergeEvent(arr, mid+1, r);
	
	if (arr[mid] > arr[mid+1]) {
		intensifyMerge(arr, l, mid, r);
	}
}

function intensifyMergeSort(arr) {
	intensifyMergeEvent(arr, 0, arr.length-1)
}

<label for="name">Name <em>*</em></label>
<input id="name" placeholder="Jane Smith" autofocus><br>

# 表单关闭
<form id="zooKeeperForm" action="processApplication.cgi" novalidate>
# 绕过验证
<input type="submit" value="Save for Later" formnovalidate>

# required必填
input:required {
  background-color: lightyellow;
}
# invalid没通过验证样式
input:required:invalid {
  background-color: lightyellow;
}

# valid没通过验证样式
input:required:valid {
  background-color: red;
}

<label for="promoCode">Promotion Code</label>
<input id="promoCode" placeholder="QRB-001" title=
 "Your promotion code is three uppercase letters, a dash, then three numbers"
 pattern="[A-Z]{3}-[0-9]{3}">

<label for="comments">When did you first know you wanted to be a
 zookeeper? </label>
<textarea id="comments" oninput="validateComments(this)" ></textarea>

function validateComments(input) {
  if (input.value.length < 20) {
    input.setCustomValidity("You need to comment in more detail.");
  }
  else {
    //没有错误。清除任何错误消息
    input.setCustomValidity("");
  }
}

<form id="zooKeeperForm" action="processApplication.cgi"
 onsubmit="return validateForm()">

# js 以下是一个简单的示例，演示了针对一个必填字段的自定义验证代码：
function validateForm() {
  if (!Modernizr.input.required) {
    // The required attribute is not supported, so you need to check the
    // required fields yourself.

    // First, get an array that holds all the elements.
    var inputElements = document.getElementById("zooKeeperForm").elements;
	console.log(inputElements)
    // Next, move through that array, checking eaching element.
    for(var i = 0; i < inputElements.length; i++) {

      // Check if this element is required.
      if (inputElements[i].hasAttribute("required")) {
        // If this elemnent is required, check if it has a value.
        // If not, the form fails validation, and this function returns false.
        if (inputElements[i].value == "") {
          alert("Custom required-field validation failed. The form will not be submitted.");
          return false;
        }
      }
    }

    // If you reach this point, everything worked out and the browser
    // can submit the form.
    return true;
  }
}

<input id="weight" type="range" min="50" max="1000" value="160"><br>

<legend>What's Your Favorite Animal? </legend>
<datalist id="animalChoices">
  <span class="Label">Pick an option:</span>
  <select id="favoriteAnimalPreset">
  <option label="Alpaca" value="alpaca">
    <option label="Zebra" value="zebra">
    <option label="Cat" value="cat">
    <option label="Caribou" value="caribou">
    <option label="Caterpillar" value="caterpillar">
    <option label="Anaconda" value="anaconda">
    <option label="Human" value="human">
    <option label="Elephant" value="elephant">
    <option label="Wildebeest" value="wildebeest">
    <option label="Pigeon" value="pigeon">
    <option label="Crab" value="crab">
  </select>
  <br>
  <span class="Label">Or type it in:</span>
</datalist>
<input list="animalChoices" name="list">

# 可以用0.25来表示完成了进度的25%：
<progress value="0.25"></progress>

# 等价于
<progress value="50" max="200"></progress>

## 不确定的滚动条
<progress>Task in progress ...</progress>

<meter min="5" max="70" value="28">28 pounds</meter>

Your suitcase weighs:
<meter min="5" max="100" high="70" value="79">79 pounds</meter>*
<p><small>* A surcharge applies to suitcases heavier than 70 pounds.
</small></p>

<div id="editableElement" contenteditable="true">You can edit this text, if
you'd like.</div>

<iframe id="pageEditor" src="ApocalypsePage_Revised.html"></iframe>
<div>
  <button onclick="startEdit()">Start Editing</button>
  <button onclick="stopEdit()">Stop Editing</button>
  
# js
function startEdit() {
  //把<iframe>转换为设计模式
  var editor = document.getElementById("pageEditor");
  editor.contentWindow.document.designMode = "on";
}


function stopEdit() {
  //关闭<iframe>的设计模式
  var editor = document.getElementById("pageEditor");
  editor.contentWindow.document.designMode = "off";
  //显示编码后的HTML（仅为验证确实可以编辑）
  var htmlDisplay = document.getElementById("editedHTML");
  htmlDisplay.textContent = editor.contentWindow.document.body.innerHTML;
}

function Foo() {...};
let f1 = new Foo();

<audio src="rubberduckies.mp3" controls></audio>

<audio src="rubberduckies.mp3" controls preload="metadata"></audio>

# createElement
var audio = document.createElement("audio");
audio.src = "newsound.mp3";

# Audio
var audio = new Audio("newsound.mp3");

<video src="butterfly.mp4" controls></video>

<video src="butterfly.mp4" controls poster="swiss_alps.jpg"></video>

<video id="videoPlayer" ontimeupdate="progressUpdate()">
    <source src="butterfly.mp4" type="video/mp4">
    <source src="butterfly.webm" type="video/webm">
</video>
<!--进度条-->
<div class="barContainer">
  <div id="durationBar">
    <div id="positionBar" style="width: 100%;"><span id="displayStatus">Paused</span></div>
  </div>
</div>
<!--控制器-->
<div>
    <button onclick="play()">Play</button>
    <button onclick="pause()">Pause</button>
    <button onclick="stop()">Stop</button>
    <button onclick="speedUp()">Fast</button>
    <button onclick="slowDown()">Slow</button>
    <button onclick="normalSpeed()">Normal Speed</button>
</div>

### JavaScript
var video;
var display;
window.onload = function() {
  video = document.getElementById("videoPlayer");
  display = document.getElementById("displayStatus");
  video.onplaying = function() {
    display.innerHTML = "Playing ...";
  }
  video.onpause = function() {
    display.innerHTML = "Paused";
  }
}
// 进度条
function progressUpdate() {
    var positionBar = document.getElementById("positionBar");
    positionBar.style.width = (video.currentTime / video.duration * 100)  + "%";
displayStatus.innerHTML = (Math.round(video.currentTime*100)/100) + " sec";
  }
// 控制部分
function play() {
  video.play();
}
function pause() {
  video.pause();
}
function stop() {
  video.pause();
  video.currentTime = 0;
}
function speedUp() {
  video.play();
  video.playbackRate = 2;
}
function slowDown() {
  video.play();
  video.playbackRate = 0.5;
}
function normalSpeed() {
  video.play();
  video.playbackRate = 1;
}

WEBVTT


00:00:05.000 --> 00:00:10.000
This caption appears 5 seconds in and lingers until the 10 second mark.


00:01:00.000 --> 00:01:10.000
Now 1 minute has passed. Think about that for 10 seconds.


00:01:10.000 --> 00:01:15.000
This caption appears immediately after the second caption disappears.


00:01:30.000 --> 00:01:35.000
Captions can use <i>line breaks</i> and <b>simple</b> HTML markup.

<video controls width="700" height="400">
  <source src="butterfly.mp4" type="video/mp4">
  <source src="butterfly.webm" type="video/webm">
  <track src="butterfly.vtt" srclang="en" kind="subtitles" label="English"
  default>
  <track src="butterfly_fr.vtt" srclang="fr" kind="subtitles" label="French">
</video>

<audio controls>
  <source src="rubberduckies.mp3" type="audio/mp3">
  <source src="rubberduckies.ogg" type="audio/ogg">
  <p>We like disco dancing.</p> // 都不支持的情况下
</audio>

if (audio.canPlayType("audio/ogg")) {
  audio.src = "newsound.ogg";
}
else if (audio.canPlayType("audio/mp3")) {
  audio.src = "newsound.mp3";
}

Last-Modified: Fri, 23 Oct 2020 07:33:48 GMT

var file = this.files[0];
var fr = new FileReader();

fr.onload = function(e){
	// 这边e.target.result已经是arraybuffer对象类型
	console.log(e.target.result);
}

axios({
	method: 'get',
	url: 'assets/music/test.mp3',
	responseType: 'arraybuffer'
}).then((res) => {
    console.log(res.data) //这个是arraybuffer
})

const audioContext = new AudioContext();
const audioSource = audioContext.createBufferSource()

audioContext.decodeAudioData(arrayBuffer, (buffer) => {
	audioSource.buffer = buffer;
	audioSource.connect(audioContext.destination);
})

// 控制播放等操作
const audioSource = audioContext.createBufferSource()

audioContext.decodeAudioData(arrayBuffer, (buffer) => {
	audioSource.buffer = buffer;
	audioSource.connect(audioContext.destination);
	// 播放音乐
	audioSource.start()
})

const audioContext = new AudioContext();
// 控制音量
const gainNode = audioContext.createGain();
// 控制音频
const audioSource = audioContext.createBufferSource()

audioContext.decodeAudioData(arrayBuffer, (buffer) => {
	audioSource.buffer = buffer;
	// 设置音量为0.5
	gainNode.gain.value = 0.5
	gainNode.connect(audioContext.destination);
	// 播放
	audioSource.start()
})

let audioContext = new(window.AudioContext || window.webkitAudioContext)();

let audioContext = new AudioContext();
let gainNode = audioContext.createGain();
let audioSource = audioContext.createBufferSource()

function decodeAudioData(audioContext, url) {
	return new Promise((resolve) => {
		axios({
			method: 'get',
			url: url,
			responseType: 'arraybuffer'
		}).then((res) => {
			audioContext.decodeAudioData(res.data, (buffer) => {
				resolve(buffer);
			})
		})
	})
}

let buffer = decodeAudioData(audioContext, 'assets/music/test.mp3');

buffer.then((res) => {
	audioSource.buffer = res;
	
	audioSource.connect(gainNode)
	gainNode.gain.value = 0.5
	gainNode.connect(audioContext.destination);
	
	audioSource.start()
})

class LazyLoad{
    constructor(images, options = {}) {
		this.setting = Object.assign({}, {src: 'data-src', srcset: 'data-srcset'}, options)
		this.images = images
		this.observer = null
		this.init()
	}
	init() {
		let observerConfig = {
			root: null,
			rootMargin: '0px',
			threshold: [0]
		}
		this.observer = this.intersectionObserver(observerConfig)
		this.images.forEach(image => this.observer.observe(image))
	}
}

intersectionObserver(config) {
    return new IntersectionObserver(entries => {
    	entries.forEach(entry => {
    	  const target = entry.target
    	  // 到元素出现在视图中
    	  if(entry.intersectionRatio > 0) {
    			this.observer.unobserve(target)
    			// 设置img真实src路径
    			this.setImgsrc(target)
    	  }
    	})
    }, config)
}

setImgsrc(target){
	const src = target.getAttribute(this.setting.src)
	const srcset = target.getAttribute(this.setting.srcset)
	// 判断是否为img节点
	if('img' === target.tagName.toLowerCase()) {
		if(src) {
		    target.src = src
		}
		if(srcset) {
		    target.srcset = srcset
		}
	}else {
		target.style.backgroundImage = `url(${src})`
	}
}

const glabolConfig = {
	src: 'data-src',
	srcset: 'data-srcset'
}
class LazyLoad{
	constructor(images, options = {}, glabolConfig) {
		this.setting = Object.assign({}, glabolConfig, options)
	}
}

;(function(window, glabolConfig) {
	class LazyLoad{
	    ...
	}
})(window, glabolConfig);	

window.lazyLoad = (images, options = {}) =>{
	return new LazyLoad(images, options, glabolConfig)
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			img, body, ul, li, html {
				margin: 0;
				padding: 0;
			}
			img{
				height: 700px;
				width: 100vw;
			}
		</style>
		
	</head>
	<body>
		<ul>
			<li><img src="img/10.gif" data-src="img/1.jpg"></li>
			<li><img src="img/10.gif" data-src="img/2.jpg"></li>
			<li><img src="img/10.gif" data-src="img/3.jpg"></li>
			<li><img src="img/10.gif" data-src="img/4.jpg"></li>
			<li><img src="img/10.gif" data-src="img/5.jpg"></li>
			<li><img src="img/10.gif" data-src="img/6.jpg"></li>
			<li><img src="img/10.gif" data-src="img/7.jpg"></li>
		</ul>
		<script src="js/intersectionObserver-lazyload.js"></script>
		<script>
			let imgItems = [...document.querySelectorAll('img')];
			lazyLoad(imgItems)
		</script>
	</body>
</html>

npm i -D compression-webpack-plugin

plugins: [
  new CompressionPlugin({
    filename: "[path].gz[query]",
    algorithm: "gzip",
    test: /\.js$|\.html$|\.css/,
    threshold: 10240, // 只处理比这个值大的资源。按字节计算
    minRatio: 0.8 // 	只有压缩率比这个值小的资源才会被处理
    deleteOriginalAssets: false, //是否删除原资源
  }),
];

npm install --save-dev url-loader
// webpack.config.js
module.exports = {
  module: {
    rules: [{
      test: /\.(png|svg|jpg|gif|jpeg|ico|woff|woff2|eot|ttf|otf)$/,
      use: [{
          loader: "url-loader", // 根据图片大小，把图片优化成base64
          options: {
            limit: 10000, //小于10000字节的图片都进行base64操作
          }
        }
      ]
    }]
  }
};

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        loader: "image-webpack-loader", // 先进行图片优化
        options: {
          mozjpeg: {
            progressive: true,
            quality: 65,
          },
          optipng: {
            enabled: false,
          },
          pngquant: {
            quality: "65-90",
            speed: 4,
          },
          gifsicle: {
            interlaced: false,
          },
          webp: {
            quality: 75,
          },
        },
      },
    ],
  },
};

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  /**
  * 放头部： 页面先解析<style>后得到css后解析html
  */
  <style>...<style>
  /**
  * 放头部： 页面的解析在遇到js的时候需要运行完js之后才能继续
  * 缺点：js一旦加载或者运算很久，会导致用户白屏
  */
  <script>
    for (let i=0； i < 1000000000000000; i++) {
        console.log("年轻人不讲码德！ 你就慢慢等吧")
    }
  </script>
</head>
<body>
  <div id="container"></div>
  /**
  * 放尾部： 页面的解析完毕开始加载js
  * 优点：用户无需等待js加载就可以看到界面
  */
   <script>
    var container = document.getElementById("container")
    console.log('container', container) // '<div id="container"></div>'
  </script>
</body>
  /**
  * 放尾部： 页面先解析html后得到解析css
  * 缺点：导致html节点出来没样式后才有
  */
  <style>...<style>
</html>

布局：display、float、position、list、table、flex、columns、grid
尺寸：margin、padding、border、width、height

界面：appearance、outline、background、mask、box-shadow、box-reflect、filter、opacity、clip
文字：text、font、word

// bad
let box = document.getElementById('box')

box.innerHTML = '1'
box.innerHTML += '2'
box.innerHTML += '3'
...

// good
let content = ''
content = '1'
content += '2'
content += '3'

box.innerHTML = content // 一次性插入

let box = document.getElementById('box')

let content = document.createDocumentFragment()

let Fdiv = document.createElement('div')

Fdiv.innerHTML = '1'
Fdiv.innerHTML += '2'
Fdiv.innerHTML += '3'

content.appendChild(Fdiv)
// 只产生一次dom操作
box.appendChild(content) 

<li><img src="img/loading.gif" data-src="img/1.jpg"></li>

/**
 * @param {Function} func 要执行的回调函数 
 * @param {Number} wait 延时的时间
 * @param {Boolean} immediate 是否立即执行
 * @return null
 */
let timer, flag;
function throttle(func, wait = 500, immediate = true) {
	if (immediate) {
		if (!flag) {
			flag = true;
			// 如果是立即执行，则在wait毫秒内开始时执行
			typeof func === 'function' && func();
			timer = setTimeout(() => {
				flag = false;
			}, wait);
		}
	} else {
		if (!flag) {
			flag = true
			// 如果是非立即执行，则在wait毫秒内的结束处执行
			timer = setTimeout(() => {
				flag = false
				typeof func === 'function' && func();
			}, wait);
		}
		
	}
};
export default throttle

let timeout = null;
/**
 * @param {Function} func 要执行的回调函数 
 * @param {Number} wait 延时的时间
 * @param {Boolean} immediate 是否立即执行 
 * @return null
 */
function debounce(func, wait = 500, immediate = false) {
	// 清除定时器
	if (timeout !== null) clearTimeout(timeout);
	// 立即执行，此类情况一般用不到
	if (immediate) {
		var callNow = !timeout;
		timeout = setTimeout(function() {
			timeout = null;
		}, wait);
		if (callNow) typeof func === 'function' && func();
	} else {
		// 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
		timeout = setTimeout(function() {
			typeof func === 'function' && func();
		}, wait);
	}
}

export default debounce

# vue.config.js
module.exports = {
  configureWebpack:{
    externals: {
       'vue': 'Vue',
       'vuex': 'Vuex'
    }
  }
}

# store/index.js
import Vuex from "vuex";

// Vue.use(Vuex); 注释掉

// index.html
<body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.1.3/vuex.min.js"></script>
  </body>

# vue.config.js
module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        cacheGroups: {
          vendors: {
            test: /node_modules/,
            chunks: "initial",
            minChunks: 1,
            priority: -10,
          },
          router: {
            name: 'chunk-router',
            test: /[\\/]node_modules[\\/]vue-router[\\/]/,
            chunks: "all",
            minChunks: 1,
            priority: -5,
          }
        },
      },
    },
  },
};

let obj = {
    a: 10
}
Object.keys(obj).forEach(key => {
    let value = obj[key]
    Object.defineProperty(obj, key, {
        set(newValue) {
            console.log(`监听${key}改变: ${newValue}`);
            value = newValue
        },
        get() {
            console.log(`获取${key}对应的值: ${value}`);
            return value
        }
    })
})
obj.a = 100 // 监听a改变: 100
obj.b = 10 // 不会被监听到

# template
<p @click="adda(obj)">{{ obj.a }}</p>
<p @click="addb(obj)">{{ obj.b }}</p>

# srcript
data () {
    return {
        obj:{
            a:1
        }
    }
},
mounted () {
    this.obj.b = 1;
},
methods: {
    addb(item){
        item.b += 1;
        console.log(this.obj.b)
    },
    adda(item){
        item.a += 1;
    }
}

mounted () {
    this.$set(this.obj, "b", 1)
}

let obj = {
    a: 10
}
const handler = {
    get(target, prop) {
        console.log(`获取${prop}对应的值: ${target[prop]}`);
        return target[prop];
    },
    set(target, prop, val) {
        target[prop] = val;
        console.log(`监听${prop}改变: ${val}`);
        return true
    }
}

let obj2 = new Proxy(obj, handler)
obj2.b = 100 // 监听b改变: 100

let user = {
  _name: "Guest",
  get name() {
    return this._name;
  }
};

let userProxy = new Proxy(user, {
  get(target, prop, receiver) {
    return target[prop];
  }
});

console.log(userProxy.name); // Guest

let user = {
  _name: "Guest",
  get name() {
    return this._name;
  }
};

let userProxy = new Proxy(user, {
  get(target, prop, receiver) {
    console.log(target) // user对象{_name: "Guest"}
    return target[prop];
  }
});

let admin = {
  __proto__: userProxy,
  _name: "Admin"
};

console.log(admin.name); // Guest

let user = {
  _name: "Guest",
  get name() {
    return this._name;
  }
};

let userProxy = new Proxy(user, {
  get(target, prop, receiver) { // receiver = admin
    return Reflect.get(target, prop, receiver);
  }
});


let admin = {
  __proto__: userProxy,
  _name: "Admin"
};

console.log(admin.name); // Admin

<!DOCTYPE html>

# 新增
<time>, <nav>, <footer>, <header>, <figure>, <figcaption>, <main>, <output>

<! --[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<! [endif]-->

CACHE MANIFEST
# version 1.00.001 // 下方更新描述文件中有描述
# pages
PersonalityTest.html
PersonalityTest_Score.html


# styles & scripts
PersonalityTest.css
PersonalityTest.js


# pictures & fonts
Images/emotional_bear.jpg
Fonts/museo_slab_500-webfont.eot
Fonts/museo_slab_500-webfont.woff
Fonts/museo_slab_500-webfont.ttf
Fonts/museo_slab_500-webfont.svg

<! DOCTYPE html>
<html lang="en" manifest="PersonalityTest.manifest">
...

...
# version 1.00.001
...

CACHE MANIFEST
PersonalityTest.html
Images/emotional_bear.jpg

NETWORK:
Images/logo.png

CACHE MANIFEST
PersonalityTest_Score.html

FALLBACK:
PersonalityScore.html PersonalityScore_offline.html

SETTINGS:
prefer-online