前端性能优化到底在优化什么？怎么优化( 三 ) _前端性能优化

如何最小化重绘和重排

用 translate 替代 top
用 opacity 替代 visibility
不要一条一条的修改 DOM 的样式，预先定义好 class，然后修改 DOM 的 className
把 DOM 离线后修改，比如：先把 DOM 给 display: none（有一次 reflow），然后修改100次，然后再显示出来
不要把 DOM 节点的属性值放在一个循环里当成循环里的变量
不要使用 table 布局，可能很小的一个改动就会造成整个 table 的重新布局
动画实现的速度的选择
对于动画新建图层
启用 GPU 硬件加速

文章插图

浏览器缓存强缓存
发现有缓存直接用。

文章插图

Expires: 绝对时间，判断客户端日期是否超过这个时间

Cache-Control：相对时间，判断访问间隔是否大于3600秒

//在设定时间之前不会和服务端进行通信了

//如果两个都下发以后者为准
协商缓存
询问服务器缓存是否可以用，在进行判断是否用。
Last-Modified/If-Modified-Since
第一次请求，respone的header加上Last-Modified（最后修改时间）

再次请求，在request的header上加上If-Modified-Since

和服务端的最后修改时间对比，如果没有变化则返回304 Not Modified，但是不会返回资源内容；如果有变化，就正常返回资源内容。浏览器收到304的响应后，就会从缓存中加载资源

如果协商缓存没有命中，浏览器直接从服务器加载资源时，Last-Modified的Header在重新加载的时候会被更新
Etag/If-None-Match
这两个值是由服务器生成的每个资源的唯一标识字符串，只要资源有变化就这个值就会改变；其判断过程与Last-Modified/If-Modified-Since类似，他可以精确到秒的更高级别。
DNS预解析

<meta http-equiv="x-dns-prefetch-control" content="on"><link rel="dns-prefetch" href=https://www.isolves.com/it/cxkf/bk/2020-03-11/"//www.web.net">

在一些浏览器的a标签是默认打开dns预解析的，在https协议下dns预解析是关闭的，加入mate后会打开。

文章插图

图片优化减小图片大小
我看到有的文章通过计算图片大小来优化图片，就是说：
比如一张100*100的图片，图片上有10000个像素点，如果每个像素的值是RGBA存储的话，那么也就是说每个像素有4个通道，每个通道1个字节（8位 = 1个字节），所以该图片的大小大概为39KB 。所以说通过：

减少像素点
减少每个像素点能够显示的颜色

上面的两种方式减小图片的大小，不过在我们开发中直接压缩来减小图片的大小。
改变图片的格式
这个图片的类型也决定着图片的属性，详细的我再微头条说过，附上链接：
各种图片格式的特点

文章插图

节流和防抖日常开发过程中，滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿，这时候我们更希望把多次计算合并成一次，只操作一个精确点，JS把这种方式称为debounce（防抖）和throttle（节流）
函数节流
当持续触发事件时，保证在一定时间内只调用一次事件处理函数，意思就是说，假设一个用户一直触发这个函数，且每次触发小于既定值，函数节流会每隔这个时间调用一次
用一句话总结防抖和节流的区别：防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行
实现函数节流我们主要有两种方法：时间戳和定时器

var throttle = function(func, delay) {var prev = Date.now();return function() {var context = this;//this指向windowvar args = arguments;var now = Date.now();if (now - prev >= delay) {func.Apply(context, args);prev = Date.now();}}}function handle() {console.log(Math.random());}window.addEventListener('scroll', throttle(handle, 1000));

这个节流函数利用时间戳让第一次滚动事件执行一次回调函数，此后每隔1000ms执行一次，在小于1000ms这段时间内的滚动是不执行的
函数防抖当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定时间到来之前，又触发了事件，就重新开始延时。也就是说当一个用户一直触发这个函数，且每次触发函数的间隔小于既定时间，那么防抖的情况下只会执行一次。