用YSlow分析和优化页面的方法第1/2页

仔细研究了下YSlow跌评分规则。

主要有12条:

1. Make fewer HTTP requests 尽可能少的http请求。。我们有141个请求(其中15个JS请求,3个CSS请求,47个CSS background images请求),多的可怕。思考了下,为什么把这个三种请求过多列为对页面加载的重要不利因素呢,而过多的IMG请求并没有列为不利因素呢?

发现原来这些请求都是可以避免的。

15个JS和3个CSS完全可以通过特殊的办法进行合并(这个技术部已经帮我们解决了,实在是太感谢了,嘿嘿。),这样合并以后,一般情况下页面上只会出现一个JS和一个CSS(对JS的封装得有一定的要求)。

但是47个CSS background images请求改怎么解决呢?为什么页面上的纯IMG请求时合理的,而CSS background images请求过多就是不利因素了呢。这个我想了很久,总算明白,原来是这样的:

一般页面上的ICON,栏目背景啊,图片按钮啊,我们都会用图片CSS背景来实现,而一般这个图片CSS背景用到的图片都是比较小的,所以完全可以把这些图片合并成一个相对比较大的图片,这样页面上只会出现一个CSS background images请求,最多也就2-3个。后来仔细看了下雅虎美国的页面,他们的确也是这样做的,虽然这样做需要花一定的时间来有规则的合并这些ICON,栏目背景,图片按钮,以方便CSS调用,但是这样做绝对是合算的,而且是有必要的,YSlow也是极力推荐的。

2.Use a CDN 这项我们的评分是F级,最低。说实在的,我刚开始什么是CDN都不知道。后来查了GOODLE才知道。CDN的全称是Content Delivery Network,即内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的网络”边缘”,使用户可以就近取得所需的内容,解决Internet网络拥挤的状况,提高用户访问网站的响应速度。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等原因所造成的用户访问网站响应速度慢的问题。

看来上述的解释后,基本上明白了CDN是怎么回事,后来咨询了下中文站点SA,得知我们网站目前的确还没有做CDN的优化,但是据说我们有更加先进的技术来解决类似的问题(具体什么技术那就保密了),但是毕竟CDN也是个相当不错的技术,所以在我们先进技术的基础上在做CDN优化,肯定比现在更好,嘿嘿。据说SA明年会做几个点的CND。

3. Add an Expires header 设置过期的HTTP Header.设置Expires Header可以将脚本, 样式表, 图片, Flash等缓存在浏览器的Cache中.

其实我们网站也做了这个优化,至少图片在这个上做过优化,但是没有做完全。我们的CSS和JS都还没有做过优化,倒是外部引入的一个广告JS做了,呵呵。其实设置过期的HTTP Header 更应该做在脚本, 样式表, Flash上.不过据说这个SA也是没有做的,但是有一定的风险,因为JS和CSS是有一定的逻辑,如果服务器端和客户端都存在缓存的话,万一出了什么问题,对我们以后查找问题的所在和增加难度,不过我想两者中是可以权衡和并存的。

4. Gzip components 对我们的页面内容进行Gzip格式的压缩,Gzip格式是一种很普遍的压缩技术,几乎所有的浏览器都有解压Gzip格式的能力,而且它可以压缩的比例非常大,一般压缩率为85%,就是说服务器端100K的页面可以压缩到25K左右的Gzip格式的数据发给客户端,客户端收到Gzip格式的数据后自动解压缩后显示页面。

这点我们网站基本上是100%做到了,但是我们这项的评分并没有达到想象中的A级,原因是出在我们的外部链接,比如我们首页,有外部的广告投放JS,这个JS说拥有的网站是没有做过GZIP优化,连累了我们网站,所以我们也只有B,或者C级。

5. Put CSS at the top 把CSS外部链接放到页面的顶部。

其实这个原则我们一般都遵守的,如果把CSS外部链接作为逻辑的一部分出现在页面头部以下,我个人觉得这个本身就是个错误。还好,我们的页面基本上都做到了,可是有些页面比如LIST页面,还是出现了和逻辑挂钩的CSS链接,原因是为了解决一些本来就不合理的产品逻辑。所以,我们WEB前端工程师有义务杜绝这些不合理的产品逻辑破坏我们的页面结果及页面加载速度,不能为了实现而实现。

当前1/2页 12下一页阅读全文

(0)

