1:promise 解决了回调地狱和异步 async和await
var promise = new Promise(function(resolve, reject) {
// 异步处理 // 处理结束后、调用resolve 或reject
});
主要有三种状态pending fulfilled rejected
Promise 解决了传统的回调函数导致的回调地域问题
async await也是异步编程的一种解决方,基于promise出现的
2
:闭包 可以访问其他函数的内部变量,也就是函数包函数
例如函数封装 定时器
3
:react生命周期
4
:性能优化 尽量使用png图片 减少dom操作 css不要放在行内样式
如何优化js
将script标签放在页面底部,确保这个脚本执行前面,dom树已经结束
尽可能的合并脚本,页面script越少,加载和响应速度越快,
采用无阻塞下载js脚本
. script标签中使用defer属性:defer = true,会让js和DOM并行加载,带页面加载完成后再执行js文件,这样则不回阻塞;
b. async = true 可以设置js文件异步加载与执行;
c. 使用动态创建的script元素来下载并执行代码;
d. async 和 defer 都支持js文件的异步加载,但是只有后者能保证载DOM加载后才执行;
e. 若同时使用defer和async,则defer属性会失效
5
:虚拟dom 就是一个dom对象
6
:reach hooks出现的原因 之前react构建组件形式是类组件和纯函数组件。hooks主要是为了方便函数组件,是加强版的函数组件纯函数组件没有生命周期,没有状态,没有this指向,只是纯函数
7
:原型链 每个函数都有一个prototype属性,这个属性指向函数的原型对象
8
:输入url经历了什么
浏览器进行地址解析(端口,域名,协议,路径等)
将解析的域名进行DNS解析
先从缓存里查找,有的话直接用
没有的话,查找操作系统中是否有对应值
在没有的话,向服务器发送请求
通过IP地址寻找服务器地址
与服务器的三次握手
第一次建立连接,客户端发送到服务器,等待服务器响应
第二次服务器收到后给客户端一个反应
第三次客户端收到返回的东西
浏览器发送数据,等待服务器响应
服务器响应并返回数据
浏览器接受数据
浏览器开始渲染页面
9
:跨域
jsonp 会生成《Scriptr》标签进行跨域,应为不受同源策略印象
代理 请求头内添加内容
10
:减少dom操作的方法 使用伪类:after
11
:diff算法
12
:节流(在几秒以内只能执行一次)和防抖(滚动条的置顶功能,停止几秒后接口,触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。
13
:重绘 重排)
重绘不一定需要重排,重排必然会导致重绘
重排:当渲染的一部分必更新并且节点和尺寸发生变化,浏览器会使渲染数中受到影响的部分失效,并且重新渲染dom树
例如:添加删除dom,元素位置,尺寸发生变化
重绘:是在一个元素的外观北改变所触发的浏览器行为,浏览器会根据元素的新的属性重新绘制,使元素呈现新的外观
例如:不要一条条修改样式,定义好名字,再修改。
14
:this指向 改变this指向 call(this,a,a,a) aplly(this,[a,b,b]) bind(this) 生成一个函数
15
:redux 状态管理 含有store,reducer,action
store
用来储存数据,通过dispatch派发action,调用redux修改store里面数据唯一数据源 只读状态 数据改变只能通过纯函数
16
:父组件调用子组件的方法 通过ref
17:es6新特性
let
声明变量 const声明常亮 两者是块级作用域,常亮定义后不能更改
模板字符串 ..``
for of
[if !supportLists]· [endif]for of遍历的是键值对中的值
[if !supportLists]· [endif]for in遍历的是键值对中的键
箭头函数
[if !supportLists]· [endif]不需要 function 关键字来创建函数
[if !supportLists]· [endif]省略 return 关键字
[if !supportLists]· [endif]this始终指向函数申明时所在作用域下的this值
Set集合 存储任何类型的唯一值,即集合中所保存的元素是不重复的。类数组结构。
arr = [1,2,3,1]
let arrNew = new Set(arr)
arrNew = [1,2,3]
类数组不是数组,要转化为数组Array.form(arrNew)这样arrNew才是数组了
async/await比promise更好的解决了回调地狱。
async function() {
awiat fn()
}
Promise用于更优雅地处理异步请求。
[if !supportLists]· [endif]
[if !supportLists]· [endif] new Promise((resolve,reject) =>{
[if !supportLists]· [endif] setTimeout(function() {
[if !supportLists]· [endif] resolve('成功了!')
[if !supportLists]· [endif] },1000)
[if !supportLists]· [endif] // reject("失败了,wuwu")
[if !supportLists]· [endif] }).then(data =>{
[if !supportLists]· [endif] console.log(data)
[if !supportLists]· [endif] }).catch(err =>{
[if !supportLists]· [endif] console.log(err)
[if !supportLists]· [endif] })
[if !supportLists]· [endif]
函数传参可以有默认值
// ES6;
function printText(text = 'default') {
console.log(text);
}
解构
18.Var let const
Var 可以重复声明 存在变量提升
Let 不能重复声明 不能变量提升 可以修改
Const 声明常量,不可重复声明,不能修改