前端性能优化总结

1、减少http请求
打开任意一个web站点，打开F12里的Network，我们都可以很直观的看到一些信息，如下图：


请求文件、状态码、文件类型、大小、请求消耗的时间，一目了然，这里我们可以发现，http请求数直接影响网页打开的速度，从请求源的类别（主要以图片、js、css为主），我们可以做这些优化：

a  捆绑文件

对于一个站点的网页，在开发过程应当对css和js的做合理的规划，公共样式，公共js的抽离，可以使代码简介，直接减少大小；现在有一些打包工具，可以将多个css文件或者js文件打包成1个文件，通过这种方式来减少http请求次数，缩短页面的响应时间。我目前使用的是vue的框架，用webpack打包项目，可以做到这一点，有需求的朋友可以留言。

b  css sprites

也叫css精灵，就是把多个图片制作成一张图，然后根据“background-image”，“background- repeat”，“background-position”的组合进行背景定位，这样就降低了http请求数。

随着icon字体图标的出现，一些小图都可以使用字体图标来实现，具体参考阿里的图标库，个人觉得还是这个用起来方便，还可以分项目建立图标集合，还可以“拉帮结伙”，把自己的组员拉进来一起使用，非常方便，官网：http://www.iconfont.cn/

c  inline images

可以把图片转换成base64编码之后的字符串内嵌与网页中，如：

.sample-png {
padding-left: 20px;
background: white url('data:image/png;base64,iVBORw0KGgoAA
AANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0l
EQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6
P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') no-repeat scroll left top;
}

如何把图片转成base64的编码呢？可以试试以下代码：

选择图片：  

<input type="file" id="img">  

<br/>  

<button id="start">开始转换</button>  

<div>  

    预览：<img id="imgShow" src="" alt="">  

</div>  

<b>Base64数据：</b>  

<textarea rows=15 cols=60 id="conte"></textarea>  

<button id='cpData'>复制</button><span id="succ"></span>  

<div id="len">数据长度：</div>  

<script>  

    var img = document.getElementById('img')  

        , imgShow = document.getElementById('imgShow')  

        , conte = document.getElementById('conte')  

        , len = document.getElementById('len')  

        , start = document.getElementById('start')  

        , cpData = document.getElementById('cpData');  

  

    cpData.addEventListener('click', cpDataF);  

    start.addEventListener('click', startt);  

  

    /*转换函数*/  

    function startt() {  

        var imgFile = new FileReader();  

        imgFile.readAsDataURL(img.files[0]);  

        imgFile.onload = function () {  

            var imgData = this.result; //base64数据    

            imgShow.setAttribute('src', imgData);  

            conte.value = imgData;  

            len.innerHTML += imgData.length;  

        }  

    }  

  

    /*复制数据*/  

    function cpDataF() {  

        conte.select(); // 选择对象    

        var cpd=document.execCommand("Copy"); // 执行浏览器复制命令    

        cpd ? document.getElementById('succ').innerHTML = '复制成功' :　console.warn('复制失败');  

        window.setTimeout(function () {  

            document.getElementById('succ').innerHTML = '';  

        }, 1000)  

    }  

</script>  

2、减少DNS查询
如果网页上包含了一些外部链接，图片或者脚本，在首次加载是会一定程度影响页面的加载。

3、ajax缓存
一些不经常变化的数据，添加Expires 或 Cache-Control报文头使数据缓存在客户端缓存，通过时间戳的方式来判断是否要重新去获取数据；不要通过返回结果来判断是否页面是否跳转。

4、根据实际情况运用延迟加载和预加载
5、减少DOM元素的数量
6、静态资源抽取出去，包含图片，js，css等，可以使用cdn
7、减少iframe的使用，个人不太喜欢用这个东西
8、避免404，目前用的vue项目里都带了404的组件页面，这样服务器端返回的404基本不存在
9、样式置顶 脚本置底 压缩js css
10、避免在页面上缩放图片，需要多大的图让美工就做多大的