前端知识学习04

1.js事件循环机制Event loop

1. js再执行的的时候会产生执行环境
2. 执行环境会按照顺序加入到执行栈中
3. 如果遇到异步 的代码，会被挂起并加入到Task队列中
   • 不同的任务源会被分配到不同的Task任务队列中，任务源分为微任务（microtask）和宏任务(macrotask)
   • 微任务包括process.nextTick、promise、Object.observe、MutationObserver
   • 宏任务包括script、setTimeout、setInterval、setImmediate、I/O、UI rendering
4. 一旦执行栈为空，就会从task队列中拿出需要执行的代码并放入执行栈中执行

2.vue的响应式原理：

1. 当你把普通的javascript对象传入vue实例作为data选项，Vue将遍历所欲的property，并使用Object.defindProperty把这些property全部转化为getter/setter。Object.defineProperty是ES5的内容，所以vue不支持IE8浏览器
2. 这些getter/setter对于用户是不可见的，但是在内部它们让vue能够追踪依赖，在property被访问和修改时通知变更。
3. 每一个组件实例都对应一个watcher实例，它会在组件渲染的过程中把“接触”过的数据property记录为依赖。之后当依赖项的setter触发时，会通知watcher,从而使它关联的组件重新渲染。

3.函数和构造函数的区别

• 任何函数都可以作为构造函数
• 但不能将任意的函数称为构造函数
• 只有当一个函数通过new关键字调用的时候才可以称为构造函数

4.原型链

• 首先要理解 __ proto __、prototype、constructor
• js分为函数对象和普通对象，每个对象都有__proto__属性，但是只有函数对象才有prototype属性
• 属性--proto-- 是一个对象，它有两个属性，constructor和--proto--；
• 原型对象prototype有一个默认的constructor属性，用于记录实例是由哪个构造函数创建；
• 每一个实例对象都有一个私有属性_proto_，指向他的构造函数的原型对象（prototype）。原型对象也有自己的(--proto--)，层层向上直到有一个对象的原型对象为null。这一层层原型就是原型链。

5.前端性能优化

1. 减少http请求

2. 使用http2,http2可以多个请求共用一个TCP连接

3. 服务端渲染

4. 使用CDN

5. 将CSS放在头部，JavaScript放在底部

6. 使用字体图标Iconfont代替图片图标

7. 善用缓存，不加载相同的资源

8. 使用webpack压缩文件

9. 图片懒加载

10. 通过webpack按需加载代码，提取第三库代码

11. 减少重绘重排

12. 使用事件委托

13. 注意程序的局部性

14. 判断条件倾向于使用switch而不是if else

15. 判断条件更多的时候用查找表

16. 减少DOM操作，避免页面卡顿

17. 使用位操作

18. 不要覆盖原生方法

19. 降低CSS选择器的复杂性

20. 使用flexbox而不是较早的布局模型

21. 使用transform和opacity属性更改来实现动画

6.箭头函数与普通函数的区别：

1. 语法简洁，省略了function关键字
2. 箭头函数不会创建自己的this，因此他没有自己的this，他只会从自己作用域链的上一层继承this。
3. 箭头函数继承而来的this指向永远不变
4. .call().bind().aply()无法改变箭头函数中this的指向
5. 箭头函数不能作为构造函数使用
6. 箭头函数没有自己的arguments
7. 箭头函数没有原型prototype
8. 箭头函数不能用作Generator函数，不能使用yeild关键字

7.display:none; visibility:hidden; opacity:0;三者的区别

display: none;

1. DOM 结构：浏览器不会渲染 display 属性为 none 的元素，不占据空间；
2. 事件监听：无法进行 DOM 事件监听；
3. 性能：动态改变此属性时会引起重排，性能较差；
4. 继承：不会被子元素继承，毕竟子类也不会被渲染；
5. transition：transition 不支持 display。

visibility: hidden;

1. DOM 结构：元素被隐藏，但是会被渲染不会消失，占据空间；
2. 事件监听：无法进行 DOM 事件监听；
3. 性 能：动态改变此属性时会引起重绘，性能较高；
4. 继 承：会被子元素继承，子元素可以通过设置 visibility: visible; 来取消隐藏；
5. transition：visibility 会立即显示，隐藏时会延时

opacity: 0;

1. DOM 结构：透明度为 100%，元素隐藏，占据空间；
2. 事件监听：可以进行 DOM 事件监听；
3. 性 能：提升为合成层，不会触发重绘，性能较高；
4. 继 承：会被子元素继承,且，子元素并不能通过 opacity: 1 来取消隐藏；
5. transition：opacity 可以延时显示和隐藏

8.postion几种定位区别：

• absolute :生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。
• fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。
• relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
• static 默认值。没有定位，元素出现在正常的流中
• sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

9.赋值和深、浅拷贝的区别

• 当我们把一个对象赋值给一个新的变量时，赋的其实是该对象的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论那个对象改变，其实都是改变的存储空间的内容，两个对象是联动的。
• 浅拷贝：重新在堆中创建内存，拷贝前后对象的基本数据类型互不影响，但拷贝前后对象的引用类型因为共享同一块内存，会互相影响。
• 深拷贝：从堆内存中开辟一个新的区域存放新对象，对对象中的子对象进行递归拷贝，拷贝前后两个对象互不影响。

10.new的过程

1. 新建一个内部对象
2. 给这个内部对象指定一个原型链，该对象的—proto—指向构造函数的prototype
3. 返回这个内部对象

11.防抖和节流

防抖：在事件触发n秒后再执行回调。如果在n秒内又被触发，则重新计时

节流：在规定时间内，只能触发一次函数。如果在这个单位时间内多次触发，只有一次生效。

12.Set和Map的区别

Set是一种叫做集合的数据结构，Map是一种叫做字典的数据结构

共同点：集合、字典可以存储不重复的值

不同点：集合的存储形式是[value,value]，字典的存储形式是[key,value]

Set

操作方法：

• add(value)：新增，相当于 array里的push。
• delete(value)：存在即删除集合中value。
• has(value)：判断集合中是否存在 value。
• clear()：清空集合。

便利方法：遍历方法（遍历顺序为插入顺序）

• keys()：返回一个包含集合中所有键的迭代器。
• values()：返回一个包含集合中所有值得迭代器。
• entries()：返回一个包含Set对象中所有元素得键值对迭代器。
• forEach(callbackFn, thisArg)：用于对集合成员执行callbackFn操作，如果提供了 thisArg 参数，回调中的this会是这个参数，没有返回值。

Map

操作方法：

• set(key, value)：向字典中添加新元素。
• get(key)：通过键查找特定的数值并返回。
• has(key)：判断字典中是否存在键key。
• delete(key)：通过键 key 从字典中移除对应的数据。
• clear()：将这个字典中的所有元素删除。

遍历方法：

• Keys()：将字典中包含的所有键名以迭代器形式返回。
• values()：将字典中包含的所有数值以迭代器形式返回。
• entries()：返回所有成员的迭代器。
• forEach()：遍历字典的所有成员。

13.forEach()和Map()的区别

如果在回调函数中修改数组的值

• forEach会改变原来的数组
• Map()方法会得到一个新的数组并返回

时间上：map()运行速度更快一些