ES6 memo
一、热门问题
- 介绍redux,主要解决什么问题
是管理应用程序状态的库,解决数据管理和数据通信的问题 - Promise、Async有什么区别
- Async 更简洁,不需要用 then 连接
Promise 中不能自定义使用 try/catch 进行错误捕获,但是在 Async/await 中可以像处理同步代码处理错误
- 调试更方便
- (Generator 函数可以暂停执行和恢复执行,这是它能封装异步任务的根本原因)
- 介绍react优化
用 shouldComponentUpdate 避免资源浪费复杂的页面不要在一个组件里面写完。- 请尽量使用
const element。 - map里面添加key,并且key不要使用index(可变的)。具体可参考使用Perf工具研究React Key对渲染的影响
- 尽量少用
setTimeOut或不可控的refs、DOM操作。 props和state的数据尽可能简单明了,扁平化。- 使用
return null而不是CSS的display:none来控制节点的显示隐藏。保证同一时间页面的DOM节点尽可能的少
- HTTP2.0和HTTP1.X相比的新特性
- 新的二进制格式,相对文本来说有更强的健壮性
- 多路复用(MultiPlexing),即连接共享。一个连接上可以有多个request,一个request对应一个id 。
- header压缩:HTTP1.x的header带有大量信息,而且每次都要重复发送,HTTP2.0使用encoder来减少需要传输的header大小,通讯双方各自cache一份header fields表,既避免了重复header的传输,又减小了需要传输的大小。
- 服务端推送(server push)
- 通过什么做到并发请求
- 对请求并发数进行限制,并且使用排队机制让请求有序的发送出去
- http1.1时如何复用tcp连接
- 使用 keep-alive
- 介绍service worker
一个独立的 worker 线程,独立于当前网页进程,有自己独立的 worker context。
一旦被 install,就永远存在,除非被 uninstall
需要的时候可以直接唤醒,不需要的时候自动睡眠(有效利用资源,此处有坑)
可编程拦截代理请求和返回,缓存文件,缓存的文件可以被网页进程取到(包括网络离线状态)
能向客户端推送消息
不能直接操作 DOM,但是service worker可以通过postMessage与页面之间通信,把消息通知给页面,如果需要的话,让页面自己去操作DOM。
出于安全的考虑,必须在 HTTPS 环境下才能工作
异步实现,内部大都是通过 Promise 实现
- 三次握手
- 客户端向服务器发送一个 SYN 包,请求建立连接
- 服务器收到后会发一个对SYN包的确认包(SYN/ACK)回去
- 客户端发送一个确认包(ACK),通知服务器连接已建立
- 介绍css3中position:sticky
- 父级元素不能有任何
overflow:visible以为的overflow设置,否则没有粘滞效果。因为改变了滚动容器(即使没有出现滚动条)。因此,如果你的position:sticky无效,看看是不是某一个祖先元素设置了overflow:hidden,移除之即可。 - 同一个父容器中的sticky元素,如果定位值相等,则会重叠;如果属于不同父元素,则会鸠占鹊巢,挤开原来的元素,形成依次占位的效果
- 父级元素不能有任何
- 浏览器事件流向
- “DOM2级事件”规定事件流包括三个阶段,事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的事件捕获,为截获事件提供了机会,然后是实际的目标接收了事件,最后一个阶段是冒泡阶段
- 注意处于目标阶段的时候,既不是冒泡阶段、也不是捕获阶段,事件处理程序被调用的顺序是注册的顺序
- 介绍事件代理以及优缺点
- 减少事件注册,节省内存
- 减少了dom节点更新的操作,处理逻辑只需在委托元素上进行
- 缺点:事件委托基于冒泡,对于onfoucs和onblur等事件不支持;层级过多,冒泡过程中,可能会被某层阻止掉
- React组件中怎么做事件代理
- React 自己实现了一套高效的事件注册、存储、分发和重用的逻辑,在 DOM 事件体系基础上做了很大改进。不仅减少了内存消耗,最大化解决了 IE 等浏览器的不兼容问题,而且简化了事件逻辑,对开发者来说非常友好。它有如下的特点:
- 使用事件委托技术进行事件代理,React 组件上声明的事件最终都转化为 DOM 原生事件,绑定到了 document 这个 DOM 节点上。从而减少了内存开销。
- 自身实现了一套事件冒泡机制,以队列形式,从触发事件的组件向父组件回溯,调用在 JSX 中绑定的 callback。因此我们也没法用 event.stopPropagation() 来停止事件传播,应该使用 React 定义的 event.preventDefault()。
- React 有一套自己的合成事件 SyntheticEvent,而不是单纯的使用 DOM 原生事件,但二者可以平滑转化。
- React 使用对象池来管理合成事件对象的创建和销毁,这样减少了垃圾的生成和新对象内存的分配,大大提高了性能
- React 自己实现了一套高效的事件注册、存储、分发和重用的逻辑,在 DOM 事件体系基础上做了很大改进。不仅减少了内存消耗,最大化解决了 IE 等浏览器的不兼容问题,而且简化了事件逻辑,对开发者来说非常友好。它有如下的特点:
- React组件事件代理的原理
- 前端怎么控制管理路由
一、for-of
- 与 forEach 不同的是,它能正确响应 break、continue、return 语句
- 避开了 for-in 循环的缺陷,for-in 是为普通对象设计的, 它会遍历自定义属性,而且你遍历得到的是字符串类型的键,因此不适用于数组遍历
- 支持很多类型,像数组、类数组对象、字符串、Map 和 Set 对象,但不支持普通对象(这是 for-in 的用处)
二、默认参数
- 定义默认值时=后的部分是一个表达式,如果调用者没有传递相应参数,将使用该表达式的值作为参数默认值
- 表达式在函数调用时自左向右求值,这一点与Python不同。这也意味着,默认表达式可以使用该参数之前已经填充好的其它参数值
- 传递undefined值等效于不传值,没有默认值的参数隐式默认为undefined
三、普通函数和箭头函数的区别
- 箭头函数内的
this值继承自外围作用域 - 箭头函数不会获取它们自己的
arguments对象 - 使用了块语句的箭头函数不会自动返回值,你需要使用
return语句将所需值返回 - 当使用箭头函数创建普通对象时,你总是需要将对象包裹在小括号里
ES6 memo的更多相关文章
- JavaScript ES6函数式编程(一):闭包与高阶函数
函数式编程的历史 函数的第一原则是要小,第二原则则是要更小 -- ROBERT C. MARTIN 解释一下上面那句话,就是我们常说的一个函数只做一件事,比如:将字符串首字母和尾字母都改成大写,我们此 ...
- React.memo
介绍React.memo之前,先了解一下React.Component和React.PureComponent. React.Component React.Component是基于ES6 class ...
- ES6模块import细节
写在前面,目前浏览器对ES6的import支持还不是很好,需要用bable转译. ES6引入外部模块分两种情况: 1.导入外部的变量或函数等: import {firstName, lastName, ...
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- ES6的一些常用特性
由于公司的前端业务全部基于ES6开发,于是给自己开个小灶补补ES6的一些常用特性.原来打算花两天学习ES6的,结果花了3天才勉强过了一遍阮老师的ES6标准入门(水好深,ES6没学好ES7又来了...) ...
- ES6(块级作用域)
我们都知道在javascript里是没有块级作用域的,而ES6添加了块级作用域,块级作用域能带来什么好处呢?为什么会添加这个功能呢?那就得了解ES5没有块级作用域时出现了哪些问题. ES5在没有块级作 ...
- es6小白学习笔记(一)
1.let和const命令 1.es6新增了let和const命令,与var用法类似,但它声明的变量只在let所在的代码块内有效(块级作用域,es5只有全局和函数作用域) { let a = 1; v ...
- ES6之变量常量字符串数值
ECMAScript 6 是 JavaScript 语言的最新一代标准,当前标准已于 2015 年 6 月正式发布,故又称 ECMAScript 2015. ES6对数据类型进行了一些扩展 在js中使 ...
- ES6之let命令详解
let与块级作用域 { var foo='foo'; let bar='bar'; } console.log(foo,'var'); //foo varconsole.log(bar ,'bar') ...
随机推荐
- LeetCode 整数反转
给出一个 32 位的有符号整数,你需要将这个整数中每位上的数字进行反转. 示例 1: 输入: 123 输出: 321 示例 2: 输入: -123 输出: -321 示例 3: 输入: 120 输出: ...
- linux文件查找-find和locate
一.find 使用语法:find [查找目录] [查找规则] [查找完后执行的action] find是根据具体目录进行搜索 1.查找目录 如果不指定查找目录,默认在当前目录下进行查找 如果需要 ...
- linux /dev/mapper/centos-root目录莫名其妙被占满
shell命令df -h查看磁盘占用情况,发现/dev/mapper/centos-root莫名其妙被沾满: 这是因为,系统有文件被删除,而进程还活着,因而造成还占用空间的现象.1.使用lsof |g ...
- PHP选择排序
选择排序,非常的直观,也相对简单. 思路如下: 假设,从小到大排序. 首先,第一轮循环,从所有数组中,找出最小的元素,然后将其下标记录下来. 然后,确定不是第一个元素,则和第一个元素进行交换. 接下来 ...
- 求最近点对算法分析 closest pair algorithm
这个帖子讲得非常详细严谨,转一波. http://blog.csdn.net/lishuhuakai/article/details/9133961
- Uniprot数据库
Uniprot数据库是Universal Protein的英文缩写,是信息最丰富.资源最广的蛋白质数据库. UniprotKB由两部分组成: UniProtKB/Swiss-Prot 高质量的.手工注 ...
- 在 Laravel 项目中使用 Elasticsearch 做引擎,scout 全文搜索(小白出品, 绝对白话)
项目中需要搜索, 所以从零开始学习大家都在用的搜索神器 elasiticsearch. 刚开始 google 的时候, 搜到好多经验贴和视频(中文的, 英文的), 但是由于是第一次接触, 一点概念都没 ...
- laravel 框架的 csrf
由于 laravel 框架自带 csrf 防护, 也就是通过中间件验证请求的 token, 所以 form 表单必须如下设置才可以正常提交, 否则会 419: <form method=&quo ...
- “妄”眼欲穿-CSS之flex布局和边框阴影
妄:狂妄: 不会的东西只有怀着一颗狂妄的心,假装能把它看穿吧. 作为一个什么都不会的小白,为了学习(zb),特别在拿来主义之后写一些对于某些css布局的总结,进一步加深对知识的记忆.知识是人类的共同财 ...
- k个一组翻转链表(java实现)
题目: 给出一个链表,每 k 个节点一组进行翻转,并返回翻转后的链表. k 是一个正整数,它的值小于或等于链表的长度.如果节点总数不是 k 的整数倍,那么将最后剩余节点保持原有顺序. 示例 : 给定这 ...