优化前端网页性能

综合来看，优化前端网页性能有以下几种方式：

网页内容、服务器、图片、cookie、css/js文件处理等方式。

1、网页内容：

    通过减少http请求，减少DNS查询，延时加载不急切需要的内容，提前加载将要需要的内容，不要404页面，不用iframe等方式。

    减少http请求次数：将文件捆绑打包，将图片合并。

    减少DNS 查询：本地上可以清除DNS记录，但是这只能让本地浏览速度加快，服务器上怎么设置呢？

     

2、服务器：

     通过设置服务器使得提高网页性能的方式并不是很熟练。主要有以下等方式：

 　 CDN、Expires/Cache-Control、Gzip、Etags、Get Ajax 、避免空src

　　cdn：分布式存储、负载均衡、网络请求的重定向和内容管理（就是将网站的内容发布到最接近用户的网络"边缘""，使用户可以就近取得所需的内容，解决Internet网络拥塞状况，提高用户访问网站的响应速度。）

     Expires/Cache-Control：静态内容永不过期，动态内容动态加载。

     Gzip：是个效率提升的好东西，zip通常可以减少70%网页内容的大小，包括脚本、样式表、图片等文件。需要配置iis。

　　Etags：就是将网页内容标记，然后让服务器更好判断这是神马东东。

　　Get：get比post快。。。

　　当然要避免空的src了，空的还要发送一个请求，然后浏览器还要返回个空值，不浪费才怪。。。

3、图片：

    优化图片（就是让它小，更小，或者在移动设备上用媒体查询的方式让它小。。。）。

    css sprite ：一个神奇的拼图片，然后再切图片的想法。

                    如何切？ （人家是用position定位的，没错，就是这么简单粗暴。）

                    why用它？ 对于小的图标还是蛮合适的，但是公司好像并没有经常用到它，然并卵。。。

    不要在html中缩放图片，如果用小图，就把图弄小。。。 （这个美工负责么？）

4、cookies

     由于cookies是在http的报头中，所以如果不用cookies就把它禁了吧，用到也尽量减小它。

5、css/js

　　将css文件放在head中，因为这样做可以使浏览器逐步加载已将下载的网页内容，然后就慢慢看到了它加载完成的东西啦，不用面对个白屏。

      尽量不用css表达式（这个真不经常用，类似if else语句的东西(new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" ）丑丑的语句。

      js写在body里，这个我们知道，因为它会阻塞加载。

      去除重复脚本，线上环境下，去除空格注释也可。

 

好吧，这么多条，终于总结完了，除了服务器上的设置，其他的已经基本搞清楚怎么回事了，以后多接触，多学习，多捣鼓。