踏歌笙
狗粮品尝师
|
江城之光
获得徽章 7
#每天一个知识点#
setState 同步还是异步
setState 本身代码的执行肯定是同步的，这里的异步是指是多个 state 会合成到一起进行批量更新。
同步还是异步取决于它被调用的环境。
如果 setState 在 React 能够控制的范围被调用，它就是异步的。比如合成事件处理函数，生命周期函数， 此时会进行批量更新，也就是将状态合并后再进行 DOM 更新。
如果 setState 在原生 JavaScript 控制的范围被调用，它就是同步的。比如原生事件处理函数，定时器回调函数，Ajax 回调函数中，此时 setState 被调用后会立即更新 DOM 。
setState 同步还是异步
setState 本身代码的执行肯定是同步的，这里的异步是指是多个 state 会合成到一起进行批量更新。
同步还是异步取决于它被调用的环境。
如果 setState 在 React 能够控制的范围被调用，它就是异步的。比如合成事件处理函数，生命周期函数， 此时会进行批量更新，也就是将状态合并后再进行 DOM 更新。
如果 setState 在原生 JavaScript 控制的范围被调用，它就是同步的。比如原生事件处理函数，定时器回调函数，Ajax 回调函数中，此时 setState 被调用后会立即更新 DOM 。
展开
评论
1
#每天一个知识点#
GET 和 POST 的区别。
从缓存的角度，GET 请求会被浏览器主动缓存下来，留下历史记录，而 POST 默认不会。
从编码的角度，GET 只能进行 URL 编码，只能接收 ASCII 字符，而 POST 没有限制。
从参数的角度，GET 一般放在 URL 中，因此不安全，POST 放在请求体中，更适合传输敏感信息。
从幂等性的角度，GET 是幂等的，而 POST 不是。(幂等表示执行相同的操作，结果也是相同的)
从 TCP 的角度，GET 请求会把请求报文一次性发出去，而 POST 会分为两个 TCP 数据包，首先发 header 部分，如果服务器响应 100(continue)， 然后发 body 部分。(火狐浏览器除外，它的 POST 请求只发一个 TCP 包)
GET 和 POST 的区别。
从缓存的角度，GET 请求会被浏览器主动缓存下来，留下历史记录，而 POST 默认不会。
从编码的角度，GET 只能进行 URL 编码，只能接收 ASCII 字符，而 POST 没有限制。
从参数的角度，GET 一般放在 URL 中，因此不安全，POST 放在请求体中，更适合传输敏感信息。
从幂等性的角度，GET 是幂等的，而 POST 不是。(幂等表示执行相同的操作，结果也是相同的)
从 TCP 的角度，GET 请求会把请求报文一次性发出去，而 POST 会分为两个 TCP 数据包，首先发 header 部分，如果服务器响应 100(continue)， 然后发 body 部分。(火狐浏览器除外，它的 POST 请求只发一个 TCP 包)
展开
1
点赞
#每天一个知识点#
在浏览器中，有以下几种常见的缓存:
1.强制缓存:通过设置Cache-Control和Expires等响应头实现，可以让浏览器直接从本地缓存中读取资源而不发起请求。
2.协商缓存:通过设置Last-Modified和ETag等响.应头实现，可以让浏览器发送条件请求，询问服务器是否有更新的资源。如果服务器返回304NotModified响应，则表示客户端本地缓存仍然有效，可直接使用缓存的资源。
3. Service Worker缓存: Service Worker是一种特殊的JS脚本，可以拦截网络请求并返回缓存的响应，以实现离线访问和更快的加载速度等功能。 4. Web Storage缓存:包括localStorage和sessionStorage。localStorage 用于存储用户在网站_上的永久性数据，而sessionStorage则用于存储用户会话过程中的临时数据。
在浏览器中，有以下几种常见的缓存:
1.强制缓存:通过设置Cache-Control和Expires等响应头实现，可以让浏览器直接从本地缓存中读取资源而不发起请求。
2.协商缓存:通过设置Last-Modified和ETag等响.应头实现，可以让浏览器发送条件请求，询问服务器是否有更新的资源。如果服务器返回304NotModified响应，则表示客户端本地缓存仍然有效，可直接使用缓存的资源。
3. Service Worker缓存: Service Worker是一种特殊的JS脚本，可以拦截网络请求并返回缓存的响应，以实现离线访问和更快的加载速度等功能。 4. Web Storage缓存:包括localStorage和sessionStorage。localStorage 用于存储用户在网站_上的永久性数据，而sessionStorage则用于存储用户会话过程中的临时数据。
展开
评论
点赞
#每天一个知识点#
如何减少重排和重绘？
最小化重绘和重排，比如样式集中改变，使用添加新样式类名 .class 或 cssText 。
批量操作 DOM，比如读取某元素 offsetWidth 属性存到一个临时变量，再去使用，而不是频繁使用这个计算属性；又比如利用 document.createDocumentFragment() 来添加要被添加的节点，处理完之后再插入到实际 DOM 中。
使用 **absolute** 或 **fixed** 使元素脱离文档流，这在制作复杂的动画时对性能的影响比较明显。
开启 GPU 加速，利用 css 属性 transform 、will-change 等，比如改变元素位置，我们使用 translate 会比使用绝对定位改变其 left 、top 等来的高效，因为它不会触发重排或重绘，transform 使浏览器为元素创建⼀个 GPU 图层，这使得动画元素在一个独立的层中进行渲染。当元素的内容没有发生改变，就没有必要进行重绘
如何减少重排和重绘？
最小化重绘和重排，比如样式集中改变，使用添加新样式类名 .class 或 cssText 。
批量操作 DOM，比如读取某元素 offsetWidth 属性存到一个临时变量，再去使用，而不是频繁使用这个计算属性；又比如利用 document.createDocumentFragment() 来添加要被添加的节点，处理完之后再插入到实际 DOM 中。
使用 **absolute** 或 **fixed** 使元素脱离文档流，这在制作复杂的动画时对性能的影响比较明显。
开启 GPU 加速，利用 css 属性 transform 、will-change 等，比如改变元素位置，我们使用 translate 会比使用绝对定位改变其 left 、top 等来的高效，因为它不会触发重排或重绘，transform 使浏览器为元素创建⼀个 GPU 图层，这使得动画元素在一个独立的层中进行渲染。当元素的内容没有发生改变，就没有必要进行重绘
展开
1
点赞
#每天一个知识点#
CSS中的盒模型有以下两种：标准盒模型、IE（替代）盒模型。
两种盒子模型都是由 content + padding + border + margin 构成，其大小都是由 content + padding + border 决定的，但是盒子内容宽/高度（即 width/height）的计算范围根据盒模型的不同会有所不同：
标准盒模型：只包含 content 。
IE（替代）盒模型：content + padding + border 。
可以通过 box-sizing 来改变元素的盒模型：
box-sizing: content-box ：标准盒模型（默认值）。
box-sizing: border-box ：IE（替代）盒模型。
CSS中的盒模型有以下两种：标准盒模型、IE（替代）盒模型。
两种盒子模型都是由 content + padding + border + margin 构成，其大小都是由 content + padding + border 决定的，但是盒子内容宽/高度（即 width/height）的计算范围根据盒模型的不同会有所不同：
标准盒模型：只包含 content 。
IE（替代）盒模型：content + padding + border 。
可以通过 box-sizing 来改变元素的盒模型：
box-sizing: content-box ：标准盒模型（默认值）。
box-sizing: border-box ：IE（替代）盒模型。
展开
评论
点赞