前端面试题复习 - 性能优化

图片加载优化

• 很多修饰类图片完全可以用css代替
• 对于移动端来说，很多图片都可以用CDN加载
• 小图使用base64格式
• 使用雪碧图
• 能够显示WebP格式的浏览器尽量使用WebP格式。因为WebP格式具有更好的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量，缺点就是兼容性不好
• 图标尽量用SVG格式

DNS预解析

DNS解析也需要时间，可以用预解析来预先获得域名所对应的IP

<link rel = "dns-prefetch" href="yuchengkai.cn">

CDN

尽量用CDN加载静态资源，同时因为浏览器对于单个域名有并发请求上限，可以考虑使用多个CDN域名

懒加载

懒加载就是将不关键的资源延后加载

懒加载的原理就是只加载自定义区域（通常是可视区域，也可以是即将进入可视区域）内需要加载的东西。对于图片来说，先设置图片标签的src属性为一张占位图，将真实的图片资源放入一个自定义属性中，当进入自定义区域时，就将自定义属性替换为src属性，这样图片就会去下载资源，实现了图片懒加载

懒加载不仅可以用于图片，也可以使用在别的资源上，比如进入可视区域才开始播放视频

懒执行

懒执行就是将某些逻辑延迟到使用时再计算。该技术可以用于首屏优化，对于某些耗时逻辑并不需要再首屏就使用的，就可以使用懒执行。懒执行需要唤醒，一般可以通过定时器或者事件的调用来唤醒

预渲染

可以通过预渲染将下载的文件预先在后台渲染

<link rel="prerender" href="http://example.com">

预渲染虽然可以提高页面的加载速度，但是要确保该页面大概率会被用户在之后打开，否则就是白白浪费资源去渲染

节流

例如滚动会发送网络请求，但我们并不希望用户在滚动过程中一直发送请求，而是每隔一段时间发起一次，对于这种情况就可以使用节流

防抖

例如某个按钮点击会触发网络请求，但是我们并序希望每次点击都发送网络请求，而是用户点击按钮一段时间后再次点击的情况才会去发送网络请求，对于这种情况我们就可以使用防抖。