相关推荐

  • 用YSlow分析和优化页面的方法第1/2页

    仔细研究了下YSlow跌评分规则. 主要有12条: 1. Make fewer HTTP requests 尽可能少的http请求..我们有141个请求(其中15个JS请求,3个CSS请求,47个CSS background images请求),多的可怕.思考了下,为什么把这个三种请求过多列为对页面加载的重要不利因素呢,而过多的IMG请求并没有列为不利因素呢? 发现原来这些请求都是可以避免的. 15个JS和3个CSS完全可以通过特殊的办法进行合并(这个技术部已经帮我们解决了,实在是太感谢了,嘿嘿

  • mysql表优化、分析、检查和修复的方法详解

    本文实例讲述了mysql表优化.分析.检查和修复的方法.分享给大家供大家参考,具体如下: 这里介绍对数据库的管理常规就是进行预防性的维护,以及修复那些出现问题的内容. 进行检查和修复通常具有四个主要的任务: 1. 对表进行优化 2. 对表进行分析(分析并存储MyISAM和BDB表中键的分布) 3. 对表进行检查(检查表的错误,并且为MyISAM更新键的统计内容) 4. 对表进行修复(修复被破坏的MyISAM表) 一.对表进行优化 优化表有很多方式实现: OPTIMIZE TABLE语句.mysq

  • JS基于Location实现访问Url、重定向及刷新页面的方法分析

    本文实例讲述了JS基于Location实现访问Url.重定向及刷新页面的方法.分享给大家供大家参考,具体如下: js通过Location实现访问Url,重定向,刷新页 web中经常会使用到刷新页面,访问url.重定向请求的功能. javascript提供了许多方法访问,修改当前用户在浏览器中访问的url.所有的这些技术都是基于location对象的.它是作为window对象的属性.你可以生成一个包含当前url的新location对象: var currentURL=window.location

  • JS实现返回上一页并刷新页面的方法分析

    本文实例讲述了JS实现返回上一页并刷新页面的方法.分享给大家供大家参考,具体如下: 正常情况下我们通过 history.back() 或者 history.go(-1) 返回上一级页面的时候,是不会刷新页面的.这种不刷新页面包含两种情况: 在 android 或者 pc 浏览器中看到的页面有刷新的效果,其实不是这样的,这个时候的所有的资源都是从缓存中加载来的.我们通过浏览器调试工具可以看到 from disk cache 或者 from memory cache. 在 ios 中甚至于返回到了上

  • PHP使用ob_start生成html页面的方法

    本文实例讲述了PHP使用ob_start生成html页面的方法.分享给大家供大家参考.具体方法分析如下: ob_start([string output_callback])- 打开输出缓冲区 所有的输出信息不在直接发送到浏览器,而是保存在输出缓冲区里面,可选得回调函数用于处理输出结果信息. ob_end_flush - 结束(发送)输出缓冲区的内容,关闭输出缓冲区 使用output control 函数可以让自由控制脚本中数据的输出,这在我们想在header之前输出时很有用. 复制代码 代码如

  • php页面缓存方法小结

    本文实例总结了php页面缓存方法.分享给大家供大家参考.具体分析如下: 在php页面缓存主要用到的是ob系列函数,如ob_start(),ob_end_flush(),ob_get_contents(),但是更高级的缓存是不使用这些函数的,本文最后会举一个实例加以说明. 先来看看缓存常用的ob系列函数: ob_start():页面缓存开始的标志,此函数一下的内容直至ob_end_flush()或者ob_end_clean()都保存在页面缓存中: ob_get_contents():用来获取页面缓

  • SQL查询语句优化的实用方法总结

    查询语句的优化是SQL效率优化的一个方式,可以通过优化sql语句来尽量使用已有的索引,避免全表扫描,从而提高查询效率.最近在对项目中的一些sql进行优化,总结整理了一些方法. 1.在表中建立索引,优先考虑where.group by使用到的字段. 2.尽量避免使用select *,返回无用的字段会降低查询效率.如下: SELECT * FROM t 优化方式:使用具体的字段代替*,只返回使用到的字段. 3.尽量避免使用in 和not in,会导致数据库引擎放弃索引进行全表扫描.如下: SELEC

  • C++快速排序的分析与优化详解

    相信学过数据结构与算法的朋友对于快速排序应该并不陌生,本文就以实例讲述了C++快速排序的分析与优化,对于C++算法的设计有很好的借鉴价值.具体分析如下: 一.快速排序的介绍 快速排序是一种排序算法,对包含n个数的输入数组,最坏的情况运行时间为Θ(n2)[Θ 读作theta].虽然这个最坏情况的运行时间比较差,但快速排序通常是用于排序的最佳的实用选择.这是因为其平均情况下的性能相当好:期望的运行时间为 Θ(nlgn),且Θ(nlgn)记号中隐含的常数因子很小.另外,它还能够进行就地排序,在虚拟内存

  • Python使用scrapy采集数据过程中放回下载过大页面的方法

    本文实例讲述了Python使用scrapy采集数据过程中放回下载过大页面的方法.分享给大家供大家参考.具体分析如下: 添加以下代码到settings.py,myproject为你的项目名称 复制代码 代码如下: DOWNLOADER_HTTPCLIENTFACTORY = 'myproject.downloader.LimitSizeHTTPClientFactory' 自定义限制下载过大页面的模块 复制代码 代码如下: MAX_RESPONSE_SIZE = 1048576 # 1Mb fro

  • Android非XML形式动态生成、调用页面的方法

    本文实例讲述了Android非XML形式动态生成.调用页面的方法.分享给大家供大家参考.具体分析如下: 这个问题是这样的:我们不使用XML构建页面,而是使用程序构建新的页面,并在页面中添加各种控件. 一.构建新页面: ① 在src目录中添加一个class,命名为SignPage ② 在AndroidMainfest.xml中添加一个Activity: <activity android:name="com.example.stest.SignPage"/> 注意,这句添加后

随机推荐