阅读更多

6顶
3踩

Web前端

原创新闻 网页加载速度优化技巧

2013-02-19 11:08 by 见习编辑 tyygming 评论(7) 有16076人浏览
在最近的几年里,Web网页的大小已经显著增大了。由HTTP Archive研究得出的结果表明,目前平均一个页面的大小是1.25M。对于拥有宽带的用户来说,可能并不是一个问题。但是对于那些网速并不理解的用户来说,可能会是一个非常头疼的问题。

首先我们看一个页面内容大小的饼图:



一、网页优化

1.  优化图片

这个绝对是显而易见的,可以看到图片占据的页面内容分量最重。在现代网页设计中,图片绝对占据了大部分的内容。你需要针对你的页面重新定义图片大小。这能够有效地帮助你减少页面大小。而且,这里有很多的功能能够帮助你针对图片减肥,例如,Smush.it和TinyPNG

2.  压缩CSS和Javascript代码

有效地压缩CSS和JavaScript代码能够有效地减少页面大小,你可以删除空格优化代码。当然,压缩代码对于代码阅读不是非常有用,但是一般作为产品环境来说,我们通过这种方式可以有效地减少页面加载时间。

3.  避免使用@import

@import CSS语法允许你加载其它的CSS文件。有时间非常有帮助,但是它并不是和主文件一起下载的,所以可能会增加页面加载时间。建议使用link标签,这样会更加高效。

4.  减少HTTP请求次数

减少HTTP请求次数可以帮助你有效的增加网站加载速度。你可以使用如下方式:

  • 融合文件:将不同的样式表文章合成一个文件可以减少http请求的次数。同样对于JavaScript来说也适用。
  • 使用CSS sprites:使用sprites可以帮助你把多个图片文件放置到一个文件里,这样可以减少图片下载的次数。

5.  利用浏览器缓存

可能你的网站中包含了一些并不常常变化的文件。例如图片、CSS、JavaScript等等。如果让浏览器来缓存文件的话可以帮助你增加网页加载速度。通常我们使用web服务器的配置来达到效果,如下:



比较简单的方式是更新服务器的.htaccess文件。代码如下:

   <IfModule mod_expires.c>
     
    # Enable Expirations
    ExpiresActive On
     
    # Default Expiration Time
    ExpiresDefault "access plus 1 month"
     
    # Expiration for Images
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType image/jpg "access plus 1 month"
    ExpiresByType image/jpeg "access plus 1 month"
     
    # Expiration for CSS
    ExpiresByType text/css "access plus 1 month”
     
    # Expiration for JavaScript
    ExpiresByType application/javascript "access plus 1 month"
     
    </IfModule>

二、网页加载速度测试工具

1.  pagespeed

pagespeed是来自Google的一个工具,可以帮助你分析web页面并且告诉你如何优化来提高效率。当然,你可以作为chrome的扩展来使用。



2.  speed tracer

另外一个来自于Google的工具,允许你更深层次的查看页面性能。



3.  YSLOW

一个浏览器的扩展,和pagespeed非常类似,拥有页面评分和等级。并且给你一些相关的推荐和解决方案。



4.  浏览器内建的开发者工具

很多浏览器例如,chrome和firefox都拥有自己内建的性能优化工具。可以帮助你了解页面加载的情况。



Via gbtags
来自: www.gbin1.com
6
3
评论 共 7 条 请登录后发表评论
7 楼 evoleht 2013-02-21 09:40
融合文件:将不同的样式表文章合成一个文件可以减少http请求的次数。同样对于JavaScript来说也适用。


这个讲的是什么意思呢? 是不是可以理解为,尽量将js代码、css代码写入到html中
6 楼 showr 2013-02-20 17:29
能 讲一点 <<前端性能优化指南>> 没讲过的吗?
5 楼 liangtu33 2013-02-20 16:22
入门级只是,简单、清晰、明了,不错。
4 楼 jacktom 2013-02-19 15:33
不是原创,翻译的文章,原文我看过。
3 楼 MonkeyBoy 2013-02-19 14:02
说得东西,浅显了.
2 楼 ad6543210 2013-02-19 13:10
引用
网速并不理解

