zoukankan      html  css  js  c++  java
  • 如何使用YSLOW提高网站性能

    什么是yslow:

      YSlow是Yahoo发布的一款基于FireFox的插件。

    如何安装yslow:

      安装YSlow必须首先先安装 Firebug,然后下载YSlow,再对其安装。

    yslow有什么用:

      YSlow可以对网站的页面进行分析,并告诉你为了提高网站性能,如何基于某些规则而进行优化。

    使用yslow需要注意的地方:必须连接网络,才能对页面进行分析。

    使用yslow需要注意的地方:它也发布了chrome版本,在chrome中,功能比基于firebug的要少。

     

    如何使用Yslow:

    当我们打开一个网站,如:http://www.xuex123.com/ ,启动firebug,在firebug控制台中,进入yslow分析界面,点击run text,yslow会开始分析页面。

    在这一栏中,有九个选项,与一个评分。

    home: Yslow起始界面

    grade: Yslow分析出来的数据会在这里显示。

    components: Yslow分析多少HTTP请求,以及下载的文件数量与大小。

    statistics: Yslow分析的数据格式图。

    tools: Yslow而提供的一些工具,比如:JSlint、smush.it、YUI CSS Comperssor等。

    rulesets:Yslow提供的分析基准,我这里是以小网站或博客为基准来分析。

    edit:Yslow提供的分析基准的设置按钮。

    printable view:Yslow分析数据表格。

    Grade:

    在Grade中,会分析出如上数据,大体分为五类,CONTENT、CSS、IMAGES、JAVASCRIPT、SERVER。它的基准是以美国的成绩评分来划分的,比如A、B、C、D等。Grade中的数据分析是这个工具的重中之重,现在我才想起来,英语,可恶的英语啊,学习好英语,对于编程,实在是太重要了。下面,我以上图来介绍它。

    make fewer http requests:(检测如何减少http请求)。

    {此项告诉我们,有6个JAVASCRIPT文件,可以合并成一个文件。有12个背景图片,可以使用CSS SPRITES技术}

    注:CSS SPRITES技术,是指通过背景定位这个属性,来显示出图片,12个背景图片可以合并成一张图。

    avoid empty src or http:(检测是否有空的src或者http)。

    compress componentes with gzip:(检测是否开启gzip服务端的压缩)。

     

     {此项告诉我们,有九处可以开启gzip压缩}

    put css to top:(检测样式是否放在头部)。

    put javascript to bottom:(检测JS脚本文件是否放在底部)。

    avoid css expressions:(避免在样式中使用expressions)。

    reduce dns lookups:(减少DNS的查找)。

    minify javascript and css:(缩小写在HTML中的JavaScript与CSS)

    略......

    Components:

    在components中,分析网页下载的数据会以表格的形式展现出来,包括以上几类。点击折叠的+doc会展现出具体的数据分析,再点击HEADERS按钮时,会显示的更加详细,如下图:

    Statistics:

    此项是对页面分析数据的直观几何图,包括HTTP请求的次数,下载文件的类型以及大小。

    Tools:

    顾名思义,工具的意思,Yslow提供了如下,几个工具:

     

    JSLint - JavaScript验证工具

     

    all JS - 页面中所有的JavaScript脚本

     

    all JS Beautified - 页面中所有的JavaScript脚本完整版。

     

    all JS Minified - 页面中所有的JavaScript脚本压缩版。

     

    all CSS - 页面中所有的CSS样式文件

     

    YUI CSS Compressor - 页面中所有的CSS样式文件压缩版

     

    all Smush.it - 图片压缩,不失真。

     

    Printable View - 所有分析数据的HTML表格展示。

     

    总结:Yslow的使用主要是用于分析网站性能,比如该压缩的文件要压缩,该使用CSS SPRITES技术的地方要用CSS SPRITES技术。

    推荐书籍:关于JavaScript编程性能的书籍,可以参阅《高性能JavaScript》,关于网站性能的书籍可以参阅《高性能网站建设指南》。

  • 相关阅读:
    pip安装
    nfs
    源码方式安装软件
    自启动
    multipath
    linux永久添加和删除路由
    iscsi
    linux识别workstation磁盘的uuid
    centos镜像各种cd,dvd版本区别
    转:C# 中 MSCHART 饼状图显示百分比
  • 原文地址:https://www.cnblogs.com/cw_volcano/p/2713675.html
Copyright © 2011-2022 走看看