性能优化

性能优化有很多内容

1）图片优化

减少图片大小：减少像素点；减少每个像素点能显示的颜色；

图片加载优化：

对于移动端来说，CDN加载可以计算适配屏幕的宽度，然后请求裁剪好的图片；

小图使用base64；

将多个图标文件整合到一张图片中；

选择正确的图片样式：webP格式具有更好的图像数据压缩算法，带来更小的体积，兼容性不好；照片使用JPEG；小图使用PNG；图标SVG。

2）DNS预解析：提前获取域名对应的ip

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

3）节流:规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

 // 节流，每隔一段时间执行一次
var throttle = function(func, delay) {
    var timer = null;
    var startTime = Date.now();
    return function() {
            var curTime = Date.now();
            var remaining = delay - (curTime - startTime);
            var context = this;
            var args = arguments;
            clearTimeout(timer);
             if (remaining <= 0) {
                   func.apply(context, args);
                   startTime = Date.now();
             } else {
                   timer = setTimeout(func, remaining);
             }
     }
}   

 

应用：

• 鼠标不断点击触发，mousedown(单位时间内只触发一次)
• 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

4）防抖:在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

// 防抖，只执行最后一次
   

function debounce(fn, wait) {
   var timeout = null;
   return function() {
       if(timeout !== null)
               clearTimeout(timeout);
       timeout = setTimeout(fn, wait);
   }
}

应用：

• search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
• window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

5）预加载

用来指定页面加载后很快会被用到的资源。对于这种即刻需要的资源，你可能希望在页面加载的生命周期的早期阶段就开始获取，在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用，且更不易阻塞页面的初步渲染，进而提升性能。

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

6）预渲染：在后台渲染

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

7）懒执行

将某些逻辑延迟到使用时再计算，可用于首屏优化，一般通过定时器或者时间调用唤醒

8）懒加载

只加载自定义区域（通常是可视区域，但也可以是即将进入可视区域）内需要加载的东西。

对于图片来说，先设置图片标签的 src 属性为一张占位图，将真实的图片资源放入一个自定义属性中，当进入自定义区域时，就将自定义属性替换为 src 属性，这样图片就会去下载资源，实现了图片懒加载。

9）CDN：尽可能再各地分布机房缓存数据