some-issues-'s People
some-issues-'s Issues
JS异步执行过程
首先给俩概念:
- (macro)task主要包含:script(整体代码)、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境)
- microtask主要包含:Promise.then、MutaionObserver、process.nextTick(Node.js 环境)
一个event loop:macrotask -> microtask -> ui render
总结:
js本身时同步执行的,也可以是说时单线程的,会先执行macro
遇到await ,如果await中是同步代码,则会立即执行,如果await中是异步代码,则会将此部分的异步代码添加到 microtask/macrotask 等待队列,跳出await 继续执行
如果遇到setTimeout 会添加到microtask,等待下一个loop,下一个loop会先执行setTimeout
nextTick
就此来说明下 VUE的nextTick,Vue 异步执行 DOM 更新的,如果数据更新触发了多次watcher,就会创建一个执行队列(不会总去触发修改,会一次性修改完了再去更新dom),
我们的需求是dom更新之后去拿dom的数据,但是我们又不知道队列什么时候执行完,这就利用到了js的异步执行机制,我们把nextTick放在微人堆队列中,重点:nextTick内部有监听机制,会监听什么时候dom更新哦,一旦dom更新,就执行nextTick参数中传入的回调
页面图片加载
转成base64
弊端
1 图片一旦更新就需要同步更新CSS里Data URL的值。
2 Base64编码后数据大小会变大。虽然CSS可以gzip压缩,而图片不能压缩。
3 旧版本的IE6/7不支持。
适用场景:
图片大小比较小,不经常改动
雪碧图
弊端
CSS Sprites的缺点主要是后期维护困难,一旦图片要发生变动,很容易导致CSS里位置重新计算偏移量
适用场景:
图片比较小,页面图片量较大 ,一些通用的图片
css3 @support
数组的方法 - map、reduce、filter、sort
数组的方法 - map、reduce、filter、sort
map、reduce、filter、sort方法的共同之处就是方法的参数是一个函数,通过对这个"函数参数"内部作相应处理来改变当前数组以得到想要的数组。
1.map (that's speak in Chinese is '映射')
var arr = [1, 3, 5, 7, 9];
//简单的转换
var arr2 = arr.map(function() {
return 1;
});
console.log(arr); //[1, 3, 5, 7, 9]
console.log(arr2); //[1,1, 1, 1, 1]
//复杂转换
var arr3 = arr.map(function(x, y, z) {
//在转换之前先搞清楚函数参数对应参数的意义
console.log(this); //this ==> window
console.log(x); //1 3 5 7 9 ==> 数组的value值
console.log(y); //0 1 2 3 4 ==> 数组的index值
console.log(z); //[1, 3, 5, 7, 9] ==> 数组本身
return x*x;
})
console.log(arr3); //[1, 9, 25, 49, 81]
其实map方法有两个参数map(callbackFn, thisArg); thisArg参数指的是将callbackFn里的this指向thisArg。
2.reduce
var arr = [2, 4, 6, 8, 10];
//reduce不同于map方法,方法返回的是一个值而不是一个数组了。(毕竟不再是映射了嘛!)
var value1 = arr.reduce(function() {
return 1;
});
console.log(value1 ); //1
//那我们就让它的"函数参数"做点什么吧 - 数组内元素累加
var value2 = arr.reduce(function(firstValue, nextValue, currentIndex, array) {
console.log(firstValue);
console.log(nextValue);
console.log(currentIndex);
console.log(array);
return firstValue + nextValue;
});
console.log(arr); //[2, 4, 6, 8, 10]
console.log(value2); // 30
注意事项:
1.arr.reduce(callbackFn, [initialValue]) - 同样reduce方法也是有第二个参数的
initialValue 可选项,其值用于第一次调用callbackFn的第一个参数。
第一次调用callbackFn的第二个参数就是数组的第一个元素。
若没有,则第一次调用callbackFn的第一个参数是数组的第一个元素。
第一次调用callbackFn的第二个参数就是数组的第二个元素。
var arr = ['a', 'b', 'c'];
var value = arr.reduce(function(x, y) {
return x + y;
});
console.log(value); //'abc'
var value2 = arr.reduce(function(x, y) {
return x + y;
}, 'A');
console.log(value2); //'Aabc'
2.如果数组为空并且没有提供initialValue,会抛出TypeError。如果数组仅有一个元素(无论位置如何)并且没有提供initialValue,或者有提供initialValue,但数组为空,那么此唯一值将被返回并且callbackFn不会被执行。
var arr = [];
arr.reduce(function() {
return 1;
});
//Uncaught TypeError: Reduce of empty array with no initial value
arr.push('A');
var value = arr.reduce(function() {
return 1;
});
console.log(value); //'A' callbackFn未执行
arr.pop();
var value2 = arr.reduce(function() {
return 1;
}, 'A');
console.log(value2); //'A' callbackFn未执行
3.filter ( 过滤 )
filter的参数和map方法的参数一致,"函数参数"的参数也一致,就不啰嗦了。
//过滤 - 符合条件的留下,不符合的走人。
var arr = [{name: '小明', grade: 2},{name: '小红', grade: 99},{name: '小李', grade: 60}];
//boss不高兴,想要进行裁员,要求对业绩分不及格(包括60)的炒鱿鱼。
var arr2 = arr.filter(function(x) {
if (x.grade >60) {
console.log(x.name + '可以留下。');
return true;
} else {
console.log(x.name + '可以走了。');
return false;
}
});
console.log(arr2); //[Object] Object ==> {name: '小红', grade: 99};
console.log(arr); // [Object, Object, Object] 原数组未发生变化
小红说:‘老板,我辞职...’
4.sort ( 排序 )
var arr = [10, 20, 1, 2];
arr.sort();
console.log(arr); //[1, 10, 2, 20]
/*
造成以上排序结果的原因:
默认情况下,对字符串排序,是按照ASCII的大小比较的。
Array的sort方法默认把所有元素先转换为String再排序,jieguo'10'排在了'2'的前面,因为字符'1'比字符'2'的ASCII码小。
*/
//想要对数字进行由小到大排序
arr.sort(function(x, y) {
if (x < y) {
return -1;
} else if (x > y) {
return 1;
}
return 0;
});
console.log(arr); //[1, 2, 10, 20]
//想要对数字进行由大到小排序
arr.sort(function(x, y) {
if (x < y) {
return 1;
} else if(x > y) {
return -1;
}
return 0;
});
console.log(arr); //[20, 10, 2, 1]
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.