五招加速网页响应时间
1. 使用Yslow概览与测量网站加载时间
在决定什么出问题之前,知道网站的加载时间是第一步。它也能让你知道你是否需要为网站加速进行更改。
在我们开始之前,如果你还没有安装YSlow, 请安装。他是Mozilla Firefox的一个扩展,你可从下面的链接找到它:https://addons.mozilla.org/en-US/firefox/addon/5369
第一,让我们浏览Six Revisions网站,我们都使用相同的例子进行测试(仅需要在新的标签或者浏览器窗口中打开)。
在浏览器的有效叫,有里程表的一栏(如图1)。在其旁边,当网页完成加载以后,你会看到"YSlow"和数字。数字代表浏览器加载网站所花费的时间(以秒计)。我们希望这个数字保持尽可能低的水平。
等级领域
让我们贯穿每个等级因素,下面是每个等级领域的简短秒速,以及如何解决这些问题实现最佳的性能。
减少HTTP请求:当网页从服务器获取文件的时候便有HTTP请求产生。 范围包括脚本,CSS文件,图片以及asynchroneous客户端/服务端请求 (Ajax和其他变化的技术)。这是提及性能时的关键处,但是只需费点体力便能很容易解决。例如,尽可能的合并脚本,CSS,以及图像,在用户的机器上缓存文件常常有帮助。
添加期限头部: 80% 的页面加载时间都于下载脚本,图片以及CSS有关. 多数情况下,这些元素在用户的机器中不会发生改变,你可以通过在.htaccess中添加代码缓存在用户本地机器中(我们会在文章的后面对如何操作进行讨论)。
Gzip 部件: Gziping或者压缩JS文件,图片,HTML文档,CSS文档等等。用户可以下载较小的文件版本,增加网页的加载速度。 这样可以降低服务器的消耗,但是解压缩部件也可能导致页面响应变慢,这取决于用户的浏览器。
把CSS放在顶端: 把CSS文件放在网站的顶端,可以是网站尽可能同时加载其他部件,如图像和文字。
把js放在底端: 把CSS放在文档的头部,仅需要在关闭<boby>前插入js.在这些脚本在后台加载的同时,用户先得到看似完整的页面。
避免使用CSS表达式: 我从来没有使用过CSS 表达式 (被称之为动态特性), 这仅是IE专有的一个增加编程概念(如控制/有条件的结构)的CSS特性,截止到IE8,三叉戟布局引擎(在IE中使用的)不再提供支持。反正使用他们没有一个好想法。在某种程度上,我会基于不同的条件使用PHP脚本加载不同的CSS样式规则,例如一个随机数,一天的时间,或者浏览器。
外部调用JS与CSS: 将JS和CSS文件放在外部文件中,浏览器缓存他们要比每次调用拥有更快的页面加载速度。
减少DNS查找: 只要用户在浏览器的地址栏中键入域名,浏览器总会执行DNS查找IP地址,网站拥越多的入口位置,必要的DNS查找也会越多。尽可能的保持较低的水平,平均60-100毫秒进行一次DNS查询。
缩小JS: 不同于一般的gzip压缩,缩小js文档是去除不必要的空格, tabs, 和其他跟中跟杨的选择字符,减少文件的总尺寸,较小的页面可以获得更快的加载速度,你可以使用 JSMIN来缩小JavaScript.
避免重定向:无论是服务器端头重定向,js重定向,或者HTML元素重定向。你的网站都会加载空白的页面的头,然后再加载新的一页,用户为了获得需要的页面花费越来越多的时间,所以要不惜一切代价避免这种情况。
去除重复的脚本: 浏览器加载相同的脚本会增加页面的加载时间,这是非常简单的数学问题,更多的文件等于更多的加载时间。仔细检查你的网站,确保你没有调用两次或三次jQuery或者其他的脚本。
2. 使用CSS精灵减少HTTP请求
CSS Sprites 可能是自从Tesla发明了电流以后最cool的事情。呃,我的意思是爱迪生。
嗯,不大,但是非常紧凑。
CSS sprites 可以通过合并你的css背景图片,减少页面向服务的HTTP请求,轻松的降低页面的加载时间。
3. 先加载CSS最后加载JavaScript
某些站点,你根本无法避开所有的扰乱了你的功能的HTTP请求。
在这方面,以下几个建议:
- 在body上的
<head>标签里
加载CSS - 在
</body>标签
闭合前加载JavaScript .
会发生什事情呢?网页在用户的机器上加载显示,因此他们的眼睛就开始扫描所提供的内同,这个时候JavaScript正好迎头赶上在后台进行加载。 i
提示:如果您不想移动JavaScript标记,你认为它会搞糟网站的方式工作,我建议使用 defer
属性。用法如下:
<script defer='defer'>
4. 使用子域名并发下载
并行下载,当你增加文件下载。如果你有打开网页在页脚的状态栏,你会发现加载其他网站的时候,会同时对static.domain.com和c1.domain.com进行请求.
这是一个非常棒的优化负载性能的方法。虽然只是简单的食用子域名,内容在同一个服务器上,但是浏览器是当作独立的服务器进行对待。
进行这样的设定:
- 在服务器上创建3个子域名
- 把图片放在在每个子域名的一个文件夹内
- 在新建的子域名中替换网站图片的位置路径
现在使用JavaScript文件,不会超过两个并发。
5. Adding an Expires Header
一些网站非常丰富,即使使用上述的技术后,性能似乎还可以增加更多。
一个用户访问你的网站,产生一些必要的页面,图片,脚本等HTT请求。
当你使用了Expires Header,你可以在用户的本地机器对这些元素进行缓存,不仅提高了他们的访问速度,也节省了你的带宽。 Expires header可以在所有的图片,脚本与css上使用。
只需要在你的网站根目录.htaccess文件中加入一行代码就可以轻松做到。(假如你没有,可以用文本编辑器创建一个,存为.htaccess,然后上传到根目录中。)
下面的.htaccess.为ico, .pfd, .flv (Flash类型文件), .jpg, .png等设置了2010到期的遥远的期限。
<FilesMatch "/.(ico|pdf|flv|jpg|jpeg|png|gif|js|CSS|swf)$"> Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"</FilesMatch>
请注意:如果设定过于遥远的expires header,你更新文件需要重新命名(version it) 否则使用缓存的用户将无法看到更新。
例如,如果你拥有一个avaScript文件需要更新, 使用版本号码然后更新所有的旧版本文件 (即. javascriptfile-1.0.js, javascriptfile-1.1.js)
原帖地址:http://www.20ju.com/content/V93677.htm
五招加速网页响应时间相关推荐
- 网页加速系列(五)、 网页加速之进阶上篇
本文原文地址:http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dndude/html/dude1201.asp(英文) ...
- android机开应用速度慢,Android机跑好慢 学会这秘密五招手机瞬间加速!
原标题:Android机跑好慢 学会这秘密五招手机瞬间加速! Android手机用了一阵子之后,就开始变得超慢让人抓狂?当按下Home键或是打开一个App,都要等好久才能正常运作?或是打了一个字,要等 ...
- [转载]极速狂飚 Windows 2003系统25招加速大法
极速狂飚 Windows 2003系统25招加速大法 现在微软最新的正式版操作系统是Win Server 2003.尽管它是对应服务器的,仍然有不少朋友蠢蠢欲动,升之而后快.可是,安装之后你就会发现麻 ...
- 用SEO五招轻松搞定竞争对手
正如所有努力获得高搜索排名的人所证明的那样,搜索引擎优化(SEO)是个长期压制竞争对手的好方法.要赢得竞争胜利,你需要持续改进网站,并且监控竞争对手的SEO动向. 如果你已目睹竞争对手篡夺了你的高排名 ...
- 神武服务器物品开放,神武服务器等级开放_教大家十五招提升服务器安全等级_...
安全十五招,具体介绍请看下文. 1.经常更改系统管理员密码.---->且密码最好是大小写都有 2.定期更新系统补丁.---->开启自动更新,并设定到晚上重启. 3.检查系统是否多出超级管理 ...
- 5图片展示_做跨境电商想拍出爆款产品图片,我只用这五招
大家好! 有人认为"做电商,就是卖图片",图片做的好,才是王道! 当消费者点开产品详情页,能够促成转化的,80%来自于产品图.图片是买家对你的的第一印象,这关系到买家是否有意向点击 ...
- C++类功能扩展预留五招
第一招虚函数 通过派生类来进行功能扩展是基本的面向对象的方式,这种方式大如下: class base { public: virtual ~base(){} virtual void fun() { ...
- 电脑时间校对器_笔记本电脑如何保养?华为教你五招轻松延长使用时间
集微网7月11日消息(文/数码控),近日华为花粉俱乐部官方微信公众号发表长文教用户如何保养笔记本电脑,具体有以下五招:
- MSP借助五招让中小企业签约云计算服务
本文讲的是MSP借助五招让中小企业签约云计算服务,如今中小企业在云计算服务领域调查比较适合自己的选择;在许多情况下,他们求助于托管服务提供商(MSP),帮助自己弄清楚云计算服务领域有哪些解决方案.这正 ...
最新文章
- android:background=@color/white [create file color.xml at res/values/]
- luogu1024 一元三次方程求解
- Android gradlew 多渠道打包
- Bootstrap3轮番插件的选项
- 【英语学习】【WOTD】teem 释义/词源/示例
- Unity Animation 的使用
- Java 窗口设置图标及背景图片
- vcredist_x86.exe 静默安装方法
- 2021-09-06 工作记录--YDUI-让弹窗打开后,弹窗下面的页面不可以上下滑动
- SMTP,POP3协议邮件Wireshark抓包实验及内容还原
- 关于王小云破解MD5
- [转] 脉宽调制实现LED显示屏灰度的方法
- IPone 接口压力测试
- win10自带计算机恢复,预装Win10的创建恢复介质与恢复的步骤
- 美团智能配送系统的运筹优化实战-笔记
- [Python]等额本息房贷计算器
- 羽毛球社团php,羽毛球社团的活动总结范文
- 【供应链案例】屈臣氏是如何优化供应链系统的
- Log4j2的MDC详解
- GO+Selenium批量关注各大网站实战 2 (今日头条,批量关注)
热门文章
- 使用 Python 画目录树形图
- ECMWF ERA数据下载——Python+官网API
- SwipeLayout 仿qq会话列表简单侧滑【删除,修改】
- keras 使用 self-attention
- 如何在MSN 7.0中显示Winamp或Foorbar中正在播放的曲目名称
- 计算机绘画小房子教案,大班美术活动教案:小房子教案(附教学反思)
- 常见模板开启HTTPS后网站访问排版错乱
- 微信小程序获取云服务器数据,微信小程序云开发服务端数据库API 获取集合数据...
- Android 限制 EditText 只能输入英文加汉字
- 获取cookie的方法