zoukankan      html  css  js  c++  java
  • 用YSLOW分析页面速度

          YSlow是yahoo美国开发的一个页面评分插件,非常的棒,从中我们可以看出我们页面上的很多不足,并且可以知道我们的页面该怎么改进和优化。

          仔细研究了下YSlow的评分规则,可以分为13条:

    1. Make fewer HTTP requests 尽可能少的http请求 ,即我们所说的的减少页面连接数,试想一个页面有141个请求(其中15个JS请求,3个CSS请求,47个CSS background images请求),多的可怕。其实这些请求都是可以避免的。

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

    3、Add an Expires header 设置过期的HTTP Header.设置Expires Header可以将脚本, 样式表, 图片, Flash等缓存在浏览器的Cache中.设置过期的HTTP Header 更应该做在脚本, 样式表, Flash上。但是有一定的风险,因为JS和CSS是有一定的逻辑,如果服务器端和客户端都存在缓存的话,万一出了什么问题,对我们以后查找问题的所在和增加难度,不过两者中是可以权衡和并存的。

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

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

    6、Put JS at the bottom 把Javascript脚本尽量放到页面底部加载。

    一开始为以为Javascript脚本尽量放到页面底部加载,是指所有的JS脚本都要放到底部,后来才发现,并不完全是这样,这里所指的脚本是指那些在加载过程中要执行的脚本,所以一般的处理办法还是页面头部引入JS链接,页面底部执行JS脚本程序。为什么要这么做呢?其实很简单,为了实现最大的下载并行,页面加载初期做的事,最好只有下载,HTML的下载,CSS的下载,JS的下载,等下载完成后再去实现页面渲染,JS脚本运行。

    7、Avoid CSS expressions 避免CSS表达式

    其实在CSS中运行表达式和页面加载中运行大量的JS脚本差不多,或许还更慢,而且还不兼容,虽然可以使我们在页面逻辑简单不少,但是我们完全可以抛弃之。

    8、Minify JS 对Javascript 代码进行压缩。

    推荐压缩工具:yuicompressor,雅虎美国开发的JAVA压缩包yuicompressor.jar。压缩的相当完美,不仅把代码间的空格换行给去除掉了,而且对变量名,北部方法名都进行的简化,无意中实现了混淆脚本的作用。

    压缩弊端:JS压缩后,给我们自己的维护量增加了一倍,因为我们需要维护2套JS脚本,一套是压缩前的(调试用的),一套是压缩后(发布到网上的),而且要保证2套代码一致。

    所以最完美的做法是在发布的时候实现JS脚本合并,并对其用yuicompressor进行压缩,然后发布到晚上,把关键点移到发布的时候,这样我们只需要关心一套JS脚本(发布前的版本)。

    9、Avoid redirects 避免重定向(跳转)

    比如:我们经常遇到的一种做法,注册成功后,旺旺会有一个页面提示“你已经注册成功,3秒后将自动跳转到XX页面”。我就觉得很奇怪,你为什么不直接跳转到该去的页面?还有一种,我们大家非常熟悉,一般我们页面的链接都写成:http://china.alibaba.com或者http://china.alibaba.com/,有人会问,有区别吗?我明确的告诉大家,有!服务器如果接收到的URL是http://china.alibaba.com,它会自动重新定向到http://china.alibaba.com/,虽然最后都打开了阿里巴巴中文站的首页,但是前者比后者多走了一步,重定向,显然多多少少浪费了一定的时间。所以以后我们加URL链接的时候,别忘了把最后的“/”给加上去。

    12、Remove duplicate scripts  去除重复的脚本

    这个其实没有什么好说的,大家都应该毫无条件的去遵守。

    13、Configure ETags  这个是服务器端配置的问题。

  • 相关阅读:
    HTML_<select>
    HTML_<a>
    MySQL_知识点
    MySQL_常用SQL语句
    GIT
    MyBatis_传入参数的问题
    js函数防抖与节流总结
    node 常用方法 生成密钥 token验证 验证码生成 (持续更新)
    node 登陆拦截中间件(egg)
    js 给页面容器增加水印
  • 原文地址:https://www.cnblogs.com/TSPWater/p/1318070.html
Copyright © 2011-2022 走看看