优化前端网页性能

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

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

一、网页内容：

    经过减小http请求，减小DNS查询，延时加载不急切须要的内容，提早加载将要须要的内容，不要404页面，不用iframe等方式。

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

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

     

二、服务器：

     经过设置服务器使得提升网页性能的方式并非很熟练。主要有如下等方式：

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

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

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

     Gzip：是个效率提高的好东西，zip一般能够减小70%网页内容的大小，包括脚本、样式表、图片等文件。须要配置iis。

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

　　Get：get比post快。。。

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

三、图片：

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

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

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

                    why用它？ 对于小的图标仍是蛮合适的，可是公司好像并无常常用到它，然并卵。。。

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

四、cookies

     因为cookies是在http的报头中，因此若是不用cookies就把它禁了吧，用到也尽可能减少它。

五、css/js

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

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

      js写在body里，这个咱们知道，由于它会阻塞加载。

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

 

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