3、探究CSS和JS阻塞问题( 七 ) _css

骨架屏是在页面完全渲染之前，用户会看到一个样式简单，绘制了页面大致框架，在感知到页面加载完成时，会替换到骨架屏占位的部分。在现在很多应用中都已经得到试用，如知乎，简书，饿了么等。
骨架屏技术主要有两种实现方式。
1、数据没有渲染到页面前，绘制相应图形，为要渲染的DOM元素进行占位2、前端提前获取DOM节点的形状，等待数据的渲染
10、GPU硬件加速
GPU硬件加速（）主要是利用电脑的硬件设备即GPU，分担CPU的一部分任务，降低CPU使用率，从而达到使浏览器运行更加顺畅的目的。
详情请参考初探GPU硬件加速。
三、JS中的其它性能优化 1、不要覆盖原生JS方法
无论JS代码如何优化，都比不上原生方法，因为原生方法使用低级语言写的（C/C++）,并且被编译成机器码，成为了浏览器的一部分。当原生方法可用时，尽量使用它们，特别是数学运算和 DOM 操作。
2、使用事件委托简化代码

苹果
香蕉
凤梨

3、JS动画
避免大量使用JS动画，CSS3动画和动画都比JS动画性能好。
推荐使用e来代替和，因为e可以在正确的时间进行渲染，定时器无法保证渲染时机。
注意，不要再定时器中绑定事件。
4、节流和防抖
概述
节流和防抖本质上是一种优化高频率执行代码的一种手段。
例如浏览器的、、、等事件在触发时，会不断调用绑定在事件上的回调函数，极大的浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制，对此，我们可以采用节流和防抖的方法来减少调用频率。
节流（）
n秒内只运行一次，若在 n 秒内重复触发，只有一次生效。

const throttle = (fn, delay) => {let timer = null// 标志是否可以执行函数let flag = truereturn function(...args) {if (!flag) returnif (timer) clearTimeout(timer)flag = falsetimer = setTimeout(() => {fn(...args)flag = true}, delay)}}

防抖（）
n秒后在执行该事件，若在 n 秒内被重复触发，则重新计时。

const debounce = (fn, delay) => {let timerreturn function(...args) {if (timer) {clearTimeout(timer)}timer = setTimeout(() => {fn.apply(this, args)}, delay)}}

4、图片懒加载
不管是PC还是移动端，图片一直是流量大头。页面中，先不给图片设置路径，当文档解析好，出现在浏览器可视区后，再去加载真正的图片，这就是延迟加载。对图片很多的网站来说，一次性加载全部图片，会对用户体验造成很大影响，所以需要使用图片延迟加载。
5、使用 webp 格式的图片
webp是团队开发的加快图片加载速度的图片格式，其优势体现在具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量。同时具备了无损和有损的压缩模式。
webp既可以有损（代替JPEG），也可以无损（代替PNG），还可以动（代替gif），并且在压缩率上全面超越了这三种常用的格式。
四、Vue项目性能优化 1、合理使用v-if和v-show
v-if
v-if是真正的条件渲染，它会确保在切换过程中，条件块内的事件监听器和子组件适当的被销毁和重建。v-if也是惰性的，如果在初始渲染时条件为假，则什么都不会做，直到条件第一次变为真时，才会开始渲染条件块。
v-show
不管初始条件是什么，元素总会被渲染，并且只是简单的基于CSS的属性进行切换。