注
缓存对于前端性能优化来说是个很重要的点,良好的缓存策略可以降低资源的重复加载提高网页的整体加载速度。
通常浏览器缓存策略分为两种:强缓存和协商缓存。
实现强缓存可以通过两种响应头实现:Expires
和 Cache-Control
。强缓存表示在缓存期间不需要请求,state code
为 200
Expires: Wed, 22 Oct 2018 08:41:00 GMT
Expires
是 HTTP / 1.0
的产物,表示资源会在 Wed, 22 Oct 2018 08:41:00 GMT 后过期,需要再次请求。并且 Expires
受限于本地时间,如果修改了本地时间,可能会造成缓存失效。
Cache-control: max-age=30
Cache-Control
出现于 HTTP / 1.1,优先级高于 Expires
。该属性表示资源会在 30 秒后过期,需要再次请求。
重绘和回流是渲染步骤中的一小节,但是这两个步骤对于性能影响很大。
color
就叫称为重绘回流必定会发生重绘,重绘不一定会引发回流。回流所需的成本比重绘高的多,改变深层次的节点很可能导致父节点的一系列回流。
所以以下几个动作可能会导致性能问题:
很多人不知道的是,重绘和回流其实和 Event loop 有关。
以上就是一帧中可能会做的事情。如果在一帧中有空闲时间,就会去执行 requestIdleCallback
回调。
translate
替代 top
<div class="test"></div> <style> .test { position: absolute; top: 10px; width: 100px; height: 100px; background: red; } </style> <script> setTimeout(() => { // 引起回流 document.querySelector('.test').style.top = '100px' }, 1000) </script>
使用 visibility
替换 display: none
,因为前者只会引起重绘,后者会引发回流(改变了布局)
把 DOM 离线后修改,比如:先把 DOM 给 display:none
(有一次 Reflow),然后你修改 100 次,然后再把它显示出来
不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
for (let i = 0; i < 1000; i++) { // 获取 offsetTop 会导致回流,因为需要去获取正确的值 console.log(document.querySelector('.test').style.offsetTop) }
requestAnimationFrame
Load 事件触发代表页面中的 DOM,CSS,JS,图片已经全部加载完毕。
DOMContentLoaded 事件触发代表初始的 HTML 被完全加载和解析,不需要等待 CSS,JS,图片加载。