引用
有时间非常有帮助
1 楼 dream_ait 2013-02-19 11:25
不错 

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • ASP BASE64加解密(亲测可用)

    之前脚本之家小编已经为大家分享了了几个asp BASE64加解密函数代码,不过实际用的过程中都有这样或那样的问题,现在重新整理一个

  • asp Base64 编码和解码

    【代码】asp Base64 编码和解码。

  • ASP用于BASE64的编解码

    我以前收藏的一段代码,ASP的是用于BASE64的编解码的:sBASE_64_CHARACTERS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/" sBASE_64_CHARACTERS = strUnicode2Ansi(sBASE_64_CHARACTERS)计算unicode字符串的Ansi编码的长度

  • 用ASP写Base64编码数据到文件

     function WriteBase64File(fileName, content)  Dim xml  Set xml=Server.CreateObject("MSXML2.DOMDocument")  Dim stm  Set stm=Server.CreateObject("ADODB.Stream")  Set root = xml.createElement("tif")  roo

  • asp base64加密的函数 测试可用,秒杀全网

    可能asp真的老了,最近要找一个asp版的base64加密方式,竟然全网搜到的代码测试都没用,其实也不是说没用,就是虽然用网上的这些asp版的函数进行base64编码了,但是在前端无法解开。最后在google上才找到答案,一下是我修改测试可用了的。直接调用Base64Encode即可。 为什么要搞这个?是因为有个老古董网站是GBK的,而json传输中文总是会乱码,因此不得已用base64转码来规避这个问题。前端js解码简单,找到特征字符串然后解密替换即可。主要代码如下: 以上是假设返回....

  • 用asp实现base64编码

    &lt;% '程序设计,环球万维:http://www.netinter.cn '专业提供域名注册,虚拟主机服务 ''以上信息与文章正文是不可分割的一部分,所以如果您要转载本文章,您必须保留以上信息. function bin2dec(binstr) towpow=1 numlen=len(binstr) bin2dec=0 decpos=...

  • Asp:base64编码、解码函数

    Asp:base64编码、解码函数www.xufei.net [2003-3-6] base64编码、解码函数 这是我看完几个base64编码、解码函数后自己改写的。因为,在中文操作系统的VBscript中,使用的是unicode字符集,所以很多base64编码、解码函数在理论上是正确的,但实际不能运行!文件名称base64test.aspsBASE

  • Base64编码和解码字符串

    闲来无事用C++写了一个Base64编码和解码的小程序 Base64.h #ifndef _BASE64_H #define _BASE64_H /* Base64是一种基于64个可打印字符来表示二进制数据的表示方法,从本质上看Base64编码就是将三字节转四字节。 如果数据的长度不是3的整数倍,就要在后面补0再计算,每补2个0就再Base64串后加上1个‘=’。 Base64的不足之处

  • ASP读JPG/PNG/BMP图片转base64位数据,可实现上传功能。

    asp上传图片之 转base64上传至服务器再保存为图片。可支持PNG、JPG、BMP

  • asp php base64 加密解密,base64加密解密_php base64_decode 解码方法

    base64加密解密_php base64_decode 解码方法观点1:php实现base64加密解密在PHP中我们可以直接使用PHP自带的函数 base64_encode() 和 base64_decode() 进行加密和解密,废话不说了,我们直接进入正题:例子 1.base64_encode() 示例$str = 'This is an encoded string';echo base64...

  • base64编码与解码(双字节,asp)

    function bin2dec(binStr)    towPow=1    numLen=len(binStr)    bin2Dec=0    decPos=numLen    do while decPos>0        cChar=mid(binStr,decPos,1)        nChar=Cint(cChar)        bin2Dec=bin2Dec+nChar*to

  • Asp base64转换

    绝对好用的Asp + Js BASE64转换,汉英都正常

  • asp读取一个图片并转为base64编码

    Function ImagesToBase64(FileName) Dim xml Dim root Dim fs Dim FilePath Dim objStream Dim objXMLDoc Dim Base64 ''定义变量完结 '创建对像 FilePath=Server.MapPath(FileName) getFileExt = Mid(FilePath, Ins

  • 汉字转化base64

    2019独角兽企业重金招聘Python工程师标准&gt;&gt;&gt; ...

  • asp将base64的图片信息,转为图片显示,并保存到指定路径

    dim content,user_serial,path Dim xml : Setxml=Server.CreateObject("MSXML2.DOMDocument")   Dim stm : Setstm=Server.CreateObject("ADODB.Stream")  xml.resolveExternals=False   user_serial=Request(

Global site tag (gtag.js) - Google Analytics