码迷,mamicode.com
首页 > Web开发 > 详细

优化前端网页性能

时间:2015-07-03 15:42:49      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:

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

网页内容、服务器、图片、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里,这个我们知道,因为它会阻塞加载。

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

 

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

优化前端网页性能

标签:

原文地址:http://www.cnblogs.com/vvy-404/p/4618658.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!