# 性能优化的方法  优化的目的在于： 1. 多使用内存 缓存 2. 减少CPU GPU计算，更快展现 主要优化方向有： 1. 加载优化：即提升网络加载，压缩体积 2. 渲染优化：优化页面渲染 ## 网络传输性能优化 #### 1.使用HTTP缓存 #### 2.资源打包 使用webpack与gzip进行资源打包，压缩文件体积。 #### 3.图片优化 **不要在HTML中缩放图像**：在使用200* 200的图像时，不要使用400* 400的图像再将宽高设为200。 **使用雪碧图**：多张图片拼接在一起时，会比这些图片的和小。所以使用雪碧图不仅可以减少ajax请求，也可以压缩文件体积。 **使用矢量图icon** **使用CDN** ## 页面渲染性能优化 #### CSS 放前面，JS放后面 CSS 放在HTML头部的原因： > 这样会让浏览器尽早拿到 CSS 尽早生成 CSSOM，然后在解析 HTML 之后可一次性生成最终的 RenderTree，渲染一次即可。如果 CSS 放在 HTML 底部，会出现渲染卡顿的情况，影响性能和体验。 > JS 放在 HTML 底部的原因： > 保证让浏览器优先渲染完现有的 HTML 内容，让用户先看到内容，体验好。另外可以保证JS代码正确获取DOM。 > #### 懒加载 首先将页面上的图片的 src 属性设为空字符串，而图片的真实路径则设置在data-original属性中， 当页面滚动的时候需要去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入可视区域,如果图片在可视区内将图片的 src 属性设置为data-original 的值，这样就可以实现延迟加载。 ~~~ <img src="" class="image-item" lazyload="true" data-original="images/1.png"/> ~~~ 实现： ~~~ function imgLazyLoad(el) { let imgs = [].slice.call(document.querySelectorAll(el)); function isInSight(el) { const bound = el.getBoundingClientRect(); return bound.top <= window.innerHeight + 100 && bound.bottom >= -100; // 添加预留量 } function loadImg(el) { if (el.src !== el.dataset.src) { el.src = el.dataset.src; } } return function checkImgs() { for (var i = 0; i < imgs.length;) { if (isInSight(imgs[i])) { loadImg(imgs[i]); imgs.splice(i, 1); if (!imgs.length) { window.removeEventListener('scroll', lazyload); } } else { i++; } } }; } function throttle(fn, interval = 500) { let canRun = true; return function () { if (!canRun) return; canRun = false; setTimeout(() => { fn.apply(this, arguments); canRun = true; }, interval) } } var lazyload = throttle(imgLazyLoad('.my-photo')); window.addEventListener('DOMContentLoaded', lazyload); window.addEventListener('scroll', lazyload); ~~~ 通过scrollTop判断是否处在屏幕之内。 #### defer async defer与async都是可以延迟脚本执行 但是 async不能保证按顺序执行 defer可以，且defer只有ie支持。 #### 事件节流/去抖-->单独列出 #### 减少DOM操作 #### SSR后端渲染