踏歌笙
狗粮品尝师
|
江城之光
获得徽章 7
- #每天一个知识点#
在浏览器中，有以下几种常见的缓存:
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 图层，这使得动画元素在一个独立的层中进行渲染。当元素的内容没有发生改变，就没有必要进行重绘展开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（替代）盒模型。展开评论点赞