面试之性能优化

页面级的优化（http优化）

减少http的请求

1. css sprites（雪碧图）

CSS Sprites其实就是把网页中一些背景图片整合拼合成一张图片中，再利用DIV CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片在布局盒子对象位置。

    <ul class="sprites">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

    ul{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    ul li{
        width: 70px;
        height: 70px;
        background: url(images/img/png);
    }
    ul li:nth-child(1){
        background-position: 0 0;
    }
    ul li:nth-child(2){
        background-position: -70 0;
    }
    ul li:nth-child(3){
        background-position: -140 0;
    }
    ul li:nth-child(4){
        background-position: -210 0;
    }
    ul li:nth-child(5){
        background-position: -280 0;
    }

2. 使用CDN
静态资源尽量使用 CDN 加载

3. 压缩合并代码
4. 使用DNS预解析

通过预解析的方式来预先获得域名所对应的 IP。

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

代码级的优化

1. 减少dom操作，用innerHTML代替DOM操作
   

第一块过桥过了5000次，每循环一次就需要过一次桥，第二块只过了一次，循环结束之后才操作DOM

vue和react里有个概念叫虚拟DOM，这个虚拟的会和真实的作对比，有差异就修改，没有就保持

2. 异步加载

    <script src="jquery.js" defer></script>
    <script src="jquery.min.js" async></script>
    <div></div>

浏览器对页面进行一行一行的解析，到script src标签时，后面就不再解析了。js会操作DOM
有defer属性的script标签，会继续往下解析，同时下载引入的文件，然后等页面解析完成，文件下载完成再执行下载的文件
有async属性的script标签，会继续往下解析，同时下载引入的文件,文件下载完成后就执行下载的文件,执行完成后再继续往下解析

3. 事件代理
   找到父级，把事件给父级，通过事件源触发

4. 使用requestAnimationFrame来代替setTimeout和setInterval

屏幕刷新频率：屏幕每秒出现图像的次数。普通笔记本为60Hz
动画原理：计算机每16.7ms刷新一次，由于人眼的视觉停留，所以看起来是流畅的移动。
setTimeout：通过设定间隔时间来不断改变图像位置，达到动画效果。但是容易出现卡顿、抖动的现象；原因是：1、setimeout任务被放入异步队列，只有当主线程任务执行完后才会执行队列中的任务，因此实际执行时间总是比设定时间要晚；2、setimeout的固定时间间隔不一定与屏幕刷新时间相同，会引起丢帧。

requestAnimationFrame不需要设置时间，由系统决定，会跟着浏览器的刷新频率而执行，就不会出现丢帧或者卡顿

      var box = document.getElementsByTagName("box")[0];
      var timer = requestAnimationFrame(function fn() {
        box.style.width = box.offsetWidth + 5 + "px";
        box.innerHTML = box.offsetWidth / 5 + "%";
        //requestAnimationFrame只能走一次，所以在动画没有结束前，递归渲染
        timer = requestAnimationFrame(fn);
		//关闭requestAnimationFrame
		if(box.offsetWidth >=500){
			cancelAnimationFrame(timer)
		}
      });

requestAnimationFrame是html5新增，兼容性如下：

7. 图片懒加载
防止页面一次性向服务器发送大量请求，导致服务器响应面，页面卡顿崩溃等。