2020-05-04

2020-05-04 本文已影响0人静_summer

1、用异步做防抖会有什么问题

1、 react中，由于event是封装过的合成事件对象，并且事件回调调用后，SyntheticEvent会被重用并且所有属性会被取消，所以异步处理的时候event需要处理

// 保留event
event.persist && event.persist()
// 深拷贝event
 e && {...e}

2、异步数据请求可能会导致先来后到
promise结合原生ajax实现：

在连续的请求过程中，每当我发出一个请求，我就将之前正在 pending 的请求的 Promise reject 掉，并且该请求的 XHR 对象执行 abort()
之前的请求如果已经有响应的不用管它，我们当前的请求的结果会覆盖它的
https://zhuanlan.zhihu.com/p/113970301

结合redux中的中间件进行统一处理

请求发出时，记录当前时间为本次请求时间
请求完成时，比较本次发出时间与上次发出时间，将大的记录到store中
请求成功时，比较本次发出时间与上次发出时间，一旦前者大于后者，将数据放到store中。
https://www.jianshu.com/p/ed36d461208b

2、前端缓存有哪些

1.jpg

缓存的优先级：Cache-Control > Expires > ETag > Last-Modified

Cache-Control 值理解:
max-age 指定设置缓存最大的有效时间(单位为s)
public 指定响应会被缓存，并且在多用户间共享
private 响应只作为私有的缓存，不能在用户间共享
no-cache 指定不缓存响应，表明资源不进行缓存
no-store 绝对禁止缓存
h5中的离线存储 manifest

<html lang="en" manifest="demo.manifest"></html>

demo.manifest是一个文件，后缀名为manifest，包含浏览器需要缓存的内容。manifest属性可以指定一个绝对URL或是一个相对路径，但是，一个绝对URL需要和web app是同源的。一个manifest文件可以是任何扩展文件类型，但必须有正确的mime-type，比如在Apache中添加

// 不过可以被pwa替换
AddType text/cache-manifest .appcache

1、cookie就要在服务器和浏览器之间来回传送，而且由于浏览器的跨域限制，客户端和服务端必须要保证同源的原则（也就是跨域问题，详情见我的其他文章），由于cookie是存放在前端的，所以安全问题一直是个大问题，因此一般重要的信息不建议放在cookie中存放
2、Session
对于服务端的程序眼来说session大家肯定很熟悉了，session是一种服务端的机制，也就是能把信息存放在服务端，所以安全可以保障，它的原理是通过session id来识别客户端，这个session id是存放在cookie中的（当然session id让用户看见没无妨），服务端会通过session id来识别客户端进行匹配和判断。它和cookie对比起来差距就很明显了，一个是把数据存在客户端；一个存在服务端，从安全性考虑的话一般像用户名密码这种私密信息一般放在session中。
3、localStorage
它的特点就是“持久”，一旦通过保存，不通过手动清除的话，就会一直保存在前端，它的保存格式是键值对的方式也就是“key-value”的方式保存的，它的存储空间大小限制在500万字符左右，一下是它的一些使用方法：

localStorage.length 获得storage中的个数
localStorage.key(n) 获得storage中第n个元素对的键值（第一个元素是0）
localStorage.getItem(key) 获取键值key对应的值
localStorage.key 获取键值key对应的值
localStorage.setItem(key, value) 添加数据，键值为key，值为value
localStorage.removeItem(key) 移除键值为key的数据
localStorage.clear() 清除所有数据
4、sessionStorage
这个和localStorage有什么区别呢？sessionStorage是一种会话级别的本地存储，一旦关闭浏览器他就会消失，而前者是很“持久”的，即使你关闭一万次浏览器也没事，所以差距还是很大的。后两者是H5才有的特性，因为现在都是前后端分离的开发模式，前端工程师都很青睐这两种前端缓存方式，以下是sessionStorage的记本用法：

sessionStorage.length 获得storage中的个数
sessionStorage.key(n) 获得storage中第n个元素对的键值（第一个元素是0）
sessionStorage.getItem(key) 获取键值key对应的值
sessionStorage.key 获取键值key对应的值
sessionStorage.setItem(key, value) 添加数据，键值为key，值为value
sessionStorage.removeItem(key) 移除键值为key的数据
sessionStorage.clear() 清除所有数据

页面性能如何提升

https://cloud.tencent.com/developer/article/1498912

网页的生成过程，大致可以分成五步。

HTML代码转化成DOM
CSS代码转化成CSSOM（CSS Object Model）
结合DOM和CSSOM，生成一棵渲染树（包含每个节点的视觉信息）
生成布局（layout），即将所有渲染树的所有节点进行平面合成
将布局绘制（paint）在屏幕上

原则
（1）多使用内存、缓存或者其他方法。
（2）减少cpu占用，减少网络。

提升页面性能的方法有哪些？

一、加载页面和静态资源
1、静态资源压缩合并，减少http请求。
（1）减少http请求数量
（2）减少请求资源大小
2、非核心代码异步加载。
3、静态资源缓存：通过链接名称控制缓存，只有内容改变的时候，链接名称才会改变。
4、利用浏览器缓存
5、使用cdn让资源加载更快
6、预解析dns
7、使用ssr后端渲染，数据直接输出到html中（ssr：server site render）
二、页面渲染
1、css、js及放置位置
（1）尽量避免在HTML标签中写style属性
（2）css放前面，js放后面。
（3）避免使用CSS Expression
(4) 减少重绘和重排
2、图片
（1）避免图片和iFrame等的空Src。空Src会重新加载当前页面，影响速度和效率
（2）懒加载（图片懒加载，下拉加载更多）

3、dom操作
（1）减少dom查询，对dom查询做缓存。

（2）减少dom操作，多个操作尽量合并在一起执行。

（3）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
4、事件
（1）尽早执行操作（如DOMContentLoaded）
（2）事件节流

5、代码细节优化
（1）用hash-table来优化查找
（2）多个变量声明合并
（3）少用全局变量
（4）避免全局查询
（5）避免使用with(with会创建自己的作用域，会增加作用域链长度)
（6）用setTimeout来避免页面失去响应
三、移动端性能优化
1、css
（1）不滥用Float。Float在渲染时计算量比较大，尽量减少使用
（2）不滥用Web字体。Web字体需要下载，解析，重绘当前页面，尽量减少使用。
（3）避免使用css3渐变阴影效果。
2、css动画
（1）尽量使用css3动画，开启硬件加速。
可以用transform: translateZ(0)来开启硬件加速。
CSS中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发GPU渲染，请合理使用。过渡使用会引发手机过耗电增加
3、合理使用requestAnimationFrame动画代替setTimeout
4、适当使用touch事件代替click事件。

eventloop

https://zhuanlan.zhihu.com/p/55511602

js的继承

https://www.cnblogs.com/ranyonsue/p/11201730.html

手写防抖和节流

https://www.cnblogs.com/wuconghui/p/10998106.html

react新的生命周期

https://segmentfault.com/a/1190000016617400?utm_source=tag-newest