3-15 常用的页面优化实现方案？

一、页面内容优化

减少http请求次数
减少DNS查询次数
避免页面跳转
缓存ajax
延迟加载（一般用在图片多的页面中，滚动时才加载）
预加载
减少DOM元素数量
减少iframe数量
避免404

关键资源个数越多，首次页面加载时间就会越长
关键资源的大小，内容越小，下载时间越短
优化白屏：使用SSR加速首屏加载（耗费服务端资源），有利于SEO优化。 首屏利用服务端渲染，后续交互采用客户端渲染

二、css优化

将样式表置顶将 （CSS放在 HEAD中，防止浏览器有可能还未下载和解析到 CSS就已经开始渲染页面）
避免css表达式
用link代替@import
避免使用filters
css文件合并与压缩

三、js代码优化

通过async、defer异步加载文件
将脚本置底（将脚本内容在页面信息内容加载后再加载）
使用外部javascript和css文件
去除重复脚本，避免重复的资源请求
减少DOM访问（修改和访问DOM元素会造成页面的重绘和重排，循环对DOM操作更是减慢页面加载速度）
js文件合并与压缩
使用webworker解决程序阻塞问题。如果遇到计算量比较大，做一些复杂计算时候可以采用webworker。
滚动优化IntersectionObserver。咱们可以用它来监听元素是否进入可视区域，这个api的性能要比onScroll好

四、图片优化

优化图片大小
尽量使用css sprite（精灵图也叫雪碧图）
不要在html中缩放图片
使用小且可缓存的favicon.ico

五、减少Cookie传输

Cookie包含在每次请求和响应中，太大的Cookie会严重影响数据传输，因此哪些数据需要写入Cookie需要慎重考虑，尽量减少Cookie中传输的数据量。

六、浏览器端使用缓存

CSS、JavaScript、Logo、图标这些静态资源文件更新的频率都比较低，而这些文件又几乎是每次HTTP请求都需要的，如果将这些文件缓存在浏览器中，可以极好地改善性能。
用法：通过设置HTTP头中的Cache-Control和Expires属性，可设定浏览器缓存，缓存时间可以是数天，甚至是数月。

七、服务器端使用压缩

在服务器端对文件进行压缩，在浏览器对文件解压缩，可有效减少通信传输的数据量。文本文件的压缩率可达80%以上，因此HTML、CSS、JavaScript文件启用GZip压缩可达到较好的效果。但是压缩对服务器和浏览器产生一定的压力，在通信带宽良好，而服务器资源不足的情况下要权衡考虑

8、课外扩展

IntersectionObserver这个api的用法和MutationObserver用法一样，只不过它主要用来监控元素是否进入可视区域。通常我们判断一个元素是否进入可视区域都是通过onScroll事件来实现，但现在可以用这个api，它的性能比onScroll高，因为它只有在元素进入可视区域才会触发监听事件，但onScroll会一直触发滚动事件。
requestAnimationFrame和requestIdleCallback

咱们浏览器一般的刷新频率是60hz，每秒要刷新60次，那么1秒对于1000毫秒，相对于刷新一次需要1000/60 = 16.6ms。也就说每隔16.6ms浏览器就会刷新一次，因为浏览器是一帧一帧的绘制，一帧就相当于刷新一次，所以浏览器执行一帧的时间就是16.6ms。

在介绍requestAnimationFrame之前，咱们先来看下定时器执行的动画：

从浏览器的performance中看出，有的时候一次绘制里面包含了两个定时器，所以用定时器实现的绘制有的时候会看到移动了两步。这是因为浏览器并不是每次事件轮询在渲染阶段都会进行渲染的，他会看本次进行渲染距离上次渲染的时间是否超过16.6ms，如果超过才会进行渲染，否则跳过渲染阶段进入下次的宏任务执行。
为了解决这种绘制不连续的问题呢，咱们可以使用requestAnimationFrame，每次浏览器进入渲染阶段都会先执行这个回调函数。

一定要记住requestAnimationFrame回调函数是在浏览器每次进入渲染阶段前都会执行的，至于浏览器是否进行渲染这又是一堆的判断，他要看本次渲染距离上次渲染是否达到或超过一个渲染时间，或者当前页面是否被隐藏了等等。所以你说requestAnimationFrame每隔16.6ms会执行一次是不对的，这取决与浏览器当前是否进行渲染。默认咱们浏览器的刷新频率是60Hz，有的时候会出现降帧的情况30Hz等，这样就不能保证16.6ms进行渲染。
虽然说一般浏览器绘制一帧是16.6ms的时间，但是实际执行一帧要么就大于16.6ms，要么就小于16.6ms。当小于16.6ms时浏览器本次刷新就会出现空闲时间，这个时候我们可以利用这个空闲时间做点事情：requestIdleCallback。

当我们执行的宏任务过多时，可以把任务进行分片，将一些低优的任务放在浏览器空闲时间段内执行。